Layout refresh

.gitignore

@@ -7,4 +7,5 @@
 *.sln
 *.sw?
 pti.code-workspace
-temporary-captain-to-deploy.tar
+temporary-captain-to-deploy.tar
+deploy.sh

web/src/components/MainDrawer.vue

@@ -2,30 +2,21 @@
   <v-navigation-drawer
     v-if="me"
     v-model="drawer"
-    :clipped="$vuetify.breakpoint.mdAndDown"
+    clipped
     :mini-variant="mini"
     :mini-variant-width="64"
-    :fixed="$vuetify.breakpoint.mdAndDown"
+    :right="$vuetify.breakpoint.mdAndDown"
-    :app="$vuetify.breakpoint.mdAndDown"
+    app
-    right
     @input="$emit('input', drawer)"
   >
     <template slot="prepend">
-      <v-img class="ma-4" src="../assets/logoTI.svg" height="48px" contain />
+      <div class="d-lg-none">
+        <v-img class="ma-4" src="../assets/logoTI.svg" height="48px" contain />
+        <div class="text-center title font-weight-light">Portal de TI</div>
+      </div>
     </template>
 
     <NavList :mini="mini" />
-
-    <template slot="append">
-      <v-list nav>
-        <v-list-item @click="mini = !mini">
-          <v-list-item-icon>
-            <v-icon v-if="mini">mdi-chevron-left</v-icon>
-            <v-icon v-else>mdi-chevron-right</v-icon>
-          </v-list-item-icon>
-        </v-list-item>
-      </v-list>
-    </template>
   </v-navigation-drawer>
 </template>
 

web/src/components/UserPresenceStatusList.vue

@@ -10,6 +10,7 @@
         :key="userPresence.user.id"
         cols="12"
         md="6"
+        lg="3"
       >
         <v-card outlined class="border-highlight">
           <v-list three-line>
@@ -63,7 +64,7 @@
   </div>
   <div v-else>
     <div class="d-flex flex-wrap">
-      <v-col v-for="i in 10" :key="i" cols="12" md="6">
+      <v-col v-for="i in 12" :key="i" cols="12" md="6" lg="3">
         <v-card outlined class="border-highlight">
           <v-list three-line>
             <v-list-item>
@@ -103,4 +104,5 @@ export default {
 <style scoped lang="sass">
 .border-highlight
   box-shadow: 1.5px 1.5px 12px rgba(0, 0, 0, 0.05)
+  border-left: 3px solid grey
 </style>

web/src/components/widgets/Widget.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card v-bind="$attrs" outlined class="fill-height">
+  <v-card v-bind="$attrs" outlined class="fill-height widged">
     <v-toolbar flat class="font-weight-light headline">
       <v-icon v-if="widgetIcon" left>{{ widgetIcon }}</v-icon>
       {{ title }}
@@ -26,4 +26,8 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.fill-height.v-card.v-sheet.v-sheet--outlined.theme--light {
+  box-shadow: 1.5px 1.5px 12px rgba(0, 0, 0, 0.05);
+}
+</style>

web/src/layouts/Default.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <v-app-bar app fixed elevate-on-scroll>
+    <v-app-bar app elevate-on-scroll clipped-left>
-      <v-container style="max-width: 1280px">
+      <v-container fluid>
         <v-row>
           <v-col v-if="$vuetify.breakpoint.lgAndUp">
             <v-toolbar-title>
@@ -25,23 +25,10 @@
       />
     </v-app-bar>
 
-    <MainDrawer v-if="$vuetify.breakpoint.mdAndDown" v-model="mainDrawer" />
     <v-main>
-      <v-container style="max-width: 1280px">
+      <MainDrawer v-model="mainDrawer" />
-        <v-row>
+      <v-container>
-          <v-col v-if="$vuetify.breakpoint.lgAndUp" cols="3">
+        <router-view />
-            <v-sheet>
-              <NavList />
-            </v-sheet>
-          </v-col>
-          <v-col cols="12" lg="9">
-            <v-sheet>
-              <v-slide-x-transition hide-on-leave>
-                <router-view />
-              </v-slide-x-transition>
-            </v-sheet>
-          </v-col>
-        </v-row>
       </v-container>
     </v-main>
   </div>
@@ -51,11 +38,10 @@
 import MainDrawer from '../components/MainDrawer'
 
 import UserMenu from '@/components/UserMenu'
-import NavList from '@/components/NavList'
 
 export default {
   name: 'Default',
-  components: { NavList, UserMenu, MainDrawer },
+  components: { UserMenu, MainDrawer },
   data: () => ({
     mainDrawer: true
   })

web/src/scss/style.scss

@@ -20,10 +20,10 @@
 //  );
 //}
 
-//.theme--light.v-application {
+// .theme--light.v-application {
-//  background: #f5f5f5;
+//   background: #f5f5f5;
-//}
+// }
 
-//.theme--dark.v-application {
+// .theme--dark.v-application {
-//  background: #313233;
+//   background: #313233;
-//}
+// }

web/src/views/Home.vue

@@ -1,13 +1,13 @@
 <template>
   <v-container class="home" fluid>
     <v-row>
-      <v-col>
+      <v-col cols="12" md="6">
         <UserInfoWidget />
       </v-col>
-      <v-col v-if="me && me.isTokenCreator">
+      <v-col v-if="me && me.isTokenCreator" cols="12" md="6">
         <TokenStatsWidget />
       </v-col>
-      <v-col>
+      <v-col cols="12" md="6" class="flex-grow-1">
         <DevicesWidget />
       </v-col>
     </v-row>

web/src/views/UserPresence.vue

@@ -9,6 +9,7 @@
       prepend-icon="mdi-account-search"
       clearable
       filled
+      style="max-width: 400px"
     />
 
     <div v-if="stats" class="text-center mb-6 mt-0">
@@ -34,21 +35,28 @@
       text
       large
       block
-      @click="resultSize += 10"
+      @click="resultSize += 12"
     >
       Mostrar mais
     </v-btn>
 
-    <v-alert class="mt-12" color="info" outlined dismissible icon="mdi-alert">
+    <v-row class="mt-6">
-      A lista de pessoas mostrada aqui é obtida através do uso da rede Wireless.
+      <v-col>
-      Este método não é preciso (podendo não indicar alguém presente ou
+        <v-alert class="fill-height" color="info" outlined icon="mdi-alert">
-      indicando alguém que deixou um dispositivo no campus). Use esta lista com
+          A lista de pessoas mostrada aqui é obtida através do uso da rede
-      a devida cautela.
+          Wireless. Este método não é preciso (podendo não indicar alguém
-    </v-alert>
+          presente ou indicando alguém que deixou um dispositivo no campus). Use
+          esta lista com a devida cautela.
+        </v-alert>
+      </v-col>
 
-    <v-alert color="accent" outlined dismissible icon="mdi-update">
+      <v-col>
-      A lista é atualizada automaticamente. Não é necessário atualizar a página.
+        <v-alert class="fill-height" color="accent" outlined icon="mdi-update">
-    </v-alert>
+          A lista é atualizada automaticamente. Não é necessário atualizar a
+          página.
+        </v-alert>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -61,7 +69,7 @@ export default {
   components: { UserPresenceStatusList },
   data: () => ({
     search: '',
-    resultSize: 10
+    resultSize: 12
   }),
   apollo: {
     userPresence: {

web/src/views/WifiDevices.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fluid>
-    <v-toolbar flat class="mb-2">
+    <v-toolbar flat class="mb-2 pt-3">
       <v-text-field
         v-model="search"
         prepend-inner-icon="mdi-cellphone"

web/src/views/WifiUsers.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fluid>
-    <v-toolbar flat class="mb-2">
+    <v-toolbar flat class="mb-2 pt-3">
       <v-text-field
         v-model="search"
         prepend-inner-icon="mdi-account"
@@ -77,8 +77,7 @@
               </template>
             </v-expansion-panel-header>
             <v-expansion-panel-content>
-              Dispositivos associados à este usuário:
+              <v-expansion-panels accordion>
-              <v-expansion-panels flat>
                 <v-expansion-panel
                   v-for="device in user.wifiDevices"
                   :key="device.mac"