Improve home publi9cation for mobile

This commit is contained in:
Peter Maquiran
2021-04-14 15:27:50 +01:00
parent 13bd4131b3
commit f31299c24a
15 changed files with 37 additions and 135 deletions
@@ -1,18 +1,3 @@
<ion-header class="ion-no-border">
<ion-toolbar class="ion-no-border bg-blue">
<div class="div-top-header">
<div class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="content-container">
@@ -14,7 +14,6 @@ ion-toolbar{
border-width: 0 !important;
}
.div-top-header{
width: 400px;
margin: 0 auto;
background-color: #0782c9;
overflow: auto;
@@ -41,7 +40,6 @@ ion-toolbar{
margin-right: 10px;
}
.content-top{
width: 344px;
background: #f3f2f2;
height: 20px;
margin: 0 auto;
@@ -60,7 +58,6 @@ ion-toolbar{
overflow: auto;
}
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
@@ -79,7 +76,6 @@ font-size: 25px;
overflow: auto;
}
.ion-item-container{
width: 360px;
margin: 15px auto;
border: 1px solid #ebebeb;
border-radius: 5px;
@@ -92,8 +88,8 @@ font-size: 25px;
overflow: auto;
}
.ion-item-class-2{
width: 360px;
margin: 0px auto;
display: flex;
}
.ion-icon-class{
width: 45px;
@@ -101,24 +97,23 @@ font-size: 25px;
float: left;
padding: 10px;
font-size: 25px;
}
.ion-input-class{
width: 315px;
height: auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 5px;
padding-right: 10px;
float: left;
flex: 1;
}
.ion-textarea-class{
width: 315px;
height: auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 5px;
padding-right: 10px;
float: left;
flex: 1;
}
.ion-input-class-no-height{
border: 1px solid #ebebeb;
@@ -1,18 +1,4 @@
<ion-header class="ion-no-border">
<ion-toolbar class="ion-no-border bg-blue">
<div class="div-top-header">
<div class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="content-container">
@@ -14,7 +14,6 @@ ion-toolbar{
border-width: 0 !important;
}
.div-top-header{
width: 400px;
margin: 0 auto;
background-color: #0782c9;
overflow: auto;
@@ -41,7 +40,6 @@ ion-toolbar{
margin-right: 10px;
}
.content-top{
width: 344px;
background: #f3f2f2;
height: 20px;
margin: 0 auto;
@@ -60,7 +58,6 @@ ion-toolbar{
overflow: auto;
}
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
@@ -79,7 +76,6 @@ font-size: 25px;
overflow: auto;
}
.ion-item-container{
width: 360px;
margin: 15px auto;
border: 1px solid #ebebeb;
border-radius: 5px;
@@ -92,8 +88,8 @@ font-size: 25px;
overflow: auto;
}
.ion-item-class-2{
width: 360px;
margin: 0px auto;
display: flex;
}
.ion-icon-class{
width: 45px;
@@ -109,7 +105,7 @@ font-size: 25px;
border-radius: 5px;
padding-left: 5px;
padding-right: 10px;
float: left;
flex: 1;
}
.ion-input-class-no-height{
border: 1px solid #ebebeb;
@@ -81,7 +81,7 @@ export class NewPublicationPage implements OnInit {
this.capturedImage = imageData;
this.capturedImageTitle = new Date().getTime() + '.jpeg';
}, (err) => {
console.log(err);
/* console.log(err); */
});
}
@@ -102,7 +102,7 @@ export class NewPublicationPage implements OnInit {
this.capturedImage = imageData;
this.capturedImageTitle = new Date().getTime() + '.jpeg';
}, (err) => {
console.log(err);
/* console.log(err); */
});
}
@@ -139,8 +139,8 @@ export class NewPublicationPage implements OnInit {
FileBase64: this.publication.FileBase64,
FileExtension: 'jpeg',
}
console.log('Edit - keep image');
console.log(this.publication);
/* console.log('Edit - keep image');
console.log(this.publication); */
this.publications.UpdatePublication(this.publication.ProcessId, this.publication);
this.close();
}
@@ -159,8 +159,8 @@ export class NewPublicationPage implements OnInit {
FileExtension: 'jpeg',
}
console.log('Create');
console.log(this.publication);
/* console.log('Create');
console.log(this.publication); */
this.publications.CreatePublication(this.folderId, this.publication);
this.close();
}
@@ -1,21 +1,6 @@
<ion-header class="ion-no-border">
<ion-toolbar class="ion-no-border bg-blue">
<div class="div-top-header">
<div class="div-search">
<ion-icon tappable src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="content-top"></div>
<div class="content-container">
<div *ngIf="publication.Title != ''">
<div class="title-content">
@@ -10,7 +10,6 @@
border-width: 0 !important;
}
.div-top-header{
width: 400px;
margin: 0 auto;
background-color: #0782c9;
overflow: auto;
@@ -37,7 +36,6 @@
margin-right: 10px;
}
.content-top{
width: 344px;
background: #f3f2f2;
height: 20px;
margin: 0 auto;
@@ -55,7 +53,6 @@
overflow: auto;
}
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
@@ -67,7 +64,6 @@
overflow: auto;
}
.div-title{
width: 270px;
/* padding: 0!important; */
float: left;
margin: 2.5px 0 0 5px;
@@ -88,7 +84,6 @@
object-fit: cover;
}
.post-description{
width: 360px;
margin: 0 auto;
margin-bottom: 35px;
}
@@ -94,7 +94,7 @@ export class PublicationDetailPage implements OnInit {
publicationType: publicationType,
publication: this.publication,
},
cssClass: 'new-publication',
cssClass: 'new-publication modal modal-desktop',
backdropDismiss: false
});
await modal.present();
@@ -17,8 +17,8 @@
<ion-toolbar >
<div class="main-header">
<div class="title-content d-flex justify-space-between">
<div class="div-title">
<ion-label class="title">Acções Presidenciais</ion-label>
<div class="div-title flex-grow-1">
<ion-label class="title ">Acções Presidenciais</ion-label>
</div>
<div class="div-icon">
<button class="btn-no-color" (click)="AddPublicationFolder()">
@@ -116,7 +116,7 @@ export class PublicationsPage implements OnInit {
componentProps:{
item: item,
},
cssClass: 'new-action',
cssClass: 'new-action modal modal-desktop',
backdropDismiss: false
});
await modal.present();
@@ -131,7 +131,6 @@ export class PublicationsPage implements OnInit {
}
async viewPublications(folderId: string) {
console.log('FOLDER', folderId)
const enterAnimation = (baseEl: any) => {
const backdropAnimation = this.animationController.create()
@@ -160,7 +159,7 @@ export class PublicationsPage implements OnInit {
this.closeDesktopComponent();
// OpenModal
if( window.innerWidth <= 1024){
if( window.innerWidth <= 800){
/* let item = this.publicationFolderList; */
const modal = await this.modalController.create({
component: ViewPublicationsPage,
@@ -169,7 +168,7 @@ export class PublicationsPage implements OnInit {
componentProps:{
folderId:folderId,
},
cssClass: 'new-action',
cssClass: 'new-action modal modal-desktop',
backdropDismiss: false
});
await modal.present();
@@ -1,26 +1,11 @@
<ion-header class="ion-no-border">
<ion-toolbar class="ion-no-border bg-blue">
<div class="div-top-header">
<div class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="content-top"></div>
<div class="content-container">
<div *ngIf="publication.Title != ''">
<div class="title-content">
<div class="title-content px-20" (click)="close()">
<div class="back-icon">
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
<ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
</div>
<div class="div-title">
<ion-label class="title"> {{publication.Title}}</ion-label>
@@ -39,7 +24,7 @@
<div *ngIf="publication.FileBase64.length < 30" class="post-img">
<img src="/assets/icon/icon-no-image.svg" alt="image">
</div>
<div class="post-description">
<div class="post-description px-20">
<p>{{publication.Message}}</p>
</div>
</div>
@@ -67,6 +52,7 @@
</div>
</div>
</ion-content>
<ion-footer>
<ion-toolbar class="footer-toolbar">
<ion-buttons slot="start">
@@ -14,7 +14,6 @@
border-width: 0 !important;
}
.div-top-header{
width: 400px;
margin: 0 auto;
background-color: #0782c9;
overflow: auto;
@@ -41,7 +40,6 @@
margin-right: 10px;
}
.content-top{
width: 344px;
background: #f3f2f2;
height: 20px;
margin: 0 auto;
@@ -60,10 +58,8 @@
overflow: auto;
}
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
}
.back-icon{
width: auto;
@@ -72,7 +68,6 @@
overflow: auto;
}
.div-title{
width: 270px;
/* padding: 0!important; */
float: left;
margin: 2.5px 0 0 5px;
@@ -93,7 +88,6 @@
object-fit: cover;
}
.post-description{
width: 360px;
margin: 0 auto;
margin-bottom: 35px;
}
@@ -1,35 +1,20 @@
<ion-header class="ion-no-border">
<ion-toolbar class="bg-blue">
<div class="div-top-header">
<div class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-header class="ion-no-border">
<ion-toolbar class="bg-blue">
<div class="content-top"></div>
<div class="main-header">
<div class="title-content">
<div class="back-icon">
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
<div class="title-content d-flex">
<div class="back-icon" (click)="close()">
<ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
</div>
<div class="div-title">
<div class="div-title flex-grow-1">
<ion-label class="title">{{item.Description}}</ion-label>
<p class="item-content-detail">{{item.Detail}}</p>
<p class="item-content-date">{{item.DateBegin}}</p>
</div>
<div class="actions-icon">
<div class="actions-icon" (click)="AddPublication('2',item.ProcessId)">
<!-- <ion-icon (click)="AddPublication('1',item.ProcessId)" slot="end" src='assets/images/icons-add-photo.svg'></ion-icon> -->
<ion-icon (click)="AddPublication('2',item.ProcessId)" slot="end" src='assets/images/icons-add.svg'></ion-icon>
<ion-icon slot="end" src='assets/images/icons-add.svg'></ion-icon>
</div>
</div>
</div>
@@ -54,7 +39,7 @@
<div *ngIf="publication.FileBase64.length < 30" class="post-img">
<img src="/assets/icon/icon-no-image.svg" alt="image">
</div>
<div class="post-content">
<div class="post-content px-20">
<div class="post-title-time">
<div class="post-title">
<ion-label>{{publication.Title}}</ion-label>
@@ -70,7 +55,7 @@
<div class="post-img">
<img src="/assets/icon/icon-no-image.svg" alt="image">
</div>
<div class="post-content">
<div class="post-content px-20">
<div class="post-title-time">
<div class="post-title">
<ion-label><ion-skeleton-text animated animated style="width: 60%;"></ion-skeleton-text></ion-label>
@@ -85,7 +70,7 @@
<div class="post-img">
<img src="/assets/icon/icon-no-image.svg" alt="image">
</div>
<div class="post-content">
<div class="post-content px-20">
<div class="post-title-time">
<div class="post-title">
<ion-label><ion-skeleton-text animated animated style="width: 60%;"></ion-skeleton-text></ion-label>
@@ -66,7 +66,6 @@
padding: 15px 20px 0 20px;
}
.content-top{
width: 344px;
background: #f3f2f2;
height: 20px;
margin: 0 auto;
@@ -86,7 +85,6 @@
overflow: auto;
}
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
@@ -100,7 +98,6 @@
}
.div-title{
width: 221px;
/* padding: 0!important; */
float: left;
margin: 2.5px 0 0 5px;
@@ -148,7 +145,6 @@
object-fit: cover;
}
.post-content{
width: 360px;
margin: 0 auto;
margin-bottom: 35px;
}
@@ -93,7 +93,7 @@ export class ViewPublicationsPage implements OnInit {
publicationType: publicationType,
folderId: folderId,
},
cssClass: 'new-publication',
cssClass: 'new-publication modal modal-desktop',
backdropDismiss: false
});
await modal.present();
@@ -109,7 +109,7 @@ export class ViewPublicationsPage implements OnInit {
publicationId: publicationId,
folderId: this.folderId,
},
cssClass: 'publication-detail',
cssClass: 'publication-detail modal modal-desktop',
backdropDismiss: false
});
await modal.present();