WrenchBoard/WrenchBoardIonic2023
2
0
Fork 0
Code Issues Pull Requests Releases Activity

family start

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2024-08-09 07:35:23 -04:00
parent 57c1c7a72b
commit 518766fadc
2 changed files with 137 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/family-connect/family-connect.component.html
+61 -20
View File
@@ -14,32 +14,61 @@
</ion-card>
<p></p>
<div *ngIf="connectStart==0;">
<ion-card class="connect-card" *ngIf="show_connect == true;">
<ion-card-header>
<ion-card-title>Family Connect</ion-card-title>
</ion-card-header>
<div class="bg_white connect-card" (click)="startfamilyConnect()">
<div class="list">
<!-- code to render a large video block-->
<ion-card-content>
Share, play games, or create challenges with rewards
<ion-button
(click)="startfamilyConnect()"
expand="block"
size="small"
fill="outline">
Start Connect
</ion-button>
</ion-card-content>
</ion-card>
<!-- <div-->
<!-- class="bg_image back_image banner_image"-->
<!-- [style.backgroundImage]="'url(' + item_banner + ')'"-->
<!-- ></div>-->
<!-- <div *ngIf="item.banner_location === 'LOCAL'">-->
<!-- <div-->
<!-- class="bg_image back_image banner_image"-->
<!-- [style.backgroundImage]="'url(assets/images/' + item.banner + ')'"-->
<!-- ></div>-->
<!-- </div>-->
<div class="detail">
<ion-label class="name">Family Connect</ion-label>
<ion-label class="bg_text ovf" style="background-color: white">
Share, play games, or create challenges with rewards
</ion-label>
</div>
</div>
<!-- <ion-icon slot="end" name="bookmark-outline" class="save" color="primary"></ion-icon>-->
</div>
<!-- <ion-card class="connect-card" *ngIf="show_connect == true;">-->
<!-- <ion-card-header>-->
<!-- <ion-card-title>Family Connect</ion-card-title>-->
<!-- </ion-card-header>-->
<!-- <ion-card-content>-->
<!-- Share, play games, or create challenges with rewards-->
<!-- <ion-button-->
<!-- (click)="startfamilyConnect()"-->
<!-- expand="block"-->
<!-- size="small"-->
<!-- fill="outline">-->
<!-- Start Connect-->
<!-- </ion-button>-->
<!-- </ion-card-content>-->
<!-- </ion-card>-->
</div>
<div *ngIf="connectStart== 100" style="background-color: aliceblue; border-radius: 10px; padding: 10px;">
<div *ngIf="connectStart== 100" style="background-color: aliceblue; border-radius: 10px; padding: 10px; height: 200px;">
<div>
<ion-label>
<ion-icon name="arrow-back-circle-outline" (click)="cancelInvite()" size="large" style="font-size: 22px; margin: 5px 5px 0px 0px; color: red;"></ion-icon>
<span style="font-size: 18px; font-weight: bolder; color: darkblue;">Select to Invite</span></ion-label>
</div>
<ion-list [inset]="true" style="padding: 0px; margin: 0px 0px 10px 0px;">
<ion-list-header>
<ion-label>
<ion-icon name="arrow-back-circle-outline" (click)="cancelInvite()" size="large" style="font-size: 32px; margin: 5px 5px 0px 0px; color: red;"></ion-icon>
<span style="font-size: 20px; font-weight: bolder; color: darkblue;">Select to Invite</span></ion-label>
</ion-list-header>
<ion-item [button]="true" detail="false" *ngFor="let item of familyData; let i = index" (click)="startInvite(item)">
<!-- <div class="unread-indicator-wrapper" slot="start">-->
@@ -62,6 +91,18 @@
</div>
</ion-item>
</ion-list>
<!-- <ion-list>-->
<!-- <ion-item *ngFor="let item of items; let index">-->
<!-- <ion-avatar slot="start">-->
<!-- <img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />-->
<!-- </ion-avatar>-->
<!-- <ion-label>{{ item }}</ion-label>-->
<!-- </ion-item>-->
<!-- </ion-list>-->
<!-- <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">-->
<!-- <ion-infinite-scroll-content></ion-infinite-scroll-content>-->
<!-- </ion-infinite-scroll>-->
</div>
<div *ngIf="connectStart == 200" >
src/app/components/family-connect/family-connect.component.scss
+76
View File
@@ -7,4 +7,80 @@
margin: 0px;
background: rgb(240,248,255);
background: linear-gradient(90deg, rgba(240,248,255,1) 0%, rgba(255,240,248,1) 35%, rgba(255,240,248,1) 100%);
}
.bg_white {
display: flex;
align-items: flex-start;
background-color: white;
padding: 5px;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.1);
border-radius: 10px;
margin-bottom: 20px;
.list {
display: flex;
align-items: center;
width: 100%;
.back_image {
height: 95px;
width: 95px;
border-radius: 10px;
}
.banner_image {
min-width: 90px;
}
.detail {
width: 100%;
margin-left: 10px;
.bg_text {
color: var(--ion-color-primary);
background-color: rgba(246, 246, 248, 0.9);
font-size: 12px;
padding: 2px 5px;
border-radius: 5px;
//width: 80px;
text-align: center;
height: 38px;
width: 100%;
overflow: hidden;
.ovf {
overflow: hidden;
}
}
.name {
font-family: 'bold';
margin-top: 5px;
padding: 5px;
}
.price {
margin-top: 3px;
color: var(--ion-color-primary);
font-family: 'semi-bold';
}
.row {
display: flex;
align-items: center;
margin-top: 3px;
ion-icon {
font-size: 18px;
}
.small {
margin-left: 8px;
color: grey;
font-size: 14px;
}
}
}
}
}