Skip to content

Commit

Permalink
style(loader): fix loader position (#1279)
Browse files Browse the repository at this point in the history
LaurentMag authored Feb 1, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent d9de021 commit 5a5be67
Showing 2 changed files with 23 additions and 16 deletions.
7 changes: 6 additions & 1 deletion yaki_admin/src/assets/style/_style.scss
Original file line number Diff line number Diff line change
@@ -65,6 +65,11 @@ $loader-animation-delay: 0.15s;
$loader-fade-duration: 0.5s;

// LOGGING LOADER

.loading_relative_container {
position: relative;
}

.loader {
width: 2.8rem;
aspect-ratio: 1/1;
@@ -79,7 +84,7 @@ $loader-fade-duration: 0.5s;

position: absolute;

top: 62%;
top: 40%;
left: 44%;

opacity: 0;
32 changes: 17 additions & 15 deletions yaki_admin/src/ui/components/LoginForm.vue
Original file line number Diff line number Diff line change
@@ -50,8 +50,8 @@ const openYakiWeb = () => {
</script>

<template>
<section class="login_form_container">
<div :class="['loging_from_wrapper', isLoggingError ? 'logging_error' : '']">
<section class="logging_form_container">
<div :class="['logging_from_wrapper', isLoggingError ? 'logging_error' : '']">
<p class="text_default__title_header">Administration</p>
<form>
<input-text
@@ -64,16 +64,19 @@ const openYakiWeb = () => {
@emittedInput="onInputPassword"
/>

<button-primary
text="SIGN IN"
@click.prevent="login"
type="submit"
:is-disabled="isLloggingLoading"
/>
<div
v-show="isLloggingLoading"
:class="['loader', isLloggingLoading ? 'loader-animation' : '']"
></div>
<div class="loading_relative_container">
<button-primary
text="SIGN IN"
@click.prevent="login"
type="submit"
:is-disabled="isLloggingLoading"
/>
<div
v-show="isLloggingLoading"
:class="['loader', isLloggingLoading ? 'loader-animation' : '']"
></div>
</div>

<p class="text_default__Team_description info_text">
* Your logging informations also are utilized on YAKI mobile. <br />
If you've forgotten your password, you may use the mobile application or his
@@ -86,7 +89,7 @@ const openYakiWeb = () => {

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login_form_container {
.logging_form_container {
display: flex;
flex-direction: column;
justify-content: center;
@@ -100,11 +103,10 @@ const openYakiWeb = () => {
display: flex;
flex-direction: column;
gap: 1.4rem;
position: relative;
}
}

.loging_from_wrapper {
.logging_from_wrapper {
display: flex;
flex-direction: column;
justify-content: center;

0 comments on commit 5a5be67

Please sign in to comment.