Responsive: Misc

assets/css/bootstrap/global.scss

@@ -4,3 +4,10 @@
 body {
   background: $body-bg-dark;
 }
+
+// Black Magic
+// https://stackoverflow.com/a/77722504
+body:has(dialog[open]),
+body:has(div.offcanvas.show) {
+  overflow: hidden;
+}

components/utils/ModalDialog.vue

@@ -94,6 +94,8 @@ dialog.modal-window {
   display: none;
   overflow: hidden;
 
+  overscroll-behavior: contain;
+
   &.show {
     position: fixed;
     display: flex;

components/utils/OffCanvas.vue

@@ -2,6 +2,7 @@
   <div
     class="offcanvas"
     :class="[{ show: props.show, hiding: !props.show }, positionClass]"
+    v-bind="$attrs"
   >
     <div v-if="props.header ?? true" class="offcanvas-header">
       <slot name="header" />
@@ -18,6 +19,11 @@
       <slot />
     </div>
   </div>
+  <div
+    v-if="show"
+    class="offcanvas-backdrop fade show"
+    @click="$emit('close')"
+  ></div>
 </template>
 
 <script setup lang="ts">

components/viewer/ViewMenuBar.vue

@@ -9,7 +9,7 @@
           @click="toggleProjectMenu()"
         />
       </div>
-      <ViewScoreStatus />
+      <ViewScoreStatus short />
       <div class="d-flex gap-1">
         <button
           class="btn btn-light btn-lg i-solar-magnifer-outline"
@@ -32,8 +32,14 @@ const { toggleBackpack, toggleSearch, toggleProjectMenu } = useViewerStore();
 </script>
 
 <style scoped lang="scss">
+@import '~/assets/css/bootstrap/config';
+
 .navbar {
   position: sticky;
   height: 40px;
 }
+
+body:has(.menu-modal.show) .navbar {
+  z-index: $zindex-offcanvas;
+}
 </style>

components/viewer/ViewProjectObj.vue

@@ -86,25 +86,30 @@ const {
   obj,
   preview = false,
   width = null,
+  forceWidth = null,
   alwaysEnable = false,
   template = null,
 } = defineProps<{
   row: ProjectRow;
   obj: ProjectObj;
   preview?: boolean;
   width?: string;
+  forceWidth?: string;
   alwaysEnable?: boolean;
   template?: string;
 }>();
 
 const objClass = computed(() => {
   if (preview) return ['obj-preview'];
-  if (width) return ['col', { [width]: true }];
+  if (forceWidth) return ['col', { [forceWidth]: true }];
 
   let objectSize = row.objectWidth;
   if (obj.objectWidth) {
     objectSize = obj.objectWidth;
   }
+  if (width) {
+    objectSize = width;
+  }
 
   if (objectSize in ObjectSizes) {
     const classes = ObjectSizes[objectSize];

components/viewer/ViewScoreStatus.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="d-flex gap-3" :class="{ 'flex-column': vertical }">
+  <div class="d-flex gap-2" :class="{ 'flex-column': vertical }">
     <span
       v-for="{ score, value } in activeScores"
       :key="score.id"
       class="d-flex score flex-row gap-2"
     >
-      <span v-if="score.beforeText && !short" class="d-none d-sm-block">
+      <span
+        v-if="score.beforeText"
+        :class="short ? ['d-none', 'd-sm-block'] : []"
+      >
         {{ score.beforeText }}
       </span>
       <span>{{ -value }}</span>
@@ -21,7 +24,7 @@ import { computed } from 'vue';
 import { PointType } from '~/composables/project';
 import { useProjectRefs } from '~/composables/store/project';
 
-const { vertical, short = true } = defineProps<{
+const { vertical, short = false } = defineProps<{
   vertical?: boolean;
   short?: boolean;
 }>();

components/viewer/modal/BackpackModal.vue

@@ -126,4 +126,10 @@ const packRows = computed(() => {
     flex-grow: 1;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .pack-import-export {
+    flex-direction: column;
+  }
+}
 </style>

components/viewer/modal/MenuModal.vue

@@ -45,6 +45,7 @@
       </div>
       <div v-if="selected === 'save-load'">
         <ImportCode />
+        <hr />
         <ExportCode />
       </div>
       <div v-if="selected === 'library'">
@@ -67,19 +68,6 @@ const selected = ref<string>('project');
 <style scoped lang="scss">
 @import '~/assets/css/bootstrap/config';
 
-.menu-modal {
-  margin-top: 40px;
-  max-width: 50%;
-  width: auto;
-}
-
-@media screen and (max-width: 768px) {
-  .menu-modal {
-    width: 100%;
-    max-width: 100%;
-  }
-}
-
 .pack-import-export {
   display: grid;
   gap: 0.5rem;
@@ -125,3 +113,17 @@ const selected = ref<string>('project');
   }
 }
 </style>
+
+<style lang="scss">
+.menu-modal {
+  margin-top: 40px;
+  width: 768px !important;
+}
+
+@media screen and (max-width: 768px) {
+  .menu-modal {
+    width: 100% !important;
+    max-width: 100%;
+  }
+}
+</style>

components/viewer/utils/ExportCode.vue

@@ -151,7 +151,7 @@ function copyExportText() {
   flex-direction: column;
   gap: 1rem;
 
-  min-width: 500px;
+  // min-width: 500px;
 
   .export-code,
   .export-text {

components/viewer/utils/ImportCode.vue

@@ -66,6 +66,6 @@ function readImportCode() {
   flex-direction: column;
   gap: 0.5rem;
 
-  min-width: 500px;
+  // min-width: 500px;
 }
 </style>