card parts
This commit is contained in:
@@ -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() {}
|
||||
|
||||
}
|
||||
@@ -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 {}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user