card parts

This commit is contained in:
CHIEFSOFT\ameye
2024-01-06 07:29:18 -05:00
parent fe5cc43f0a
commit 8c2a15f0ef
8 changed files with 153 additions and 62 deletions
+5
View File
@@ -16,8 +16,13 @@ npx capacitor-assets generate
ionic capacitor build
ionic generate page myfit
ionic generate component choose-activity
ionic generate page blogdetail
ionic generate page marketdetail
ionic generate page activetask
ionic generate page mytask
ionic generate component taskactivities
ionic generate component suggestedlist
@@ -0,0 +1,58 @@
<ion-grid class="card-block">
<ion-row>
<ion-col>
<div class="grid-act" >Choose Activity</div>
</ion-col>
</ion-row>
<ion-row class="card-row">
<ion-col class="card-col">
<ion-card class="card-part card1">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
</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 class="card-col">
<ion-card class="card-part card2">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
</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="card-row">
<ion-col class="card-col">
<ion-card class="card-part card3">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
</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 class="card-col">
<ion-card class="card-part card4">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
</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>
<ion-col>1</ion-col>
</ion-row>
</ion-grid>
@@ -0,0 +1,37 @@
.grid-act{
font-weight: bolder;
font-size: 20px;
padding: 0px 0px 0px 20px;
}
.card-block{
margin: 0px;
//background-color: yellow;
.card-row{
margin: 0px;
padding: 0px;
.card-col{
// background-color: red;
padding: 0px;
.card-part{
padding: 0px;
margin: 10px;
}
}
}
}
.card1{
background-color: #2d7ef1;
color:white;
}
.card2{
background-color: #c91d3d;
color:white;
}
.card3{
background-color: #ff8264;
color:white;
}
.card4{
background-color: #a351dc;
color:white;
}
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { ChooseActivityComponent } from './choose-activity.component';
describe('ChooseActivityComponent', () => {
let component: ChooseActivityComponent;
let fixture: ComponentFixture<ChooseActivityComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ ChooseActivityComponent ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(ChooseActivityComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,14 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-choose-activity',
templateUrl: './choose-activity.component.html',
styleUrls: ['./choose-activity.component.scss'],
})
export class ChooseActivityComponent implements OnInit {
constructor() { }
ngOnInit() {}
}
+2 -1
View File
@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
import { DashPageRoutingModule } from './dash-routing.module';
import { DashPage } from './dash.page';
import {ChooseActivityComponent} from "../../components/choose-activity/choose-activity.component";
@NgModule({
imports: [
@@ -15,6 +16,6 @@ import { DashPage } from './dash.page';
IonicModule,
DashPageRoutingModule
],
declarations: [DashPage]
declarations: [DashPage,ChooseActivityComponent]
})
export class DashPageModule {}
+2 -59
View File
@@ -16,67 +16,10 @@
<div>
<div class="acc-name">Firstname Lastname</div>
<!-- <hr style="color: red" />-->
<div>Last Login : 848484494 494949</div>
<div class="last-login">Last Login :01-01-2024 9:40 AM</div>
</div>
</div>
<ion-grid class="card-block">
<ion-row class="card-row">
<ion-col class="card-col">
<ion-card class="card-part">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
<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 class="card-col">
<ion-card class="card-part">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
<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="card-row">
<ion-col class="card-col">
<ion-card class="card-part">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
<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 class="card-col">
<ion-card class="card-part">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
<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>
<ion-col>1</ion-col>
</ion-row>
</ion-grid>
<app-choose-activity></app-choose-activity>
</div>
+11 -2
View File
@@ -3,11 +3,20 @@
display: flex;
.acc-name{
font-weight: bolder;
font-size: 22px;
font-size: 20px;
padding: 10px 0px 0px 10px;
}
.last-login{
font-size: 12px;
color: #a29c9c;
padding: 0px 0px 0px 10px;
}
}
.grid-act{
font-weight: bolder;
font-size: 20px;
padding: 0px 0px 0px 20px;
}
.card-block{
margin: 0px;
//background-color: yellow;