Health overview: Align styling with other pages & Fix styling issues

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
openhab · Jun 29, 2024 · e068bd6 · e068bd6
1 parent 264c110
commit e068bd6
Showing 1 changed file with 28 additions and 27 deletions.
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/health/health-overview.vue b/bundles/org.openhab.ui/web/src/pages/settings/health/health-overview.vue
@@ -1,29 +1,36 @@
 <template>
   <f7-page @page:afterin="onPageAfterIn">
-    <f7-navbar large :large-transparent="false" title-large="Health checks" title="Health checks" back-link="Back"
-               back-link-url="/settings/" back-link-force />
+    <f7-navbar title="Health checks" back-link="Settings" back-link-url="/settings/" back-link-force>
+      <f7-nav-right>
+        <developer-dock-icon />
+      </f7-nav-right>
+    </f7-navbar>
+
     <f7-block class="block-narrow">
-      <!-- TODO how to make content in this block algin left? -->
-      <f7-block-title medium>
-        Health checks
-      </f7-block-title>
-      <f7-block-footer>
-        This page provides information about potential issues with your openHAB
-        setup. It is recommended to fix these issues to ensure a stable and
-        reliable system.
-      </f7-block-footer>
+      <f7-col>
+        <f7-block-footer class="padding-horizontal">
+          This page provides information about potential issues with your openHAB setup.
+          <br>
+          It is recommended to fix these issues to ensure a stable and reliable system.
+        </f7-block-footer>
+      </f7-col>
     </f7-block>
 
     <f7-block class="block-narrow">
-      <f7-block-title>Health checks</f7-block-title>
-      <f7-list media-list class="col">
-        <f7-list-item media-item link="orphanlinks" title="Orphan Links"
-                      :badge="orphanLinksCount > 0 ? orphanLinksCount : undefined"
-                      :after="orphanLinksCount > 0 ? undefined : orphanLinksCount" :badge-color="orphanLinksCount ? 'red' : 'blue'"
-                      :footer="objectsSubtitles.orphanlinks">
-          <f7-icon slot="media" f7="link" color="gray" />
-        </f7-list-item>
-      </f7-list>
+      <f7-col>
+        <f7-list media-list>
+          <f7-list-item
+            media-item
+            link="orphanlinks/"
+            title="Orphan Links"
+            :badge="orphanLinksCount > 0 ? orphanLinksCount : undefined"
+            :after="orphanLinksCount > 0 ? undefined : orphanLinksCount"
+            :badge-color="orphanLinksCount ? 'red' : 'blue'"
+            :footer="objectsSubtitles.orphanLinks">
+            <f7-icon slot="media" f7="link" color="gray" />
+          </f7-list-item>
+        </f7-list>
+      </f7-col>
     </f7-block>
   </f7-page>
 </template>
@@ -33,7 +40,7 @@ export default {
   data () {
     return {
       objectsSubtitles: {
-        orphanlinks:
+        orphanLinks:
           'Items pointing to non-existent thing channels or vica versa'
       },
       orphanLinksCount: '',
@@ -54,19 +61,13 @@ export default {
     }
   },
   methods: {
-    sortByLabel (s1, s2) {
-      return s1.label.toLowerCase() > s2.label.toLowerCase() ? 1 : -1
-    },
     loadCounters () {
-      console.log('Hei')
       if (!this.apiEndpoints) return
-      console.log('På')
       if (this.$store.getters.apiEndpoint('links')) {
         this.$oh.api.get('/rest/links/orphans').then((data) => {
           this.orphanLinksCount = data.length.toString()
         })
       }
-      console.log('Deg')
     },
     onPageAfterIn () {
       this.loadCounters()