diff --git a/package.json b/package.json
index 6165c5f..493b05a 100644
--- 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
index 2e9005a..280f911 100644
--- 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
index a9740b7..f3c28c0 100644
--- 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
index d151c15..76b818e 100644
--- 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,18 +21,10 @@ 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"
@@ -36,21 +32,11 @@ const props = defineProps({
: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
index 3b45cfb..7bcce3b 100644
--- 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
index 2c91774..4d01262 100644
--- 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
index 8da60e7..ddf3cac 100644
--- 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
index 238ce68..d088bc4 100644
--- 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
index 53f0b42..721f209 100644
--- 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
index bbf1f33..d62a51a 100644
--- 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);
diff --git a/src/views/FileEditView.vue b/src/views/FileEditView.vue
index 9c7d0c9..bc714a9 100644
--- a/src/views/FileEditView.vue
+++ b/src/views/FileEditView.vue
@@ -172,9 +172,9 @@ onUnmounted(() => {
<div
v-if="fileContent !== null && schemaMetaDetails.schema"
- :class="`bg-white ${!previewURL && 'px-12 py-8 non-preview-height'} d-block file-editor ${schemaMetaDetails.generic && 'file-editor-code'}`"
+ :class="`bg-white ${!previewURL && 'px-4 px-sm-12 py-4 py-sm-8 non-preview-height'} d-block file-editor ${schemaMetaDetails.generic && 'file-editor-code'}`"
>
- <v-row no-gutters :class="previewURL ? 'd-flex' : ''">
+ <v-row no-gutters :class="previewURL ? 'd-block d-sm-flex' : ''">
<v-col :cols="previewURL ? 3 : 12" class="overflow-x-auto">
<eox-jsonform
:schema="schemaMetaDetails.schema"
@@ -267,4 +267,10 @@ onUnmounted(() => {
.file-editor .with-preview {
width: 35vw;
}
+
+@media (max-width: 600px) {
+ .file-editor .v-col-3 {
+ max-width: 100vw;
+ }
+}
</style>