fix layout of skills page

pull/92/head
Chris Veilleux 2022-09-06 13:47:04 -05:00
parent 769f91c4fe
commit 647cb27367
3 changed files with 17 additions and 14 deletions

View File

@ -20,7 +20,7 @@
@use "components/buttons" as buttons;
@use "mycroft-theme" as theme;
mat-expansion-panel {
.mat-expansion-panel {
border-radius: 10px;
margin-bottom: 16px;
margin-left: auto;

View File

@ -1,12 +1,14 @@
<router-outlet></router-outlet>
<h1 class="mat-h1">Configure Your Skills</h1>
<p class="mat-subheading-1">{{helpText}}</p>
<p class="mat-subheading-1">
{{moreSkillsText}}
<a [href]="mycroftUrls.marketplace">{{marketplaceLink}}</a>
</p>
<account-skill-panel
*ngFor="let skill of skills$ | async" [skill]="skill"
[deviceCount]="deviceCount"
>
</account-skill-panel>
<div fxLayout="column" fxLayoutAlign="none center">
<h1 class="mat-h1">Configure Your Skills</h1>
<p class="mat-subheading-1">{{helpText}}</p>
<p class="mat-subheading-1">
{{moreSkillsText}}
<a [href]="mycroftUrls.marketplace">{{marketplaceLink}}</a>
</p>
<account-skill-panel
*ngFor="let skill of skills$ | async" [skill]="skill"
[deviceCount]="deviceCount"
>
</account-skill-panel>
</div>

View File

@ -19,12 +19,13 @@
@use "@angular/material" as mat;
@use "mycroft-theme" as theme;
h1 {
.mat-h1 {
color: mat.get-color-from-palette(theme.$mycroft-primary, 700);
font-weight: bold;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-right: auto;
padding-top: 32px;
max-width: 700px;
}