peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-20 05:16:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve responsiveness

Browse Source
This commit is contained in:
Peter Maquiran
2021-04-23 14:30:18 +01:00
parent f4eafbf9f1
commit 8f76806ae4
7 changed files with 96 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/gabinete-digital/gabinete-digital.page.html
+15 -28
View File
@@ -45,7 +45,7 @@
<p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
</div>
<div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex flex-column justify-center" (click)="openDespachosPage()">
<div [class.active]="selectedElement == 'Dispatches'" class="exp-card d-flex flex-column justify-center" (click)="openDespachosPage(); selectedElement='Dispatches'">
<div class="d-flex justify-center">
<ion-icon src="assets/images/icons-despachos-presidente.svg"></ion-icon>
</div>
@@ -53,7 +53,7 @@
<p class="text-center exp-card-content">{{count_desp_dailywork}}<span class="title1">Documentos</span> </p>
</div>
<div [class.active]="selectedElement == 'RequestsForOpinion'" class="exp-card d-flex flex-column justify-center" (click)="openPedidosPage('parecer')">
<div [class.active]="selectedElement == 'RequestsForOpinion'" class="exp-card d-flex flex-column justify-center" (click)="openPedidosPage('parecer'); selectedElement='RequestsForOpinion'">
<div class="d-flex justify-center">
<ion-icon src="assets/images/icons-expediente-parecer.svg"></ion-icon>
</div>
@@ -61,7 +61,7 @@
<p class="text-center exp-card-content">{{count_par_dailywork}} <span class="title1">Documentos</span></p>
</div>
<div [class.active]="selectedElement == 'RequestForApproval'" class="exp-card d-flex flex-column justify-center" (click)="openPedidosPage('deferimento')">
<div [class.active]="selectedElement == 'RequestForApproval'" class="exp-card d-flex flex-column justify-center" (click)="openPedidosPage('deferimento'); selectedElement = 'RequestForApproval'">
<div class="d-flex justify-center">
<ion-icon src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
</div>
@@ -69,13 +69,7 @@
<p class="text-center exp-card-content">{{count_def_dailywork}} <span class="title1">Documentos</span></p>
</div>
<div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex d-none flex-column justify-center" (click)="notImplemented()">
<div class="d-flex justify-center">
<ion-icon src="assets/images/icons-expediente-presidente.svg"></ion-icon>
</div>
<p class="text-center exp-card-title ">Expediente Presidente</p>
<p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
</div>
<div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex d-none flex-column justify-center" (click)="notImplemented()">
<div class="d-flex justify-center">
@@ -85,28 +79,21 @@
<p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
</div>
<div [class.active]="selectedElement == '£££££££'" class="exp-card-long justify-center width-100" (click)="notImplemented()">
<div class="center-div">
<div class="exp-card-icon">
<ion-icon src="assets/images/icons-expediente-presidente.svg"></ion-icon>
</div>
<div class="exp-card-text">
<p class="exp-card-title ">Expediente Presidente</p>
<p class="exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
</div>
<div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
<div class="d-flex justify-center">
<ion-icon src="assets/images/icons-expediente-presidente.svg"></ion-icon>
</div>
<p class="text-center exp-card-title ">Expediente Presidente</p>
<p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
</div>
<div [class.active]="selectedElement == '£££££££'" class="exp-card-long width-100" (click)="notImplemented()">
<div class="center-div">
<div class="exp-card-icon">
<ion-icon src="assets/images/icons-despachos-presidente.svg"></ion-icon>
</div>
<div class="exp-card-text">
<p class="text-center exp-card-title">Despacho do Presidente da República</p>
<p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
</div>
<div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
<div class="d-flex justify-center">
<ion-icon src="assets/images/icons-expediente-presidente.svg"></ion-icon>
</div>
<p class="text-center exp-card-title ">Despacho do Presidente da República</p>
<p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
</div>
<div [class.active]="selectedElement == '£££££££'" class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
src/app/pages/gabinete-digital/gabinete-digital.page.scss
+8 -13
View File
@@ -106,9 +106,10 @@ ion-content{
padding: 30px 5px 30px 5px;
border-radius: 15px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
background: white;
//border: solid 1px #e9e9e9;
/* --background-color: #ffffff !important; */
background-color: #ffffff !important;
// background-color: #ffffff !important;
float: left;
//border: 1px solid red;
//justify-content: center;
@@ -117,7 +118,7 @@ ion-content{
width: 360px;
margin: 7px 20px;
border-radius: 15px;
background-color: #ffffff !important;
// background-color: #ffffff !important;
padding: 7px;
border: blue !important;
@@ -295,7 +296,7 @@ ion-content{
width: 100%;
padding: 10px 17px 10px 17px;
height: unset !important;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
//box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
.exp-card-title{
flex: 1;
@@ -314,15 +315,6 @@ ion-content{
margin-top: 0px !important;
}
}
.exp-card:visited{
background: blue;
}
.exp-card:hover{
background: blue;
}
}
.btn-refresh:visited{
background: blue !important;
}
@media only screen and (min-width: 1024px){
.content{
@@ -347,6 +339,9 @@ ion-content{
.active {
border: 1px solid green;
background: #42b9fe !important;
box-sizing: border-box;
.exp-card-title {
color: white !important;
}
}
src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts
+2 -2
View File
@@ -239,7 +239,7 @@ export class GroupContactsPage implements OnInit {
name:this.groupName,
duration:'',
},
cssClass: 'new-group',
cssClass: 'new-group modal-desktop',
backdropDismiss: false,
});
await modal.present();
@@ -299,7 +299,7 @@ export class GroupContactsPage implements OnInit {
this.close();
const modal = await this.modalController.create({
component: NewGroupPage,
cssClass: 'new-group',
cssClass: 'new-group modal-desktop',
backdropDismiss: false,
});
await modal.present();
src/app/shared/chat/group-messages/group-messages.page.ts
+1 -1
View File
@@ -240,7 +240,7 @@ export class GroupMessagesPage implements OnInit, OnChanges {
async openOptions(ev: any) {
const popover = await this.popoverController.create({
component: ChatPopoverPage,
cssClass: 'chat-popover',
cssClass: 'chat-popover modal-desktop',
event: ev,
componentProps: {
room: this.room,
src/app/shared/header/header.page.html
+2 -2
View File
@@ -58,10 +58,10 @@
<div class="d-flex">
<div class="mr-10 d-flex align-center">
<button (click)="openSearch()" *ngIf="!showSearch" class="btn-no-color" (click)="showSearch=true">
<button (click)="openSearch();showSearch=true" *ngIf="!showSearch" class="btn-no-color">
<ion-icon class="font-45" src='assets/images/icons-search.svg'></ion-icon>
</button>
<button class="btn-no-color" (click)="closeSearch()" *ngIf="showSearch" (click)="showSearch=false">
<button class="btn-no-color" (click)="closeSearch();showSearch=false" *ngIf="showSearch" >
<ion-icon class="font-40" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
</button>
src/app/shared/header/header.page.ts
+9 -2
View File
@@ -13,7 +13,7 @@ export class HeaderPage implements OnInit {
profile: string = 'mdgpr';
searchSubject: string = '';
showSearch:false;
showSearch=false;
constructor(
private router: Router,private modalController: ModalController,
@@ -41,9 +41,16 @@ export class HeaderPage implements OnInit {
async openSearch() {
let classs;
if(window.innerWidth < 1366) {
classs = 'modal modal-width-100 modal-padding-top'
} else {
classs = 'modal modal-width-100 modal-padding-top modal-desktop-shadow modal-desktop-remove-background'
}
const modal = await this.modalController.create({
component: SearchPage,
cssClass: 'group-messages modal-desktop search-modal search-modal-to-desktop',
cssClass: classs,
componentProps: {
}
});
src/global.scss
+59 -30
View File
@@ -371,26 +371,66 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
}
}
.modal-width-100-width-background {
.modal-width-100-width-background, .modal-desktop {
.modal-wrapper{
width: 100% !important;
height: 99% !important;
top: 2%;
position: relative;
}
}
.modal-padding-top{
.modal-wrapper{
height: 99%;
top: 2%;
position: relative;
}
}
.modal-top-100-width-background, .modal-desktop {
.modal-wrapper{
width: 100%;
height: 99%;
top: 1%;
position: relative
top: 2%;
position: relative;
}
}
@media only screen and (min-width: 1366px) {
.modal-desktop-shadow{
.ion-page{
box-shadow: 0 0 15px 0 rgb(0 0 0 / 49%);
}
}
.modal-desktop-remove-background{
padding-top: 0px;
top: 85px;
ion-backdrop{
display: none;
transform: none !important;
}
.modal-wrapper{
transform: none !important;
box-shadow: none !important;
height: 100% !important;
top: unset !important;
.ion-page {
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
}
}
}
}
.search-desktop-modal{
.modal-wrapper{
position: absolute;
right: 0px;
height: 100%;
width: 400px;
}
.modal-desktop-shadow{
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.49);
}
.footer-container{
padding: 10px 20px;
}
@@ -418,6 +458,14 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
}
}
.modal-width-100{
.modal-wrapper{
width: 100%;
height: 100%;
}
}
@media only screen and (min-width: 1365px) {
.search-modal{
@@ -434,25 +482,6 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
@media only screen and (min-width: 1366px) {
.search-modal-to-desktop{
padding-top: 0px;
top: 75px;
.modal-wrapper{
transform: none !important;
width: 100%;
height: 100%;
box-shadow: none !important;
.ion-page {
transform: none !important;
}
}
}
}
@media only screen and (min-width: 1024px) {
.timeline-mobile{