diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 9766be5296..fa0886cf2c 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -66,9 +66,12 @@ export class HomeComponent implements OnInit, AfterViewInit { this.mainContent._changeDetectorRef.markForCheck(); } + // Used to swap in different background. + // Should remove when background is finalized. backgroundRoute() { const routesWithBackground = [ 'resources', 'courses' ]; - const routesWithoutBackground = [ 'resources/add', 'resources/view' ]; + // Leaving the exception variable in so we can easily use this while still testing backgrounds + const routesWithoutBackground = []; const isException = routesWithoutBackground .findIndex((route) => this.router.url.indexOf(route) > -1) > -1; const isRoute = routesWithBackground diff --git a/src/app/resources/resources-add.component.html b/src/app/resources/resources-add.component.html index 232d41a52e..f17dde07c3 100644 --- a/src/app/resources/resources-add.component.html +++ b/src/app/resources/resources-add.component.html @@ -1,99 +1,107 @@ -

New Resource

-
- - - - - - - - - - - - -
- - - - + + arrow_back + + +
+ New resource +
+ + + + + + + + + + + + + +
+ + + + +
+ + + + English + Español + + + + + + + + + + + + + {{subject}} + + + + + + {{level}} + + + + + + + {{ open }} + + + + + + + + Default + Leader + learner + + + + + + {{ medium }} + + + + + + + + + + + + {{ type }} + + + + + + + + + + + + + + + + + + + +
- - - - English - Español - - - - - - - - - - - - - {{subject}} - - - - - - {{level}} - - - - - - - {{ open }} - - - - - - - - Default - Leader - learner - - - - - - {{ medium }} - - - - - - - - - - - - {{ type }} - - - - - - - - - - - - - - - - - - - - +
diff --git a/src/app/resources/resources-add.component.ts b/src/app/resources/resources-add.component.ts index 05742e9a67..a7f38dd62d 100644 --- a/src/app/resources/resources-add.component.ts +++ b/src/app/resources/resources-add.component.ts @@ -22,7 +22,18 @@ import { forkJoin } from 'rxjs/observable/forkJoin'; import { PlanetMessageService } from '../shared/planet-message.service'; @Component({ - templateUrl: './resources-add.component.html' + templateUrl: './resources-add.component.html', + styles: [ ` + /* Consider using space-container app wide for route views */ + .space-container { + margin: 64px 30px; + background: none; + } + .view-container { + background-color: #FFFFFF; + padding: 1rem; + } + ` ] }) export class ResourcesAddComponent implements OnInit { diff --git a/src/app/resources/view-resources/resources-view.component.html b/src/app/resources/view-resources/resources-view.component.html index 309c37adac..a1317153a2 100644 --- a/src/app/resources/view-resources/resources-view.component.html +++ b/src/app/resources/view-resources/resources-view.component.html @@ -1,76 +1,59 @@ - - - - -

{{resource.title}}

- Author: {{resource.author}} - Published by: {{resource.Publisher}} on {{resource.year}} - -
- - - - - - -
- Open in new tab - -

- Media: {{ resource.medium }} -

- - -

- Language: {{ resource.language }} -

- - -

- Subject/s: {{resource.subject}} -

- - -

- Link to License: {{resource.linkToLicense}} -

- - -

- Resource: {{ resource.resourceFor }} -

- - -

- Resource Type: {{ resource.resourceType }} -

- - - - -
- - starstarstarstarstar - - + + arrow_back + Library + + +
+ + {{resource.title}} + + +
+
+
+ starstarstarstarstar + + + starstarstarstarstar + - -
{{ rating.totalCount }} Total
-
{{ rating.femalePercent }}% Female
-
{{ rating.malePercent }}% Male
-
- {{ rating.average.toFixed(1) }} - +
{{ rating.totalCount }} Total
+
{{ rating.femalePercent }}% Female
+
{{ rating.malePercent }}% Male
+
+ {{ rating.average.toFixed(1) }} + +
+

Author: {{resource.author}}

+

Published by: {{resource.Publisher}} on {{resource.year}}

+

Media: {{ resource.medium }}

+

Language: {{ resource.language }}

+

Subject/s: {{resource.subject}}

+

Link to License: {{resource.linkToLicense}}

+

Resource: {{ resource.resourceFor }}

+

Resource Type: {{ resource.resourceType }}

+ Open in new tab +
+
+ + + + + + +
- - +
diff --git a/src/app/resources/view-resources/resources-view.component.ts b/src/app/resources/view-resources/resources-view.component.ts index 19425a831a..fd9a3e5576 100644 --- a/src/app/resources/view-resources/resources-view.component.ts +++ b/src/app/resources/view-resources/resources-view.component.ts @@ -15,13 +15,7 @@ import { findDocuments } from '../../shared/mangoQueries'; @Component({ templateUrl: './resources-view.component.html', - styles: [ ` - :host iframe { - width: 80vw; - height: 80vh; - border: none; - } - ` ] + styleUrls: [ './resources-view.scss' ] }) export class ResourcesViewComponent implements OnInit, OnDestroy { @@ -38,7 +32,7 @@ export class ResourcesViewComponent implements OnInit, OnDestroy { private dbName = 'resources'; private onDestroy$ = new Subject(); - resource: any; + resource: any = {}; rating: any = { average: 0, userRating: { rate: '', comment: '' } }; mediaType = ''; resourceSrc = ''; @@ -47,6 +41,8 @@ export class ResourcesViewComponent implements OnInit, OnDestroy { urlPrefix = environment.couchAddress + this.dbName + '/'; couchSrc = ''; subscription; + // Use string rather than boolean for i18n select + fullView = 'off'; ngOnInit() { this.route.paramMap.pipe(switchMap((params: ParamMap) => this.getResource(params.get('id'), params.get('nationname')))) @@ -182,4 +178,8 @@ export class ResourcesViewComponent implements OnInit, OnDestroy { }, (error) => console.log('Error')); } + toggleFullView() { + this.fullView = this.fullView === 'on' ? 'off' : 'on'; + } + } diff --git a/src/app/resources/view-resources/resources-view.scss b/src/app/resources/view-resources/resources-view.scss new file mode 100644 index 0000000000..af11ff2b24 --- /dev/null +++ b/src/app/resources/view-resources/resources-view.scss @@ -0,0 +1,40 @@ + +/* Consider using space-container app wide for route views */ +.space-container { + margin: 64px 30px; + background: none; +} + +:host { + + iframe { + border: none; + width: 100%; + height: 60vh; + } + + .view-container { + background-color: #FFFFFF; + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-areas: "detail view"; + } + + .full-view-container.view-container { + grid-template-columns: 0 1fr; + } + + .resource-detail { + grid-area: detail; + padding: 1rem; + } + + .resource-view { + grid-area: view; + + * { + max-width: 100%; + max-height: 60vh; + } + } +} diff --git a/src/planet-mat-theme.scss b/src/planet-mat-theme.scss index 934c88a794..ba20adc649 100644 --- a/src/planet-mat-theme.scss +++ b/src/planet-mat-theme.scss @@ -25,6 +25,7 @@ $primary: mat-color($planet-app-primary, $primary-hue); $accent: mat-color($planet-app-accent, $accent-hue); $primary-text: mat-contrast($planet-primary, $primary-hue); $accent-text: mat-contrast($planet-accent, $accent-hue); +$light-grey: mat-color($mat-grey, 100); $grey: mat-color($mat-grey, 400); $primary-light: mat-color($planet-app-primary, 100); diff --git a/src/styles.scss b/src/styles.scss index 0a33c25e20..800ee74db2 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -25,6 +25,10 @@ body { color: $accent-text; } + .bg-grey { + background-color: $light-grey; + } + .display-flex { display: flex; } @@ -65,6 +69,11 @@ body { @include margin-lr; + // Hide an element, but render its space + .invisible { + visibility: hidden; + } + .button-icon-text mat-icon { margin: 0 3px; }