Merge pull request #10 from lowsideio/beta

Next release
lowsideio · Nov 4, 2017 · ad514e6 · ad514e6
2 parents c65723e + 095132c
commit ad514e6
Show file tree

Hide file tree

Showing 71 changed files with 1,300 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>lowside-web-frontend</title>
+    <link rel="shortcut icon" type="image/ico" href="/static/favicon.ico"/>
+    <title>lowside.io - Search Motorcycles</title>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-108888856-1"></script>
     <script>

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,9 @@
 <template>
   <div id="app">
     <img src="./assets/lowside-logo-blank.svg">
+    <router-link to="/">
+      <h1>lowside.io</h1>
+    </router-link>
     <router-view />
   </div>
 </template>
@@ -20,10 +23,20 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+
+a { color: inherit; }
+
 </style>
 
 
 <style scoped>
+  a {
+    text-decoration: inherit;
+    color: inherit;
+  }
+  h1 {
+    color: #20a4f3;
+  }
   img {
     height: 128px;
     width: 128px;

diff --git a/src/components/SearchResult.vue b/src/components/SearchResult.vue
@@ -1,23 +1,31 @@
 
 <template>
-  <div class="container">
-    <div class="brand">
-      <div class="brand-logo" v-bind:style="{ backgroundImage: `url(${this.getLogo(motorcycle.brand)})` }" />
-    </div>
-    <div class="info">
-      <div class="model">
-        <div class="brand-name">{{ motorcycle.brand }}</div>
-        {{ motorcycle.model }}
+  <router-link v-bind:to="`/motorcycles/${motorcycle.slug}`">
+    <div class="container">
+      <div class="brand">
+        <div
+          class="brand-logo"
+
+          v-if="this.getLogo(motorcycle.brand)"
+          v-bind:style="{ backgroundImage: `url(${this.getLogo(motorcycle.brand)})` }"
+        />
+        <div
+          class="brand-no-logo"
+
+          v-else
+        />
       </div>
-      <div class="meta">
-        <div class="cc">{{motorcycle.cc}}<small>cc</small></div>
-        <div class="power">{{motorcycle.power}}<small>ps</small></div>
+      <div class="info">
+        <div class="model">
+          <div class="brand-name">{{ motorcycle.brand }}</div>
+          {{ motorcycle.model }}
+        </div>
+      </div>
+      <div class="category">
+        <img v-bind:src="this.getCategoryIllustration(motorcycle.category)" />
       </div>
     </div>
-    <div class="category">
-      <img v-bind:src="this.getCategoryIllustration(motorcycle.category)" />
-    </div>
-  </div>
+  </router-link>
 </template>
 
 <script type = "text/javascript" >
@@ -46,7 +54,21 @@ export default {
     overflow: visible;
   }
 
-  .brand-logo {
+  .container:hover {
+    background-color: rgb(32, 164, 243);
+
+    -webkit-transition: background-color 200ms linear;
+    -ms-transition: background-color 200ms linear;
+    transition: background-color 200ms linear;
+
+    cursor: pointer;
+  }
+
+  .brand-no-logo {
+    background-image: url('/static/icons/unknown.png');
+  }
+
+  .brand-logo, .brand-no-logo {
     display: inline-block;
 
     width: 50%;
@@ -69,12 +91,13 @@ export default {
   .brand {
     position: absolute;
 
-    width: calc(25% - 2rem);
+    width: 4rem;
     height: 100%;
     left: 0;
     top: 0;
 
     color: #FFF;
+    border-right: 1px solid #B2B2B2;
   }
 
   .category {
@@ -98,6 +121,7 @@ export default {
   }
 
   .model {
+    text-align: left;
     padding: .5rem;
   }
 

diff --git a/src/helpers/brands.js b/src/helpers/brands.js
@@ -1,5 +1,5 @@
 
-const basePath = 'static/brands';
+const basePath = '/static/brands';
 
 const logo = (brand) => {
   switch (brand) {

diff --git a/src/helpers/categories.js b/src/helpers/categories.js
@@ -1,5 +1,5 @@
 
-const basePath = 'static/categories';
+const basePath = '/static/categories';
 
 const illustration = (category) => {
   switch (category) {
@@ -13,12 +13,14 @@ const illustration = (category) => {
     case 'TOURING': return `${basePath}/touring.svg`;
     case 'CROSS': return `${basePath}/cross.svg`;
 
-    case 'ENDURO': return `${basePath}/enduro.svg`; // TODO svg
-    case 'NAKED': return `${basePath}/naked.svg`; // TODO svg
-    case 'UNKNOWN': return `${basePath}/unknown.svg`; // TODO svg
-    case 'MINI': return `${basePath}/mini.svg`; // TODO svg
-    case 'TRIAL': return `${basePath}/trial.svg`; // TODO svg
-    case 'PROTO': return `${basePath}/proto.svg`; // TODO svg
+    case 'ENDURO': return `${basePath}/enduro.svg`;
+    case 'NAKED': return `${basePath}/naked.svg`;
+    case 'TRIAL': return `${basePath}/trial.svg`;
+    case 'PROTO': return `${basePath}/proto.svg`;
+
+    case 'MINI': return `${basePath}/mini.svg`;
+
+    case 'UNKNOWN': return '/static/icons/unknown.png';
 
     default: return null;
   }

diff --git a/src/molecules/Bore.vue b/src/molecules/Bore.vue
@@ -0,0 +1,18 @@
+<template>
+  <tr>
+    <td>Bore</td>
+    <td>{{ data }}</td>
+  </tr>
+</template>
+
+<script type = "text/javascript">
+export default {
+  name: 'Bore',
+  props: ['data'],
+};
+</script>
+
+<style scoped>
+
+
+</style>
diff --git a/src/molecules/Cc.vue b/src/molecules/Cc.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="container">
+    <div class="illustration" />
+    <div class="data">{{ data }}</div>cc
+  </div>
+</template>
+
+<script type = "text/javascript">
+export default {
+  name: 'Cc',
+  props: ['data'],
+};
+</script>
+
+<style scoped>
+
+.container {
+  display: inline-block;
+  padding: 1rem;
+}
+
+.data {
+  font-size: 2rem;
+}
+
+.data, .illustration {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.illustration {
+  background-image: url('/static/icons/motorcycle-parts/cc.svg');
+  height: 3rem;
+  width: 3rem;
+}
+
+
+</style>
diff --git a/src/molecules/Clutch.vue b/src/molecules/Clutch.vue
@@ -0,0 +1,18 @@
+<template>
+  <tr>
+    <td>Clutch</td>
+    <td>{{ data }}</td>
+  </tr>
+</template>
+
+<script type = "text/javascript">
+export default {
+  name: 'Clutch',
+  props: ['data'],
+};
+</script>
+
+<style scoped>
+
+
+</style>
diff --git a/src/molecules/Compression.vue b/src/molecules/Compression.vue
@@ -0,0 +1,19 @@
+<template>
+  <tr>
+    <td>Compression</td>
+    <td>{{ data }}</td>
+  </tr>
+</template>
+
+
+<script type = "text/javascript">
+export default {
+  name: 'Compression',
+  props: ['data'],
+};
+</script>
+
+<style scoped>
+
+
+</style>
diff --git a/src/molecules/Cooling.vue b/src/molecules/Cooling.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="container">
+    <div class="data">COOLING</div>
+    <div
+      class="illustration"
+      v-bind:style="{ backgroundImage: `url(${this.illustration})` }"
+    />
+    <div class="data">{{ data }}</div>
+  </div>
+</template>
+
+<script type = "text/javascript">
+export default {
+  name: 'Cooling',
+  props: ['data'],
+  data() {
+    let illustration;
+    if (this.data === 'liquid') {
+      illustration = '/static/icons/motorcycle-parts/cooling-liquid.svg';
+    }
+    if (this.data === 'air') {
+      illustration = '/static/icons/motorcycle-parts/cooling-air.svg';
+    }
+    return {
+      illustration,
+    };
+  },
+};
+</script>
+
+<style scoped>
+
+.container {
+  padding: 1rem;
+  text-align: center;
+}
+
+.data {
+  font-size: 2rem;
+}
+
+.data, .illustration {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.illustration {
+  height: 3rem;
+  width: 3rem;
+}
+
+
+</style>
diff --git a/src/molecules/DryWeight.vue b/src/molecules/DryWeight.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="container">
+    <div class="illustration" />
+    <div class="data">{{ data }}</div>kg
+  </div>
+</template>
+
+<script type = "text/javascript">
+export default {
+  name: 'DryWeight',
+  props: ['data'],
+};
+</script>
+
+<style scoped>
+
+.container {
+  display: inline-block;
+  padding: 1rem;
+}
+
+.data {
+  font-size: 2rem;
+}
+
+.data, .illustration {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.illustration {
+  background-image: url('/static/icons/motorcycle-parts/cc.svg');
+  height: 3rem;
+  width: 3rem;
+}
+
+</style>
diff --git a/src/molecules/EngineType.vue b/src/molecules/EngineType.vue
@@ -0,0 +1,18 @@
+<template>
+  <tr>
+    <td>Engine type</td>
+    <td>{{ data }}</td>
+  </tr>
+</template>
+
+<script type = "text/javascript">
+export default {
+  name: 'EngineType',
+  props: ['data'],
+};
+</script>
+
+<style scoped>
+
+
+</style>
diff --git a/src/molecules/FrameType.vue b/src/molecules/FrameType.vue
@@ -0,0 +1,19 @@
+<template>
+  <tr>
+    <td>Frame Type</td>
+    <td>{{ data }}</td>
+  </tr>
+</template>
+
+
+<script type = "text/javascript">
+export default {
+  name: 'FrameType',
+  props: ['data'],
+};
+</script>
+
+<style scoped>
+
+
+</style>