Improve alignment, padding/margin issues on UI

It centers center script menu text vertically. The menu on top (including selector, view and OS changer) was looking bad without utilizing the empty space on smaller screens when of those menu items overflowed to a new line. It adds vertical margin between slider items on vertical view. It also refactors slider component so that the v-deep is no longer used, instead style is set through properties. It also ensures symmetrical margin on both sides of the handle in slider during horizontal view. Before left margin did not exist and right margin was too wide. This commit balances right and left margin of the arrow. It changes the way margining is done for for card list. It removes internal margin from card list. Because when cards have margins, they also add that margin to the outer card list. This commit solves in a way that unifies styling margins of the outer card list globally from same place. It styles the container of card list instead, this way same margins and padding is also applied to non-card view (e.g. scripts tree). But if card list was styled separately with internal margins as before then those different views look different. It fixes card margin variables not being used. Finally it adds margin on top selectors on small screens.
undergroundwires · Sep 14, 2021 · 1cc1d8e · 1cc1d8e
1 parent 5217b0b
commit 1cc1d8e
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 41 deletions.
diff --git a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
@@ -57,21 +57,24 @@ export default class TheScriptsMenu extends StatefulVue {
 </script>
 
 <style scoped lang="scss">
+$margin-between-lines: 7px;
 #container {
-    display: flex;
-    flex-wrap: wrap;
-    .item {
-        flex: 1;
-        white-space: nowrap;
-        display: flex;
-        justify-content: center;
-        margin: 0 5px 0 5px;
-        &:first-child {
-            justify-content: flex-start;
-        }
-        &:last-child {
-            justify-content: flex-end;
-        }
-    }
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: -$margin-between-lines;
+  .item {
+      flex: 1;
+      white-space: nowrap;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: $margin-between-lines 5px 0 5px;
+      &:first-child {
+          justify-content: flex-start;
+      }
+      &:last-child {
+          justify-content: flex-end;
+      }
+  }
 }
 </style>
diff --git a/src/presentation/components/Scripts/Slider/Handle.vue b/src/presentation/components/Scripts/Slider/Handle.vue
@@ -7,7 +7,7 @@
         <font-awesome-icon
             class="image"
             :icon="['fas', 'arrows-alt-h']" 
-        /> <!-- exchange-alt arrows-alt-h-->
+        />
         <div class="line"></div>
     </div>
 </template>
@@ -66,6 +66,7 @@ export default class Handle extends Vue {
     .image {
         color: $dark-gray;
     }
-    margin-right: 10px;
+    margin-right: 5px;
+    margin-left: 5px;
 }
 </style>
diff --git a/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue b/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
@@ -1,17 +1,22 @@
 <template>
-    <div class="slider">
-        <div class="left" ref="leftElement">
-            <slot name="left"></slot>
+    <div class="slider" v-bind:style="{
+            '--vertical-margin': this.verticalMargin,
+            '--first-min-width': this.firstMinWidth,
+            '--first-initial-width': this.firstInitialWidth,
+            '--second-min-width': this.secondMinWidth,
+        }">
+        <div class="first" ref="firstElement">
+            <slot name="first"></slot>
         </div>
         <Handle class="handle" @resized="onResize($event)" />
-        <div class="right">
-            <slot name="right"></slot>
+        <div class="second">
+            <slot name="second"></slot>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue, Prop } from 'vue-property-decorator';
 import Handle from './Handle.vue';
 
 @Component({
@@ -20,7 +25,12 @@ import Handle from './Handle.vue';
   },
 })
 export default class HorizontalResizeSlider extends Vue {
-    private get left(): HTMLElement { return this.$refs.leftElement as HTMLElement; }
+    @Prop() public verticalMargin: string;
+    @Prop() public firstMinWidth: string;
+    @Prop() public firstInitialWidth: string;
+    @Prop() public secondMinWidth: string;
+
+    private get left(): HTMLElement { return this.$refs.firstElement as HTMLElement; }
 
     public onResize(displacementX: number): void {
         const leftWidth = this.left.offsetWidth + displacementX;
@@ -35,16 +45,22 @@ export default class HorizontalResizeSlider extends Vue {
 .slider {
     display: flex;
     flex-direction: row;
-    .right {
+    .first {
+        min-width: var(--first-min-width);
+        width: var(--first-initial-width);
+    }
+    .second {
         flex: 1;
+        min-width: var(--second-min-width);
     }
-}
-@media screen and (max-width: $vertical-view-breakpoint) {
-    .slider {
+    @media screen and (max-width: $vertical-view-breakpoint) {
         flex-direction: column;
-        .left {
+        .first {
             width: auto !important;
         }
+        .second {
+            margin-top: var(--vertical-margin);
+        }
         .handle {
             display: none;
         }

diff --git a/src/presentation/components/Scripts/TheScriptArea.vue b/src/presentation/components/Scripts/TheScriptArea.vue
@@ -1,11 +1,13 @@
 <template>
 <div class="scripts">
     <TheScriptsMenu v-on:viewChanged="currentView = $event" />
-    <HorizontalResizeSlider class="row">
-        <template v-slot:left>
+    <HorizontalResizeSlider class="row"
+        verticalMargin="15px" firstInitialWidth="55%"
+        firstMinWidth="20%" secondMinWidth="20%">
+        <template v-slot:first>
             <TheScriptsView :currentView="currentView" />
         </template>
-        <template v-slot:right>
+        <template v-slot:second>
             <TheCodeArea theme="xcode" />
         </template>
     </HorizontalResizeSlider>
@@ -39,11 +41,4 @@ export default class TheScriptArea extends Vue {
         margin-top: 15px;
     }
 }
-::v-deep .left {
-    width: 55%; // initial width
-    min-width: 20%;
-}
-::v-deep .right {
-    min-width: 20%;
-}
 </style>
diff --git a/src/presentation/components/Scripts/View/Cards/CardList.vue b/src/presentation/components/Scripts/View/Cards/CardList.vue
@@ -106,10 +106,13 @@ function isClickable(element: Element) {
 
 <style scoped lang="scss">
 @import "@/presentation/styles/fonts.scss";
+@import "@/presentation/styles/components/card.scss";
+
 .cards {
   display: flex;
   flex-flow: row wrap;
   font-family: $main-font;
+  margin: -$card-margin;
 }
 
 .error {

diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -97,15 +97,15 @@ export default class CardListItem extends StatefulVue {
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
 @import "@/presentation/styles/media.scss";
+@import "@/presentation/styles/components/card.scss";
 
 $card-padding: 30px;
-$card-margin: 15px;
 $card-line-break-width: 30px;
 $arrow-size: 15px;
 $expanded-margin-top: 30px;
 
 .card {
-  margin: 15px; 
+  margin: $card-margin; 
   transition: all 0.2s ease-in-out;
 
   &__inner {  

diff --git a/src/presentation/styles/components/card.scss b/src/presentation/styles/components/card.scss
@@ -0,0 +1 @@
+$card-margin: 15px;