Frontend: Move scss variables to vars file

clrfund · Nov 9, 2020 · a9cb692 · a9cb692
1 parent f1edf37
commit a9cb692
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git 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,16 +341,16 @@ $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 {
     bottom: 0;
     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
@@ -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
@@ -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
@@ -11,3 +11,6 @@ $error-color: #BD6B5E;
 
 $border: 2px solid $border-color;
 $content-space: 30px;
+
+$nav-header-height-sm: 40px;
+$profile-image-size: 50px;