From 40355a0af5baed780462104c0553aedc0c97bbb9 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 4 Aug 2021 09:10:00 +0200
Subject: [PATCH] Client - re-arrange style files + fix app-name padding

---
 fittrackee_client/src/App.vue               | 78 +--------------------
 fittrackee_client/src/components/Footer.vue |  8 ++-
 fittrackee_client/src/components/NavBar.vue | 76 ++++++++++----------
 fittrackee_client/src/scss/base.scss        | 34 +++++++++
 fittrackee_client/src/scss/colors.scss      | 11 +++
 fittrackee_client/src/scss/fonts.scss       | 56 +++++++++++++++
 fittrackee_client/src/scss/vars.scss        |  6 ++
 7 files changed, 151 insertions(+), 118 deletions(-)
 create mode 100644 fittrackee_client/src/scss/base.scss
 create mode 100644 fittrackee_client/src/scss/colors.scss
 create mode 100644 fittrackee_client/src/scss/fonts.scss
 create mode 100644 fittrackee_client/src/scss/vars.scss

diff --git a/fittrackee_client/src/App.vue b/fittrackee_client/src/App.vue
index 56ee3aaf..5036dcfd 100644
--- a/fittrackee_client/src/App.vue
+++ b/fittrackee_client/src/App.vue
@@ -19,81 +19,5 @@
 </script>
 
 <style lang="scss">
-  /* pt-sans-regular - latin */
-  @font-face {
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 400;
-    src: url('assets/fonts/pt-sans-v9-latin-regular.eot'); /* IE9 Compat Modes */
-    src: local('PT Sans'), local('PTSans-Regular'),
-      url('assets/fonts/pt-sans-v9-latin-regular.eot?#iefix')
-        format('embedded-opentype'),
-      /* IE6-IE8 */ url('assets/fonts/pt-sans-v9-latin-regular.woff2')
-        format('woff2'),
-      /* Super Modern Browsers */
-        url('assets/fonts/pt-sans-v9-latin-regular.woff') format('woff'),
-      /* Modern Browsers */ url('assets/fonts/pt-sans-v9-latin-regular.ttf')
-        format('truetype'),
-      /* Safari, Android, iOS */
-        url('assets/fonts/pt-sans-v9-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
-  }
-
-  /* pt-sans-italic - latin */
-  @font-face {
-    font-family: 'PT Sans';
-    font-style: italic;
-    font-weight: 400;
-    src: url('assets/fonts/pt-sans-v9-latin-italic.eot'); /* IE9 Compat Modes */
-    src: local('PT Sans Italic'), local('PTSans-Italic'),
-      url('assets/fonts/pt-sans-v9-latin-italic.eot?#iefix')
-        format('embedded-opentype'),
-      /* IE6-IE8 */ url('assets/fonts/pt-sans-v9-latin-italic.woff2')
-        format('woff2'),
-      /* Super Modern Browsers */
-        url('assets/fonts/pt-sans-v9-latin-italic.woff') format('woff'),
-      /* Modern Browsers */ url('assets/fonts/pt-sans-v9-latin-italic.ttf')
-        format('truetype'),
-      /* Safari, Android, iOS */
-        url('assets/fonts/pt-sans-v9-latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
-  }
-
-  /* pt-sans-700 - latin */
-  @font-face {
-    font-family: 'PT Sans';
-    font-style: normal;
-    font-weight: 700;
-    src: url('assets/fonts/pt-sans-v9-latin-700.eot'); /* IE9 Compat Modes */
-    src: local('PT Sans Bold'), local('PTSans-Bold'),
-      url('assets/fonts/pt-sans-v9-latin-700.eot?#iefix')
-        format('embedded-opentype'),
-      /* IE6-IE8 */ url('assets/fonts/pt-sans-v9-latin-700.woff2')
-        format('woff2'),
-      /* Super Modern Browsers */ url('assets/fonts/pt-sans-v9-latin-700.woff')
-        format('woff'),
-      /* Modern Browsers */ url('assets/fonts/pt-sans-v9-latin-700.ttf')
-        format('truetype'),
-      /* Safari, Android, iOS */
-        url('assets/fonts/pt-sans-v9-latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
-  }
-
-  body {
-    margin: 0;
-  }
-
-  #app {
-    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    color: #2c3e50;
-
-    background: #eaeaea;
-
-    margin: 0;
-    min-height: 100vh;
-  }
-
-  a {
-    color: #40578a;
-    text-decoration: none;
-  }
+  @import '~@/scss/base';
 </style>
diff --git a/fittrackee_client/src/components/Footer.vue b/fittrackee_client/src/components/Footer.vue
index 9fb8f23a..6930836b 100644
--- a/fittrackee_client/src/components/Footer.vue
+++ b/fittrackee_client/src/components/Footer.vue
@@ -35,6 +35,8 @@
 </template>
 
 <style scoped lang="scss">
+  @import '~@/scss/base';
+
   #footer {
     display: flex;
 
@@ -42,8 +44,8 @@
     position: absolute;
     width: 100%;
 
-    background: white;
-    color: #8b8c8c;
+    background: var(--footer-background-color);
+    color: var(--footer-color);
     font-size: 0.9em;
 
     a {
@@ -64,7 +66,7 @@
       }
     }
 
-    @media screen and (max-width: 550px) {
+    @media screen and (max-width: $small-limit) {
       .footer-items {
         font-size: 0.85em;
 
diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
index ee67ba77..ee370af0 100644
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/fittrackee_client/src/components/NavBar.vue
@@ -1,32 +1,34 @@
 <template>
   <div id="nav">
-    <div class="nav-app-name">
-      <span class="nav-item app-name">FitTrackee</span>
-    </div>
-    <div class="nav-icon-open" :class="{ 'menu-open': isMenuOpen }">
-      <i class="fa fa-bars hamburger-icon" @click="openMenu()"></i>
-    </div>
-    <div class="nav-items" :class="{ 'menu-open': isMenuOpen }">
-      <div class="nav-items-close">
-        <span class="app-name">FitTrackee</span>
-        <i
-          class="fa fa-close close-icon nav-item"
-          :class="{ 'menu-closed': !isMenuOpen }"
-          @click="closeMenu()"
-        ></i>
+    <div class="container">
+      <div class="nav-app-name">
+        <span class="nav-item app-name">FitTrackee</span>
       </div>
-      <div class="nav-items-app-menu" @click="closeMenu()">
-        <router-link class="nav-item" to="/">Dashboard</router-link>
-        <span class="nav-item">Workout</span>
-        <span class="nav-item">Statistics</span>
-        <span class="nav-item">Admin</span>
-        <span class="nav-item">Add Workout</span>
+      <div class="nav-icon-open" :class="{ 'menu-open': isMenuOpen }">
+        <i class="fa fa-bars hamburger-icon" @click="openMenu()"></i>
       </div>
-      <div class="nav-items-user-menu">
-        <span class="nav-item">User</span>
-        <span class="nav-item">Logout</span>
-        <span class="nav-item">Register</span>
-        <span class="nav-item">Login</span>
+      <div class="nav-items" :class="{ 'menu-open': isMenuOpen }">
+        <div class="nav-items-close">
+          <span class="app-name">FitTrackee</span>
+          <i
+            class="fa fa-close close-icon nav-item"
+            :class="{ 'menu-closed': !isMenuOpen }"
+            @click="closeMenu()"
+          ></i>
+        </div>
+        <div class="nav-items-app-menu" @click="closeMenu()">
+          <router-link class="nav-item" to="/">Dashboard</router-link>
+          <span class="nav-item">Workout</span>
+          <span class="nav-item">Statistics</span>
+          <span class="nav-item">Admin</span>
+          <span class="nav-item">Add Workout</span>
+        </div>
+        <div class="nav-items-user-menu">
+          <span class="nav-item">User</span>
+          <span class="nav-item">Logout</span>
+          <span class="nav-item">Register</span>
+          <span class="nav-item">Login</span>
+        </div>
       </div>
     </div>
   </div>
@@ -51,21 +53,24 @@
 </script>
 
 <style scoped lang="scss">
+  @import '~@/scss/base';
+
   #nav {
-    align-items: center;
-    background: white;
+    background: var(--nav-bar-background-color);
     display: flex;
-    padding: 15px 70px;
+    padding: 15px 10px;
 
     a {
       &.router-link-exact-active {
-        color: rgba(0, 0, 0, 0.7);
+        color: var(--nav-bar-link-active);
       }
     }
 
     .app-name {
       font-size: 1.2em;
       font-weight: bold;
+      margin-right: 10px;
+      line-height: 12px;
     }
 
     .fa {
@@ -95,7 +100,7 @@
       }
     }
 
-    @media screen and (max-width: 1000px) {
+    @media screen and (max-width: $medium-limit) {
       .hamburger-icon {
         display: block;
       }
@@ -110,6 +115,7 @@
 
       .close-icon {
         display: block;
+        margin-right: 18px;
       }
       .close-icon.menu-closed {
         display: none;
@@ -129,7 +135,7 @@
         bottom: 0;
         left: 0;
 
-        background: white;
+        background: var(--nav-bar-background-color);
 
         .nav-items-close,
         .nav-items-app-menu,
@@ -145,16 +151,10 @@
           justify-content: space-between;
 
           .app-name {
-            padding: 10px;
+            padding: 19px 25px;
           }
         }
       }
     }
   }
-
-  @media screen and (max-width: 1000px) {
-    #nav {
-      padding: 10px;
-    }
-  }
 </style>
diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss
new file mode 100644
index 00000000..8a6a99fd
--- /dev/null
+++ b/fittrackee_client/src/scss/base.scss
@@ -0,0 +1,34 @@
+@import 'colors';
+@import 'fonts';
+@import 'vars';
+
+body {
+  margin: 0;
+}
+
+#app {
+  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--app-color);
+
+  background-color: var(--app-background-color);
+
+  margin: 0;
+  min-height: 100vh;
+}
+
+a {
+  color: var(--app-a-color);
+  text-decoration: none;
+}
+
+.container {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+  max-width: $container-width;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/fittrackee_client/src/scss/colors.scss b/fittrackee_client/src/scss/colors.scss
new file mode 100644
index 00000000..af9d2ba7
--- /dev/null
+++ b/fittrackee_client/src/scss/colors.scss
@@ -0,0 +1,11 @@
+:root {
+  --app-background-color: #eaeaea;
+  --app-color: #2c3e50;
+  --app-a-color: #40578a;
+
+  --nav-bar-background-color: #FFFFFF;
+  --nav-bar-link-active: #485b6e;
+
+  --footer-background-color: #FFFFFF;
+  --footer-color: #8b8c8c;
+}
\ No newline at end of file
diff --git a/fittrackee_client/src/scss/fonts.scss b/fittrackee_client/src/scss/fonts.scss
new file mode 100644
index 00000000..d2ad9ef5
--- /dev/null
+++ b/fittrackee_client/src/scss/fonts.scss
@@ -0,0 +1,56 @@
+/* pt-sans-regular - latin */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('~@/assets/fonts/pt-sans-v9-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local('PT Sans'), local('PTSans-Regular'),
+    url('~@/assets/fonts/pt-sans-v9-latin-regular.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-IE8 */ url('~@/assets/fonts/pt-sans-v9-latin-regular.woff2')
+      format('woff2'),
+    /* Super Modern Browsers */
+      url('~@/assets/fonts/pt-sans-v9-latin-regular.woff') format('woff'),
+    /* Modern Browsers */ url('~@/assets/fonts/pt-sans-v9-latin-regular.ttf')
+      format('truetype'),
+    /* Safari, Android, iOS */
+      url('~@/assets/fonts/pt-sans-v9-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
+}
+
+/* pt-sans-italic - latin */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url('~@/assets/fonts/pt-sans-v9-latin-italic.eot'); /* IE9 Compat Modes */
+  src: local('PT Sans Italic'), local('PTSans-Italic'),
+    url('~@/assets/fonts/pt-sans-v9-latin-italic.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-IE8 */ url('~@/assets/fonts/pt-sans-v9-latin-italic.woff2')
+      format('woff2'),
+    /* Super Modern Browsers */
+      url('~@/assets/fonts/pt-sans-v9-latin-italic.woff') format('woff'),
+    /* Modern Browsers */ url('~@/assets/fonts/pt-sans-v9-latin-italic.ttf')
+      format('truetype'),
+    /* Safari, Android, iOS */
+      url('~@/assets/fonts/pt-sans-v9-latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
+}
+
+/* pt-sans-700 - latin */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('~@/assets/fonts/pt-sans-v9-latin-700.eot'); /* IE9 Compat Modes */
+  src: local('PT Sans Bold'), local('PTSans-Bold'),
+    url('~@/assets/fonts/pt-sans-v9-latin-700.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-IE8 */ url('~@/assets/fonts/pt-sans-v9-latin-700.woff2')
+      format('woff2'),
+    /* Super Modern Browsers */ url('~@/assets/fonts/pt-sans-v9-latin-700.woff')
+      format('woff'),
+    /* Modern Browsers */ url('~@/assets/fonts/pt-sans-v9-latin-700.ttf')
+      format('truetype'),
+    /* Safari, Android, iOS */
+      url('~@/assets/fonts/pt-sans-v9-latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
+}
\ No newline at end of file
diff --git a/fittrackee_client/src/scss/vars.scss b/fittrackee_client/src/scss/vars.scss
new file mode 100644
index 00000000..6284c770
--- /dev/null
+++ b/fittrackee_client/src/scss/vars.scss
@@ -0,0 +1,6 @@
+/*
+* === MEDIA QUERIES ===
+*/
+$container-width: 1140px;
+$medium-limit: 1000px;
+$small-limit: 500px;
\ No newline at end of file