Merge pull request #381 from lilmithi/overlap

🐛 🧱 The block names in the blocks library are overlapping #382
italanta · Mar 27, 2023 · e3fe179 · e3fe179
2 parents f465fb5 + c2d9069
commit e3fe179
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/.../convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.html b/.../convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.html
@@ -10,8 +10,8 @@ <h4>{{'PAGE-CONTENT.COMPONENTS.TITLE'| transloco }}</h4>
 
 	<div fxLayout="row wrap" fxLayoutGap="10px" fxLayoutAlign="space-between start" *ngIf="blockTemplate$ | async as blocks " fxFlex>
 		<div *ngFor="let block of blocks" (click)=" addBlock(block.type)" fxLayout="column" fxLayoutAlign="start center"
-			fxFlex="25" style="height: 100px">
-			<div fxLayout="column" fxLayoutAlign="center center" class="blocks-main" fxFlex>
+			fxFlex="25" class="block-wrapper">
+			<div fxLayout="column" fxLayoutAlign="center center" class="blocks-main">
 				<i class="{{ block.blockIcon }}" id="icons"></i>
 			</div>
 

diff --git a/.../convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.scss b/.../convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.scss
@@ -1,6 +1,6 @@
 .nav {
 	max-width: 100%;
-	max-height: 100vh;
+	max-height: calc(100vh - 64px);
 	padding: 10px;
 	margin-bottom: 20%;
 	overflow-y: hidden;
@@ -23,10 +23,13 @@ h4 {
 .search, .search input {
 	max-width: 100%;
 }
+.block-wrapper{
+	height: max-content;
+}
 
 .blocks-main {
 	min-width: 100%;
-	height: 80px;
+	height: 60px;
 
 	border-radius: 5px;
 	background-color: white;
@@ -55,11 +58,13 @@ h4 {
 .block-messages {
 	font-size: 0.8rem;
 	text-align: center;
-	white-space: nowrap;
+	white-space:normal;
+	word-break:normal;
+	height: max-content;
 	font-weight: 500;
 	color: black;
 }
 
 ::ng-deep .mat-mdc-form-field {
 	max-width: 100%;
-}
+}
diff --git a/...es/convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.ts b/...es/convs-mgr/stories/editor/src/lib/components/blocks-library/blocks-library.component.ts
@@ -54,11 +54,11 @@ export class BlocksLibraryComponent implements OnInit, OnDestroy {
     { id: 'jump-story-block', type: StoryBlockTypes.JumpBlock, message: 'Jump', blockIcon: this.getBlockIcon(StoryBlockTypes.JumpBlock) } as JumpBlock,
     // { id: 'io-multiple-input-block', type: StoryBlockTypes.MultipleInput, message: 'MultipleInput', blockIcon:this.getBlockIcon(StoryBlockTypes.MultipleInput) } as MultipleInputMessageBlock,
     { id: 'fail-block', type: StoryBlockTypes.FailBlock, message: 'Fail', blockIcon:this.getBlockIcon(StoryBlockTypes.FailBlock) } as FailBlock,
-    { id: 'io-image-input-block' , type: StoryBlockTypes.ImageInput, message: 'ImageInput', blockIcon:this.getBlockIcon(StoryBlockTypes.ImageInput) } as ImageInputBlock,
+    { id: 'io-image-input-block' , type: StoryBlockTypes.ImageInput, message: 'Image Input', blockIcon:this.getBlockIcon(StoryBlockTypes.ImageInput) } as ImageInputBlock,
     { id: 'io-audio-input-block' , type: StoryBlockTypes.AudioInput, message: 'Audio Input', blockIcon:this.getBlockIcon(StoryBlockTypes.AudioInput) } as AudioInputBlock,
     // { id: 'input-reply-block', type: StoryBlockTypes.Reply, message: 'Reply', blockIcon: this.getBlockIcon(StoryBlockTypes.Reply) } as ReplyMessageBlock
-    { id: 'io-location-input-block' , type: StoryBlockTypes.LocationInputBlock, message: 'LocationInput', blockIcon:this.getBlockIcon(StoryBlockTypes.LocationInputBlock) } as LocationInputBlock,
-    { id: 'io-video-input-block', type: StoryBlockTypes.VideoInput, message: 'VideoInput', blockIcon:this.getBlockIcon(StoryBlockTypes.VideoInput) } as VideoInputBlock,
+    { id: 'io-location-input-block' , type: StoryBlockTypes.LocationInputBlock, message: 'Location Input', blockIcon:this.getBlockIcon(StoryBlockTypes.LocationInputBlock) } as LocationInputBlock,
+    { id: 'io-video-input-block', type: StoryBlockTypes.VideoInput, message: 'Video Input', blockIcon:this.getBlockIcon(StoryBlockTypes.VideoInput) } as VideoInputBlock,
     { id: 'webhook-block' , type: StoryBlockTypes.WebhookBlock, message: 'Webhook', blockIcon:this.getBlockIcon(StoryBlockTypes.WebhookBlock) } as WebhookBlock,
     { id: 'open-ended-question-block', type:StoryBlockTypes.OpenEndedQuestion, message: 'Open Ended Question', blockIcon:this.getBlockIcon(StoryBlockTypes.OpenEndedQuestion) } as OpenEndedQuestionBlock,
     { id: 'multi-content-input' , type:StoryBlockTypes.MultiContentInput, message:'Multi Content Input', blockIcon:this.getBlockIcon(StoryBlockTypes.MultiContentInput) } as MultiContentInputBlock,