mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 13:02:56 +00:00
Fix login layout
This commit is contained in:
Peter Maquiran
@@ -33,7 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content d-flex flex-column height-100 width" *ngIf="!SessionStore.hasPin || SessionStore.hasPin && SessionStore.user.LoginPreference == 'Pin' && !enterWithPassword " >
|
||||
<div class="main-content d-flex flex-column width" *ngIf="!SessionStore.hasPin || SessionStore.hasPin && SessionStore.user.LoginPreference == 'Pin' && !enterWithPassword " >
|
||||
|
||||
<div class="div-top-header">
|
||||
|
||||
|
||||
@@ -1,77 +1,79 @@
|
||||
@import '~src/function.scss';
|
||||
:host, app-login {
|
||||
ion-content {
|
||||
background: linear-gradient(180deg, #42B9FE 0%, #0782C9 100%) !important;
|
||||
}
|
||||
ion-content {
|
||||
background: linear-gradient(180deg, #42B9FE 0%, #0782C9 100%) !important;
|
||||
}
|
||||
}
|
||||
ion-content{
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.main-wrapper{
|
||||
background: linear-gradient(180deg, #42B9FE 0%, #0782C9 100%) !important;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background: white !important;
|
||||
|
||||
background: linear-gradient(180deg, #42B9FE 0%, #0782C9 100%) !important;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background: white !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
/* width: 400px; */
|
||||
height: auto;
|
||||
padding: 0 !important;
|
||||
/* margin: auto !important; */
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, #42B9FE 0%, #0782C9 100%) !important;
|
||||
/* width: 400px; */
|
||||
height: auto;
|
||||
padding: 0 !important;
|
||||
/* margin: auto !important; */
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, #42B9FE 0%, #0782C9 100%) !important;
|
||||
}
|
||||
|
||||
.logo{
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
.bg-1{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: #4cb9f825;
|
||||
margin: auto;
|
||||
.bg-2{
|
||||
width: 225px;
|
||||
height: 225px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: #61bdf2b4;
|
||||
margin: auto;
|
||||
.bg-3{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: #96d3f8be;
|
||||
margin: auto;
|
||||
.bg-4{
|
||||
width: 175px;
|
||||
height: 175px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.918);
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: #4cb9f825;
|
||||
margin: auto;
|
||||
.bg-2{
|
||||
width: 225px;
|
||||
height: 225px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: #61bdf2b4;
|
||||
margin: auto;
|
||||
.bg-3{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: #96d3f8be;
|
||||
margin: auto;
|
||||
.bg-4{
|
||||
width: 175px;
|
||||
height: 175px;
|
||||
overflow: auto;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.918);
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
|
||||
.bg-4 img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-4 img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.div-logo{
|
||||
width: 200px !important;
|
||||
@@ -133,110 +135,216 @@ ion-item{
|
||||
|
||||
|
||||
.circle{
|
||||
color: white;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 19pt;
|
||||
background: #44b5ea;
|
||||
border-radius: 56px;
|
||||
margin-bottom: 15px;
|
||||
user-select: none;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
color: white;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 19pt;
|
||||
background: #44b5ea;
|
||||
border-radius: 56px;
|
||||
margin-bottom: 15px;
|
||||
user-select: none;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
.title{
|
||||
padding-top: 32px;
|
||||
z-index: 1000;
|
||||
height: unset !important;
|
||||
position: relative;
|
||||
top: -30px;
|
||||
padding-top: 32px;
|
||||
z-index: 1000;
|
||||
height: unset !important;
|
||||
position: relative;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
padding-top: 49px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-image: url(/assets/background/auth.svg);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
padding-bottom: 48px;
|
||||
margin-bottom: -58px;
|
||||
z-index: 100;
|
||||
margin-top: -80px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url(/assets/background/auth.svg);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-size: 610px;
|
||||
}
|
||||
|
||||
.clear{
|
||||
color: #44b5ea;
|
||||
font-size: 12pt;
|
||||
z-index: 1000;
|
||||
color: #44b5ea;
|
||||
font-size: 12pt;
|
||||
z-index: 1000;
|
||||
}
|
||||
.dot-active{
|
||||
background: #44b5ea;
|
||||
background: #44b5ea;
|
||||
}
|
||||
|
||||
.dot{
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0 10px 0 0;
|
||||
border: 3px solid #44b5ea;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
-ms-border-radius: 50px;
|
||||
-o-border-radius: 50px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0 10px 0 0;
|
||||
border: 3px solid #44b5ea;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50px;
|
||||
-webkit-border-radius: 50px;
|
||||
-moz-border-radius: 50px;
|
||||
-ms-border-radius: 50px;
|
||||
-o-border-radius: 50px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: 686px 674px;
|
||||
background-position: center;
|
||||
background-position-y: 110px;
|
||||
background-repeat: no-repeat;
|
||||
margin: auto;
|
||||
justify-content: space-around;
|
||||
width: 100vw;
|
||||
/* background-color: white; */
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
/* justify-content: center; */
|
||||
background-size: 686px 674px;
|
||||
background-position: center;
|
||||
background-position-y: 110px;
|
||||
background-repeat: no-repeat;
|
||||
margin: auto;
|
||||
/* justify-content: space-around; */
|
||||
}
|
||||
|
||||
.voltar{
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.msg-bottom{
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.msg-bottom-p{
|
||||
width: 220px;
|
||||
position: absolute;
|
||||
bottom: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
.msg-bottom-p{
|
||||
width: 220px;
|
||||
position: absolute;
|
||||
bottom: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 746px){
|
||||
.msg-bottom-p {
|
||||
padding-top: 20px;
|
||||
position: unset !important;
|
||||
}
|
||||
.msg-bottom-p {
|
||||
padding-top: 20px;
|
||||
position: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pin-4 {
|
||||
z-index: 1000;
|
||||
margin-bottom: 36px;
|
||||
z-index: 1000;
|
||||
margin-bottom: 107px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-height: 168px) {
|
||||
.circle{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 7px;
|
||||
margin-right: 7px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
.terminal{
|
||||
margin-top: -33px !important;
|
||||
}
|
||||
|
||||
.pin-4 {
|
||||
position: relative;
|
||||
top: 49px;
|
||||
}
|
||||
|
||||
.clear {
|
||||
padding-top: 10px !important;
|
||||
}
|
||||
|
||||
.div-top-header {
|
||||
position: unset ;
|
||||
top: unset ;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 640px) {
|
||||
.circle{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 9px;
|
||||
margin-right: 9px;
|
||||
margin-left: 9px;
|
||||
}
|
||||
.terminal{
|
||||
margin-top: -33px !important;
|
||||
}
|
||||
|
||||
.pin-4 {
|
||||
position: relative;
|
||||
top: 49px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 667px) {
|
||||
.circle{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 7px;
|
||||
margin-right: 7px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
.terminal{
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.clear {
|
||||
padding-top: 25px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 731px) {
|
||||
.circle{
|
||||
width: 63px;
|
||||
height: 63px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.terminal{
|
||||
margin-top: -33px !important;
|
||||
}
|
||||
|
||||
.pin-4 {
|
||||
position: relative;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
.div-top-header {
|
||||
position: absolute !important;
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 832px) {
|
||||
.circle{
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.terminal{
|
||||
margin-top: -33px !important;
|
||||
}
|
||||
|
||||
.pin-4 {
|
||||
position: relative;
|
||||
top: unset !important;
|
||||
margin-bottom: 107px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -32,7 +32,47 @@ export class InactivityPage implements OnInit {
|
||||
public alertController: AlertController
|
||||
) {}
|
||||
|
||||
ngOnInit() {}
|
||||
loop = false
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
|
||||
// window.addEventListener('resize', (event) => {
|
||||
// if(this.router.url != '/login') return false
|
||||
|
||||
// if(this.loop == false) {
|
||||
// this.loop = true
|
||||
// this.runloop()
|
||||
// }
|
||||
|
||||
// }, true);
|
||||
|
||||
}
|
||||
|
||||
runloop() {
|
||||
// const containerHeight = 651
|
||||
|
||||
// let circleHeight = document.querySelector('.circle')['offsetHeight']
|
||||
// let circleWidth = document.querySelector('.circle')['offsetWidth']
|
||||
// console.log(window.innerHeight, ' < ', containerHeight)
|
||||
|
||||
// console.log(circleHeight)
|
||||
|
||||
// document.querySelectorAll('.circle').forEach(e=>{
|
||||
// e['style']['height'] = (circleHeight -1 )+'px'
|
||||
// e['style']['width'] = (circleWidth -1 )+'px'
|
||||
// })
|
||||
|
||||
|
||||
// if( window.innerHeight< containerHeight) {
|
||||
// setTimeout(()=>{
|
||||
// this.runloop()
|
||||
// }, 100)
|
||||
// } else {
|
||||
// this.loop = false
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
async presentAlert(message: string) {
|
||||
const alert = await this.alertController.create({
|
||||
|
||||
Reference in New Issue
Block a user