[ui] Improve the mobile view of the dashboard

This commit improves the mobile UI of sortinghat dashboard. It fixes the issues of the content overflowing. Signed-off-by: Sourabh Saraswat <[email protected]>
chaoss · Apr 28, 2021 · 1012c1e · 1012c1e
1 parent 2f3796b
commit 1012c1e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/ui/src/components/IndividualEntry.vue b/ui/src/components/IndividualEntry.vue
@@ -85,7 +85,7 @@
       </v-list-item>
     </td>
 
-    <td class="text-center">
+    <td class="d-none d-sm-none d-md-table-cell text-center">
       <span v-if="isLocked" class="mr-7">{{ email }}</span>
       <v-edit-dialog v-else @save="$emit('edit', { email: form.email })">
         {{ email }}
@@ -103,7 +103,7 @@
       </v-edit-dialog>
     </td>
 
-    <td class="text-right">
+    <td class="d-none d-sm-table-cell text-right">
       <v-tooltip
         v-for="(source, index) in sources"
         :key="index"
@@ -294,6 +294,7 @@ export default {
 }
 .v-list-item__title {
   text-overflow: inherit;
+  width: 100px;
 }
 .aligned {
   margin-bottom: 4px;
@@ -331,4 +332,5 @@ tr {
     }
   }
 }
+
 </style>
diff --git a/ui/src/components/WorkSpace.vue b/ui/src/components/WorkSpace.vue
@@ -8,7 +8,7 @@
     @dragenter.prevent="onDrag($event)"
     @dragleave.prevent="isDragging = false"
   >
-    <v-row class="ma-md-0 pt-md-4 pl-md-4 pr-md-4 justify-space-between">
+    <v-row class="ma-md-0 pt-md-4 pl-md-4 pr-md-4 ml-0 mr-0 justify-space-between">
       <h3 class="title">
         <v-icon color="black" left>
           mdi-pin
@@ -47,7 +47,7 @@
     <v-row
       v-if="savedIndividuals.length >= 1"
       dense
-      class="pa-md-4 ma-md-0 drag-zone"
+      class="pa-md-4 ma-md-0 ml-0 mr-0 drag-zone"
     >
       <v-col
         v-for="individual in savedIndividuals"

diff --git a/ui/src/views/Dashboard.vue b/ui/src/views/Dashboard.vue
@@ -283,6 +283,10 @@ export default {
 .row {
   justify-content: space-between;
   margin: 32px;
+
+  @media (max-width: 960px) {
+    margin: 0;
+  }
 }
 .individuals {
   width: 70%;
@@ -299,9 +303,17 @@ export default {
 
   @media (max-width: 960px) {
     max-width: 100%;
+    min-width: 100%;
     margin: 32px 0 0 0;
   }
 }
+
+.container{
+  @media (max-width: 960px) {
+   padding: 0;
+  }
+}
+
 h4 {
   padding: 12px 26px;
 }