feat: improve mobile appearance

make icons, texts and context menus bigger hide irrelevant menu items on mobile screens update german localization closes #31
simonwep · Jan 27, 2024 · bc9d692 · bc9d692
1 parent bf024f1
commit bc9d692
Show file tree

Hide file tree

Showing 21 changed files with 97 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 <br/>
 
 <h3 align="center">
-  <a href="https://budget.reinisch.io">Ocular</a> - Helps you see your budget more clearly ✨
+  ✨ <a href="https://budget.reinisch.io">Ocular</a> - Helps you see your budget more clearly ✨
 </h3>
 
 <p align="center">

diff --git a/src/app/components/base/button/Button.vue b/src/app/components/base/button/Button.vue
@@ -65,6 +65,8 @@ const classes = computed(() => [
 </script>
 
 <style lang="scss" module>
+@use 'src/styles/globals';
+
 .button {
   all: unset;
   justify-self: flex-start;
@@ -88,6 +90,11 @@ const classes = computed(() => [
   .icon {
     width: 16px;
     height: 16px;
+
+    @include globals.onMobileDevices {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   .text {
@@ -109,6 +116,11 @@ const classes = computed(() => [
     .icon {
       width: 20px;
       height: 20px;
+
+      @include globals.onMobileDevices {
+        width: 24px;
+        height: 24px;
+      }
     }
 
     .text {

diff --git a/src/app/components/base/context-menu/ContextMenu.vue b/src/app/components/base/context-menu/ContextMenu.vue
@@ -100,6 +100,8 @@ provide<ContextMenuStore>(ContextMenuStoreKey, {
 </script>
 
 <style lang="scss" module>
+@use 'src/styles/globals';
+
 .reference {
   display: inline-flex;
 }
@@ -137,6 +139,10 @@ provide<ContextMenuStore>(ContextMenuStoreKey, {
   opacity: 0;
   transition: all var(--transition-s);
 
+  @include globals.onMobileDevices {
+    max-height: 100%;
+  }
+
   &.top {
     transform: translateY(6px);
   }

diff --git a/src/app/components/base/context-menu/ContextMenuButton.vue b/src/app/components/base/context-menu/ContextMenuButton.vue
@@ -51,6 +51,8 @@ const onClick = (evt: MouseEvent) => {
 </script>
 
 <style lang="scss" module>
+@use 'src/styles/globals';
+
 .item {
   display: flex;
   width: 100%;
@@ -70,6 +72,11 @@ const onClick = (evt: MouseEvent) => {
   color: var(--context-menu-item-color);
   position: relative;
 
+  @include globals.onMobileDevices {
+    font-size: var(--font-size-s);
+    padding: 10px 16px;
+  }
+
   .icon {
     width: 12px;
     height: 12px;

diff --git a/src/app/components/base/link/Link.vue b/src/app/components/base/link/Link.vue
@@ -63,14 +63,16 @@ const classes = computed(() => [
 </script>
 
 <style lang="scss" module>
+@use 'src/styles/globals';
+
 .link {
   background: transparent;
   color: v-bind('theme.pure.base');
   transition: all var(--transition-s);
 
   .icon {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
   }
 
   &.custom {
@@ -86,4 +88,11 @@ const classes = computed(() => [
     color: v-bind('theme.pure.hover');
   }
 }
+
+@include globals.onMobileDevices {
+  .link .icon {
+    width: 20px;
+    height: 20px;
+  }
+}
 </style>
diff --git a/src/app/components/base/list/List.vue b/src/app/components/base/list/List.vue
@@ -9,6 +9,6 @@
   display: flex;
   flex-direction: column;
   list-style: none outside none;
-  grid-gap: 10px;
+  gap: 10px;
 }
 </style>
diff --git a/src/app/pages/Frame.vue b/src/app/pages/Frame.vue
@@ -1,8 +1,10 @@
 <template>
   <div :class="$style.frame">
     <div ref="menu" :class="$style.buttons">
-      <ThemeButton :class="$style.btn" />
-      <div :class="$style.divider" />
+      <template v-if="media !== 'mobile'">
+        <ThemeButton :class="$style.btn" />
+        <div :class="$style.divider" />
+      </template>
 
       <Link
         v-for="button of buttons"
@@ -15,9 +17,12 @@
         :name="button.name"
       />
 
-      <ToolsButton :class="[$style.top, $style.btn]" />
+      <div v-if="media === 'mobile'" :class="$style.mobileDivider" />
+      <div v-else style="flex-grow: 1" />
+
+      <ToolsButton :class="$style.btn" />
       <AdminButton v-if="user?.admin" :class="$style.btn" />
-      <SelectYearButton :class="$style.btn" />
+      <ChangeYearButton :class="$style.btn" />
       <template v-if="media !== 'mobile'">
         <ChangeLanguageButton :class="$style.btn" />
         <ChangeCurrencyButton :class="$style.btn" />
@@ -50,7 +55,7 @@ import ChangeCurrencyButton from './navigation/currency/ChangeCurrencyButton.vue
 import ChangeLanguageButton from './navigation/language/ChangeLanguageButton.vue';
 import ThemeButton from './navigation/theme/ThemeButton.vue';
 import ToolsButton from './navigation/tools/ToolsButton.vue';
-import SelectYearButton from './navigation/year/SelectYearButton.vue';
+import ChangeYearButton from './navigation/year/ChangeYearButton.vue';
 
 const menu = ref<HTMLDivElement>();
 const media = useMediaQuery();
@@ -71,8 +76,8 @@ const buttons = computed((): FrameButton[] => [
 </script>
 
 <style lang="scss" module>
-@use 'sass:math';
 @use 'src/styles/globals';
+@use 'sass:math';
 
 .frame {
   display: flex;
@@ -92,7 +97,7 @@ const buttons = computed((): FrameButton[] => [
   flex-direction: column;
   border-right: 1px solid var(--app-border);
   padding: 15px 10px;
-  grid-gap: 15px;
+  gap: 15px;
 
   .top {
     margin-top: auto;
@@ -104,6 +109,14 @@ const buttons = computed((): FrameButton[] => [
     background: var(--app-border);
   }
 
+  .mobileDivider {
+    display: none;
+    width: 1px;
+    background: var(--app-border);
+    height: 100%;
+    margin: 0 -15px;
+  }
+
   .btn {
     display: flex;
     align-items: center;
@@ -129,10 +142,15 @@ const buttons = computed((): FrameButton[] => [
     justify-content: space-evenly;
     flex-direction: row-reverse;
     height: auto;
+    padding: 14px 4px;
 
     .divider {
       display: none;
     }
+
+    .mobileDivider {
+      display: block;
+    }
   }
 }
 </style>
diff --git a/src/app/pages/dashboard/Dashboard.vue b/src/app/pages/dashboard/Dashboard.vue
@@ -72,11 +72,17 @@ const rotateYear = (dir: -1 | 1) => {
 
 .viewButtons {
   display: flex;
-  grid-gap: 4px;
+  gap: 4px;
 }
 
 .version {
   color: var(--c-text-dark-muted);
   font-size: var(--font-size-xs);
 }
+
+@include globals.onMobileDevices {
+  .viewButtons {
+    gap: 8px;
+  }
+}
 </style>
diff --git a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue
@@ -66,7 +66,7 @@ const element = computed(() => (props.to ? Link : 'div'));
 .summaryPanel {
   display: flex;
   justify-content: space-between;
-  grid-gap: 2px;
+  gap: 2px;
   padding: 30px;
   width: 100%;
   height: 100%;

diff --git a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
@@ -98,7 +98,7 @@ const remainingBalancePercentage = computed(() => {
   grid-template: 1fr / repeat(var(--panels), 1fr);
   width: 100%;
   height: 150px;
-  grid-gap: 10px;
+  gap: 10px;
 
   @include globals.onMobileDevices {
     grid-template: repeat(var(--panels), 1fr) / 1fr;

diff --git a/src/app/pages/dashboard/summary/Summary.vue b/src/app/pages/dashboard/summary/Summary.vue
@@ -34,7 +34,7 @@ const expenses = computed(() => totals(state.expenses));
 .summary {
   display: flex;
   flex-direction: column;
-  grid-gap: 20px;
+  gap: 20px;
   flex-grow: 1;
   padding-bottom: 10px;
 }

diff --git a/src/app/pages/navigation/currency/ChangeCurrencyButton.vue b/src/app/pages/navigation/currency/ChangeCurrencyButton.vue
@@ -2,11 +2,10 @@
   <ContextMenu
     :tooltip="t('navigation.currency.change')"
     tooltip-position="right"
-    :class="classes"
     :options="currencies"
     @select="changeCurrency($event.id as AvailableCurrency)"
   >
-    <Button icon="currency-line" textual color="dimmed" />
+    <Button :class="classes" icon="currency-line" textual color="dimmed" />
   </ContextMenu>
 </template>
 

diff --git a/src/app/pages/navigation/language/ChangeLanguageButton.vue b/src/app/pages/navigation/language/ChangeLanguageButton.vue
@@ -2,11 +2,10 @@
   <ContextMenu
     :tooltip="t('navigation.language.switch')"
     tooltip-position="right"
-    :class="classes"
     :options="locales"
     @select="changeLocale($event.id as AvailableLocale)"
   >
-    <Button icon="global-line" textual color="dimmed" />
+    <Button :class="classes" icon="global-line" textual color="dimmed" />
   </ContextMenu>
 </template>
 

diff --git a/src/app/pages/navigation/tools/ToolsButton.vue b/src/app/pages/navigation/tools/ToolsButton.vue
@@ -3,9 +3,8 @@
     :tooltip="t('navigation.tools.tools')"
     :position="media === 'mobile' ? 'top' : 'right-end'"
     tooltip-position="right"
-    :class="classes"
   >
-    <Button icon="settings-4-line" textual color="dimmed"></Button>
+    <Button :class="classes" icon="settings-4-line" textual color="dimmed"></Button>
 
     <template #options>
       <LoadDemoDataButton v-if="status === 'idle'" />

diff --git a/src/app/pages/navigation/tools/import/ImportButton.vue b/src/app/pages/navigation/tools/import/ImportButton.vue
@@ -54,7 +54,7 @@ watch(visible, () => steps.value?.reset());
 .step {
   display: flex;
   flex-direction: column;
-  grid-gap: 15px;
+  gap: 15px;
 
   .title {
     font-size: var(--font-size-s);

diff --git a/src/app/pages/navigation/tools/import/screens/BudgetFileScreen.vue b/src/app/pages/navigation/tools/import/screens/BudgetFileScreen.vue
@@ -48,7 +48,7 @@ const load = async () => {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  grid-gap: 10px;
+  gap: 10px;
 }
 
 .input {

diff --git a/src/app/pages/navigation/tools/import/screens/GoogleAnnualBudgetScreen.vue b/src/app/pages/navigation/tools/import/screens/GoogleAnnualBudgetScreen.vue
@@ -60,7 +60,7 @@ const load = async () => {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  grid-gap: 10px;
+  gap: 10px;
 }
 
 .input {

diff --git a/...ages/navigation/year/SelectYearButton.vue → ...ages/navigation/year/ChangeYearButton.vue b/...ages/navigation/year/SelectYearButton.vue → ...ages/navigation/year/ChangeYearButton.vue
@@ -7,7 +7,7 @@
     :highlight="state.activeYear"
     @select="changeYear($event.id as number)"
   >
-    <Button icon="calendar-line" textual color="dimmed" />
+    <Button :class="classes" icon="calendar-line" textual color="dimmed" />
   </ContextMenu>
 </template>
 
@@ -19,14 +19,20 @@ import { ContextMenuOption } from '@components/base/context-menu/ContextMenu.typ
 import ContextMenu from '@components/base/context-menu/ContextMenu.vue';
 import { useMediaQuery, useTime } from '@composables';
 import { useDataStore } from '@store/state';
+import { ClassNames } from '@utils';
 
 const PRE_PLANNABLE_YEARS = 1;
 
+const props = defineProps<{
+  class: ClassNames;
+}>();
+
 const { t } = useI18n();
 const { changeYear, state } = useDataStore();
 const media = useMediaQuery();
 const time = useTime();
 
+const classes = computed(() => props.class);
 const options = computed((): ContextMenuOption[] => {
   const yearsStored = state.years.map((v) => v.year);
   const offset = Math.min(...yearsStored);

diff --git a/src/app/pages/shared/ChartPlaceholder.vue b/src/app/pages/shared/ChartPlaceholder.vue
@@ -30,7 +30,7 @@ const { t } = useI18n();
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  grid-gap: 10px;
+  gap: 10px;
   flex-grow: 1;
 
   &,
@@ -41,7 +41,7 @@ const { t } = useI18n();
   .icons {
     display: grid;
     grid-template-columns: 24px 24px;
-    grid-gap: 10px;
+    gap: 10px;
   }
 }
 </style>
diff --git a/src/app/pages/shared/Pane.vue b/src/app/pages/shared/Pane.vue
@@ -79,8 +79,13 @@ useScrollShadow(header, content, 'var(--app-scroll-box-shadow)');
   }
 
   .header {
-    padding: 20px 10px 15px;
+    padding: 15px 15px 10px;
     align-items: flex-end;
+
+    .title {
+      font-size: var(--font-size-m);
+      font-weight: var(--font-weight-xl);
+    }
   }
 
   .content {