Ui/new ride ui

CHANGELOG.md

@@ -4,6 +4,8 @@
 * Export metrics for prometheus
 * Add automatically trim
 * Add socket connection event on campus selection
+* UI/UX for entire app refreshed
+* Added step workflow over ride management
 ### Fix
 * Fix container restart
 ## Version 1.4.4

assets/css/_variables.scss

@@ -12,6 +12,8 @@ $black: #1c1c1c;
 $gray: #8192a9;
 $light-gray: #eaeff4;
 $dark-gray: #adb9c9;
+$red: #FF5B5E;
+$orange: #FF961D;
 
 /*************
  *   Bulma   *

assets/css/main.scss

@@ -43,3 +43,24 @@ html, body, #__nuxt, #__layout {
   background: $background;
   height: 100%;
 }
+
+main.full-screen {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    svg.main-icon, div {
+      margin: 1em 0;
+    }
+    div.half-screen {
+      width: 50%;
+    }
+    strong {
+      color: inherit;
+    }
+    button {
+      margin: 1em 0;
+    }
+}

components/elements/button.vue

@@ -0,0 +1,29 @@
+<template>
+  <button>
+    <fa-icon :icon="['fas', 'chevron-right']" />
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+
+};
+</script>
+
+<style lang="scss" scoped>
+  @import "~assets/css/head";
+
+  button {
+    padding: .8em 2em;
+    color: $primary;
+    font-weight: 700;
+    font-size: 1em;
+    text-transform: uppercase;
+    cursor: pointer;
+    svg {
+      font-size: .8em;
+      margin-right: 1em;
+    }
+  }
+</style>

components/call-button.vue → components/elements/call-button.vue

@@ -20,14 +20,14 @@ export default {
   @import "~assets/css/head";
   .phone-button {
      position: fixed;
-     bottom: 10px;
-     right: 10px;
+    bottom: 4em;
+    right: 1em;
      z-index: 3;
      background: $primary;
     color: findColorInvert($primary);
+    border: 1px solid $white;
     border-radius: 100%;
     padding: $size-small;
-    border: none;
     font-size: $size-medium;
     box-sizing: border-box;
    }

components/nav.vue

@@ -0,0 +1,91 @@
+<template>
+  <nav>
+    <nuxt-link
+      :class="isActive('campus')"
+      :to="campus && campus.id ? campusLink(campus.id, driverStatus) : '/'"
+    >
+      <fa-icon :icon="['fas', 'car']" />
+      Courses
+    </nuxt-link>
+
+    <nuxt-link
+      :class="isActive('history')"
+      :to="{ name: 'history' }"
+    >
+      <fa-icon :icon="['fas', 'history']" />
+      Historique
+    </nuxt-link>
+
+    <nuxt-link
+      :class="isActive('account')"
+      :to="{ name: 'account' }"
+    >
+      <fa-icon :icon="['fas', 'user-circle']" />
+      Compte
+    </nuxt-link>
+  </nav>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import campusLink from '~/helpers/generate-campus-link';
+import { statuses } from '../store/status';
+
+export default {
+  data() {
+    return {
+      campusLink,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      campus: 'context/campus',
+      driverStatus: 'status/workStatus',
+    }),
+  },
+  methods: {
+    isActive(name) {
+      if (this.$route.name.split('-').find((string) => string === name)) {
+        return statuses.ACTIVE;
+      }
+      return '';
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+  @import "~assets/css/head";
+  @import "~bulma/sass/components/menu.sass";
+
+  nav {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    padding-top: 1em;
+    a {
+      background-color: $light-gray;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: .5em;
+      cursor: pointer;
+      font-size: 1em;
+      color: $gray;
+      &.active {
+        color: $primary;
+        font-weight: 700;
+        pointer-events: none;
+      }
+      svg {
+        margin-top: .3em;
+        color: inherit;
+      }
+    }
+
+  }
+</style>