Merge pull request #522 from bertyhell/bugfix/improve-setup-styles
fix(setup): increase left padding input fields + avoid clipping
This commit is contained in:
commit
2b1fe815f9
|
@ -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;
|
||||
|
|
|
@ -46,8 +46,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { useToast } from "vue-toastification"
|
||||
const toast = useToast()
|
||||
import { useToast } from "vue-toastification";
|
||||
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%;
|
||||
|
|
Loading…
Reference in New Issue