diff --git a/package.json b/package.json index ce16c7a..fbf9708 100644 --- a/package.json +++ b/package.json @@ -2,14 +2,18 @@ "name": "@openlp/web-remote", "version": "0.9.4", "description": "The web remote for OpenLP, written in Angular", - "keywords": ["OpenLP", "Angular", "Remote"], + "keywords": [ + "OpenLP", + "Angular", + "Remote" + ], "homepage": "https://openlp.org/", "bugs": "https://gitlab.com/openlp/web-remote", "license": "GPL-3.0-or-later", "author": "OpenLP Developers", "repository": { - "type" : "git", - "url" : "https://gitlab.com/openlp/web-remote.git" + "type": "git", + "url": "https://gitlab.com/openlp/web-remote.git" }, "scripts": { "ng": "ng", @@ -25,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 1355fe1..5c43ced 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'; @@ -71,7 +72,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