@7365admin1/layer-common 3.2.2-staging.87 → 3.2.2-staging.89

package/components/ClientMain.vue

@@ -643,12 +643,16 @@ onUnmounted(() => {
   gap: 12px;
   padding: 12px 0;
   background: transparent;
+  /* The title, the 260px search and the invite button do not fit a phone on
+     one line, and without this the whole page scrolled sideways. */
+  flex-wrap: wrap;
 }
 .topbar-right {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 12px;
+  flex-wrap: wrap;
 }
 .btn-invite {
   background: var(--card);
@@ -667,6 +671,7 @@ onUnmounted(() => {
 .search-wrap {
   position: relative;
   width: 260px;
+  max-width: 100%;
   flex-shrink: 0;
 }
 .search-input {
@@ -709,7 +714,14 @@ onUnmounted(() => {
 .filter-wrap {
   display: flex;
   gap: 10px;
-  flex-shrink: 0;
+  /* Three filters do not fit a phone beside the search box. `flex-shrink: 0`
+     kept this row at its 463px content width, so it never wrapped and the
+     whole page scrolled sideways at 360. */
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.filter-wrap > * {
+  max-width: 100%;
 }
 .filter-field {
   position: relative;

package/components/EntryPassMain.vue

@@ -38,7 +38,7 @@
               <div class="d-flex mt-3 pb-5 pr-5">
                 <p class="mr-6 font-weight-medium flex-grow-1">
                   NFC / QR Code Pass
-                  <span class="d-block text-caption text-grey-darken-1 mt-1">
+                  <span class="d-block text-caption screen-hint mt-1">
                     NFC Card Pass uses Near Field Communication (NFC) technology
                     to enable secure and convenient entry within ~4 cm proximity.
                   </span>
@@ -59,7 +59,7 @@
               <div class="mt-5 pb-5">
                 <p class="font-weight-medium mb-1">
                   Access Door / Lift
-                  <span class="d-block text-caption text-grey-darken-1 mt-1">
+                  <span class="d-block text-caption screen-hint mt-1">
                     Choose the access method(s) for door and lift control.
                     At least one method must be enabled.
                   </span>
@@ -190,7 +190,7 @@
               <div class="d-flex mt-3 pb-5">
                 <p class="font-weight-medium flex-grow-1">
                   Upload Access Cards Template
-                  <span class="d-block text-caption text-grey-darken-1 mt-1">
+                  <span class="d-block text-caption screen-hint mt-1">
                     <a
                       v-if="currentEntryPassSettings.template?.id"
                       href="#"

package/components/SiteSettings.vue

@@ -1,8 +1,13 @@
 <template>
   <v-row no-gutters>
-    <v-expansion-panels multiple v-model="openPanels">
+    <!--
+      The design draws settings as a stack of bordered sections with one open
+      at a time. `multiple` is BEHAVIOUR - which sections a user may have open
+      together - so it is left exactly as it was and only the drawing changes.
+    -->
+    <v-expansion-panels multiple v-model="openPanels" class="screen-accordion">
       <!-- SITE SETTINGS -->
-      <v-expansion-panel v-if="canManageSiteInformation" color="primary">
+      <v-expansion-panel v-if="canManageSiteInformation">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cog</v-icon>
           Site Information
@@ -22,7 +27,7 @@
                   <v-img v-if="coverPhotoUrl" :src="coverPhotoUrl" aspect-ratio="16/9" cover rounded="lg"
                     class="w-100 border" />
                   <div v-else
-                    class="w-100 d-flex align-center justify-center rounded-lg bg-grey-lighten-4 border border-dashed"
+                    class="w-100 d-flex align-center justify-center rounded-lg border border-dashed site-settings__placeholder"
                     style="aspect-ratio: 16/9">
                     <span class="text-caption text-medium-emphasis">No cover photo uploaded</span>
                   </div>
@@ -76,7 +81,7 @@
       </v-expansion-panel>
 
       <!-- ANPR CAMERA -->
-      <v-expansion-panel v-if="showAnprCamera && canManageANPRCamera" color="primary">
+      <v-expansion-panel v-if="showAnprCamera && canManageANPRCamera">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-camera</v-icon>
           ANPR Camera
@@ -118,7 +123,7 @@
       </v-expansion-panel>
 
       <!-- CCTV CAMERA -->
-      <v-expansion-panel v-if="showCctvCamera && canManageCCTVCamera" color="primary">
+      <v-expansion-panel v-if="showCctvCamera && canManageCCTVCamera">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cctv</v-icon>
           CCTV Camera
@@ -129,7 +134,7 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel v-if="showDeliveryCompanies && canManageDeliveryCompanies" color="primary">
+      <v-expansion-panel v-if="showDeliveryCompanies && canManageDeliveryCompanies">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-truck</v-icon>
           Delivery Companies
@@ -140,7 +145,7 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel v-if="showResidentVisitors && canManageResidentVisitors" color="primary">
+      <v-expansion-panel v-if="showResidentVisitors && canManageResidentVisitors">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-car</v-icon>
           Resident Visitors
@@ -150,7 +155,7 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel color="primary">
+      <v-expansion-panel>
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-face-recognition</v-icon>
           HID Face Reader
@@ -421,3 +426,11 @@ const saveANPRSettings = async () => {
   }
 };
 </script>
+
+<style scoped>
+/* Was `bg-grey-lighten-4`: a literal light grey, so the empty cover-photo tile
+   stayed a white slab on the dark page. */
+.site-settings__placeholder {
+  background: var(--thead);
+}
+</style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.87",
+  "version": "3.2.2-staging.89",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {