Merge pull request #522 from bertyhell/bugfix/improve-setup-styles

fix(setup): increase left padding input fields + avoid clipping

src/components/Login.vue

@@ -52,7 +52,7 @@ export default {
             token: "",
             res: null,
             tokenRequired: false,
-        }
+        };
     },
     methods: {
         submit() {
@@ -60,21 +60,20 @@ export default {
 
             this.$root.login(this.username, this.password, this.token, (res) => {
                 this.processing = false;
-                console.log(res)
+                console.log(res);
 
                 if (res.tokenRequired) {
                     this.tokenRequired = true;
                 } else {
                     this.res = res;
                 }
-            })
+            });
         },
     },
-}
+};
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-
 .form-container {
     display: flex;
     align-items: center;
@@ -82,8 +81,17 @@ export default {
     padding-bottom: 40px;
 }
 
-.form {
+.form-floating {
+    > label {
+        padding-left: 1.3rem;
+    }
 
+    > .form-control {
+        padding-left: 1.3rem;
+    }
+}
+
+.form {
     width: 100%;
     max-width: 330px;
     padding: 15px;

src/pages/Setup.vue

@@ -46,8 +46,8 @@
 </template>
 
 <script>
-import { useToast } from "vue-toastification"
+import { useToast } from "vue-toastification";
-const toast = useToast()
+const toast = useToast();
 
 export default {
     data() {
@@ -56,7 +56,7 @@ export default {
             username: "",
             password: "",
             repeatPassword: "",
-        }
+        };
     },
     watch: {
         "$i18n.locale"() {
@@ -66,7 +66,7 @@ export default {
     mounted() {
         this.$root.getSocket().emit("needSetup", (needSetup) => {
             if (! needSetup) {
-                this.$router.push("/")
+                this.$router.push("/");
             }
         });
     },
@@ -75,31 +75,30 @@ export default {
             this.processing = true;
 
             if (this.password !== this.repeatPassword) {
-                toast.error("Repeat password do not match.")
+                toast.error("Repeat password do not match.");
                 this.processing = false;
                 return;
             }
 
             this.$root.getSocket().emit("setup", this.username, this.password, (res) => {
                 this.processing = false;
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
 
                 if (res.ok) {
                     this.processing = true;
 
-                    this.$root.login(this.username, this.password, "", (res) => {
+                    this.$root.login(this.username, this.password, "", () => {
                         this.processing = false;
-                        this.$router.push("/")
+                        this.$router.push("/");
-                    })
+                    });
                 }
-            })
+            });
         },
     },
-}
+};
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-
 .form-container {
     display: flex;
     align-items: center;
@@ -107,6 +106,26 @@ export default {
     padding-bottom: 40px;
 }
 
+.form-floating {
+    > .form-select {
+        padding-left: 1.3rem;
+        padding-top: 1.525rem;
+        line-height: 1.35;
+
+        ~ label {
+            padding-left: 1.3rem;
+        }
+    }
+
+    > label {
+        padding-left: 1.3rem;
+    }
+
+    > .form-control {
+        padding-left: 1.3rem;
+    }
+}
+
 .form {
 
     width: 100%;