S8-Design Tweaks Part 4

frontend/src/App.vue

@@ -50,7 +50,7 @@ html, body {
   --white: #fefefe;
   --soft-white: #aaa;
   --black: #111;
-  --soft-black: rgba(#111, 0.65);
+  --soft-black: rgba(#111, 0.5);
   --black-p: rgba(0,0,0,.72);
   // borders
   --color-gray: #d5d5d5;
@@ -62,6 +62,7 @@ html, body {
   --box-shadow-active: 0px 0px 0px 1px #ddd;
   --theme: #00a99d;
   --theme-light: rgba(102, 203, 196);
+  --color-blue: #2196f3;
   // font format
   --header-1: 600 3rem /1.2 -apple-system, BlinkMacSystemFont, 'Open Sans', 'Helvetica Neue', sans-serif;
   --header-1-mobile: 600 2rem /1.1 -apple-system, BlinkMacSystemFont, 'Open Sans', 'Helvetica Neue', sans-serif;

frontend/src/components/AppBreadCrumb.vue

@@ -54,8 +54,7 @@ export default {
         }
       }
 
-      // only first three items
-      return list.slice(0, 3)
+      return list.slice(Math.max(0, list.length - 4), list.length - 1)
     }
   }
 }

frontend/src/components/AppButton.vue

@@ -19,7 +19,7 @@ export default {
 button {
     cursor: pointer;
     padding: 10px 20px;
-    margin: 0px 4px;
+    margin: 4px 0;
     font: inherit;
     font-weight: bolder;
     outline: none;
@@ -34,7 +34,7 @@ button:disabled {
 }
 
 .standard-button {
-    background-color: black;
+    background-color: var(--black);
     color: var(--white);
     border: none;
 }

frontend/src/components/AppNavBar.vue

@@ -4,25 +4,25 @@
         <router-link class="link-item" to="/">
           <AppLogo :first="'S'" :last="'C'"/>
         </router-link>
-        <!-- global loading state -->
-        <!--LoadingSpinner style="height:50px;width:auto;margin:10px;" v-if="loading" /-->
       </div>
 
       <div class="links">
-        <Search class="mini" v-if="$route.name !== 'home'"/>
-        <!-- hacky padding div -->
-        <div v-else/>
-        <h3 v-if="!isFirebaseAuthorised"><router-link class="link-item" to="/login">Login</router-link></h3>
-        <h3 v-if="!isFirebaseAuthorised"><router-link class="link-item" to="/signup">Sign Up</router-link></h3>
-        <h3 v-if="isFirebaseAuthorised && !hasProfile"><router-link class="link-item" to="/create-profile">Profile</router-link></h3>
-        <h3 v-if="isLoggedIn"><router-link class="link-item" to="/profile">Profile</router-link></h3>
-        <h3 v-if="isFirebaseAuthorised" @click="logout()" class="link-item">Logout</h3>
+        <Search class="mini" v-if="$route.name !== 'home' && $route.name !== 'subjectList'"/>
+        <div class="nav-menu">
+            <div class="menu-items">
+                <router-link tag="h3" v-if="!isFirebaseAuthorised" class="link-item" to="/login">Login</router-link>
+                <router-link tag="h3" v-if="!isFirebaseAuthorised" class="link-item" to="/signup">Sign Up</router-link>
+                <router-link tag="h3" v-if="isFirebaseAuthorised && !hasProfile" class="link-item" to="/create-profile">Profile</router-link>
+                <router-link tag="h3" v-if="isLoggedIn" class="link-item" to="/profile">Profile</router-link>
+                <h3 v-if="isFirebaseAuthorised" @click="logout()" class="link-item">Logout</h3>
+            </div>
+        </div>
       </div>
     </div>
 </template>
 
 <script>
-import Search from '@/components/AppSearch'
+import Search from '@/components/Search'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -42,17 +42,20 @@ export default {
 
 <style lang="less" scoped>
 
-#nav {
+#nav, .menu-items, .nav-menu {
     display: flex;
-    padding: 0px 20px;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    border-bottom: var(--border);
     background-color: var(--white);
     font-size: var(--font-small);
 }
 
+#nav {
+    padding: 0px 20px;
+    border-bottom: var(--border);
+}
+
 .logo-span {
     display: flex;
     flex-direction: row;
@@ -81,5 +84,10 @@ export default {
     #nav {
         font-size: var(--font-small-mobile);
     }
+
+    .menu-items .link-item {
+        font: var(--header-4-mobile);
+    }
+
 }
 </style>

frontend/src/components/AppPageSelector.vue

@@ -2,7 +2,7 @@
   <div class="PageSelector">
     <div class='button-container'>
       <AppButton @click.native="goPrevPage()" :alt="false">&laquo;</AppButton>
-      <AppButton :disabled="true">{{currPage}}</AppButton>
+      <AppButton disabled="true">{{currPage}}</AppButton>
       <AppButton @click.native="goNextPage()" :alt="false">&raquo;</AppButton>
     </div>
   </div>
@@ -42,9 +42,13 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .button-container {
   padding: 10px 0;
   text-align:center;
 }
+
+.button-container > button {
+  margin: 5px;
+}
 </style>

frontend/src/components/Card/Large.vue

@@ -0,0 +1,10 @@
+<template>
+    <!-- Add real card shape -->
+    <div></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

frontend/src/components/Search/Filter.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="search-container">
+        <SearchBar class="filter-search"
+            :value="value" @input="$emit('input', $event)"
+            placeholder='Filter by keyword...'
+        />
+    </div>
+</template>
+
+<script>
+import SearchBar from './Input'
+
+export default {
+  props: ['value'],
+  components: {
+    SearchBar
+  }
+}
+</script>
+
+<style scoped>
+
+.search-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--theme-light);
+    margin: 10px;
+    padding: 40px 0;
+}
+
+.filter-search {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    width: 50%;
+    border: none;
+    border-radius: 0;
+}
+
+.filter-search:active, .filter-search:focus  {
+    border: none;
+}
+
+@media screen and (max-width: 600px) {
+    .filter-search {
+        width: 80%;
+    }
+}
+
+</style>

frontend/src/components/Search/Input.vue

@@ -0,0 +1,44 @@
+<template>
+    <input
+        type='search'
+        name='search'
+        :value="value"
+        @input="$emit('input', $event.target.value)"
+    />
+</template>
+
+<script>
+export default {
+  props: ['value']
+}
+</script>
+
+<style scoped>
+
+input {
+    margin: auto;
+    outline: none;
+    font: inherit;
+    transition: border 0.3s ease-in;
+}
+
+input:active, input:focus {
+    border: 1px solid var(--theme-light);
+}
+
+input {
+    border-radius: 0.2em;
+    border: var(--border);
+}
+
+input {
+    padding: 10px 20px;
+}
+
+@media screen and (max-width: 740px) {
+    input {
+        padding: 10px;
+    }
+}
+
+</style>

frontend/src/components/AppSearch.vue → frontend/src/components/Search/index.vue

@@ -1,9 +1,8 @@
 <template>
     <div class="search">
-        <input
-            type='text'
+        <SearchBar
+            class="search-bar"
             v-model='search'
-            name='search'
             placeholder='Search all courses...'
         />
         <ul v-if="search && suggestions.length">
@@ -21,8 +20,12 @@
 </template>
 
 <script>
+import SearchBar from './Input'
 
 export default {
+  components: {
+    SearchBar
+  },
   data() {
     return {
       search: ''
@@ -62,49 +65,30 @@ export default {
     margin: 20px auto;
 }
 
-input {
-    margin: auto;
-    outline: none;
-    font: inherit;
+.search-bar, ul {
     width: 500px;
-    transition: border 0.3s ease-in;
-}
-
-input:active, input:focus {
-  border: 1px solid var(--theme-light);
 }
 
 .mini {
     font-size: 1em;
 
-    & input {
+    & .search-bar, ul {
         width: 300px;
     }
-
-    & ul {
-        width: 340px;
-    }
 }
 
-ul, input {
+ul {
     border-radius: 0.2em;
     border: var(--border);
-}
-
-input, li {
-    padding: 10px 20px;
-}
-
-ul {
     position: absolute;
     background: var(--white);
-    width: 540px;
     z-index: 10;
     max-height: 220px;
     overflow-y: scroll;
 }
 
 li {
+    padding: 10px 20px;
     background: var(--white);
     font-size: 0.8em;
 }
@@ -114,22 +98,14 @@ li:hover {
 }
 
 @media screen and (max-width: 740px) {
-    ul {
+    ul, .search-bar {
         width: 330px;
     }
 
-    input {
-        width: 290px;
-    }
-
     .mini {
 
-        & input {
-            width: 100px;
-        }
-
-        & ul {
-            width: 140px;
+        & ul, .search-bar {
+            width: 180px;
         }
     }