Improve publication page

src/app/pages/publications/publications.page.html

@@ -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-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
-      <ion-refresher-content>
+    <ion-refresher-content>
-      </ion-refresher-content>
+    </ion-refresher-content>
-    </ion-refresher>
+  </ion-refresher>
-  <div class="main-content">
+
-    <div class="item" 
+  <!-- Main container -->
-    *ngFor="let viagem of publicationsTravelFolderList"
+  <div class="d-flex  height-100">
-    
+    <div class="d-flex flex-grow-1 flex-column aside max-width-md-40">
-    (click)="viewPublications(viagem.ProcessId)">
+      <!-- Header -->
-      <div class="item-icon">
+      <ion-toolbar class="bg-blue">
-        <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
+        <div class="main-header">
-      </div>
+          <div class="title-content">
-      <div class="item-content">
+            <div class="div-title">
-        <ion-label>
+              <ion-label class="title">Ações Presidenciais</ion-label>
-          <p class="item-content-date">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
+            </div>
-          <p class="item-content-title">{{viagem.Description}}</p>
+            <div class="div-icon">
-          <p class="item-content-detail">{{viagem.Detail}}</p>
+              <ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
-        </ion-label>
+            </div>
-      </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"
+
-    
+    <div class="d-none d-md-flex flex-grow-1 flex-column">
-    *ngFor="let evento of publicationsEventFolderList"
+      <!-- Header -->
-    (click)="viewPublications(evento)">
+      <ion-toolbar class="bg-blue">
-      <div class="item-icon2">
+        <div class="main-header">
-        <ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
+          <div class="title-content">
-      </div>
+            <div class="div-title">
-      <div class="item-content">
+              <ion-label class="title">Header</ion-label>
-        <ion-label>
+            </div>
-          <p class="item-content-date">{{evento.DateBegin}}</p>
+          </div>
-          <p class="item-content-title">{{evento.Description}}</p>
+        </div>
-        </ion-label>
+      </ion-toolbar>
-      </div>
+      <!-- Content -->
+  
+      <div class="main-content overflow-auto-y">
+        123
+      </div>  
     </div>
-  </div>    
+
+  </div>
+
+  
 </ion-content>

src/app/pages/publications/publications.page.scss

@@ -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

@@ -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%;}
+.width-90{width: 90%;}
-.height-fit-content{height: fit-content;}
+.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;