Settings pages: Fix x-overflow and large spaces on phone screens & Ch…

…ange icon for persistence config (#2248) Follow-up for #2229. Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
openhab · Dec 30, 2023 · bf2f257 · bf2f257
1 parent 2fe6ae9
commit bf2f257
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 29 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/config/config-sheet.vue b/bundles/org.openhab.ui/web/src/components/config/config-sheet.vue
@@ -50,7 +50,6 @@
 </template>
 
 <style lang="stylus">
-
 .config-sheet
   margin-left calc(-1*var(--f7-block-padding-horizontal))
   padding-left 0 !important
@@ -68,6 +67,9 @@
 
 .advanced-label
   cursor pointer
+
+.item-input-info
+    white-space normal
 </style>
 
 <script>

diff --git a/bundles/org.openhab.ui/web/src/css/app.styl b/bundles/org.openhab.ui/web/src/css/app.styl
@@ -188,6 +188,7 @@ html
 
 .block-narrow
   z-index auto
+  overflow-x hidden !important
 
 @media (min-width 1024px)
     .block-narrow

diff --git a/bundles/org.openhab.ui/web/src/pages/addons/addon-config.vue b/bundles/org.openhab.ui/web/src/pages/addons/addon-config.vue
@@ -8,14 +8,14 @@
         </f7-link>
       </f7-nav-right>
     </f7-navbar>
-    <f7-block v-if="type === 'persistence'" class="service-config block-narrow">
+    <f7-block v-if="type === 'persistence'" class="block-narrow">
       <f7-col>
-        <f7-button large fill color="blue" :href="'/settings/persistence/' + name">
+        <f7-button large fill color="blue" :href="'/settings/persistence/' + name" class="persistence-button">
           Configure Persistence Policies
         </f7-button>
       </f7-col>
     </f7-block>
-    <f7-block form v-if="configDescription && config" class="service-config block-narrow">
+    <f7-block form v-if="configDescription && config" class="block-narrow">
       <f7-col>
         <f7-block-title medium>
           Add-on configuration
@@ -26,7 +26,7 @@
           :configuration="config" />
       </f7-col>
     </f7-block>
-    <f7-block form v-if="loggerPackages.length > 0" class="service-config block-narrow">
+    <f7-block form v-if="loggerPackages.length > 0" class="block-narrow">
       <f7-col>
         <f7-block-title medium>
           Add-on log settings
@@ -62,6 +62,18 @@
   </f7-page>
 </template>
 
+<style lang="stylus">
+.config-sheet
+  .config-parameter
+    margin-top 0px
+    margin-bottom 0px
+
+.persistence-button
+  @media (max-width 1023px)
+    margin-left 16px
+    margin-right 16px
+</style>
+
 <script>
 import ConfigSheet from '@/components/config/config-sheet.vue'
 
@@ -151,9 +163,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus">
-.service-config
-  .item-input-info
-    white-space  normal
-</style>
diff --git a/bundles/org.openhab.ui/web/src/pages/addons/addons-list.vue b/bundles/org.openhab.ui/web/src/pages/addons/addons-list.vue
@@ -5,7 +5,7 @@
         <f7-link href="add">Add</f7-link>
       </f7-nav-right>-->
     </f7-navbar>
-    <f7-block form class="service-config block-narrow">
+    <f7-block form class="block-narrow">
       <f7-col>
         <f7-block-title v-if="!ready">
           Loading...
@@ -44,7 +44,7 @@
         </f7-list>
       </f7-col>
     </f7-block>
-    <f7-block form v-if="ready && !addons.length" class="service-config block-narrow">
+    <f7-block form v-if="ready && !addons.length" class="block-narrow">
       <empty-state-placeholder :icon="addonsIcons[addonType]" :title="'No ' + addonsLabels[addonType] + ' installed yet'" text="addons.text" />
     </f7-block>
     <f7-fab position="right-bottom" slot="fixed" color="blue" href="add">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
@@ -100,7 +100,7 @@
       </f7-col>
     </f7-block>
 
-    <f7-block v-if="ready && !items.length" class="service-config block-narrow">
+    <f7-block v-if="ready && !items.length" class="block-narrow">
       <empty-state-placeholder icon="square_on_circle" title="items.title" text="items.text" />
       <f7-row v-if="$f7.width < 1280" class="display-flex justify-content-center">
         <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list.vue
@@ -74,7 +74,7 @@
         </f7-list-group>
       </f7-list>
     </f7-block>
-    <!-- <f7-block v-if="!items.length" class="service-config block-narrow">
+    <!-- <f7-block v-if="!items.length" class="block-narrow">
       <f7-col>
         <f7-block strong>
           <p>No items.</p>

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/menu/settings-menu.vue
@@ -78,7 +78,7 @@
               title="Persistence"
               badge-color="blue"
               :footer="objectsSubtitles.persistence">
-              <f7-icon slot="media" f7="tray-arrow-down" color="gray" />
+              <f7-icon slot="media" f7="download_circle" color="gray" />
             </f7-list-item>
           </f7-list>
           <f7-block-title v-if="$store.getters.apiEndpoint('rules')">

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-settings.vue b/bundles/org.openhab.ui/web/src/pages/settings/persistence/persistence-settings.vue
@@ -26,7 +26,7 @@
         <f7-block-title medium>
           Configure Persistence Policies
         </f7-block-title>
-        <f7-list style="margin-top: 15px">
+        <f7-list>
           <f7-list-item
             v-for="persistence in persistenceList"
             media-item
@@ -41,7 +41,7 @@
       </f7-col>
     </f7-block>
 
-    <f7-block v-if="ready && !persistenceList.length" class="service-config block-narrow">
+    <f7-block v-if="ready && !persistenceList.length" class="block-narrow">
       <empty-state-placeholder icon="tray-arrow-down" title="persistence.title" text="persistence.text" />
       <f7-row class="display-flex justify-content-center">
         <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
@@ -54,6 +54,13 @@
   </f7-page>
 </template>
 
+<style lang="stylus">
+.config-sheet
+  .config-parameter
+    margin-top 0px
+    margin-bottom 0px
+</style>
+
 <script>
 import DirtyMixin from '../dirty-mixin'
 import ConfigSheet from '@/components/config/config-sheet.vue'

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -132,7 +132,7 @@
       </f7-col>
     </f7-block>
 
-    <f7-block v-if="ready && !noRuleEngine && !rules.length" class="service-config block-narrow">
+    <f7-block v-if="ready && !noRuleEngine && !rules.length" class="block-narrow">
       <empty-state-placeholder v-if="showScripts" icon="doc_plaintext" title="scripts.title" text="scripts.text" />
       <empty-state-placeholder v-else-if="showScenes" icon="film" title="scenes.title" text="scenes.text" />
       <empty-state-placeholder v-else icon="wand_stars" title="rules.title" text="rules.text" />

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/services/service-settings.vue b/bundles/org.openhab.ui/web/src/pages/settings/services/service-settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" class="service-config">
+  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
     <f7-navbar :title="service.label" back-link="Settings">
       <f7-nav-right>
         <f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only />
@@ -8,7 +8,7 @@
         </f7-link>
       </f7-nav-right>
     </f7-navbar>
-    <f7-block form v-if="configDescriptions && config" class="service-config block-narrow">
+    <f7-block form v-if="configDescriptions && config" class="block-narrow">
       <f7-col>
         <config-sheet
           :parameter-groups="configDescriptions.parameterGroups"
@@ -20,13 +20,6 @@
   </f7-page>
 </template>
 
-<style lang="stylus">
-.service-config
-  overflow-x hidden !important
-  .item-input-info
-    white-space normal
-</style>
-
 <script>
 import ConfigSheet from '@/components/config/config-sheet.vue'
 import DirtyMixin from '../dirty-mixin'

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
@@ -104,7 +104,7 @@
       </f7-col>
     </f7-block>
 
-    <f7-block v-if="ready && !transformations.length" class="service-config block-narrow">
+    <f7-block v-if="ready && !transformations.length" class="block-narrow">
       <empty-state-placeholder icon="arrow_2_squarepath" title="transformations.title" text="transformations.text" />
       <f7-row v-if="$f7.width < 1280" class="display-flex justify-content-center">
         <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />