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

Better Project Card Sizing and Padding

Browse Source
This commit is contained in:
Vitor Hideyoshi
2023-12-30 06:08:45 -03:00
parent 328fd8b12f
commit 11bbe8da2c
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),