new designs

MOE_DEV_NEW_DESIGN
Sultan Khan 4 years ago
parent c2439eb85c
commit 91605bd7ec

@ -1,4 +1,4 @@
<ion-app [dir]="direction"> <ion-app [dir]="direction" [lang]="lang" id="lang">
<ion-split-pane> <ion-split-pane>
<ion-menu [swipeGesture]="false" side='start' *ngIf="direction ==='ltr'"> <ion-menu [swipeGesture]="false" side='start' *ngIf="direction ==='ltr'">
<ion-content class="sidebar-menu"> <ion-content class="sidebar-menu">

@ -37,6 +37,7 @@ export class AppComponent implements OnInit {
deviceToken: string; deviceToken: string;
TeamFlag: string = 'false'; TeamFlag: string = 'false';
isIOS = false; isIOS = false;
lang: string = 'en';
userInfo; userInfo;
public requestGetLoginInfo: { public requestGetLoginInfo: {
DeviceType: string; DeviceType: string;
@ -103,10 +104,12 @@ export class AppComponent implements OnInit {
private monitUrlChange() { private monitUrlChange() {
this.router.events.subscribe((val) => { this.router.events.subscribe((val) => {
this.lang = TranslatorService.getCurrentLanguageName();
if (this.router.isActive('/authentication/login', true)) { if (this.router.isActive('/authentication/login', true)) {
this.direction = 'ltr'; this.direction = 'ltr';
} else { } else {
this.direction = TranslatorService.getCurrentDirection(); this.direction = TranslatorService.getCurrentDirection();
} }
}); });
} }

@ -17,12 +17,13 @@
} }
.pageTitle { .pageTitle {
color: var(--dark); color: var(--primary);
font-size: 23px; font-size: 20px;
width: 100%; width: 100%;
text-align: center; text-align: center;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
font-weight: 600;
} }
.TxtPlace { .TxtPlace {
@ -121,17 +122,15 @@ img.centerDiv {
} }
.item-input { .item-input {
--min-height: 1.0cm !important; --min-height: 57px !important;
--border-radius: 12px; --border-radius: 12px;
--ion-color-base: white !important; --ion-color-base: white !important;
// --background: color: var(--darkgray) !important; border-radius: 12px;
// background: #7f8c8d !important;
border-radius: 33px;
--border: solid #9999992b !important;
border: solid #9999992b !important;
margin-bottom: 12px; margin-bottom: 12px;
margin-left: 12px; margin-left: 12px;
margin-right: 12px; margin-right: 12px;
box-shadow: 0px 1px 5px #0000000F;
color: var(--primary);
} }
.button-login { .button-login {
@ -191,7 +190,7 @@ img.centerDiv {
.last-circle { .last-circle {
position: inherit; position: inherit;
background: #65C399 !important; background: #D5E2E8 !important;
border-radius: 50%; border-radius: 50%;
height: 166px; height: 166px;
width: 140px; width: 140px;

@ -157,7 +157,7 @@ export class LoginComponent implements OnInit, OnDestroy {
this.currentLang = TranslatorService.getCurrentLanguageCode(); this.currentLang = TranslatorService.getCurrentLanguageCode();
} }
this.currentLang = langNumber; this.currentLang = langNumber;
document.getElementById('lang').lang = this.currentLang == 1 ? 'ar' : 'en';
} }
public forgetPasswordPage() { public forgetPasswordPage() {

@ -11,8 +11,8 @@
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
width: 50px; width: 40px;
height: 50px; height: 40px;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
} }
@ -22,7 +22,7 @@
color: white; color: white;
font-size: 0.5cm; font-size: 0.5cm;
font-weight: bold; font-weight: bold;
font-family: WorkSans-Regular; // font-family: WorkSans-Regular;
display: block; display: block;
text-align: center; text-align: center;
line-height: 46px; line-height: 46px;

@ -15,11 +15,12 @@
display: block; display: block;
width: 100%; width: 100%;
position: static; position: static;
text-align: center;
} }
.iconBox img { .iconBox img {
margin: 0px auto 10px; margin: 0px auto 10px;
display: block; display: inline-block;
width: 35px; width: 35px;
// max-width: 35%; // max-width: 35%;
} }

@ -20,7 +20,7 @@
// max-width: 45%; // max-width: 45%;
// padding-bottom: 5px; // padding-bottom: 5px;
// padding-top: 5px; // padding-top: 5px;
display: block; display: inline-block;
max-width: 67%; max-width: 67%;
padding-bottom: 9px; padding-bottom: 9px;
padding-top: 5px; padding-top: 5px;
@ -35,7 +35,7 @@
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
color: black; color: black;
text-align: -webkit-auto; text-align: center;
display: block; display: block;
} }
} }
@ -46,10 +46,10 @@ ion-app[dir="rtl"] .titleBox {
.pClass { .pClass {
color: black; color: black;
width: 85%; width: 100%;
margin-top: 5px; margin-top: 5px;
font-weight: bold; font-weight: bold;
text-align: -webkit-auto; text-align: center;
display: block; display: block;
font-size: 14px !important; font-size: 14px !important;
} }

@ -196,8 +196,8 @@ export class HomePage implements OnInit {
spaceBetween: 10 spaceBetween: 10
}; };
this.slideOptsTwo = { this.slideOptsTwo = {
slidesPerView: width > 320 ? 3.5 : 3, slidesPerView: width > 320 ? 3.2 : 2.6,
spaceBetween: width > 320 ? 20 : 15 spaceBetween: width > 320 ? 10 : 10
}; };
this.showStaticServices = true; this.showStaticServices = true;
} }

Binary file not shown.

@ -1,27 +1,48 @@
// $font-family-base: "WorkSans-Regular" !default; // $font-family-base: "WorkSans-Regular" !default;
body { body {
:root[dir="rtl"] { ion-app[lang="en"] {
font-family: var(--fontFamilyBoldEN) !important;
}
ion-app[lang="ar"] {
font-family: var(--fontFamilyIOSAR) !important; font-family: var(--fontFamilyIOSAR) !important;
} }
:root[dir="ltr"] { }
font-family: var(--fontFamilyMediumEN) !important;
ion-app[lang="en"] {
input,
textarea,
p,
label,
div,
h1,
h2,
h3,
button,
ion-button {
font-size: 16px;
font-family: var(--fontFamilyBoldEN) !important;
} }
} }
input, ion-app[lang="ar"] {
textarea,
p,
label,
div {
font-size: 16px;
:root[dir="rtl"] { input,
textarea,
p,
label,
div,
h1,
h2,
h3,
button,
ion-button {
font-family: var(--fontFamilyIOSAR) !important; font-family: var(--fontFamilyIOSAR) !important;
}
:root[dir="ltr"] {
font-family: var(--fontFamilyLightEN) !important;
} }
} }
@ -29,13 +50,14 @@ h1,
h2, h2,
h3, h3,
button { button {
:root[dir="rtl"] { // ion-app[lang="en"] {
font-family: var(--fontFamilyIOSAR) !important; // font-family: var(--fontFamilyBoldEN) !important;
} // }
:root[dir="ltr"] { // ion-app[lang="ar"] {
font-family: var(--fontFamilyMediumEN) !important; // font-family: var(--fontFamilyIOSAR) !important;
}
// }
} }
@ -272,44 +294,57 @@ p.text-caps {
text-transform: uppercase; text-transform: uppercase;
} }
.boldTxt, ion-app[lang="en"] {
p.boldTxt,
.boldTxt>label { .boldTxt,
:root[dir="ltr"] { p.boldTxt,
.boldTxt>label {
font-family: var(--fontFamilyBoldEN) !important; font-family: var(--fontFamilyBoldEN) !important;
} }
}
:root[dir="rtl"] { ion-app[lang="ar"] {
.boldTxt,
p.boldTxt,
.boldTxt>label {
font-family: var(--fontFamilyIOSAR) !important; font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold; font-weight: bold;
} }
} }
.boldTxtNav, // .boldTxtNav,
p.boldTxtNav, // p.boldTxtNav,
.boldTxtNav>label { // .boldTxtNav>label {
color: var(--dark) !important; // color: var(--dark) !important;
:root[dir="ltr"] { // ion-app[lang="en"] {
font-family: var(--fontFamilyBoldEN) !important; // font-family: var(--fontFamilyBoldEN) !important;
} // }
:root[dir="rtl"] { // ion-app[lang="ar"] {
font-family: var(--fontFamilyIOSAR) !important; // font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold; // font-weight: bold;
} // }
}
ion-label.boldTxtNav.label.label-md, // }
ion-label.boldTxtNav.label.label-ios { ion-app[lang="en"] {
// font-weight: bold;
color: var(--dark);
:root[dir="ltr"] { ion-label.boldTxtNav.label.label-md,
font-family: var(--fontFamilySemiBoldEN) !important; ion-label.boldTxtNav.label.label-ios {
// font-weight: bold;
color: var(--dark);
font-family: var(--fontFamilyBoldEN) !important;
} }
}
:root[dir="rtl"] { ion-app[lang="ar"] {
ion-label.boldTxtNav.label.label-md,
ion-label.boldTxtNav.label.label-ios {
font-family: var(--fontFamilyIOSAR) !important; font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold; font-weight: bold;
} }
@ -656,14 +691,15 @@ ion-col.colBold>label {
padding-left: 10px !important; padding-left: 10px !important;
margin: 10px auto; margin: 10px auto;
:root[dir="ltr"] { // ion-app[lang="en"] {
font-family: var(--fontFamilySemiBoldEN) !important; // font-family: var(--fontFamilyBoldEN) !important;
} // }
// ion-app[lang="ar"] {
// font-family: var(--fontFamilyIOSAR) !important;
// font-weight: bold;
// }
:root[dir="rtl"] {
font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold;
}
} }
@ -688,15 +724,16 @@ ion-col.colBold>label {
margin: 10px auto; margin: 10px auto;
margin-right: 12px !important; margin-right: 12px !important;
:root[dir="ltr"] { ion-app[lang="en"] {
font-family: var(--fontFamilySemiBoldEN) !important; font-family: var(--fontFamilyBoldEN) !important;
} }
:root[dir="rtl"] { ion-app[lang="ar"] {
font-family: var(--fontFamilyIOSAR) !important; font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold; font-weight: bold;
} }
} }
img.flipImg { img.flipImg {
@ -954,7 +991,7 @@ div.daynamicForm-DateTime.disabled {
/************footer****************/ /************footer****************/
ion-footer { ion-footer {
padding: 15px 0px; padding: 15px 0px;
background-color: var(--light) !important; background-color: var(--ion-background) !important;
border: 0px !important; border: 0px !important;
box-shadow: none !important; box-shadow: none !important;
-webkit-box-shadow: none; -webkit-box-shadow: none;
@ -1001,14 +1038,15 @@ ion-footer {
text-align: center; text-align: center;
color: var(--darkgray); color: var(--darkgray);
:root[dir="ltr"] { ion-app[lang="en"] {
font-family: var(--fontFamilySemiBoldEN); font-family: var(--fontFamilyBoldEN) !important;
} }
:root[dir="rtl"] { ion-app[lang="ar"] {
font-family: var(--fontFamilyIOSAR); font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold; font-weight: bold;
} }
} }
.cusprogressbar li:before { .cusprogressbar li:before {
@ -1851,3 +1889,7 @@ ion-app[dir="rtl"] {
ion-menu-button { ion-menu-button {
display: none !important; display: none !important;
} }
ion-content {
--background: var(--ion-background);
}

@ -68,24 +68,34 @@
src: url('../assets/font/Poppins/Poppins-Regular.ttf'); src: url('../assets/font/Poppins/Poppins-Regular.ttf');
} }
@font-face {
font-family: Inter;
src: url('../assets/font/Inter-V.ttf');
}
@font-face {
font-family: Kufi;
src: url('../assets/font/NotoKufiArabic-Regular-1.ttf');
}
:root { :root {
--ion-font-family: 'Poppins'; --ion-font-family: 'Inter';
--break-small: 450px; --break-small: 450px;
--break-big: 565px; --break-big: 565px;
//$break-large: 1200px; //$break-large: 1200px;
--fontFamilyLightEN: 'Poppins'; --fontFamilyLightEN: 'Inter';
--ontFamilyLightAR: 'GE_SS_Two_Light'; --ontFamilyLightAR: 'Kufi';
--fontFamilyRegularEN: 'Poppins'; --fontFamilyRegularEN: 'Inter';
--fontFamilyRegularAR: 'GE_SS_TWO_MEDIUM'; --fontFamilyRegularAR: 'Kufi';
--fontFamilyMediumEN: 'Poppins-Regular'; --fontFamilyMediumEN: 'Inter';
--fontFamilyMediumAR: 'GE_SS_TWO_MEDIUM'; --fontFamilyMediumAR: 'Kufi';
--fontFamilyBoldEN: 'Poppins-Bold'; --fontFamilyBoldEN: 'Inter';
--fontFamilyBoldAR: 'GE_SS_Two_Bold'; --fontFamilyBoldAR: 'Kufi';
--fontFamilySemiBoldEN: 'Poppins-Bold'; --fontFamilySemiBoldEN: 'Inter';
--fontFamilySemiBoldAR: 'GE_SS_Two_Bold'; --fontFamilySemiBoldAR: 'Kufi';
--fontFamilyIOSAR: -apple-system, "Helvetica Neue", "Roboto", sans-serif; --fontFamilyIOSAR: 'Kufi';
--fontFamilyAndroidAR: "Roboto", "Helvetica Neue", sans-serif; --fontFamilyAndroidAR: 'Kufi';
--primary: #3ac1f1; --primary: #004D71;
--secondary: #19a163; --secondary: #19a163;
--danger: #f53d3d; --danger: #f53d3d;
--customnavy: #44A7A1; --customnavy: #44A7A1;
@ -108,6 +118,7 @@
--newred: #cb3232; --newred: #cb3232;
--fontFamilyPoppins-SemiBold: 'Poppins-SemiBold'; --fontFamilyPoppins-SemiBold: 'Poppins-SemiBold';
--fontFamilyPoppins-Medium: 'Poppins-Medium'; --fontFamilyPoppins-Medium: 'Poppins-Medium';
--ion-background: #F6F6F7;
// $font-family-base: $fontFamilyMediumEN !default; // $font-family-base: $fontFamilyMediumEN !default;
// $font-family-ios-base: $fontFamilyMediumEN !default; // $font-family-ios-base: $fontFamilyMediumEN !default;
// $font-family-md-base:$fontFamilyMediumEN !default; // $font-family-md-base:$fontFamilyMediumEN !default;

Loading…
Cancel
Save