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

Improve publication page

Browse Source
This commit is contained in:
Peter Maquiran
2021-03-11 15:44:19 +01:00
parent c6e4d08994
commit fc8235035f
3 changed files with 137 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/publications/publications.page.html
+76 -48
View File
@@ -1,56 +1,84 @@
<ion-header>
<ion-header class="ion-no-border">
<app-header></app-header>
</ion-header>
<ion-header class="ion-no-border">
<ion-toolbar class="bg-blue">
<div class="main-header">
<div class="title-content">
<div class="div-title">
<ion-label class="title">Ações Presidenciais</ion-label>
</div>
<div class="div-icon">
<ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
</div>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<div class="main-content">
<div class="item"
*ngFor="let viagem of publicationsTravelFolderList"
(click)="viewPublications(viagem.ProcessId)">
<div class="item-icon">
<ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
</div>
<div class="item-content">
<ion-label>
<p class="item-content-date">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
<p class="item-content-title">{{viagem.Description}}</p>
<p class="item-content-detail">{{viagem.Detail}}</p>
</ion-label>
</div>
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<ion-refresher-content>
</ion-refresher-content>
</ion-refresher>
<!-- Main container -->
<div class="d-flex height-100">
<div class="d-flex flex-grow-1 flex-column aside max-width-md-40">
<!-- Header -->
<ion-toolbar class="bg-blue">
<div class="main-header">
<div class="title-content">
<div class="div-title">
<ion-label class="title">Ações Presidenciais</ion-label>
</div>
<div class="div-icon">
<ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
</div>
</div>
</div>
</ion-toolbar>
<!-- Content -->
<div class="main-content overflow-auto-y">
<div class="item"
*ngFor="let viagem of publicationsTravelFolderList"
(click)="viewPublications(viagem.ProcessId)">
<div class="item-icon">
<ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
</div>
<div class="item-content">
<ion-label>
<p class="item-content-date">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
<p class="item-content-title">{{viagem.Description}}</p>
<p class="item-content-detail">{{viagem.Detail}}</p>
</ion-label>
</div>
</div>
<div class="item"
*ngFor="let evento of publicationsEventFolderList"
(click)="viewPublications(evento)">
<div class="item-icon2">
<ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
</div>
<div class="item-content">
<ion-label>
<p class="item-content-date">{{evento.DateBegin}}</p>
<p class="item-content-title">{{evento.Description}}</p>
</ion-label>
</div>
</div>
</div>
</div>
<div class="item"
*ngFor="let evento of publicationsEventFolderList"
(click)="viewPublications(evento)">
<div class="item-icon2">
<ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
</div>
<div class="item-content">
<ion-label>
<p class="item-content-date">{{evento.DateBegin}}</p>
<p class="item-content-title">{{evento.Description}}</p>
</ion-label>
</div>
<div class="d-none d-md-flex flex-grow-1 flex-column">
<!-- Header -->
<ion-toolbar class="bg-blue">
<div class="main-header">
<div class="title-content">
<div class="div-title">
<ion-label class="title">Header</ion-label>
</div>
</div>
</div>
</ion-toolbar>
<!-- Content -->
<div class="main-content overflow-auto-y">
123
</div>
</div>
</div>
</div>
</ion-content>
src/app/pages/publications/publications.page.scss
+1 -2
View File
@@ -11,8 +11,8 @@ ion-toolbar{
--padding-right: 0px !important;
--padding-end: 0px !important;
}
.div-top-header{
width: 400px;
margin: 0 auto;
background-color: #0782c9;
overflow: auto;
@@ -57,7 +57,6 @@ ion-toolbar{
transform: translate3d(0, 1px, 0);
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
src/style/main.scss
+60 -2
View File
@@ -185,6 +185,30 @@
}
}
.width-md-100{width: 100%;}
.width-md-90{width: 90%;}
.width-md-80{width: 80%;}
.width-md-70{width: 70%;}
.width-md-60{width: 60%;}
.width-md-50{width: 50%;}
.width-md-40{width: 40%;}
.width-md-30{width: 30%;}
.width-md-20{width: 20%;}
.width-md-10{width: 10%;}
.max-width-md-100{max-width: 100%;}
.max-width-md-90{max-width: 90%;}
.max-width-md-80{max-width: 80%;}
.max-width-md-70{max-width: 70%;}
.max-width-md-60{max-width: 60%;}
.max-width-md-50{max-width: 50%;}
.max-width-md-40{max-width: 40%;}
.max-width-md-30{max-width: 30%;}
.max-width-md-20{max-width: 20%;}
.max-width-md-10{max-width: 10%;}
}
@media only screen and (min-width: 1366px) {
@@ -332,11 +356,45 @@
.background-black {background: black;}
.text-center {text-align: center;}
.tex-left{ text-align: left;}
.text-right{text-align: right;}
.width-100{width: 100%;}
.height-100{height: 100%;}
.height-fit-content{height: fit-content;}
.width-90{width: 90%;}
.width-80{width: 80%;}
.width-70{width: 70%;}
.width-60{width: 60%;}
.width-50{width: 50%;}
.width-40{width: 40%;}
.width-30{width: 30%;}
.width-20{width: 20%;}
.width-10{width: 10%;}
.max-width-100{max-width: 100%;}
.max-width-90{max-width: 90%;}
.max-width-80{max-width: 80%;}
.max-width-70{max-width: 70%;}
.max-width-60{max-width: 60%;}
.max-width-50{max-width: 50%;}
.max-width-40{max-width: 40%;}
.max-width-30{max-width: 30%;}
.max-width-20{max-width: 20%;}
.max-width-10{max-width: 10%;}
.height-100{height: 100%;}
.height-90{height: 90%;}
.height-80{height: 80%;}
.height-70{width: 70%;}
.height-60{height: 60%;}
.height-50{height: 50%;}
.height-40{height: 40%;}
.height-30{height: 30%;}
.height-20{height: 20%;}
.height-10{height: 10%;}
.height-fit-content{height: fit-content;}
.border-t-radius{
border-top-left-radius: 25px;