Fixed responsive behaviour

DroneDB · Nov 1, 2021 · 5f40d9c · 5f40d9c
1 parent ee99b08
commit 5f40d9c
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/webapp/js/components/Header.vue b/webapp/js/components/Header.vue
@@ -28,14 +28,14 @@
             </div>
         </Alert>
 
-        <button @click="storageInfoDialogOpen = true" v-if="loggedIn && storageInfo && storageInfo.total != null" class="ui button basic circular" 
+        <button @click="storageInfoDialogOpen = true" v-if="loggedIn && storageInfo && storageInfo.total != null" class="ui button basic circular mobile hide" 
             v-bind:class="{ 'red': storageInfo.usedPercentage >= 1, 
                     'yellow' : storageInfo.usedPercentage >= 0.75 && storageInfo.usedPercentage < 1,
                      'grey' : storageInfo.usedPercentage < 0.75 }">
             <i class="icon hdd outline"></i>&nbsp;{{storageInfo.usedPercentage | percent(2) }}
         </button>
 
-        <button v-if="loggedIn && storageInfo && storageInfo.total == null"  class="ui button basic circular">
+        <button v-if="loggedIn && storageInfo && storageInfo.total == null"  class="ui button basic circular mobile hide">
             <i class="icon hdd outline"></i>&nbsp;{{storageInfo.used | bytes }}
         </button>
 
@@ -56,8 +56,11 @@
                 <div class="divider"></div>
                 <div class="item" @click="uploadFiles" ><i class="icon cloud upload"></i> Upload Files</div>
                 <div class="item" @click="myDatasets"><i class="icon database"></i> My Datasets</div>
+                <div class="divider mobile only" v-if="storageInfo"></div>
+                <div class="item mobile only" @click="storageInfoDialogOpen = true" v-if="storageInfo && storageInfo.total != null"><i class="icon hdd outline"></i>&nbsp;{{storageInfo.usedPercentage | percent(2) }}</div>
+                <div class="item mobile only" v-if="storageInfo && storageInfo.total == null"><i class="icon hdd outline"></i>&nbsp;{{storageInfo.used | bytes }}</div>
                 <div class="divider"></div>
-                <div class="item" @click="logout" >Logout</div>
+                <div class="item" @click="logout" ><i class="icon sign-out"></i> Logout</div>
             </div>
         </div>
     </div>