From 1cc1d8ed35ee45bf313c90fcba531322f4e4fb06 Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Tue, 14 Sep 2021 20:12:31 +0200
Subject: [PATCH] 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.
---
 .../Scripts/Menu/TheScriptsMenu.vue           | 33 ++++++++-------
 .../components/Scripts/Slider/Handle.vue      |  5 ++-
 .../Scripts/Slider/HorizontalResizeSlider.vue | 40 +++++++++++++------
 .../components/Scripts/TheScriptArea.vue      | 15 +++----
 .../Scripts/View/Cards/CardList.vue           |  3 ++
 .../Scripts/View/Cards/CardListItem.vue       |  4 +-
 src/presentation/styles/components/card.scss  |  1 +
 7 files changed, 60 insertions(+), 41 deletions(-)
 create mode 100644 src/presentation/styles/components/card.scss

diff --git a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
index b66026ec4..25fc669e2 100644
--- 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
index 098e63c44..3236c53f3 100644
--- 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
index 29abfe961..4892ea6f4 100644
--- 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
index 889cb5a92..b5cbb6b93 100644
--- 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
index a1bf7e0cd..b0c0163e4 100644
--- 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
index e7e602135..fa31bf8d5 100644
--- 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
new file mode 100644
index 000000000..621dcd366
--- /dev/null
+++ b/src/presentation/styles/components/card.scss
@@ -0,0 +1 @@
+$card-margin: 15px;