make settings horizontal and make close button of iframe config bigger

canbax · Jan 11, 2025 · 0003192 · 0003192
1 parent c6cc772
commit 0003192
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/src/components/DateFormatSelector.vue b/src/components/DateFormatSelector.vue
@@ -39,7 +39,7 @@ function glowSampleDate() {
     <div class="ma-1">
       <div class="pa-1">{{ $t('dateFormat') }}</div>
       <v-row align="center">
-        <v-col class="d-flex" cols="4">
+        <v-col cols="12" sm="4">
           <v-select
             v-model="year"
             :items="yearFormats"
@@ -48,7 +48,7 @@ function glowSampleDate() {
             @update:modelValue="glowSampleDate"
           />
         </v-col>
-        <v-col class="d-flex" cols="4">
+        <v-col cols="12" sm="4">
           <v-select
             v-model="month"
             :items="monthFormats"
@@ -57,7 +57,7 @@ function glowSampleDate() {
             @update:modelValue="glowSampleDate"
           />
         </v-col>
-        <v-col class="d-flex" cols="4">
+        <v-col cols="12" sm="4">
           <v-select
             v-model="weekDay"
             :items="weekdayFormats"

diff --git a/src/components/ShareWidget.vue b/src/components/ShareWidget.vue
@@ -19,11 +19,16 @@ const isOpen = ref(false);
     <template #default>
       <v-card class="mx-auto" max-width="644">
         <div>
-          <v-alert
-            :title="$t('embedToYourWebsite')"
-            closable
-            @click:close="isOpen = false"
-          ></v-alert>
+          <v-alert :title="$t('embedToYourWebsite')">
+            <template #close>
+              <v-icon
+                data-testid="close-btn"
+                @click="isOpen = false"
+                icon="mdi-close"
+                size="large"
+              />
+            </template>
+          </v-alert>
         </div>
         <div>
           <IframeEditor />

diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
@@ -14,23 +14,25 @@ const $t = getTranslateFn(getCurrentInstance());
 </script>
 
 <template>
-  <div class="d-flex flex-row ma-1">
-    <v-tabs v-model="settingsTab" color="primary" direction="vertical">
+  <div class="ma-1">
+    <v-tabs v-model="settingsTab" color="primary" stacked>
       <v-tab :text="$t('system')" prepend-icon="mdi-cog" value="1"></v-tab>
       <v-tab :text="$t('dateAndTime')" prepend-icon="mdi-calendar-clock" value="2"></v-tab>
       <v-tab :text="$t('calculator')" prepend-icon="mdi-calculator-variant" value="3"></v-tab>
     </v-tabs>
 
-    <v-tabs-window v-model="settingsTab" class="ma-1 flex-grow-1">
-      <v-tabs-window-item value="1">
-        <GeneralSettings />
-      </v-tabs-window-item>
-      <v-tabs-window-item value="2">
-        <DateAndTimeSettings />
-      </v-tabs-window-item>
-      <v-tabs-window-item value="3">
-        <CalculatorSettings />
-      </v-tabs-window-item>
+    <v-tabs-window v-model="settingsTab">
+      <v-container fluid>
+        <v-tabs-window-item value="1">
+          <GeneralSettings />
+        </v-tabs-window-item>
+        <v-tabs-window-item value="2">
+          <DateAndTimeSettings />
+        </v-tabs-window-item>
+        <v-tabs-window-item value="3">
+          <CalculatorSettings />
+        </v-tabs-window-item>
+      </v-container>
     </v-tabs-window>
   </div>
 </template>