old-portfolio/frontend-hideyoshi.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #73 from HideyoshiNakazone/devel

Browse Source 
Devel - Better Project Card Sizing and Padding
This commit is contained in:
Vitor Hideyoshi
2023-12-30 06:10:33 -03:00
committed by GitHub
parent a70ba6dc9b cdf809f8d5
commit 959570a4c9
2 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/projects/project-card/project-card.component.css
View File

@@ -1,10 +1,14 @@
.card {
width: 90%;
}
.card .inverse-card-image { .card .inverse-card-image {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.card .card-content { .card .card-content {
width: 100%; width: 100%;
padding: 40px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;

5
src/app/projects/project-card/project-card.component.ts
View File

@@ -77,8 +77,11 @@ export class ProjectCardComponent implements OnInit {
} }
private generateChart(languages: Language[], windowWidth: number): ChartOptions { private generateChart(languages: Language[], windowWidth: number): ChartOptions {
const WIDTH_PROPORTION = .9*.8;
const DOUBLE_PADDING_WIDTH = 40;
const responsiveWindowWidth = windowWidth >= 530 ? const responsiveWindowWidth = windowWidth >= 530 ?
300 : (windowWidth*.8 - 80); 300 : (windowWidth*WIDTH_PROPORTION - DOUBLE_PADDING_WIDTH);
return { return {
series: languages.map(value => value.percentage), series: languages.map(value => value.percentage),