hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix error message styles in login form

Browse source
This commit is contained in:
Henry Jameson 2025-03-13 15:07:55 +02:00
commit 9d9549532b
2 changed files with 53 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/login_form/login_form.scss Normal file
View file

@ -0,0 +1,44 @@
.login-panel {
.login-form {
display: flex;
flex-direction: column;
padding: 0.6em;
}
.btn {
min-height: 2em;
width: 10em;
}
.register {
flex: 1 1;
}
.login-bottom {
margin-top: 1em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.form-group {
display: flex;
flex-direction: column;
padding: 0.3em 0.5em 0.6em;
line-height: 24px;
}
.login-error {
display: flex;
line-height: 2;
margin: 0.5em;
animation-name: shakeError;
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
}
.error-message {
flex: 1;
}
}

72
src/components/login_form/login_form.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="login panel panel-default"> <div class="login-panel panel panel-default">
<!-- Default panel contents --> <!-- Default panel contents -->
<div class="panel-heading"> <div class="panel-heading">
@ -70,14 +70,13 @@
</div> </div>
</div> </div>
</form> </form>
</div> <div
v-if="error"
<div class="login-error alert error"
v-if="error" >
class="form-group" <span class="error-message">
> {{ error }}
<div class="alert error"> </span>
{{ error }}
<button <button
class="button-unstyled" class="button-unstyled"
@click="clearError" @click="clearError"
@ -94,57 +93,4 @@
<script src="./login_form.js"></script> <script src="./login_form.js"></script>
<style lang="scss"> <style src="./login_form.scss"/>
.login-form {
display: flex;
flex-direction: column;
padding: 0.6em;
.btn {
min-height: 2em;
width: 10em;
}
.register {
flex: 1 1;
}
.login-bottom {
margin-top: 1em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.form-group {
display: flex;
flex-direction: column;
padding: 0.3em 0.5em 0.6em;
line-height: 24px;
}
.form-bottom {
display: flex;
padding: 0.5em;
height: 32px;
button {
width: 10em;
}
p {
margin: 0.35em;
padding: 0.35em;
display: flex;
}
}
.error {
text-align: center;
animation-name: shakeError;
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
}
}
</style>