Fix styling bugs

loehnertz · Jul 7, 2024 · 3ee98bd · 3ee98bd
1 parent cbe54c5
commit 3ee98bd
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 28 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -8,12 +8,12 @@ module.exports = {
     'eslint:recommended',
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
   parserOptions: {
-    ecmaVersion: 'latest'
+    ecmaVersion: 'latest',
   },
   rules: {
-    'comma-dangle': ['error', 'always-multiline']
+    'comma-dangle': ['error', 'always-multiline'],
   },
 }
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,17 +1,5 @@
 @import 'https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css';
 
-body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-}
-
-.box {
-  min-width: 350px;
-  max-width: 750px;
-}
-
 .buttons .button {
   flex: 1;
 }

diff --git a/src/components/CustomSettings.vue b/src/components/CustomSettings.vue
@@ -21,10 +21,10 @@
         <input
           id="incrementTime"
           :value="incrementTime"
-          @change="updateIncrementTime"
           class="input"
           min="1"
           type="number"
+          @change="updateIncrementTime"
         />
       </div>
     </div>

diff --git a/src/components/TimerAdjustment.vue b/src/components/TimerAdjustment.vue
@@ -8,9 +8,9 @@
           :disabled="timerRunning"
           :value="offsetTime"
           class="input"
-          type="number"
           max="100"
           min="-100"
+          type="number"
           @input="updateOffsetTime"
         />
       </div>

diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container columns is-centered">
     <div class="box">
       <h1 class="title is-1 has-text-centered">🍵 Tea Timer</h1>
       <p class="content">

diff --git a/src/views/BrewView.vue b/src/views/BrewView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <div class="box">
+  <div class="container columns is-centered">
+    <div class="box has-text-centered">
       <SettingsPanel
         v-if="showSettings"
         :customDefaults="customDefaults"
@@ -189,9 +189,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped>
-.box {
-  text-align: center;
-}
-</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container columns is-centered">
     <div class="box has-text-centered">
       <h1 class="title is-1">🍵 Tea Timer</h1>
       <p class="content">

diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container columns is-centered">
     <div class="box">
       <h1 class="title is-1 has-text-centered">Page Not Found</h1>
       <p class="content">