Improve alignment, padding/margin issues on UI

1. It vertically centers top script menu (including selectors for view,
   OS and recommendation levels). Before, it did not utilize the empty
   space on smaller screens when of the menu items overflowed to a new
   line. This commit fixes it, also adds margin on top selectors on
   small screens.
2. 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.
3. It ensures symmetrical margin on both sides of the handle in slider
   during horizontal view. Before, the left margin did not exist and
   right margin was too wide. This commit balances right and left margin
   of the arrow.
4. It changes the way margining is done for the card list. It removes
   internal margin from cards, because when they have them they also add
   that to the outer card list. This commit solves it in a way that
   unifies setting gap between cards and setting gap between cards.
   The styles are controlled on card list instead. This way same margins
   and paddings is also applied to non-card view (i.e. scripts tree).
   Before margining was done separately and those views looked
   diferently.
5. It improves styling of cards. It uses variables instead of hardcoded
   values and also refactors and renames variables for simpler
   understanding.

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>

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>

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;
         }

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>

src/presentation/components/Scripts/View/Cards/CardList.vue

@@ -106,10 +106,18 @@ 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;
+  gap: $card-gap;
+  /* 
+    Padding is used to allow scale animation (growing size) for cards on hover.
+    It ensures that there's room to grow, so the animation is shown without overflowing with scrollbars.
+  */
+  padding: 10px;
 }
 
 .error {

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -97,25 +97,25 @@ 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-inner-padding     : 30px;
+$arrow-size             : 15px;
+$expanded-margin-top    : 30px;
+$card-horizontal-gap    : $card-gap;
 
 .card {
-  margin: 15px; 
   transition: all 0.2s ease-in-out;
 
   &__inner {  
-    padding: $card-padding $card-padding 0 $card-padding;
+    padding: /*top:*/ $card-inner-padding /*right:*/ $card-inner-padding /*bottom:*/ 0 /*left:*/ $card-inner-padding;
     position: relative;
     cursor: pointer;
     background-color: $gray;
     color: $light-gray;
     font-size: 1.5em;
     height: 100%;
+    width: 100%;
     text-transform: uppercase;
     text-align: center;
     transition: all 0.2s ease-in-out;
@@ -133,8 +133,8 @@ $expanded-margin-top: 30px;
     }
 
     &__state-icons {
-      height: $card-padding;
-      margin-right: -$card-padding;
+      height: $card-inner-padding;
+      margin-right: -$card-inner-padding;
       padding-right: 10px;
       display: flex;
       justify-content: flex-end;
@@ -155,7 +155,7 @@ $expanded-margin-top: 30px;
     align-items: center;
 
     &__content {
-      width: 100%;
+      flex: 1;flex: 1;
       display: flex;
       justify-content: center;
       word-break: break-word;
@@ -238,12 +238,21 @@ $expanded-margin-top: 30px;
 }
 @mixin adaptive-card($cards-in-row) {
   &.card {
-    width: calc((100% / #{$cards-in-row}) - #{$card-line-break-width});
-    @for $nth-card from 2 through $cards-in-row {
+    $total-times-gap-is-used-in-row: $cards-in-row - 1;
+    $total-gap-width-in-row: $total-times-gap-is-used-in-row * $card-horizontal-gap;
+    $available-row-width-for-cards: calc(100% - #{$total-gap-width-in-row});
+    $available-width-per-card: calc(#{$available-row-width-for-cards} / #{$cards-in-row});
+    width:$available-width-per-card;
+    .card__expander {
+      $all-cards-width: 100% * $cards-in-row;
+      $additional-padding-width: $card-horizontal-gap * ($cards-in-row - 1);
+      width: calc(#{$all-cards-width} + #{$additional-padding-width});
+    }
+    @for $nth-card from 2 through $cards-in-row { // From second card to rest
       &:nth-of-type(#{$cards-in-row}n+#{$nth-card}) {
         .card__expander {
           $card-left: -100% * ($nth-card - 1);
-          $additional-space: $card-line-break-width * ($nth-card - 1);
+          $additional-space: $card-horizontal-gap * ($nth-card - 1);
           margin-left: calc(#{$card-left} - #{$additional-space});
         }
       }
@@ -254,11 +263,6 @@ $expanded-margin-top: 30px;
       clear: left;
     }
   }
-  .card__expander {
-    $all-cards-width: 100% * $cards-in-row;
-    $card-padding: $card-line-break-width * ($cards-in-row - 1);
-    width: calc(#{$all-cards-width} + #{$card-padding});
-  }
 }
 
 .big-screen     {   @include adaptive-card(3);  }

src/presentation/styles/components/card.scss

@@ -0,0 +1 @@
+$card-gap: 15px;