From fa17d18cc488918c2220ed64b8a4930841d74c4d Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Mon, 30 Aug 2021 19:39:07 +0300
Subject: [PATCH] feat(frontend): various tweaks

---
 packages/frontend/src/views/Frontend_re.vue   |  5 +++
 packages/frontend/src/views/Streams.vue       | 12 +++++--
 packages/frontend/src/views/admin/Admin.vue   |  2 +-
 .../frontend/src/views/stream/Details_re.vue  | 34 +++++++++++++------
 4 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/views/Frontend_re.vue b/packages/frontend/src/views/Frontend_re.vue
index 9e3169301..7a8daea65 100644
--- a/packages/frontend/src/views/Frontend_re.vue
+++ b/packages/frontend/src/views/Frontend_re.vue
@@ -326,6 +326,11 @@ export default {
       }
     }
   },
+  watch: {
+    $route(to, from) {
+      this.bottomSheet = false
+    }
+  },
   computed: {
     background() {
       let theme = this.$vuetify.theme.dark ? 'dark' : 'light'
diff --git a/packages/frontend/src/views/Streams.vue b/packages/frontend/src/views/Streams.vue
index 146d9d01c..2b63857a1 100644
--- a/packages/frontend/src/views/Streams.vue
+++ b/packages/frontend/src/views/Streams.vue
@@ -1,11 +1,17 @@
 <template>
-  <v-container :style="`${ !$vuetify.breakpoint.xsOnly ? 'padding-left: 56px' : ''}`"  fluid pt-4 pr-0>
+  <v-container
+    :class="`${$vuetify.breakpoint.xsOnly ? 'pl-2' : ''}`"
+    :style="`${!$vuetify.breakpoint.xsOnly ? 'padding-left: 56px' : ''}`"
+    fluid
+    pt-4
+    pr-0
+  >
     <v-navigation-drawer
       app
       fixed
       :permanent="streamNav && !$vuetify.breakpoint.smAndDown"
       v-model="streamNav"
-      :style="`${ !$vuetify.breakpoint.xsOnly ? 'left: 56px' : ''}`" 
+      :style="`${!$vuetify.breakpoint.xsOnly ? 'left: 56px' : ''}`"
     >
       <main-nav-actions :open-new-stream="newStreamDialog" />
 
@@ -70,7 +76,7 @@
       </div>
     </v-navigation-drawer>
 
-    <v-app-bar app :style="`${ !$vuetify.breakpoint.xsOnly ? 'padding-left: 56px' : ''}`" flat>
+    <v-app-bar app :style="`${!$vuetify.breakpoint.xsOnly ? 'padding-left: 56px' : ''}`" flat>
       <v-app-bar-nav-icon @click="streamNav = !streamNav"></v-app-bar-nav-icon>
       <v-toolbar-title class="space-grotesk pl-0">
         <v-icon class="mb-1 hidden-xs-only">mdi-folder</v-icon>
diff --git a/packages/frontend/src/views/admin/Admin.vue b/packages/frontend/src/views/admin/Admin.vue
index cc70bf0cc..eafae1114 100644
--- a/packages/frontend/src/views/admin/Admin.vue
+++ b/packages/frontend/src/views/admin/Admin.vue
@@ -4,7 +4,7 @@
     <v-skeleton-loader type="article"></v-skeleton-loader>
   </v-container>
 
-  <v-container v-else-if="isAdmin">
+  <v-container v-else-if="isAdmin" :class="`${$vuetify.breakpoint.xsOnly ? 'pl-0' : ''}`">
     <v-navigation-drawer
       app
       fixed
diff --git a/packages/frontend/src/views/stream/Details_re.vue b/packages/frontend/src/views/stream/Details_re.vue
index da5f3f243..d2839caff 100644
--- a/packages/frontend/src/views/stream/Details_re.vue
+++ b/packages/frontend/src/views/stream/Details_re.vue
@@ -1,14 +1,15 @@
 <template>
   <div>
     <portal to="streamTitleBar">
-      <span class="space-grotesk">Stream Home</span>
+      <div>
+        <span class="space-grotesk" v-if="stream">{{$vuetify.breakpoint.xsOnly ? stream.name : 'Stream Home'}}</span>
+      </div>
     </portal>
     <v-row v-if="stream && stream.commits.totalCount !== 0" no-gutters>
       <v-col cols="12" class="pa-0 ma-0">
         <div style="height: 50vh" v-if="latestCommitObjectUrl">
           <renderer :object-url="latestCommitObjectUrl" show-selection-helper />
         </div>
-
         <v-list class="pa-0 ma-0">
           <list-item-commit
             :commit="stream.commits.items[0]"
@@ -19,17 +20,29 @@
       </v-col>
       <v-col cols="12" class="" style="height: 40px"></v-col>
 
-      <v-col cols="12" :xl="loggedIn ? 4 : 12" class="pa-0 ma-0" :order="`${$vuetify.breakpoint.xlOnly ? 'last' : ''}`">
+      <v-col
+        cols="12"
+        :xl="loggedIn ? 4 : 12"
+        class="pa-0 ma-0"
+        :order="`${$vuetify.breakpoint.xlOnly ? 'last' : ''}`"
+      >
         <v-card class="transparent elevation-0">
           <v-toolbar class="transparent elevation-0">
             <v-toolbar-title>Latest Active Branches</v-toolbar-title>
             <v-spacer />
           </v-toolbar>
-          <v-card-title class="caption" style="margin-top: -30px;">
+          <v-card-title class="caption" style="margin-top: -30px">
             The stream's last three updated branches
           </v-card-title>
           <v-row class="pa-4 mt-1">
-            <v-col cols="12" sm="4" md="4" :xl="loggedIn ? 12 : 4" v-for="branch in latestBranches" :key="branch.name">
+            <v-col
+              cols="12"
+              sm="4"
+              md="4"
+              :xl="loggedIn ? 12 : 4"
+              v-for="branch in latestBranches"
+              :key="branch.name"
+            >
               <v-card :to="`/streams/${$route.params.streamId}/branches/${branch.name}`">
                 <preview-image
                   :height="120"
@@ -63,11 +76,9 @@
             <v-toolbar-title>Stream Feed</v-toolbar-title>
             <v-spacer />
           </v-toolbar>
-          <v-card-title class="caption" style="margin-top: -30px;">
-            Recent activity log
-          </v-card-title>
+          <v-card-title class="caption" style="margin-top: -30px">Recent activity log</v-card-title>
         </v-card>
-        <div style="margin-top:-42px">
+        <div style="margin-top: -42px">
           <stream-activity></stream-activity>
         </div>
       </v-col>
@@ -110,6 +121,7 @@ export default {
           stream(id: $id) {
             id
             isPublic
+            name
             branches {
               totalCount
               items {
@@ -244,7 +256,9 @@ export default {
       let branches = this.stream.branches.items
         .filter((br) => br.name !== 'globals' && br.commits.totalCount !== 0)
         .slice()
-        .sort((a, b) => new Date(b.commits.items[0].createdAt) - new Date(a.commits.items[0].createdAt))
+        .sort(
+          (a, b) => new Date(b.commits.items[0].createdAt) - new Date(a.commits.items[0].createdAt)
+        )
 
       return branches.slice(0, 3)
     },