Consistent navigation

backend/module/eCampApi/src/eCampApi/V1/Rpc/Auth/AuthController.php

@@ -57,9 +57,11 @@ public function indexAction() {
         }
         if ($user != null) {
             $data['user'] = $user->getDisplayName();
+            $data['username'] = $user->getUsername();
             $data['role'] = $user->getRole();
         } else {
             $data['user'] = 'guest';
+            $data['username'] = 'guest';
             $data['role'] = 'guest';
         }
 

backend/module/eCampApi/src/eCampApi/V1/Rpc/Index/IndexController.php

@@ -37,6 +37,14 @@ public function indexAction() {
         }
         if ($user != null) {
             $data['user'] = $user->getDisplayName();
+
+            $data['profile'] = Link::factory([
+                'rel' => 'profile',
+                'route' => [
+                    'name' => 'e-camp-api.rest.doctrine.user',
+                    'params' => [ 'user_id' => $userId ]
+                ]
+            ]);
         } else {
             $data['user'] = 'guest';
         }

frontend/src/App.vue

@@ -1,25 +1,132 @@
-
 <template>
-  <div id="app">
-    <component :is="layout">
+  <v-app>
+    <router-view name="topbar" />
+
+    <router-view name="aside" />
+
+    <!-- main content -->
+    <v-content>
       <router-view />
-    </component>
-  </div>
+    </v-content>
+
+    <router-view name="bottombar" />
+
+    <!-- footer -->
+    <v-footer v-if="$vuetify.breakpoint.mdAndUp"
+              app color="grey lighten-5">
+      eCamp v0.1.0
+    </v-footer>
+  </v-app>
 </template>
 
 <script>
-const defaultLayout = 'default'
-
 export default {
-  name: 'App',
-  computed: {
-    layout () {
-      return (this.$route.meta.layout || defaultLayout) + '-layout'
-    }
-  }
+  name: 'App'
 }
 </script>
 <style lang="scss">
+  @import "src/scss/global";
   // consider replacing with CDN for production
   @import '../node_modules/@mdi/font/css/materialdesignicons.css';
+
+  .v-navigation-drawer--temporary.v-navigation-drawer--clipped {
+    z-index: 5;
+    margin-top: 116px;
+  }
+
+  .v-btn.ec-drawer-collapse {
+    right: 0;
+  }
+
+  .v-content {
+    height: 100vh;
+    position: relative;
+  }
+
+  .v-app-bar .v-toolbar__content {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+
+  .v-content__wrap {
+    overflow: scroll;
+    position: static;
+  }
+
+  .user-nav {
+    border-top-left-radius: 0!important;
+    border-top-right-radius: 0!important;
+  }
+
+  .v-navigation-drawer--temporary.v-navigation-drawer--clipped {
+    z-index: 5;
+    margin-top: 116px;
+  }
+
+  .v-btn--open {
+    background: #B0BEC5 !important;
+    color: rgba(0, 0, 0, 0.87) !important;
+  }
+
+  .ec-usermenu {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    right: 0;
+    left: inherit !important;
+
+    .v-list {
+      border-radius: 0;
+    }
+  }
+
+  .v-app-bar .v-toolbar__content {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+
+  .v-navigation-drawer__content .v-card {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+  }
+
+  @media #{map-get($display-breakpoints, 'xs-only')}{
+    .v-content .container {
+      min-height: 100%;
+      display: flex;
+
+      .v-card {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        flex: auto;
+      }
+    }
+  }
+
+  .ec-menu-left {
+    left: 0 !important;
+    font-feature-settings: 'tnum';
+  }
+
+  @media #{map-get($display-breakpoints, 'sm-and-down')}{
+    .container.container--fluid {
+      padding: 0;
+
+      & > .v-card {
+        border-radius: 0;
+      }
+    }
+    .sr-only-sm-and-down {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      clip-path: inset(50%);
+      border: 0;
+    }
+  }
 </style>

frontend/src/components/base/BackButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-btn aria-label="Zurück"
+         icon @click="$router.go(-1)">
+    <v-icon>mdi-arrow-left</v-icon>
+  </v-btn>
+</template>
+
+<script>
+export default {
+  name: 'BackButton'
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/base/ButtonAdd.vue

@@ -1,9 +1,10 @@
 <template>
   <v-btn
-    small
+    class="px-3 px-sm-4"
+    min-width="0"
     color="success"
     v-on="$listeners">
-    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">mdi-plus</v-icon>
+    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">{{ icon }}</v-icon>
     <span class="d-none d-sm-block">
       <slot>Add</slot>
     </span>
@@ -12,7 +13,10 @@
 
 <script>
 export default {
-  name: 'ButtonAdd'
+  name: 'ButtonAdd',
+  props: {
+    icon: { type: String, default: 'mdi-plus' }
+  }
 }
 </script>
 

frontend/src/components/base/ButtonDelete.vue

@@ -1,9 +1,10 @@
 <template>
   <v-btn
-    small
+    class="px-3 px-sm-4"
+    min-width="0"
     color="error"
     v-on="$listeners">
-    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">mdi-delete</v-icon>
+    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">{{ icon }}</v-icon>
     <span class="d-none d-sm-block">
       <slot>Delete</slot>
     </span>
@@ -12,7 +13,10 @@
 
 <script>
 export default {
-  name: 'ButtonDelete'
+  name: 'ButtonDelete',
+  props: {
+    icon: { type: String, default: 'mdi-delete' }
+  }
 }
 </script>
 

frontend/src/components/base/ButtonEdit.vue

@@ -1,9 +1,9 @@
 <template>
   <v-btn
-    small
+    class="px-3 px-sm-4"
     color="primary"
     v-on="$listeners">
-    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">mdi-pencil</v-icon>
+    <v-icon :left="$vuetify.breakpoint.smAndUp" size="150%">{{ icon }}</v-icon>
     <span class="d-none d-sm-block">
       <slot>Edit</slot>
     </span>
@@ -12,7 +12,10 @@
 
 <script>
 export default {
-  name: 'ButtonEdit'
+  name: 'ButtonEdit',
+  props: {
+    icon: { type: String, default: 'mdi-pencil' }
+  }
 }
 </script>
 

frontend/src/components/base/ContentCard.vue

@@ -3,34 +3,37 @@ Displays the content wrapped inside a card.
 -->
 
 <template>
-  <v-card class="mb-4">
-    <v-toolbar dense color="blue-grey lighten-5">
-      <v-icon left>
-        {{ icon }}
-      </v-icon>
-      <v-toolbar-title>
+  <v-card :max-width="maxWidth" class="mx-auto">
+    <slot name="title">
+      <v-card-title v-if="title">
+        <v-icon v-if="icon" left>{{ icon }}</v-icon>
         {{ title }}
-      </v-toolbar-title>
-    </v-toolbar>
-    <v-card-text>
-      <slot />
-    </v-card-text>
+      </v-card-title>
+    </slot>
+    <v-skeleton-loader v-if="!loaded" type="article" />
+    <slot v-else />
   </v-card>
 </template>
 
 <script>
 export default {
   name: 'ContentCard',
   props: {
-    icon: { type: String, required: true },
-    title: { type: String, required: true }
-  },
-  data () {
-    return {
-    }
+    loaded: { type: Boolean, required: false, default: true },
+    title: { type: String, required: false, default: '' },
+    icon: { type: String, required: false, default: '' },
+    maxWidth: { type: String, default: '' }
   }
 }
 </script>
 
 <style scoped>
+  .v-toolbar {
+    border-bottom: 1px solid;
+  }
+  .v-card__title {font-weight: 600;}
+
+  .static {
+    position: static;
+  }
 </style>

frontend/src/components/base/ContentGroup.vue

@@ -0,0 +1,34 @@
+<!--
+Displays the content wrapped inside a card.
+-->
+
+<template>
+  <v-sheet class="ec-content-group mb-8">
+    <slot name="title">
+      <div v-if="title" class="ec-content-group__title py-1 subtitle-1">
+        <v-icon v-if="icon" left>{{ icon }}</v-icon>
+        {{ title }}
+      </div>
+    </slot>
+    <v-skeleton-loader v-if="!loaded" type="article" />
+    <slot v-else />
+  </v-sheet>
+</template>
+
+<script>
+export default {
+  name: 'ContentGroup',
+  props: {
+    loaded: { type: Boolean, required: false, default: true },
+    title: { type: String, required: false, default: '' },
+    icon: { type: String, required: false, default: '' },
+    maxWidth: { type: String, default: '' }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .ec-content-group__title {
+    border-bottom: 1px solid map-get($blue-grey, 'lighten-4');
+  }
+</style>

frontend/src/components/base/Logo.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-toolbar-items>
+    <v-btn text class="px-2"
+           min-width="0" rounded
+           exact :to="{ name: 'home'}">
+      <v-toolbar-title>
+        <i>🏕</i>️<span v-if="text" class="ml-4 mr-2">eCamp</span>
+      </v-toolbar-title>
+    </v-btn>
+    <slot />
+  </v-toolbar-items>
+</template>
+
+<script>
+import { campRoute } from '@/router'
+
+export default {
+  name: 'Logo',
+  props: {
+    text: { type: Boolean, default: false }
+  },
+  computed: {
+    campHome () {
+      return this.camp ? campRoute(this.camp, 'overview') : false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>