Weather status: Fix small design issues

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index fa9b481e54e6ca110b70632655ddcec29fb801a3..d8f9406631d6b79ffe173b03e4a4fb92050c4a14 100644 (file)
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -1,13 +1,13 @@
 <template>
        <div id="app-dashboard" :style="backgroundStyle">
                <h2>{{ greeting.text }}</h2>
-               <div class="statuses">
+               <ul class="statuses">
                        <div v-for="status in registeredStatus"
                                :id="'status-' + status"
                                :key="status">
                                <div :ref="'status-' + status" />
                        </div>
-               </div>
+               </ul>
 
                <Draggable v-model="layout"
                        class="panels"
@@ -419,7 +419,7 @@ export default {
        }
 
        .edit-panels,
-       .statuses ::v-deep #user-status-menu-item__subheader>button {
+       .statuses ::v-deep .action-item > button {
                background-color: var(--color-background-translucent);
                backdrop-filter: var(--background-blur);
 
@@ -482,12 +482,11 @@ export default {
                display: flex;
                flex-direction: row;
                justify-content: center;
-               margin-bottom: 40px;
+               flex-wrap: wrap;
+               margin-bottom: 36px;
 
                & > div {
-                       max-width: 200px;
-                       margin-left: 10px;
-                       margin-right: 10px;
+                       margin: 8px;
                }
        }
 

diff --git a/apps/user_status/src/App.vue b/apps/user_status/src/App.vue
index c9e95fa87fd10879a1485dbc5413bd352667466f..75b6b43e9cd127fd473d32e0768d7381ea357d23 100644 (file)
--- a/apps/user_status/src/App.vue
+++ b/apps/user_status/src/App.vue
@@ -287,7 +287,6 @@ li:not(.inline) #user-status-menu-item {
                border: 0;
                border-radius: var(--border-radius-pill);
                font-weight: normal;
-               font-size: 0.875em;
                padding-left: 40px;
 
                &:hover,

diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index 59db8600bf2944136ba8ee15511d14055f40ed07..eef81c8a7d013159e0a1b2d6ed5c719a3689b69e 100644 (file)
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -454,7 +454,6 @@ li:not(.inline) .weather-status-menu-item {
                        border: 0;
                        border-radius: 0;
                        font-weight: normal;
-                       font-size: 0.875em;
                        padding-left: 40px;
 
                        &:hover,
@@ -481,7 +480,6 @@ body.theme--dark .inline .weather-status-menu-item__subheader > button {
                border: 0;
                border-radius: var(--border-radius-pill);
                font-weight: normal;
-               font-size: 0.875em;
                padding-left: 40px;
 
                &:hover,