From a9cb692f724535f20a2382e34e985cbb2210aec6 Mon Sep 17 00:00:00 2001
From: Kirill Goncharov <kdgoncharov@gmail.com>
Date: Mon, 9 Nov 2020 13:47:20 +0300
Subject: [PATCH] Frontend: Move scss variables to vars file

---
 vue-app/src/App.vue                | 11 ++++-------
 vue-app/src/components/Cart.vue    |  2 +-
 vue-app/src/components/Profile.vue |  6 +++---
 vue-app/src/styles/_vars.scss      |  3 +++
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
index 7c5fcece6..363150ab5 100644
--- a/vue-app/src/App.vue
+++ b/vue-app/src/App.vue
@@ -292,16 +292,13 @@ a {
   }
 }
 
-$nav-header-height-sm: 40px;
-$profile-height-sm: 50px;
-
 @media (max-width: 900px) {
   #app {
     flex-direction: column;
   }
 
   #nav-bar {
-    bottom: $profile-height-sm + $content-space * 2;
+    bottom: $profile-image-size + $content-space * 2; /* offset for profile block */
     border-right: none;
     max-width: 100%;
     position: fixed;
@@ -344,8 +341,8 @@ $profile-height-sm: 50px;
   }
 
   #content {
-    margin-bottom: $profile-height-sm + $content-space * 2;
-    margin-top: $nav-header-height-sm + $content-space * 2;
+    margin-bottom: $profile-image-size + $content-space * 2; /* offset for profile block */
+    margin-top: $nav-header-height-sm + $content-space * 2; /* offset for nav header */
   }
 
   #user-bar {
@@ -353,7 +350,7 @@ $profile-height-sm: 50px;
     max-width: none;
     overflow-y: scroll;
     position: fixed;
-    top: $nav-header-height-sm + $content-space * 2;
+    top: $nav-header-height-sm + $content-space * 2; /* offset for nav header */
     width: 100%;
     z-index: 1;
 
diff --git a/vue-app/src/components/Cart.vue b/vue-app/src/components/Cart.vue
index 46def4b08..4a86e406d 100644
--- a/vue-app/src/components/Cart.vue
+++ b/vue-app/src/components/Cart.vue
@@ -379,7 +379,7 @@ export default class Cart extends Vue {
 .cart {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - 110px);
+  min-height: calc(100vh - #{$profile-image-size + 2 * $content-space});
 }
 
 .cart-item {
diff --git a/vue-app/src/components/Profile.vue b/vue-app/src/components/Profile.vue
index c74e98891..279783ba2 100644
--- a/vue-app/src/components/Profile.vue
+++ b/vue-app/src/components/Profile.vue
@@ -143,7 +143,7 @@ export default class Profile extends Vue {
   align-items: center;
   background-color: #23212f;
   display: flex;
-  height: 50px;
+  height: $profile-image-size;
   justify-content: center;
   padding: $content-space;
 }
@@ -174,10 +174,10 @@ export default class Profile extends Vue {
     border: 4px solid $button-color;
     border-radius: 25px;
     box-sizing: border-box;
-    height: 50px;
+    height: $profile-image-size;
     margin-left: 20px;
     overflow: hidden;
-    width: 50px;
+    width: $profile-image-size;
 
     img {
       height: 100%;
diff --git a/vue-app/src/styles/_vars.scss b/vue-app/src/styles/_vars.scss
index 59dfbe3bf..9a2e9d35f 100644
--- a/vue-app/src/styles/_vars.scss
+++ b/vue-app/src/styles/_vars.scss
@@ -11,3 +11,6 @@ $error-color: #BD6B5E;
 
 $border: 2px solid $border-color;
 $content-space: 30px;
+
+$nav-header-height-sm: 40px;
+$profile-image-size: 50px;