Updated page

This commit is contained in:
2023-02-26 18:32:34 -05:00
parent a35baeba6a
commit 6464d5303c
3 changed files with 146 additions and 58 deletions
+103 -41
View File
@@ -1,51 +1,113 @@
<ion-content>
<ion-card>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-item>
<ion-avatar slot="start">
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
</ion-avatar>
<ion-label> Avatar Item </ion-label>
</ion-item>
</ion-row>
</ion-grid>
</ion-card-content>
<ion-slides pager="true">
<ion-slide *ngFor="let x of slides_items; let i = index">
<ion-button shape="round" size="default" class="slide_c" outline
(click)="selectedMenu(x)">{{x.name}}</ion-button>
</ion-slide>
</ion-slides>
</ion-card>
<div class="dash_box">
<div class="dash_top">
<ion-grid>
<ion-row>
<ion-item>
<ion-avatar slot="start">
<img
alt="Silhouette of a person's head"
src="https://ionicframework.com/docs/img/demos/avatar.svg"
/>
</ion-avatar>
<ion-label> Avatar Item </ion-label>
</ion-item>
</ion-row>
<ion-row>
<ion-col>
<ion-slides pager="true">
<ion-slide *ngFor="let x of slides_items; let i = index">
<ion-button
shape="round"
size="small"
fill="outline"
class="slide_c"
outline
(click)="selectedMenu(x)"
>{{x.name}}</ion-button
>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
<div class="dash_top">
</div>
<ion-grid class="box_below">
<ion-grid>
<ion-row class="home_box_card">
<ion-col>
<ion-card class="first_card">
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
Here's a small text description for the card content. Nothing more, nothing less.
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card class="first_card">
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
Here's a small text description for the card content. Nothing more, nothing less.
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row class="home_box_card">
<ion-col>
<ion-card class="first_card">
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
Here's a small text description for the card content. Nothing more, nothing less.
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card class="first_card">
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
Here's a small text description for the card content. Nothing more, nothing less.
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<div>{{what_is_below}}</div>
</ion-grid>
</div>
<ion-grid class="box_below">
<div>{{what_is_below}}</div>
</ion-grid>
</div>
<ion-card *ngFor="let item of blogData">
<ion-grid>
<ion-row class="block_list" *ngFor="let item of blogData" (click)="selectedBlog(item)">
<ion-col><img alt={{item.post_title}} src={{item.meta_value}} /></ion-col>
<ion-col>
{{item.post_title}}
</ion-col>
</ion-row>
</ion-grid>
<!-- <ion-card *ngFor="let item of blogData">
<img alt={{item.post_title}} src={{item.meta_value}} />
<ion-card-header>
<ion-card-subtitle>{{item.post_title}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
THis is some contatnts to show for noe
</ion-card-content>
</ion-card>
</ion-content>
<ion-card-content>
THis is some contatnts to show for noe
</ion-card-content>
</ion-card> -->
</ion-content>
+40 -17
View File
@@ -1,28 +1,51 @@
.dash_top {
padding: 20px 0px 0px 0px;
position: relative;
// top:50px;
padding: 10px 0 0;
position: relative;
// top:50px;
}
.slide_c {
//width: 150px;
//background-color: red;
padding: 0px;
font-size: 11px;
text-transform: uppercase;
// width: 150px;
// background-color: red;
padding: 0;
font-size: 11px;
text-transform: uppercase;
}
ion-slide {
width: unset !important;
width: unset !important;
}
.box_below {
position: relative;
// top:65px;
background-color: lightcoral;
height: 80%;
position: relative;
// top:65px;
background-color: lightcoral;
margin: 0px;
}
.dash_box {
height: 100%;
width: 100%;
background-color: yellow;
padding: 2px;
// height: 100%;
width: 100%;
background-color:aliceblue;
padding: 2px;
margin: 0px;
}
.home_box_card {
background-color: yellow;
margin: 0px;
// height: 280px;
}
ion-card {
margin: 0;
}
.first_card{
background-image: url('../../../assets/img/myfit_home.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 250px;
}
.block_list{
border-radius: 5px;
background-color: aliceblue;
margin: 10px 5px 5px 5px;
}
@@ -36,6 +36,9 @@ export class UserDashPage implements OnInit {
this.what_is_below = menuData.name;
}
selectedBlog(blogItem:any){
alert(100);
}
async loadBlogData(event?: InfiniteScrollCustomEvent) {
const loading = await this.loadingCtrl.create({
message: 'Loading..',