Skip to content

283 resources two col #300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
khoadnguyen merged 10 commits into from
Mar 7, 2019
Merged

283 resources two col #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9852ec4
Added Grid and columnized upper cards
AlexRingrose Feb 21, 2019
52f770e
Changed to a square aspect ratio
AlexRingrose Feb 26, 2019
e7e8ec3
Added Grid & combined graph card with lowest score card
AlexRingrose Feb 26, 2019
6c9402a
Split catagories into two col
AlexRingrose Feb 26, 2019
00a2b83
Removed card resizing at xl breakpoint
AlexRingrose Feb 28, 2019
5e0a2a2
Shorted blurb text to two lines
AlexRingrose Feb 28, 2019
6ee55fb
Added stock photos & attached them to resouce data
AlexRingrose Feb 28, 2019
057f67d
Styling cards and imgs
AlexRingrose Feb 28, 2019
773a690
Center wrapper & assorted tweeks
AlexRingrose Mar 6, 2019
2ee6bcd
fixing navbar header
AlexRingrose Mar 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/assets/imgs/attitude-photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/imgs/family-photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/imgs/finances-photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/imgs/health-photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/imgs/personal-growth-photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/imgs/relationships-photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/imgs/social-life-photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/chart/chart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export class ChartComponent {

},

aspectRatio: 3,
aspectRatio: 1,

maintainAspectRatio: true,

Expand Down
154 changes: 77 additions & 77 deletions src/pages/resources/resources.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,82 +15,82 @@


<ion-content>
<h1 id="title">
Hello, {{user.firstName}}!
</h1>
<ion-card col-xl-8 offset-xl-2>
<ion-card-content id="card-text">
<h1>This page will provide helpful resources to aid you in your transition.
<span *ngIf="assessmentCompleted">Based on your self assessment, here are some areas which might require more focus than others.
</span>
<span *ngIf="!assessmentCompleted">
Please complete a self assessment in order to assess which resources would help you most.
</span>
</h1>
<ion-row center>
<ion-col text-center>
<button ion-button color="secondary" *ngIf="!assessmentCompleted" (click)="openSelfAssessment()">Take the Self Assessment</button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
<ion-card *ngIf="assessmentCompleted" id="chartCard" col-xl-8 offset-xl-2>
<!-- <ion-card *ngIf="assessmentCompleted" id="chartCard" col-xl-8 offset-xl-2> -->
<ion-card-content>
<chart></chart>
</ion-card-content>
</ion-card>
<ion-card col-xl-8 offset-xl-2 *ngIf="assessmentCompleted">
<ion-card-header id='title'>
Your lowest score on the self assessment is: <br><br>
<b><em>{{userPro.userData.lowScoreName}}</em></b>
</ion-card-header>
<ion-card-content id="title">
<ion-card id="score-box">
<div class="red"> {{userPro.userData.lowestScore}}</div>
</ion-card>
Maybe you can start there? <br>
<button ion-button color="secondary" (click)="openSelfAssessment()">Retake the self assessment</button>
<button ion-button color="secondary" (click)="openChartHistory()">View your self assessment history</button>
<button ion-button color="secondary" (click)="openDashboard()">Go to the Dashboard</button>
</ion-card-content>
<div class='wrapper'>
<ion-grid>
<ion-row>
<ion-col col-12>
<ion-card>
<ion-card-content id="card-text">
<h1>This page will provide helpful resources to aid you in your transition.
<span *ngIf="assessmentCompleted">Based on your self assessment, here are some areas which might require
more focus than others.
</span>
<span *ngIf="!assessmentCompleted">
Please complete a self assessment in order to assess which resources would help you most.
</span>
</h1>
<ion-row center>
<ion-col text-center>
<button ion-button class='button' color="secondary" *ngIf="!assessmentCompleted"
(click)="openSelfAssessment()">Take
the
Self Assessment</button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>

</ion-card>
<div *ngIf="!assessmentCompleted">
<ion-card *ngFor="let res of resources" col-xl-8 offset-xl-2>
<ion-card-header id='title'>
{{res.title}}
</ion-card-header>
<ion-card-content id="card-text">
{{res.message}}
<ion-row>
<ion-col offset-3>
<img class="image" src={{res.img}} alt="">
</ion-col>
</ion-row>
<ion-item id="card-text">
<span item-end>
<a (click)="openModal(res)">Learn more...</a>
</span>
</ion-item>
</ion-card-content>
</ion-card>
</div>
<div *ngIf="assessmentCompleted">
<ion-card *ngFor="let res of sortedResources" col-xl-8 offset-xl-2>
<ion-card-header id='title'>
{{res.title}}
</ion-card-header>
<ion-card-content id="card-text">
<img class="image" src={{res.img}} alt="" style="width: 50%; height: 100%">
<p id="resMessage">{{res.message}}</p>
<ion-item id="card-text">
<span item-end>
<ion-col col-12>
<ion-card *ngIf="assessmentCompleted" id="chartCard">
<ion-card-content>
<ion-grid>
<ion-row justify-content-around align-items-center>
<ion-col col-12 col-sm-5>
<div class="chart">
<chart></chart>
</div>
</ion-col>
<ion-col col-12 col-sm-5 id='title'>
<div id='title'>
Your lowest score on the self assessment is: <br><br>
<b><em>{{userPro.userData.lowScoreName}}</em></b>
</div>
<div id="title">
<ion-card id="score-box">
<div class="red"> {{userPro.userData.lowestScore}}</div>
</ion-card>
Maybe you can start there? <br>
<button ion-button class='button' color="secondary" (click)="openSelfAssessment()">Retake
assessment
</button>
<button ion-button class='button' color="secondary" (click)="openChartHistory()">View history
</button>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>

<ion-row>
<ion-col *ngFor="let res of resources" col-12 col-lg-6 col-xl-6>
<ion-card class='card'>
<ion-card-header class='card-header'>
{{res.title}}
</ion-card-header>
<img class="image" src={{res.img}} alt="">
<ion-card-content class='card-body'>
{{res.message}}
<ion-item class="link-text">
<a (click)="openModal(res)">Learn more...</a>
</span>
</ion-item>
</ion-card-content>
</ion-card>
</div>

</ion-content>
</ion-item>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
46 changes: 39 additions & 7 deletions src/pages/resources/resources.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
page-resources {

.linkIcons {
font-weight: bold;
font-size: 40px;
position: relative;
top: 10px;
font-weight: bold;
font-size: 40px;
position: relative;
top: 10px;
padding-left: 5px
}

Expand All @@ -26,11 +26,16 @@ page-resources {
margin-left: 60px;
margin-right: 60px;
font-size: 18px;


}

.link-text{
font-size:18px;
text-align: end;
}

#resMessage {
width: 50%;
width: 50%;
font-size: 20px;
padding-left: 20px;
}
Expand All @@ -48,7 +53,34 @@ page-resources {
font-size: 100px;
}

button {
.button {
background-color : rgb(46, 66, 86);
width: 100%;
}

.card{
border-radius: 12px;
}

.card-header{
font-size: 24px;
text-align: center;
font-weight: bold;
background-color: lightblue;
padding: 16px;

}

.card-body{
font-size: 18px;
}

.chart{
max-width: 400px;
}

.wrapper{
max-width: 960px;
margin: auto
}
}
Loading