feat: added major css changes for mobile

EOX-A · Nov 22, 2024 · d2498c2 · d2498c2
1 parent 32f0676
commit d2498c2
Show file tree

Hide file tree

Showing 11 changed files with 187 additions and 64 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "start": "vite --host",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --fix",

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -56,3 +56,14 @@ html {
   height: 20px;
   margin-top: 3px;
 }
+
+@media (max-width: 600px) {
+  .sessions-view.v-list-item--density-default:not(
+      .v-list-item--nav
+    ).v-list-item--one-line,
+  .files-view.v-list-item--density-default:not(
+      .v-list-item--nav
+    ).v-list-item--one-line {
+    padding-inline: 0px;
+  }
+}
diff --git a/src/components/file/ActionTabFileEditor.vue b/src/components/file/ActionTabFileEditor.vue
@@ -24,7 +24,9 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="bg-secondary px-5 py-3 d-flex align-center ga-1 action-tab">
+  <div
+    class="bg-secondary px-0 px-sm-5 py-3 d-flex align-center ga-1 action-tab"
+  >
     <v-btn
       :href="file.html_url"
       target="_blank"

diff --git a/src/components/file/ActionTabFileList.vue b/src/components/file/ActionTabFileList.vue
@@ -1,5 +1,9 @@
 <script setup>
-import { DeleteSession, ReviewSession } from "@/components/session/index.js";
+import {
+  DeleteSession,
+  ReviewSession,
+  GithubSession,
+} from "@/components/session/index.js";
 import { defineProps, inject } from "vue";
 import OctIcon from "@/components/global/OctIcon.vue";
 
@@ -17,40 +21,22 @@ const props = defineProps({
 <template>
   <div
     v-if="session"
-    class="bg-secondary px-5 py-4 d-flex align-center ga-1 action-tab"
+    class="bg-secondary px-0 px-sm-5 py-4 d-flex align-center ga-1 action-tab"
+    :class="{ 'flex-row-reverse': $vuetify?.display?.smAndDown }"
   >
-    <v-btn
-      :href="props.session.html_url"
-      target="_blank"
-      color="blue-grey-darken-4"
-      prepend-icon="mdi-github"
-      size="x-large"
-      variant="text"
-      text="Github"
-      class="text-capitalize font-weight-medium"
-    ></v-btn>
+    <GithubSession :url="props.session.html_url" tab size="x-large" />
     <DeleteSession
       tab
       size="x-large"
       :session="props.session"
       :snackbar="snackbar"
       :callBack="props.updateDetails"
     />
-    <!--    TODO: Add later-->
-    <!--    <v-btn-->
-    <!--      target="_blank"-->
-    <!--      color="blue-grey-darken-4"-->
-    <!--      prepend-icon="mdi-monitor-eye"-->
-    <!--      size="x-large"-->
-    <!--      variant="text"-->
-    <!--      text="Preview"-->
-    <!--      class="text-capitalize font-weight-medium"-->
-    <!--      disabled-->
-    <!--    ></v-btn>-->
     <v-divider
       v-if="props.session.state !== 'closed'"
       inset
       vertical
+      class="d-none d-sm-flex"
     ></v-divider>
     <v-btn
       v-if="!props.session.draft && props.session.state !== 'closed'"
@@ -60,7 +46,7 @@ const props = defineProps({
       size="x-large"
       variant="flat"
       text="Pending Review"
-      class="text-capitalize font-weight-medium ml-5"
+      class="text-capitalize font-weight-medium ml-5 d-none d-sm-flex"
       disabled
     ></v-btn>
     <ReviewSession
@@ -69,6 +55,7 @@ const props = defineProps({
         props.session.check &&
         props.session.state !== 'closed'
       "
+      tab
       text="Submit for Review"
       size="x-large"
       color="blue-grey-lighten-4"

diff --git a/src/components/global/ListPlaceholder.vue b/src/components/global/ListPlaceholder.vue
@@ -47,12 +47,11 @@ const props = defineProps({
     </template>
     <template v-slot:append>
       <v-skeleton-loader
-        v-if="props.button"
         v-for="a in props.button"
         :key="a"
         width="24"
         type="heading"
-        class="mx-3"
+        :class="`mx-3 ${a > 1 ? 'd-none d-sm-flex' : ''}`"
       ></v-skeleton-loader>
     </template>
   </v-list-item>

diff --git a/src/components/global/Navbar.vue b/src/components/global/Navbar.vue
@@ -6,7 +6,7 @@ const navPaginationItems = inject("set-nav-pagination-items");
 </script>
 <template>
   <v-app-bar class="navbar" color="primary" app>
-    <v-toolbar-title>
+    <v-toolbar-title class="toolbar-title">
       <v-breadcrumbs :items="navPaginationItems">
         <template v-slot:divider>
           <v-icon icon="mdi-chevron-right"></v-icon>
@@ -38,4 +38,15 @@ const navPaginationItems = inject("set-nav-pagination-items");
 .navbar .button-nav {
   margin-right: 20px;
 }
+.toolbar-title {
+  margin-inline-start: 20px;
+}
+@media (max-width: 600px) {
+  .navbar .button-nav {
+    margin-right: 8px;
+  }
+  .navbar .v-toolbar__content > .v-toolbar-title {
+    margin-inline-start: 8px;
+  }
+}
 </style>
diff --git a/src/components/session/Delete.vue b/src/components/session/Delete.vue
@@ -40,26 +40,54 @@ const disabled = props.session.state === "closed";
 </script>
 
 <template>
-  <Tooltip text="Delete Session">
+  <!-- Tab = true -->
+  <!-- Mobile -->
+  <v-btn
+    v-if="tab"
+    color="blue-grey-darken-4"
+    icon="mdi-delete-outline"
+    :size="size"
+    variant="text"
+    :disabled="disabled"
+    @click="deleteSession = session"
+    class="d-flex d-sm-none"
+  ></v-btn>
+  <!-- Non-mobile -->
+  <v-btn
+    v-if="tab"
+    color="blue-grey-darken-4"
+    prepend-icon="mdi-delete-outline"
+    :size="size"
+    :text="text"
+    variant="text"
+    :disabled="disabled"
+    @click="deleteSession = session"
+    class="text-capitalize font-weight-medium d-none d-sm-flex"
+  ></v-btn>
+
+  <!-- Tab = false -->
+  <!-- Mobile -->
+  <v-list-item
+    v-if="!tab"
+    @click="deleteSession = session"
+    prepend-icon="mdi-delete-outline"
+    :title="props.text"
+    :disabled="disabled"
+    class="d-flex d-sm-none"
+  ></v-list-item>
+  <!-- Non-mobile -->
+  <Tooltip :text="props.text">
     <v-btn
+      v-if="!tab"
       color="blue-grey-darken-4"
-      :icon="tab ? false : 'mdi-delete-outline'"
-      prepend-icon="mdi-delete-outline"
+      icon="mdi-delete-outline"
       :size="size"
-      :text="text"
       variant="text"
       :disabled="disabled"
       @click="deleteSession = session"
-      class="text-capitalize font-weight-medium d-none d-sm-flex"
+      class="d-none d-sm-flex"
     ></v-btn>
   </Tooltip>
-  <v-list-item
-    @click="deleteSession = session"
-    prepend-icon="mdi-delete-outline"
-    :title="props.text"
-    :disabled="disabled"
-    class="d-flex d-sm-none"
-  ></v-list-item>
 
   <v-dialog v-model="deleteSession" width="auto">
     <v-card max-width="400" prepend-icon="mdi-alert" title="Delete Session">

diff --git a/src/components/session/Github.vue b/src/components/session/Github.vue
@@ -1,29 +1,75 @@
+<script setup>
+import { defineProps } from "vue";
+import Tooltip from "@/components/global/Tooltip.vue";
+
+const props = defineProps({
+  url: String,
+  tab: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: "large",
+  },
+  text: {
+    type: String,
+    default: "Github",
+  },
+  tooltip: {
+    type: String,
+    default: "Open in Github",
+  },
+});
+</script>
+
 <template>
-  <Tooltip text="Open in Github">
+  <!-- Tab = true -->
+  <!-- Mobile -->
+  <v-btn
+    v-if="tab"
+    :href="url"
+    target="_blank"
+    color="blue-grey-darken-4"
+    icon="mdi-github"
+    :size="size"
+    variant="text"
+    class="d-flex d-sm-none"
+  ></v-btn>
+  <!-- Non-mobile -->
+  <v-btn
+    v-if="tab"
+    :href="url"
+    target="_blank"
+    color="blue-grey-darken-4"
+    prepend-icon="mdi-github"
+    :size="size"
+    :text="text"
+    variant="text"
+    class="text-capitalize font-weight-medium d-none d-sm-flex"
+  ></v-btn>
+
+  <!-- Tab = false -->
+  <!-- Mobile -->
+  <v-list-item
+    v-if="!tab"
+    :href="url"
+    target="_blank"
+    prepend-icon="mdi-github"
+    :title="props.tooltip"
+    class="d-flex d-sm-none"
+  ></v-list-item>
+  <!-- Non-mobile -->
+  <Tooltip :text="props.tooltip">
     <v-btn
+      v-if="!tab"
       :href="url"
       target="_blank"
       color="blue-grey-darken-4"
       icon="mdi-github"
-      size="large"
+      :size="size"
       variant="text"
       class="d-none d-sm-flex"
     ></v-btn>
   </Tooltip>
-  <v-list-item
-    :href="url"
-    target="_blank"
-    prepend-icon="mdi-github"
-    title="Open in Github"
-    class="d-flex d-sm-none"
-  ></v-list-item>
 </template>
-
-<script setup>
-import { defineProps } from "vue";
-import Tooltip from "@/components/global/Tooltip.vue";
-
-const props = defineProps({
-  url: String,
-});
-</script>
diff --git a/src/components/session/Review.vue b/src/components/session/Review.vue
@@ -23,13 +23,21 @@ const props = defineProps({
   },
   text: {
     type: String,
-    default: "",
+    default: "Submit for Review",
   },
   variant: {
     type: String,
     default: "text",
   },
   callBack: Function,
+  tab: {
+    type: Boolean,
+    default: false,
+  },
+  tooltip: {
+    type: String,
+    default: "Request Review",
+  },
 });
 const snackbar = inject("set-snackbar");
 const reviewSession = ref(false);
@@ -62,12 +70,12 @@ const disabled =
     :text="
       error
         ? `${props.session.check.tooltip}: Cannot request for review`
-        : `Request Review`
+        : props.tooltip
     "
   >
     <v-btn
       :color="props.color"
-      :icon="props.text ? false : 'mdi-file-document-edit'"
+      :icon="props.tab ? false : 'mdi-file-document-edit'"
       prepend-icon="mdi-file-document-edit"
       :size="props.size"
       :text="props.text"
@@ -84,13 +92,30 @@ const disabled =
       </template>
     </v-btn>
   </Tooltip>
+
+  <!-- Tab = false -->
+  <!-- Mobile -->
   <v-list-item
+    v-if="!props.tab"
     @click="reviewSession = props.session"
     prepend-icon="mdi-file-document-edit"
     :title="props.text"
     :disabled="disabled"
     class="d-flex d-sm-none"
   ></v-list-item>
+  <!-- Non-mobile -->
+  <Tooltip :text="props.tooltip">
+    <v-btn
+      v-if="!props.tab"
+      @click="reviewSession = props.session"
+      color="blue-grey-darken-4"
+      icon="mdi-file-document-edit"
+      :size="props.size"
+      variant="text"
+      :disabled="disabled"
+      class="d-none d-sm-flex"
+    ></v-btn>
+  </Tooltip>
 
   <v-dialog v-model="reviewSession" width="auto">
     <v-card

diff --git a/src/methods/file-edit-view/init-eox-jsonform.js b/src/methods/file-edit-view/init-eox-jsonform.js
@@ -152,6 +152,14 @@ export function initEOXJSONFormMethod(
     .editor-statusbar {
       display: none;
     }
+    @media (max-width: 600px) {
+      .je-textarea {
+        height: calc(100vh - 195px) !important;
+      }
+      .je-indented-panel > div > div:not(.je-child-editor-holder):not(.je-child-editor-holder *) {
+        display: block !important;
+      }
+    }
   `;
 
   shadowRoot.appendChild(style);