diff --git a/package.json b/package.json index d96b643..fbf9708 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@angular/common": "^8.2.8", "@angular/compiler": "^8.2.8", "@angular/core": "^8.2.8", + "@angular/flex-layout": "^8.0.0-beta.27", "@angular/forms": "^8.2.8", "@angular/material": "^8.2.1", "@angular/platform-browser": "^8.2.8", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9563662..c109175 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatTabsModule } from '@angular/material/tabs'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatTooltipModule } from '@angular/material/tooltip'; +import { FlexLayoutModule } from '@angular/flex-layout'; import { AppComponent } from './app.component'; import { PageTitleService } from './page-title.service'; @@ -73,7 +74,8 @@ import { ThemesComponent } from './components/themes/themes.component'; MatSnackBarModule, MatTabsModule, MatToolbarModule, - MatTooltipModule + MatTooltipModule, + FlexLayoutModule ], providers: [ PageTitleService, diff --git a/src/app/components/themes/themes.component.html b/src/app/components/themes/themes.component.html index d516182..e69934a 100644 --- a/src/app/components/themes/themes.component.html +++ b/src/app/components/themes/themes.component.html @@ -1,6 +1,7 @@
\ No newline at end of file diff --git a/src/app/components/themes/themes.component.scss b/src/app/components/themes/themes.component.scss index 3545081..b663255 100644 --- a/src/app/components/themes/themes.component.scss +++ b/src/app/components/themes/themes.component.scss @@ -1,5 +1,6 @@ mat-card { cursor: pointer; + justify-content: center; } mat-divider { border-color: #afafaf; @@ -7,6 +8,13 @@ mat-divider { mat-button-toggle-group { margin-left: 10px; } +mat-slide-toggle { + margin-left: auto; + padding: 0 40px; +} +img { + width: 100%; +} .selected { background-color: rgb(235, 235, 235); @@ -14,6 +22,5 @@ mat-button-toggle-group { } .theme-title { - margin-left: 2.5rem; white-space: pre-wrap; } \ No newline at end of file diff --git a/src/app/components/themes/themes.component.ts b/src/app/components/themes/themes.component.ts index 5e9f4ff..65ba851 100644 --- a/src/app/components/themes/themes.component.ts +++ b/src/app/components/themes/themes.component.ts @@ -14,24 +14,21 @@ export class ThemesComponent implements OnInit { private _theme = null; private _themeList = []; private _themeLevel = null; + // Layout variables + private _displayNames = true; + private _columns = '6'; // Stored as string for mat-select to work properly + private _colWidth; + private _padding; + private _paddingRatio = .5; // How much of a column the sum of all the paddings equals to constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) { pageTitleService.changePageTitle('Themes'); } ngOnInit() { + this.setLayout(this._columns); this.getThemeLevel(); this.getThemes(); - this.getTheme(); - } - - get theme(): string { - return this._theme; - } - - set theme(themeName: string) { - this._theme = themeName; - this.openlpService.setTheme(themeName).subscribe(); } get themeList(): Array