CSS restructuring

frontend/src/App.vue

@@ -2,13 +2,28 @@
   <div id="app">
     <div id="nav">
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/about">About</router-link> |
+      <router-link to="/address">Address</router-link>
     </div>
     <router-view/>
   </div>
 </template>
 
+<script>
+// import bulma from 'bulma';
+export default {
+  
+}
+</script>
+
 <style lang="scss">
+@import '../../node_modules/bulma/css/bulma.css';
+
+* {
+  box-sizing: border-box;
+  font-family: "DIN 2014", sans-serif;
+}
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

frontend/src/router/index.ts

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import Address from '../views/Address.vue'
 
 Vue.use(VueRouter)
 
@@ -17,6 +18,11 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  },
+  {
+    path: 'address',
+    name: 'address',
+    component: Address
   }
 ]
 

frontend/src/views/About.vue

 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-    <input type="text" placeholder="Bing me" v-model="searchTerm" @keyup.enter="search">
-    <div v-if="!this.results.empty" class="results">
+  <div class="field search-bar-container">
+    <h1 class="title is-1">Search Results</h1>
+    <div class="control is-medium has-icons-right">
+      <input
+        class="input is-medium"
+        placeholder="Bing me"
+        type="text"
+        v-model="searchTerm"
+        @keyup.enter="search"
+      >
+      <span class="icon is-small is-right">
+        <i class="fas fa-search"></i>
+      </span>
+    </div>
+    
+    <div class="search-results-container" v-if="Object.keys(this.results).length != 0">
       <div v-if="this.searchTerm">
         {{this.searchTerm}} <br/>
         {{`/${this.searchTerm}/`}}
       </div>
-      <div v-for="result in this.results" :key="result.id" class="result">
-        <h2>
-          {{result.name.slice(0, result.name.indexOf(' - '))}}
-        </h2>
-        <a href="result.url">{{result.url.slice(35)}}</a>
-        <div v-html="result.snippet">
-        
-        </div>
-      </div>
+      <ul class="rows">
+        <li class="search-result row content" v-for="result in this.results" :key="result.index">
+          <a v-bind:href="result.url">
+            <h2 class="is-medium">
+              {{result.name.slice(0, result.name.indexOf(' - '))}}
+            </h2>
+          </a>
+          <p class="url-path is-small">{{result.url.slice(35)}}</p>
+          <p class="is-small">{{ result.snippet }}</p>
+        </li>
+      </ul>
     </div>
   </div>
-  
 </template>
 
+
 <script lang="ts">
 import axios from 'axios';
 export default {
@@ -46,49 +60,41 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+  .input {
+    border-radius: 4px;
+    padding: 12px;
+    line-height: 28px;
+    border: 2px transparent solid;
+    background: #edf0f2;
+    min-width: 200px;
+    width: 100%;
+    box-shadow: none;
 
-  @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');
-  
-  .about {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    font-family: 'Roboto Condensed', sans-serif;
-    text-align: left;
-    h1 {
-      width: 100%;
-      margin: 0 auto;
+    &:hover {
+      border: 2px transparent solid;
     }
-    input {
-      border: 3px solid red;
-      margin: 0 auto;
+    
+    &:focus {
+      outline: none;
+      border: 2px solid black;
+      box-shadow: none;
+      background: white;
     }
   }
 
-  .results {
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    width: 60%;
+  .search-bar-container {
+    width: 80%;
+    margin: auto;
   }
-  .result {
-    display: flex;
-    flex-direction: column;
-    justify-content: left;
-    h2 {
-      text-align: left;
-    }
 
-    a {
-      text-align: left;
-      text-decoration: none;
-      color: inherit;
-      width: fit-content;
-    }
-
-    div {
-      text-align: left;
-    }
+  .search-results-container {
+    text-align: left;
   }
-</style>
\ No newline at end of file
+
+  // i {
+  //   border: 3px solid red;
+  //   height: 20px;
+  //   width: 20px;
+  // }
+</style>

frontend/src/views/Address.vue

+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'home',
+  components: {
+    HelloWorld
+  }
+}
+</script>

frontend/src/views/Home.vue

@@ -16,3 +16,4 @@ export default {
   }
 }
 </script>
+

package-lock.json

@@ -163,6 +163,11 @@
       "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
       "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8="
     },
+    "bulma": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.8.0.tgz",
+      "integrity": "sha512-nhf3rGyiZh/VM7FrSJ/5KeLlfaFkXz0nYcXriynfPH4vVpnxnqyEwaNGdNCVzHyyCA3cHgkQAMpdF/SFbFGZfA=="
+    },
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",

package.json

@@ -7,6 +7,7 @@
     "@types/express": "^4.17.2",
     "@types/node": "^13.7.0",
     "body-parser": "^1.19.0",
+    "bulma": "^0.8.0",
     "concurrently": "^5.1.0",
     "cors": "^2.8.5",
     "express": "^4.17.1",