improve responsiveness

This commit is contained in:
Peter Maquiran
2023-07-07 12:03:03 +01:00
parent 2d03162a3b
commit c62f7319a0
176 changed files with 1793 additions and 1682 deletions
@@ -1,3 +1,5 @@
@import '~src/function.scss';
:host{
background: #fff;
}
@@ -20,7 +22,7 @@
border: 0!important;
}
.div-search{
font-size: 45px;
font-size: rem(45);
float: left;
margin: 0 0 0 10px
}
@@ -34,7 +36,7 @@
width: 100%;
}
.div-profile{
font-size: 45px;
font-size: rem(45);
float: right;
margin-right: 10px;
}
@@ -64,14 +66,14 @@
margin: 2.5px 0 0 5px;
}
.title{
font-size: 25px;
font-size: rem(25);
}
.container-div{
margin-bottom: 15px;
margin-bottom: rem(15);
overflow: auto;
}
.ion-item-container{
margin: 15px auto;
margin: rem(15) auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 10px;
@@ -86,11 +88,11 @@
margin: 0px auto;
}
.ion-icon-class{
width: 45px;
height: 45px;
width: rem(45);
height: rem(45);
float: left;
padding: 10px;
font-size: 25px;
font-size: rem(25);
}
.ion-input-class{
height: auto;
@@ -1,3 +1,5 @@
@import '~src/function.scss';
:host{
background: #0782c9;
}
@@ -22,7 +24,7 @@
border: 0!important;
}
.div-search{
font-size: 45px;
font-size: rem(45);
float: left;
margin: 0 0 0 10px
}
@@ -36,7 +38,7 @@
width: 100%;
}
.div-profile{
font-size: 45px;
font-size: rem(45);
float: right;
margin-right: 10px;
}
@@ -71,7 +73,7 @@
margin: 2.5px 0 0 5px;
}
.title{
font-size: 25px;
font-size: rem(25);
}
.gallery-items{
width: 360px;
@@ -1,3 +1,5 @@
@import '~src/function.scss';
:host{
background: transparent;
}
@@ -21,7 +23,7 @@ ion-toolbar{
border: 0!important;
}
.div-search{
font-size: 45px;
font-size: rem(45);
float: left;
margin: 0 0 0 10px
}
@@ -35,7 +37,7 @@ ion-toolbar{
width: 100%;
}
.div-profile{
font-size: 45px;
font-size: rem(45);
float: right;
margin-right: 10px;
}
@@ -69,14 +71,14 @@ float: left;
margin: 2.5px 0 0 5px;
}
.title{
font-size: 25px;
font-size: rem(25);
}
.container-div{
margin-bottom: 15px;
margin-bottom: rem(15);
overflow: auto;
}
.ion-item-container{
margin: 15px auto;
margin: rem(15) auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 10px;
@@ -92,11 +94,11 @@ font-size: 25px;
display: flex;
}
.ion-icon-class{
width: 45px;
height: 45px;
width: rem(45);
height: rem(45);
float: left;
padding: 10px;
font-size: 25px;
font-size: rem(25);
}
.ion-input-class{
@@ -1,3 +1,5 @@
@import '~src/function.scss';
:host{
background: #0782c9;
}
@@ -20,7 +22,7 @@ ion-toolbar{
border: 0!important;
}
.div-search{
font-size: 45px;
font-size: rem(45);
float: left;
margin: 0 0 0 10px
}
@@ -34,7 +36,7 @@ ion-toolbar{
width: 100%;
}
.div-profile{
font-size: 45px;
font-size: rem(45);
float: right;
margin-right: 10px;
}
@@ -67,14 +69,14 @@ float: left;
margin: 2.5px 0 0 5px;
}
.title{
font-size: 25px;
font-size: rem(25);
}
.container-div{
margin-bottom: 15px;
margin-bottom: rem(15);
overflow: auto;
}
.ion-item-container{
margin: 15px auto;
margin: rem(15) auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 10px;
@@ -90,11 +92,11 @@ font-size: 25px;
display: flex;
}
.ion-icon-class{
width: 45px;
height: 45px;
width: rem(45);
height: rem(45);
float: left;
padding: 10px;
font-size: 25px;
font-size: rem(25);
}
.ion-textarea-class{
width: 315px;
@@ -112,7 +114,7 @@ font-size: 25px;
}
.attach-document{
font-size: 15px;
font-size: rem(15);
color: var(--title-text-color);
margin: 5px 5px 20px 10px;
padding: 5px;
@@ -120,12 +122,12 @@ font-size: 25px;
}
.attach-icon{
width: 37px;
font-size: 35px;
font-size: rem(35);
float: left;
}
.attached-title{
font-family: Roboto;
font-size: 15px;
font-size: rem(15);
font-weight: bold;
font-stretch: normal;
font-style: normal;
@@ -144,17 +146,17 @@ font-size: 25px;
width: 60px;
}
.picture-file-name{
font-size: 15px;
font-size: rem(15);
color: #0d89d1;
}
.size{
color: #cecece;
font-size: 13px;
font-size: rem(13);
}
}
.container-title{
font-size: 15px;
font-size: rem(15);
font-weight: bold;
}
.hide-desktop{
@@ -1,3 +1,5 @@
@import '~src/function.scss';
@media only screen and (min-width: 100px) {
:host{
font-size: 14px;
@@ -6,7 +8,7 @@
@media only screen and (min-width: 500px) {
:host{
font-size: 16px;
font-size: rem(16);
}
}
@@ -32,7 +34,7 @@ ion-toolbar{
border: 0!important;
.div-search{
font-size: 45px;
font-size: rem(45);
float: left;
margin: 0 0 0 10px
}
@@ -46,7 +48,7 @@ ion-toolbar{
width: 100%;
}
.div-profile{
font-size: 45px;
font-size: rem(45);
float: right;
margin-right: 10px;
}
@@ -75,9 +77,9 @@ ion-toolbar{
}
.div-icon{
display: flex;
/* width: 45px;
/* width: rem(45);
float: right; */
font-size: 35px;
font-size: rem(35);
padding: 0 !important;
align-items: center;
justify-content: flex-end;
@@ -124,9 +126,9 @@ ion-toolbar{
.item-icon{
//margin-top: 28px;
width: 45px;
width: rem(45);
float: left;
font-size: 40px;
font-size: rem(40);
.item-icon ion-icon{
color: #061b52;
@@ -161,14 +163,14 @@ ion-toolbar{
}
.item-content-detail{
color: #000000;
font-size: 13px;
font-size: rem(15);
margin: 0 !important;
padding: 0 !important;
}
.item-options{
color: var(--box-hover-background-color);
width: 25px;
font-size: 20px;
width: rem(25);
font-size: rem(20);
}
.item-content-date-active, .item-content-title-active, .item-content-detail-active{
color: #fff;
@@ -220,14 +222,14 @@ ion-toolbar{
.edit{
padding: 6px;
font-size: 35px;
font-size: rem(35);
color:#061b52;
border-radius: 20px;
margin: 7px;
}
.delete{
padding: 7px;
font-size: 21px;
font-size: rem(21);
color:#d30a0a;
border-radius: 20px;
margin: 12px;
@@ -30,7 +30,7 @@
<img src="/assets/icon/icon-no-image.svg" alt="image">
</div>
<div class="post-description px-20">
<pre class="text font-13-em">{{publication.Message}}</pre>
<pre class="text font-14-rem">{{publication.Message}}</pre>
</div>
</div>
</div>
@@ -60,3 +60,7 @@
margin: 0 auto;
margin-bottom: 35px;
}
.font-14-rem {
font-size: rem(14) !important;
}
@@ -9,7 +9,7 @@
</div>
<div *ngIf="publicationItem[folderId]?.DateBegin != null" class="div-title flex-grow-1">
<p class="title font-25-em mb-10-em">{{publicationItem[folderId].Description}}</p>
<p class="item-content-detail font-13-em">{{publicationItem[folderId].Detail}}</p>
<p class="item-content-detail font-14-em">{{publicationItem[folderId].Detail}}</p>
<p class="item-content-date font-13-em" >{{publicationItem[folderId].DateBegin | date: 'dd-MM-yy HH:mm'}}</p>
</div>
<div *ngIf="p.userPermission([p.permissionList.Actions.createPost]) && publicationItem[folderId]" class="cursor-pointer font-35-em" (click)="AddPublication('2',publicationItem[folderId].ProcessId)">
@@ -45,7 +45,7 @@
<div class="post-data font-13-em">{{publication.DatePublication | date: 'dd-MM-yy HH:mm'}}</div>
</div>
<div class="post-description ">
<pre class="text font-13-em">{{publication.Message}}</pre>
<pre class="text font-14-em">{{publication.Message}}</pre>
</div>
</div>
</ion-card-content>
@@ -1,3 +1,5 @@
@import '~src/function.scss';
:host{
background: transparent;
padding: 0!important;
@@ -23,7 +25,7 @@
border: 0!important;
}
.div-search{
font-size: 45px;
font-size: rem(45);
float: left;
margin: 0 0 0 10px
}
@@ -37,7 +39,7 @@
width: 100%;
}
.div-profile{
font-size: 45px;
font-size: rem(45);
float: right;
margin-right: 10px;
}
@@ -86,7 +88,7 @@
.back-icon{
float: left;
font-size: 35px;
font-size: rem(35);
}