diff options
| -rw-r--r-- | src/app/components/profile/profile.component.css | 5 | ||||
| -rw-r--r-- | src/app/components/profile/profile.component.html | 22 |
2 files changed, 16 insertions, 11 deletions
diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css index c14fd00..22ad320 100644 --- a/src/app/components/profile/profile.component.css +++ b/src/app/components/profile/profile.component.css @@ -7,12 +7,17 @@ width: 5rem; } +.sec-info-card { + padding-bottom: calc(var(--card-padding) - 0.3em); +} + .sec-info-title { padding-bottom: 0.2em; margin-bottom: 0.3em; } .sec-info { + width: fit-content; background-color: #424242; margin: 0 0.3em 0.3em 0; } diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 4bb6752..2a8786d 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -21,30 +21,30 @@ </form> </div> </section> - <section class="card flex-col full-width"> + <section class="card sec-info-card flex-col full-width"> <div class="sec-info-title faded-slim-border border-bottom-only"> Languages </div> - <span *ngIf="user.languages.length === 0"> + <div *ngIf="user.languages.length === 0"> None - </span> + </div> <div class="flex-row" *ngFor="let lang of user.languages"> - <span class="sec-info border-radius-normal padding-small"> + <div class="sec-info border-radius-normal padding-small"> {{ lang.name }} - </span> + </div> </div> </section> - <section class="card flex-col full-width"> + <section class="card sec-info-card flex-col full-width"> <div class="sec-info-title faded-slim-border border-bottom-only"> Technologies </div> - <span *ngIf="user.technologies.length === 0"> + <div *ngIf="user.technologies.length === 0"> None - </span> - <div *ngFor="let tech of user.technologies"> - <span class="sec-info border-radius-normal padding-small"> + </div> + <div class="flex-row" *ngFor="let tech of user.technologies"> + <div class="sec-info border-radius-normal padding-small"> {{ tech.name }} - </span> + </div> </div> </section> <hr class="card-hr"> |