Merge pull request #274 from nwfsc-fram/styling

Styling of breadcrumbs and minor modifications to login, trips, and h…

apps/obs-wcgop-optecs/src/assets/directional-buttons.css

@@ -0,0 +1,107 @@
+/* styling from https://codepen.io/dannydns/pen/JYoYEQ/ 
+   https://github.com/westonganger/bootstrap-directional-buttons */
+.btn-arrow-right,
+.btn-arrow-left {
+   position: relative;
+   padding-left: 18px;
+   padding-right: 18px;
+}
+
+.btn-arrow-right {
+   padding-left: 36px;
+}
+
+.btn-arrow-left {
+   padding-right: 36px;
+}
+
+ /* There's a default setting, so overriding it */
+ .q-btn--standard:not(.disabled):before {
+    top: 5px;
+    left: -12px;
+}
+
+.btn-arrow-right:before,
+.btn-arrow-right:after,
+.btn-arrow-left:before,
+.btn-arrow-left:after {
+   /* make two squares (before and after), looking similar to the button */
+
+   content: "";
+   position: absolute;
+   top: 5px;
+   /* move it down because of rounded corners */
+
+   width: 26px;
+   /* same as height */
+
+   height: 26px;
+   /* button_outer_height / sqrt(2) */
+
+   background: inherit;
+   /* use parent background */
+
+   border: inherit;
+   /* use parent border */
+
+   border-left-color: transparent;
+   /* hide left border */
+
+   border-bottom-color: transparent;
+   /* hide bottom border */
+
+   border-radius: 0px 4px 0px 0px;
+   /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
+
+   -webkit-border-radius: 0px 4px 0px 0px;
+   -moz-border-radius: 0px 4px 0px 0px;
+}
+
+.btn-arrow-right:before,
+.btn-arrow-right:after {
+   transform: rotate(45deg);
+   /* rotate right arrow squares 45 deg to point right */
+
+   -webkit-transform: rotate(45deg);
+   -moz-transform: rotate(45deg);
+   -o-transform: rotate(45deg);
+   -ms-transform: rotate(45deg);
+}
+
+.btn-arrow-left:before,
+.btn-arrow-left:after {
+   transform: rotate(225deg);
+   /* rotate left arrow squares 225 deg to point left */
+
+   -webkit-transform: rotate(225deg);
+   -moz-transform: rotate(225deg);
+   -o-transform: rotate(225deg);
+   -ms-transform: rotate(225deg);
+}
+
+.btn-arrow-right:before,
+.btn-arrow-left:before {
+   /* align the "before" square to the left */ 
+   left: -11px;
+ }
+
+.btn-arrow-right:after,
+.btn-arrow-left:after {
+   /* align the "after" square to the right */
+
+   right: -12px;
+}
+
+.btn-arrow-right:after,
+.btn-arrow-left:before {
+   /* bring arrow pointers to front */
+
+   z-index: 1;
+}
+
+.btn-arrow-right:before,
+.btn-arrow-left:after {
+   /* hide arrow tails background */
+
+   background-color: #027be3;
+}

apps/obs-wcgop-optecs/src/components/OptecsBreadcrumbs.vue

@@ -1,12 +1,10 @@
 <template>
-  <q-breadcrumbs active-color="white" style="font-size: 16px" gutter="md">
-    <q-space></q-space>
-    <q-breadcrumbs-el label="Trips" icon="home" to="/" />
-    <q-breadcrumbs-el label="1" to="/tripdetails/1" />
-    <q-breadcrumbs-el label="Hauls" to="/hauls" />
-    <q-breadcrumbs-el label="1" to="/hauldetails/1" />
-    <q-breadcrumbs-el label="" to="/hauldetails/1" />
-  </q-breadcrumbs>
+  <q-btn-group class="q-gutter-xs">
+    <q-btn class="btn-arrow-right" color="white" text-color="primary" label="Trips" icon="home" to="/" />
+    <q-btn class="btn-arrow-right" color="white" text-color="primary" label="1" to="/tripdetails/1"/>
+    <q-btn class="btn-arrow-right" color="white" text-color="primary" label="Hauls" to="/hauls"/>
+    <q-btn class="btn-arrow-right" color="secondary" text-color="white" label="1" to="/hauldetails/1"/>
+  </q-btn-group>
 </template>
 
 <script lang="ts">

apps/obs-wcgop-optecs/src/layouts/Default.vue

@@ -10,8 +10,17 @@
           aria-label="Menu"
           icon="menu"
         />
-
-        <optecs-breadcrumbs />
+        <q-btn
+          flat
+          dense
+          round
+          @click="navigateBack"
+          aria-label="Back"
+          icon="chevron_left"
+          size="1.5em"
+        />
+        <optecs-breadcrumbs/>
+       <!-- <q-icon name="save" />-->
       </q-toolbar>
     </q-header>
 
@@ -123,5 +132,9 @@ export default class DefaultLayout extends Vue {
     this.leftDrawerOpen = Platform.is.desktop;
   }
 
+  private navigateBack() {
+    this.$router.back();
+  }
+
 }
 </script>

apps/obs-wcgop-optecs/src/main.ts

@@ -7,11 +7,14 @@ import './registerServiceWorker';
 // The quasar stylus imports are somewhat broken, so import css here
 // As described in https://alligator.io/vuejs/css-frameworks-vuejs/
 import 'quasar/dist/quasar.min.css';
+import '@/assets/directional-buttons.css';
 // Import what we can from the stylus files:
 import './styles/quasar.styl';
 
 import '@quasar/extras/roboto-font/roboto-font.css';
 import '@quasar/extras/material-icons/material-icons.css';
+import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';
+
 
 import { VueTouchKeyboard} from 'vue-touch-keyboard';
 

apps/obs-wcgop-optecs/src/views/Login.vue

@@ -10,6 +10,20 @@
       </q-toolbar>
     </q-header>
     <q-page-container>
+      <div class="q-pa-md">
+        <div>
+          <b>Last Software Update Date:</b>
+          {{lastSoftwareUpdateDate}}
+        </div>
+        <div>
+          <b>Last Data Sync:</b>
+          {{lastDataSyncDate}}
+        </div>
+        <div>
+          <b>Last Login Date:</b>
+          {{lastLoginDate}}
+        </div>
+      </div>
       <div class="q-pa-xl column justify-center items-center full-height">
         <form @submit.prevent.stop="handleSubmit" class="q-gutter-md" style="min-width: 300px;">
           <div v-show="!!alert.message">
@@ -92,6 +106,10 @@ export default class Login extends Vue {
   private isPwd = true;
   private submitted = false;
 
+  private lastSoftwareUpdateDate = '10/1/2018 12:00:00';
+  private lastDataSyncDate = '10/1/2018 12:00:00';
+  private lastLoginDate = '10/1/2018 12:00:00';
+
   private visible = false;
   private layout = 'normal';
   private input = null;

libs/bn-common/src/components/BoatnetHauls.vue

@@ -1,38 +1,38 @@
 <template>
-  <span>
-  <div class="row justify-end">
-    <q-input
-      outlined
-      bottom-slots
-      v-model="searchText"
-      label="Search"
-      maxlength="12"
-      style="width: 200px;"
-    >
-      <template v-slot:append>
-        <q-icon
-          v-if="searchText !== ''"
-          name="close"
-          @click="searchText = ''"
-          class="cursor-pointer"
-        />
-        <q-icon name="search"/>
-      </template>
-    </q-input>
-  </div>
-  <q-table :data="haulsData" :columns="haulsSettings.columns" :selected.sync="selected"/>
+  <q-page padding>
+    <div class="row justify-end">
+      <q-input
+        outlined
+        bottom-slots
+        v-model="searchText"
+        label="Search"
+        maxlength="12"
+        style="width: 200px;"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="searchText !== ''"
+            name="close"
+            @click="searchText = ''"
+            class="cursor-pointer"
+          />
+          <q-icon name="search"/>
+        </template>
+      </q-input>
+    </div>
+    <q-table :data="haulsData" :columns="haulsSettings.columns" :selected.sync="selected"/>
 
-  <!-- <div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div> -->
-  <div class="row">
-    <q-btn color="primary" icon="playlist_add" label="Add Haul"/>
-    <q-btn icon="edit" label="Edit Haul" disabled="true"/>
-    <q-btn icon="done" label="End Haul" disabled="true"/>
-    <q-btn icon="delete_forever" label="Delete Haul" disabled="true"/>
-    <q-space/>
-    <q-btn icon="play_arrow" label="Go to Logbook Mode"/>
-    <q-btn icon="play_arrow" label="Go to Catch"/>
-  </div>
-  </span>
+    <!-- <div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div> -->
+    <div class="row q-gutter-sm q-pt-sm">
+      <q-btn color="primary" icon="add" label="Add Haul"/>
+      <q-btn color="primary" icon="edit" label="Edit Haul" disabled="true"/>
+      <q-btn color="primary" icon="done" label="End Haul" disabled="true"/>
+      <q-btn color="primary" icon="delete_forever" label="Delete Haul" disabled="true"/>
+      <q-space/>
+      <q-btn color="primary" icon="play_arrow" label="Go to Logbook Mode"/>
+      <q-btn color="primary" icon="play_arrow" label="Go to Catch"/>
+    </div>
+  </q-page>
 </template>
 
 <script lang="ts">

libs/bn-common/src/components/BoatnetTrips.vue

@@ -18,13 +18,13 @@
     <q-table :data="tripsData" :columns="tripsSettings.columns" :selected.sync="selected"/>
 
     <!-- <div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div> -->
-    <div class="row">
-      <q-btn color="primary" icon="playlist_add" label="Add Trip"/>
-      <q-btn icon="edit" label="Edit Trip" disabled="true"/>
-      <q-btn icon="done" label="End Trip" disabled="true"/>
-      <q-btn icon="delete_forever" label="Delete Trip" disabled="true"/>
+    <div class="row q-gutter-sm q-pt-sm">
+      <q-btn color="primary" icon="add" label="Add Trip"/>
+      <q-btn color="primary" icon="edit" label="Edit Trip" disabled="true"/>
+      <q-btn color="primary" icon="done" label="End Trip" disabled="true"/>
+      <q-btn color="primary" icon="delete_forever" label="Delete Trip" disabled="true"/>
       <q-space/>
-      <q-btn icon="play_arrow" label="Go to Hauls"/>
+      <q-btn color="primary" icon="play_arrow" label="Go to Hauls"/>
     </div>
   </q-page>
 </template>