Responsive Part 2 - Login
Updated Login CSS and cleaned up login notifications to alert when something is amiss.
This commit is contained in:
parent
2ce86fad2e
commit
5adf196783
5 changed files with 57 additions and 42 deletions
|
@ -114,42 +114,6 @@ header
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="login"] {
|
|
||||||
margin: 15% auto;
|
|
||||||
padding: 10px;
|
|
||||||
width: 500px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: var(--white);
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 28.5% 1fr;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[role="login"] form input {
|
|
||||||
width: 95%;
|
|
||||||
height: 30px;
|
|
||||||
padding: 5px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[role="login"] form button {
|
|
||||||
padding: 10px 5px;
|
|
||||||
width: 82%;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[role="login"] form a {
|
|
||||||
padding: 10px 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 10%;
|
|
||||||
height: 20px;
|
|
||||||
display: inline-block;
|
|
||||||
background: var(--tertiary);
|
|
||||||
vertical-align: top;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* RESPONSIVE */
|
/* RESPONSIVE */
|
||||||
|
|
||||||
@media only screen and (max-width: 900px) {
|
@media only screen and (max-width: 900px) {
|
||||||
|
|
54
public/assets/css/dash/init.css
Normal file
54
public/assets/css/dash/init.css
Normal file
|
@ -0,0 +1,54 @@
|
||||||
|
/* LOGIN */
|
||||||
|
|
||||||
|
section[role="login"] {
|
||||||
|
margin: 15% auto;
|
||||||
|
padding: 10px;
|
||||||
|
width: 500px;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 28.5% 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="login"] form input {
|
||||||
|
width: 95%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="login"] form button {
|
||||||
|
padding: 10px 5px;
|
||||||
|
width: 82%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="login"] form a {
|
||||||
|
padding: 10px 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 10%;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--tertiary);
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LOGIN */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 500px) {
|
||||||
|
section[role="login"] {
|
||||||
|
width: 97%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
section[role="login"] {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
section[role="login"] img {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,6 +4,7 @@
|
||||||
@import url("frame.css");
|
@import url("frame.css");
|
||||||
@import url("icons.css");
|
@import url("icons.css");
|
||||||
@import url("notifications.css");
|
@import url("notifications.css");
|
||||||
|
@import url("init.css");
|
||||||
@import url("index.css");
|
@import url("index.css");
|
||||||
@import url("book.css");
|
@import url("book.css");
|
||||||
@import url("page-editor.css");
|
@import url("page-editor.css");
|
||||||
|
|
|
@ -7666,9 +7666,8 @@ class $5ec7c34d3cbf8bc6$export$2e2bcd8739ae039 {
|
||||||
this.processing = true;
|
this.processing = true;
|
||||||
api.login(authForm).then((response)=>{
|
api.login(authForm).then((response)=>{
|
||||||
self.processing = false;
|
self.processing = false;
|
||||||
if (response.type === $995f55a4eccd256d$export$f99ec790401d28da) $5ec7c34d3cbf8bc6$var$notify.alert(response.message, false);
|
if (response.type === $995f55a4eccd256d$export$f99ec790401d28da) e.target.innerHTML = response.message;
|
||||||
else {
|
else {
|
||||||
//notify.alert(response.message, true);
|
|
||||||
e.target.innerHTML = response.message;
|
e.target.innerHTML = response.message;
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
window.location = "/dashboard";
|
window.location = "/dashboard";
|
||||||
|
@ -7676,7 +7675,6 @@ class $5ec7c34d3cbf8bc6$export$2e2bcd8739ae039 {
|
||||||
}
|
}
|
||||||
}).catch((err)=>{
|
}).catch((err)=>{
|
||||||
self.processing = false;
|
self.processing = false;
|
||||||
$5ec7c34d3cbf8bc6$var$notify.alert(err, false);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
handleSetup(e) {
|
handleSetup(e) {
|
||||||
|
|
|
@ -64,9 +64,8 @@ export default class Base {
|
||||||
.then(response => {
|
.then(response => {
|
||||||
self.processing = false;
|
self.processing = false;
|
||||||
if (response.type === DataEvent.REQUEST_LAME) {
|
if (response.type === DataEvent.REQUEST_LAME) {
|
||||||
notify.alert(response.message, false);
|
e.target.innerHTML = response.message;
|
||||||
} else {
|
} else {
|
||||||
//notify.alert(response.message, true);
|
|
||||||
e.target.innerHTML = response.message;
|
e.target.innerHTML = response.message;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.location = '/dashboard';
|
window.location = '/dashboard';
|
||||||
|
@ -75,7 +74,6 @@ export default class Base {
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
self.processing = false;
|
self.processing = false;
|
||||||
notify.alert(err, false);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue