s426135/session-companion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

SES-140 added CSS

Browse Source
This commit is contained in:
Natalia Gawron 2021-01-10 14:47:50 +01:00
parent 3627f987da
commit c805fd2cb3
3 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css
View File

@ -1,7 +1,17 @@
#ability-value:hover{
opacity: 0.5;
cursor: pointer;
}
#ability-saving-throws:hover{
opacity: 0.5;
cursor: pointer;
}
.cardContainerClass { .cardContainerClass {
border: 6px solid white; border: 2px solid;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px gold; box-shadow: 0 0 8px;
} }
#main{ #main{
@ -37,6 +47,7 @@
#ability-card-header { #ability-card-header {
font-weight: 600; font-weight: 600;
border-radius: 10px 10px 0 0;
} }
@media (max-width: 468px) { @media (max-width: 468px) {
@ -51,6 +62,7 @@
justify-content: space-around; justify-content: space-around;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
border-radius: 0 0 10px 10px;
} }
#skill-btn{ #skill-btn{
border: 2px solid #9e814d; border: 2px solid #9e814d;
@ -58,7 +70,13 @@
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
border-radius: 5px;
} }
#skill-btn:hover{
opacity: 0.5;
}
#skill-btn-divider{ #skill-btn-divider{
border-left: #9e814d 2px solid; border-left: #9e814d 2px solid;
padding-right: 10px; padding-right: 10px;

6
SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.html
View File

@ -1,14 +1,14 @@
<div *ngIf="ability" id="main"> <div *ngIf="ability" id="main">
<mat-card class="cardContainerClass"> <mat-card [style.border-color]="headStyle.bgColor" [style.color]="headStyle.bgColor" class="cardContainerClass">
<mat-card-header id="ability-card-header" [style.background]="headStyle.bgColor" [style.color]="headStyle.textColor"> <mat-card-header id="ability-card-header" [style.background]="headStyle.bgColor" [style.color]="headStyle.textColor">
{{ability.value}} <div id="ability-value">{{ability.value}}</div>
<div class="diagonal-line"></div> <div class="diagonal-line"></div>
Mod: {{ability.modification > 0? '+' + ability.modification : '-' + ability.modification}} Mod: {{ability.modification > 0? '+' + ability.modification : '-' + ability.modification}}
<div class="diagonal-line"></div> <div class="diagonal-line"></div>
{{ability.name}} {{ability.name}}
<div *ngIf="ability.canSaveThrows" class="diagonal-line" style="margin-left: auto"></div> <div *ngIf="ability.canSaveThrows" class="diagonal-line" style="margin-left: auto"></div>
<div *ngIf="ability.canSaveThrows" style="margin-right: 10px"> <div *ngIf="ability.canSaveThrows" style="margin-right: 10px">
ST: {{ability.savingThrows > 0? '+' + ability.savingThrows : '-' + ability.savingThrows}} <div id="ability-saving-throws">ST: {{ability.savingThrows > 0? '+' + ability.savingThrows : '-' + ability.savingThrows}}</div>
</div> </div>
</mat-card-header> </mat-card-header>
<mat-divider [style.border-top-color]="'black'"></mat-divider> <mat-divider [style.border-top-color]="'black'"></mat-divider>

24
SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.ts
View File

@ -16,5 +16,29 @@ export class AbilityCardComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.ability.skills.sort((a, b) => (a.name > b.name ? 1 : -1)); this.ability.skills.sort((a, b) => (a.name > b.name ? 1 : -1));
this.changeColors();
}
changeColors(){
switch(this.ability.name){
case 'Charisma':
this.headStyle.bgColor = '#FFEB85';
break;
case 'Dexterity':
this.headStyle.bgColor = '#4BBE9C';
break;
case 'Constitution':
this.headStyle.bgColor = 'red';
break;
case 'Intelligence':
this.headStyle.bgColor = '#5AA9E6';
break;
case 'Strength':
this.headStyle.bgColor = '#C41E3D';
break;
case 'Wisdom':
this.headStyle.bgColor = '#9F4BBE';
break;
}
} }
} }