Improve mobile UI

fittrak-client/src/App.vue

@@ -8,7 +8,7 @@
       app
       dark
     >
-      <SidebarNavigationItems />
+      <Sidebar :viewer=viewer />
     </v-navigation-drawer>
 
     <v-toolbar 
@@ -22,12 +22,7 @@
         :class="{ main: $route.name === APP_NAME }">{{ $route.name }}</v-toolbar-title>
       <v-spacer/>
       <v-layout>
-        <v-flex text-xs-right>
-          <Loader />
-        </v-flex>
-        <v-flex text-xs-right>
-          <v-flex>Heya, <strong>{{ viewer }}</strong></v-flex>
-        </v-flex>
+        <CreateWorkout />
       </v-layout>
     </v-toolbar>
 
@@ -42,39 +37,45 @@
     <AppSnackbar />
   </v-app>
   <v-app v-else>
-    <v-layout 
-      justify-center 
-      align-center 
-      fill-height>
-      <v-flex text-xs-center>
-        <v-progress-circular 
-          color="primary" 
-          size="64" 
-          :indeterminate="true"/>
-        <v-flex mt-2>Firing up ... 💪</v-flex>
-        <v-flex 
-          v-if="error" 
-          mt-2>
-          <p>
-            Hmm, looks like there was an issue making the connection. Please try again!
-            If this persists please contact: <a href="mailto:help@fittrak.ca">help@fittrak.ca</a>
-          </p>
-          <v-btn 
-            @click="signOut" 
-            depressed 
-            color="secondary">Sign out</v-btn>
+    <v-container
+      fill-height
+    >
+      <v-layout 
+        row
+        wrap
+        align-center
+      >
+        <v-flex text-xs-center>
+          <v-flex>
+            <Loader />
+            <span class="headline">Firing up ... 💪</span>
+          </v-flex>
+          <v-flex 
+            v-if="error" 
+            mt-2>
+            <p>
+              Hmm, looks like there was an issue making the connection. Please try again!
+              If this persists please contact: <a href="mailto:help@fittrak.ca">help@fittrak.ca</a>
+            </p>
+            <v-btn 
+              @click="signOut" 
+              depressed 
+              color="secondary">Sign out</v-btn>
+          </v-flex>
         </v-flex>
-      </v-flex>
-    </v-layout>
+      </v-layout>
+    </v-container>
   </v-app>
 </template>
 
 <script>
-import VIEWER from "@/graphql/queries/viewer.graphql";
+import { queries } from "@/graphql";
 
-import SidebarNavigationItems from "@/components/sidebar/SidebarNavigationItems";
-import AppSnackbar from "@/components/app/AppSnackbar";
 import Loader from "@/components/app/Loader";
+import Sidebar from "@/components/app/Sidebar";
+import AppSnackbar from "@/components/app/AppSnackbar";
+
+import CreateWorkout from "@/components/workouts/CreateWorkout";
 
 import { APP_NAME, SIGNOUT_URL } from "@/constants";
 
@@ -85,7 +86,7 @@ export default {
     return {
       APP_NAME,
       drawer: null,
-      viewer: "Stranger",
+      viewer: { username: "Stranger" },
       error: false
     };
   },
@@ -96,31 +97,27 @@ export default {
     }
   },
 
-  /*
-  props: {
-    source: {
-      type: String,
-      required: true
-    }
-  },
-  */
-
-  components: {
-    SidebarNavigationItems,
-    AppSnackbar,
-    Loader
-  },
-
   apollo: {
     viewer: {
-      query: VIEWER,
-      update: data => data.viewer.username,
+      query: queries.viewerQuery,
+
+      update(data) {
+        return data.viewer;
+      },
+
       error(error) {
         // TODO: Send error up
         console.log(`Error: ${error}`); // eslint-disable-line
         this.error = true;
       }
     }
+  },
+
+  components: {
+    Sidebar,
+    AppSnackbar,
+    CreateWorkout,
+    Loader
   }
 };
 </script>

fittrak-client/src/components/app/Sidebar.vue

@@ -1,5 +1,14 @@
 <template>
   <v-list dark>
+    <v-list-tile>
+      <v-list-tile-content>
+        <v-list-tile-title class="title">
+          Heya, <span class="primary--text text--lighten-1">{{ viewer.username }}</span>
+        </v-list-tile-title>
+      </v-list-tile-content>
+    </v-list-tile>
+    <v-divider />
+
     <router-link 
       tag="v-list-tile" 
       to="/">
@@ -69,6 +78,7 @@
 <script>
 export default {
   name: "SidebarNavigationItems",
+
   methods: {
     toReleaseNotes() {
       window.location.href = "https://github.com/tsoporan/fittrak/releases";
@@ -77,6 +87,13 @@ export default {
       // Allow server side routing to kick in and logout session
       window.location.replace("/accounts/logout/");
     }
+  },
+
+  props: {
+    viewer: {
+      type: Object,
+      required: true
+    }
   }
 };
 </script>

fittrak-client/src/components/exercises/ExerciseActions.vue

@@ -169,8 +169,6 @@ export default {
     addExercises() {
       const workout = this.workout;
 
-      console.log("WORKOUT", workout.id);
-
       if (!this.newExercises.length) {
         return;
       }

fittrak-client/src/components/sets/AddSet.vue

@@ -68,7 +68,12 @@ export default {
       const { exercise } = this.$props;
       const { repetitions, weight, unit, bodyweight } = this;
 
-      if (!(repetitions && weight && unit)) return;
+      // TODO: Proper validation
+      const requiredSet = repetitions && weight && unit;
+
+      if (!requiredSet) {
+        return;
+      }
 
       this.$apollo
         .mutate({

fittrak-client/src/components/settings/UserSettings.vue

@@ -48,8 +48,9 @@
         text-xs-right 
         mt-3>
         <v-btn 
-          flat
-          outline
+          dark
+          color="darkGrey"
+          depressed
           @click.stop="updateSettings"
         >Save</v-btn>
       </v-flex>

fittrak-client/src/components/workouts/CreateWorkout.vue

@@ -1,21 +1,18 @@
 <template>
-  <v-flex 
-    xs6 
-    text-xs-right>
+  <v-flex text-xs-right>
     <v-btn 
-      :loading="loading" 
-      large 
+      icon
+      dark
+      color="primaryDark"
       @click.stop="createWorkout" 
-      class="success">
-      Create Workout
+      :loading="loading" 
+    ><v-icon>add</v-icon>
     </v-btn>
-  </v-flex> 
+  </v-flex>
 </template>
 
 <script>
-import WorkoutsQuery from "@/graphql/queries/workouts.graphql";
-import CreateWorkoutMutation from "@/graphql/mutations/createWorkout.graphql";
-
+import { queries, mutations } from "@/graphql";
 import { showSnackbar } from "@/helpers";
 
 export default {
@@ -33,22 +30,24 @@ export default {
 
       this.$apollo
         .mutate({
-          mutation: CreateWorkoutMutation,
+          mutation: mutations.createWorkoutMutation
 
+          /*
           update: (store, { data }) => {
             const newWorkout = data.createWorkout.workout;
             const result = store.readQuery({
-              query: WorkoutsQuery
+              query: queries.workoutsQuery
             });
 
             // Prepend the latest workout
             result.workouts.unshift(newWorkout);
 
             store.writeQuery({
-              query: WorkoutsQuery,
+              query: queries.workoutsQuery,
               data: result
             });
           }
+          */
         })
         .then(resp => {
           const workout = resp.data.createWorkout.workout;