diff --git a/client/package.json b/client/package.json index 27dccb4c4..e229a4251 100644 --- a/client/package.json +++ b/client/package.json @@ -45,9 +45,10 @@ "ngx-mat-select-search": "^1.4.2", "ngx-papaparse": "^3.0.2", "po2json": "^1.0.0-alpha", - "roboto-fontface": "^0.10.0", "rxjs": "^6.3.3", "tinymce": "^4.9.0", + "typeface-fira-sans": "^0.0.54", + "typeface-fira-sans-condensed": "^0.0.54", "uuid": "^3.3.2", "zone.js": "^0.8.26" }, diff --git a/client/src/app/shared/components/footer/footer.component.html b/client/src/app/shared/components/footer/footer.component.html deleted file mode 100644 index 77ac4279f..000000000 --- a/client/src/app/shared/components/footer/footer.component.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - © Copyright by OpenSlides - - - diff --git a/client/src/app/shared/components/footer/footer.component.scss b/client/src/app/shared/components/footer/footer.component.scss deleted file mode 100644 index 381793a75..000000000 --- a/client/src/app/shared/components/footer/footer.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -.footer-link, -.footer-right { - font-size: 12px; - z-index: inherit; -} - -.footer-right { - a { - color: white; - } -} diff --git a/client/src/app/shared/components/footer/footer.component.spec.ts b/client/src/app/shared/components/footer/footer.component.spec.ts deleted file mode 100644 index 9c1ee2166..000000000 --- a/client/src/app/shared/components/footer/footer.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { FooterComponent } from './footer.component'; -import { E2EImportsModule } from '../../../../e2e-imports.module'; - -describe('FooterComponent', () => { - let component: FooterComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [E2EImportsModule] - }).compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(FooterComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/client/src/app/shared/components/footer/footer.component.ts b/client/src/app/shared/components/footer/footer.component.ts deleted file mode 100644 index a2e0ff87b..000000000 --- a/client/src/app/shared/components/footer/footer.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -/** - * Reusable footer Apps. - * - * ## Examples: - * - * ### Usage of the selector: - * - * ```html - * - * ``` - */ -@Component({ - selector: 'os-footer', - templateUrl: './footer.component.html', - styleUrls: ['./footer.component.scss'] -}) -export class FooterComponent implements OnInit { - /** - * Indicates to location of the legal notice - */ - public legalNoticeUrl = '/legalnotice'; - - /** - * Indicated the location of the privacy policy - */ - public privacyPolicyUrl = '/privacypolicy'; - - /** - * Empty constructor - */ - public constructor(private route: ActivatedRoute) {} - - /** - * If on login page, redirect the legal notice and privacy policy not to /URL - * but to /login/URL - */ - - public ngOnInit(): void { - if (this.route.snapshot.url[0] && this.route.snapshot.url[0].path === 'login') { - this.legalNoticeUrl = '/login/legalnotice'; - this.privacyPolicyUrl = '/login/privacypolicy'; - } - } -} diff --git a/client/src/app/shared/components/head-bar/head-bar.component.html b/client/src/app/shared/components/head-bar/head-bar.component.html index 2c299c05f..1beefef7d 100644 --- a/client/src/app/shared/components/head-bar/head-bar.component.html +++ b/client/src/app/shared/components/head-bar/head-bar.component.html @@ -47,14 +47,22 @@ + + diff --git a/client/src/app/shared/components/legal-notice-content/legal-notice-content.component.html b/client/src/app/shared/components/legal-notice-content/legal-notice-content.component.html index 0195e7320..7c4ac829f 100644 --- a/client/src/app/shared/components/legal-notice-content/legal-notice-content.component.html +++ b/client/src/app/shared/components/legal-notice-content/legal-notice-content.component.html @@ -9,7 +9,7 @@ (License: {{ versionInfo.openslides_license }})
-
Installed plugins
: +

Installed plugins:

{{ plugin.verbose_name }} {{ plugin.version }} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index fa71d5250..f22025705 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -58,7 +58,6 @@ import { TreeModule } from 'angular-tree-component'; // components import { HeadBarComponent } from './components/head-bar/head-bar.component'; -import { FooterComponent } from './components/footer/footer.component'; import { LegalNoticeContentComponent } from './components/legal-notice-content/legal-notice-content.component'; import { PrivacyPolicyContentComponent } from './components/privacy-policy-content/privacy-policy-content.component'; import { SearchValueSelectorComponent } from './components/search-value-selector/search-value-selector.component'; @@ -163,7 +162,6 @@ import { FilterMenuComponent } from './components/os-sort-filter-bar/filter-menu PermsDirective, DomChangeDirective, AutofocusDirective, - FooterComponent, HeadBarComponent, SearchValueSelectorComponent, LegalNoticeContentComponent, @@ -180,7 +178,6 @@ import { FilterMenuComponent } from './components/os-sort-filter-bar/filter-menu DomChangeDirective, AutofocusDirective, HeadBarComponent, - FooterComponent, LegalNoticeContentComponent, PrivacyPolicyContentComponent, SearchValueSelectorComponent, diff --git a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html index bd12553d7..33cd263c7 100644 --- a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html +++ b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html @@ -182,7 +182,7 @@ diff --git a/client/src/app/site/agenda/components/speaker-list/speaker-list.component.html b/client/src/app/site/agenda/components/speaker-list/speaker-list.component.html index 3a96b9ed4..24d4625c7 100644 --- a/client/src/app/site/agenda/components/speaker-list/speaker-list.component.html +++ b/client/src/app/site/agenda/components/speaker-list/speaker-list.component.html @@ -2,11 +2,13 @@

- {{ viewItem.getTitle() }}: List of speakers + List of speakers

+

{{ viewItem.getTitle() }}

+ diff --git a/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html b/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html index 925730d82..baefd700c 100644 --- a/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html +++ b/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html @@ -10,10 +10,9 @@

- New - Edit - -   Topic + New topic + Edit topic + Topic

@@ -25,13 +24,13 @@
-
-
-

{{ topic.title }}

-

{{ topicForm.get('title').value }}

-
- + +
+

{{ topic.title }}

+
@@ -65,8 +64,12 @@ A name is required
+ - +
+

Text

+ +
-
+

{{ welcomeTitle | translate }}

+ +
diff --git a/client/src/app/site/login/components/login-legal-notice/login-legal-notice.component.html b/client/src/app/site/login/components/login-legal-notice/login-legal-notice.component.html index b279b0913..9b8fa9e11 100644 --- a/client/src/app/site/login/components/login-legal-notice/login-legal-notice.component.html +++ b/client/src/app/site/login/components/login-legal-notice/login-legal-notice.component.html @@ -1,9 +1,5 @@
- -

Legal notice

- +

Legal notice

- -
diff --git a/client/src/app/site/login/components/login-privacy-policy/login-privacy-policy.component.html b/client/src/app/site/login/components/login-privacy-policy/login-privacy-policy.component.html index f284f7338..a967c9cbd 100644 --- a/client/src/app/site/login/components/login-privacy-policy/login-privacy-policy.component.html +++ b/client/src/app/site/login/components/login-privacy-policy/login-privacy-policy.component.html @@ -1,9 +1,5 @@
- -

Privacy Policy

- +

Privacy Policy

- -
diff --git a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html index 4da6fcac8..07d30ba14 100644 --- a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html +++ b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.html @@ -1,12 +1,16 @@
OpenSlides-logo
- +
+ © Copyright by OpenSlides + · + Legal notice + · + Privacy policy +
diff --git a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss index 44bf6c513..152660595 100644 --- a/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss +++ b/client/src/app/site/login/components/login-wrapper/login-wrapper.component.scss @@ -4,13 +4,22 @@ header { mat-toolbar { min-height: 200px !important; } - .login-logo-bar { + .login-logo-bar a { + margin-left: auto; + margin-right: auto; + img { - margin-left: auto; - margin-right: auto; width: 90%; height: 90%; max-width: 400px; } } } + +.footer { + margin-left: auto; + margin-right: auto; + margin-top: 80px; + font-size: 12px; + text-align: center; +} diff --git a/client/src/app/site/motions/components/meta-text-block/meta-text-block.component.scss b/client/src/app/site/motions/components/meta-text-block/meta-text-block.component.scss index 658987176..93591e953 100644 --- a/client/src/app/site/motions/components/meta-text-block/meta-text-block.component.scss +++ b/client/src/app/site/motions/components/meta-text-block/meta-text-block.component.scss @@ -1,28 +1,25 @@ .meta-text-block { padding: 0px; - margin: 20px; - margin-right: 0; - min-width: 10hv; + margin: 20px 10px 20px 0; min-width: 200px; mat-card-header { display: inherit; - padding: 10px; + padding-top: 10px; margin: 0; background-color: #eee; + .mat-card-header-text { + margin: 0 10px; + } mat-card-title { margin: 0; + font-size: 16px; + font-weight: 400; .title-container { display: flex; justify-content: space-between; - - :host ::ng-deep button { - width: 30px; - height: 30px; - line-height: 30px; - } } } } diff --git a/client/src/app/site/motions/components/motion-change-recommendation/motion-change-recommendation.component.html b/client/src/app/site/motions/components/motion-change-recommendation/motion-change-recommendation.component.html index 881a0c887..c1a0789a1 100644 --- a/client/src/app/site/motions/components/motion-change-recommendation/motion-change-recommendation.component.html +++ b/client/src/app/site/motions/components/motion-change-recommendation/motion-change-recommendation.component.html @@ -18,11 +18,11 @@ - + diff --git a/client/src/app/site/motions/components/motion-change-recommendation/motion-change-recommendation.component.ts b/client/src/app/site/motions/components/motion-change-recommendation/motion-change-recommendation.component.ts index 369a25d62..6afc79f85 100644 --- a/client/src/app/site/motions/components/motion-change-recommendation/motion-change-recommendation.component.ts +++ b/client/src/app/site/motions/components/motion-change-recommendation/motion-change-recommendation.component.ts @@ -75,15 +75,15 @@ export class MotionChangeRecommendationComponent extends BaseViewComponent { public replacementTypes = [ { value: ModificationType.TYPE_REPLACEMENT, - title: 'Replacement' + title: this.translate.instant('Replacement') }, { value: ModificationType.TYPE_INSERTION, - title: 'Insertion' + title: this.translate.instant('Insertion') }, { value: ModificationType.TYPE_DELETION, - title: 'Deletion' + title: this.translate.instant('Deletion') } ]; diff --git a/client/src/app/site/motions/components/motion-detail-diff/motion-detail-diff.component.html b/client/src/app/site/motions/components/motion-detail-diff/motion-detail-diff.component.html index 78065dd73..071a2ac3f 100644 --- a/client/src/app/site/motions/components/motion-detail-diff/motion-detail-diff.component.html +++ b/client/src/app/site/motions/components/motion-detail-diff/motion-detail-diff.component.html @@ -77,7 +77,7 @@ [matMenuTriggerFor]="changeRecommendationMenu" [matMenuTriggerData]="{ change: change }" > - more_vert + more_horiz -
-

{{ motion.title }}

-
+

+ {{ motion.title }} +

@@ -160,7 +160,9 @@
- + + +
@@ -354,7 +356,7 @@ -
+
-
+
-

Attachments

+

{{ "Attachments" | translate }}attach_file

{{ file.title }} @@ -474,7 +476,7 @@
-
+
-
+
-
+
@@ -511,7 +513,7 @@
-
+
-
+
-
+
{ - const content = this.translate.instant('Are you sure you want to delete this motion block?'); + const content = this.translate.instant('Are you sure you want to delete this motion?'); if (await this.promptService.open(this.motion.title, content)) { await this.repo.delete(this.motion); this.router.navigate(['./motions/']); diff --git a/client/src/app/site/motions/components/motion-list/motion-list.component.html b/client/src/app/site/motions/components/motion-list/motion-list.component.html index f1b8bfd50..7b9951fcd 100644 --- a/client/src/app/site/motions/components/motion-list/motion-list.component.html +++ b/client/src/app/site/motions/components/motion-list/motion-list.component.html @@ -137,11 +137,6 @@ Categories @@ -153,7 +148,10 @@ speaker_notes Comment fields - + - diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html index 6777e5ea6..956dda489 100644 --- a/client/src/app/site/site.component.html +++ b/client/src/app/site/site.component.html @@ -17,7 +17,7 @@ - + {{ username }} @@ -34,7 +34,6 @@ vpn_key Change password - exit_to_app Logout @@ -54,13 +53,6 @@ -
- - - - -
- {{ entry.displayName | translate }} - videocam Projector + + + search + Search + + + info + Legal notice + + + security + Privacy policy + + + © Copyright by OpenSlides +
-
-
- -
-
-
+
+ +
diff --git a/client/src/app/site/site.component.scss b/client/src/app/site/site.component.scss index e21e3ec33..65b678f39 100644 --- a/client/src/app/site/site.component.scss +++ b/client/src/app/site/site.component.scss @@ -1,13 +1,42 @@ -.projector-button { - position: fixed; - bottom: 10px; - right: 20px; +/* Main navigation */ +mat-sidenav-container { + height: 100vh; + width: 100%; + + mat-sidenav.side-panel { + border: 0; + box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.2); + width: 260px; + + mat-toolbar, + mat-toolbar-row { + height: 80px; + } + + mat-nav-list { + padding-top: 0; + padding-bottom: 20px; + } + mat-nav-list.main-nav { + border-top-width: 1px; + border-top-style: solid; + span { + font-weight: 400; + } + } + + mat-icon { + min-width: 20px; //puts the text to the right on the same level + margin-right: 25px; + } + } } +/* Logo container */ .os-logo-container { width: 200px; margin-left: 10px; - background-image: url(/assets/img/openslides-logo-h-dark-transparent.svg); + background-image: url(/assets/img/openslides-logo-h.svg); background-size: contain; background-repeat: no-repeat; background-position: center; @@ -20,31 +49,26 @@ outline: none; } -.side-panel { - border: 0; - box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.2); - width: 260px; -} - +/* Content container */ .content { min-height: 100%; position: relative; + + main { + display: flex; + flex-direction: column; + width: 100%; + position: relative; + z-index: 50; + flex: 1; + > *:not(router-outlet) { + flex: 1; + display: block; + } + } } -mat-sidenav-container { - height: 100vh; - width: 100%; -} - -.main-nav form { - margin: 0 1em; -} - -.relax { - position: initial; - padding-bottom: 70px; -} - +/* History mode top bar*/ .history-mode-indicator { position: fixed; width: 100%; @@ -69,16 +93,3 @@ mat-sidenav-container { color: #000000; } } - -main { - display: flex; - flex-direction: column; - width: 100%; - position: relative; - z-index: 50; - flex: 1; - > *:not(router-outlet) { - flex: 1; - display: block; - } -} diff --git a/client/src/app/site/site.component.scss-theme.scss b/client/src/app/site/site.component.scss-theme.scss index 18fc14d15..3d79bc4f9 100644 --- a/client/src/app/site/site.component.scss-theme.scss +++ b/client/src/app/site/site.component.scss-theme.scss @@ -8,74 +8,28 @@ $foreground: map-get($theme, foreground); $background: map-get($theme, background); - /** the name of the selector */ os-site { - mat-sidenav-container { - /** nav panel on the left */ - mat-sidenav { - /** rules for icons in the whole site-view */ - mat-icon { - min-width: 20px; //puts the text to the right on the same level - margin-right: 10px; // the distance from the icon to the text - } - } - } - - /** adjust the color of the main container to our theme */ + /* main background color */ .main-container { - background-color: mat-color($background, background); + background-color: $os-background; } - - /** change the nav-toolbar to the darker nuance of the current theme*/ .nav-toolbar { - height: 80px; - background-color: mat-color($primary, darker); - - mat-toolbar-row { - height: 80px; - } + background-color: mat-color($background, card); //TODO } - /** make the .user-menu expansion panel look like the nav-toolbar above */ - .user-menu { - background: mat-color($primary, darker); - // background-color: mat-color($primary, darker); - color: mat-color($background, raised-button); - min-height: 48px; - - /** color of the divider just above the log out button */ - mat-divider { - border-top-color: rgba(255, 255, 255, 0.25); - } - - mat-icon { - color: mat-color($background, raised-button); - } - - span { - color: mat-color($background, raised-button); - } - - .mat-expansion-indicator:after { - color: mat-color($background, raised-button); - } - - .mat-expansion-panel-header { - padding: 0 16px !important; - } - .mat-expansion-panel-header:hover { - // prevent the panel to become white after collapse - background: mat-color($primary, darker) !important; - } + /* seperator */ + mat-nav-list.main-nav, + mat-divider { + border-top-color: $os-outline; } /** style and align the nav icons the icons*/ - .main-nav { + .main-nav, + .user-menu { mat-icon { color: mat-color($foreground, icon); } span { - font-weight: bold; color: mat-color($foreground, text); } } @@ -83,10 +37,10 @@ /** style the active link */ .active { mat-icon { - color: mat-color($primary); + color: $os-primary; } span { - color: mat-color($primary); + color: $os-primary; } } } diff --git a/client/src/app/site/site.component.ts b/client/src/app/site/site.component.ts index a76aa7f90..8547a02b0 100644 --- a/client/src/app/site/site.component.ts +++ b/client/src/app/site/site.component.ts @@ -52,11 +52,6 @@ export class SiteComponent extends BaseComponent implements OnInit { */ public searchform: FormGroup; - /** - * Flag, if the search bar shoud be shown. - */ - public showSearch: boolean; - /** * Constructor * @@ -93,12 +88,6 @@ export class SiteComponent extends BaseComponent implements OnInit { }); this.searchform = new FormGroup({ query: new FormControl([]) }); - - this.router.events.subscribe(event => { - if (event instanceof NavigationEnd) { - this.showSearch = !this.router.url.startsWith('/search'); - } - }); } /** diff --git a/client/src/app/site/tags/tag.config.ts b/client/src/app/site/tags/tag.config.ts index 3ba67fff8..0e1aeedc4 100644 --- a/client/src/app/site/tags/tag.config.ts +++ b/client/src/app/site/tags/tag.config.ts @@ -3,14 +3,5 @@ import { Tag } from '../../shared/models/core/tag'; export const TagAppConfig: AppConfig = { name: 'tag', - models: [{ collectionString: 'core/tag', model: Tag, searchOrder: 8 }], - mainMenuEntries: [ - { - route: '/tags', - displayName: 'Tags', - icon: 'turned_in', - weight: 1100, - permission: 'core.can_manage_tags' - } - ] + models: [{ collectionString: 'core/tag', model: Tag, searchOrder: 8 }] }; diff --git a/client/src/app/site/users/components/user-detail/user-detail.component.html b/client/src/app/site/users/components/user-detail/user-detail.component.html index 9d5f3ced2..d069e770c 100644 --- a/client/src/app/site/users/components/user-detail/user-detail.component.html +++ b/client/src/app/site/users/components/user-detail/user-detail.component.html @@ -8,12 +8,10 @@ >
-

- {{ personalInfoForm.get('title').value }} {{ personalInfoForm.get('first_name').value }} - {{ personalInfoForm.get('last_name').value }} +

+ New participant + {{ user.full_name }}

- -

{{ user.full_name }}

@@ -35,7 +33,7 @@ - +
- + - + - + {{ group }} @@ -131,7 +131,7 @@
- + -
+

About me

@@ -160,7 +160,7 @@
- + - +
-
+
{ try { if (this.newUser) { - const response = await this.repo.create(this.personalInfoForm.value); this.newUser = false; - this.router.navigate([`./users/${response.id}`]); + await this.repo.create(this.personalInfoForm.value); + this.router.navigate([`./users/`]); } else { // TODO (Issue #3962): We need a waiting-State, so if autoupdates come before the response, // the user is also updated. diff --git a/client/src/assets/img/openslides-logo-h.svg b/client/src/assets/img/openslides-logo-h.svg new file mode 100644 index 000000000..f7d6eccf8 --- /dev/null +++ b/client/src/assets/img/openslides-logo-h.svg @@ -0,0 +1,618 @@ + + +image/svg+xmlOpenSlides Team + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/styles/openslides-theme.scss b/client/src/assets/styles/openslides-theme.scss index 14bd520ad..f7af5bf86 100644 --- a/client/src/assets/styles/openslides-theme.scss +++ b/client/src/assets/styles/openslides-theme.scss @@ -68,6 +68,7 @@ $openslides-green: ( // Generate paletes using: https://material.io/design/color/ // default values fir mat-palette: $default: 500, $lighter: 100, $darker: 700. $openslides-primary: mat-palette($openslides-blue); + $openslides-accent: mat-palette($mat-light-blue); // $openslides-primary: mat-palette($openslides-green); // $openslides-accent: mat-palette($mat-amber); @@ -76,3 +77,11 @@ $openslides-warn: mat-palette($mat-red); // Create the theme object (a Sass map containing all of the palettes). $openslides-theme: mat-light-theme($openslides-primary, $openslides-accent, $openslides-warn); + +// Create Sass color vars (for using in scss files). +$os-primary: mat-color($openslides-primary); +$os-accent: mat-color($openslides-accent); +$os-warn: mat-color($openslides-warn); + +$os-outline: mat-color($mat-grey, 300); +$os-background: mat-color($mat-grey, 100); diff --git a/client/src/styles.scss b/client/src/styles.scss index 03cc67251..8a2c52e0b 100644 --- a/client/src/styles.scss +++ b/client/src/styles.scss @@ -4,8 +4,8 @@ /** Import brand theme and (new) component themes */ @import './assets/styles/openslides-theme.scss'; @import './app/site/site.component.scss-theme'; -@import '../node_modules/roboto-fontface/css/roboto/roboto-fontface.css'; -@import '../node_modules/roboto-fontface/css/roboto-condensed/roboto-condensed-fontface.css'; +@import '../node_modules/typeface-fira-sans/index.css'; +@import '../node_modules/typeface-fira-sans-condensed/index.css'; @mixin openslides-components-theme($theme) { @include os-site-theme($theme); /** More components are added here */ @@ -16,40 +16,44 @@ @import '~angular-tree-component/dist/angular-tree-component.css'; -// Shared scss definitions -%os-table { - width: 100%; - - /** size of the mat row */ - mat-row { - height: 60px; - } - - mat-row:hover { - cursor: pointer; - background-color: rgba(0, 0, 0, 0.025); - } - - mat-row.selected { - cursor: pointer; - background-color: rgba(0, 0, 0, 0.055); - } - mat-row.lg { - height: 90px; - } -} * { - font-family: Roboto, Arial, Helvetica, sans-serif; + font-family: Fira Sans, Roboto, Arial, Helvetica, sans-serif; } +.mat-toolbar h2 { + font-family: Fira Sans, Roboto, Arial, Helvetica, sans-serif !important; +} + mat-icon { font-family: MaterialIcons-Regular; } +body { + // background: #e8eaed; + margin: 0 auto; + padding: 0; + line-height: 1.5; + font-size: 14px; + color: #222; +} + h1, h2, h3 { - font-family: Roboto-condensed, Arial, Helvetica, sans-serif; + font-family: Fira Sans Condensed, Roboto-condensed, Arial, Helvetica, sans-serif; +} + +h1 { + padding-bottom: 10px; + line-height: 1.2; + color: $os-primary; + margin: 0; + font-weight: normal; + font-size: 36px; +} +h3 { + font-weight: 500; + margin-bottom: 0; } h4 { font-weight: 400; @@ -58,16 +62,27 @@ h4 { margin-bottom: 5px; } -body { - // background: #e8eaed; - margin: 0 auto; - padding: 0; -} - .small { font-size: 90%; } +img { + border: none; +} + +a { + text-decoration: none; + color: #039BE5; /*TODO: move to theme*/ + + &:hover { + text-decoration: underline; + } +} + +strong, b { + font-weight: 500; +} + .generic-mini-button { bottom: -28px; z-index: 100; @@ -110,12 +125,53 @@ body { text-align: center; color: gray; } - +mat-card { + box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37) !important; +} .os-card { - max-width: 90%; - margin-top: 10px; - margin-left: auto; - margin-right: auto; + max-width: 770px; + margin-top: 20px !important; + margin-left: auto !important; + margin-right: auto !important; + font-size: 16px; + + .mat-select-arrow-wrapper { + visibility: hidden; + } +} +.os-form-card { + max-width: 770px; + margin-top: 20px !important; + margin-left: auto !important; + margin-right: auto !important; + font-size: 16px; + + .mat-form-field { + width: 100%; + padding: 10px 0; + } +} + + +// Shared table definitions +%os-table { + width: 100%; + + /** size of the mat row */ + mat-row { + height: 60px; + } + mat-row.lg { + height: 90px; + } + mat-row:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.025); + } + mat-row.selected { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.055); + } } @keyframes fadeIn { @@ -172,6 +228,16 @@ body { @extend %os-table; } +/* TODO: find a better way to get more vertical space in (empty/small) tables for maximize filter dialog */ +mat-paginator { + min-height: 800px; +} + +/* hide scrollbars caused by hidden filter dialog outside of the viewport */ +.mat-drawer-content { + overflow-x: hidden !important; +} + .card-plus-distance { margin-top: 40px; } @@ -197,14 +263,6 @@ body { z-index: 100; } -footer { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - z-index: 1; -} - mat-expansion-panel { border-radius: 0 !important; } @@ -273,6 +331,63 @@ button.mat-menu-item.selected { font-weight: bold !important; } +.meta-text-block .mat-icon-button { + margin-top: -12px !important; +} +.meta-text-block .mat-icon-button mat-icon { + font-size: 18px; +} + + +/** helper classes for margin/padding */ +.spacer-top-10 { + margin-top: 10px; +} +.spacer-top-20 { + margin-top: 20px; +} +.spacer-bottom-20 { + margin-bottom: 20px; +} +.button24 { + background-color: white; + color: $os-primary !important; + width: 24px !important; + height: 24px !important; +} +.icon24 { + font-size: 16px; + margin-top: -8px; +} + +.mat-mini-fab.large { + width: 24px; + height: 24px; + line-height: 24px; + + .mat-icon { + font-size: 24px; + width: 24px; + height: 24px; + line-height: 24px; + } +} +.title-left { + padding-left: 65px; + padding-top: 20px; + padding-bottom: 20px; +} +.mat-radio-button { + padding-right: 20px; +} + + +/** more helper classes **/ +.center { + text-align: center; +} + + /** Colors **/ .lightblue { background-color: rgb(33, 150, 243) !important; @@ -312,6 +427,28 @@ button.mat-menu-item.selected { color: rgba(0, 0, 0, 0.87) !important; } -.os-listview-table { - min-height: 800px; -} + + +/* TODO: move to site.component.scss-theme.scss (does not work currently) */ + + /* make the .user-menu expansion panel look like the nav-toolbar above */ + .user-menu { + min-height: 48px; + + .mat-expansion-panel-header { + padding: 0 16px !important; + } + + .mat-expansion-panel-body { + padding: 0 !important; + } + } + + .mat-drawer-inner-container { + scrollbar-width: none; /* hide scrollbars in Firefox */ + -ms-overflow-style: -ms-autohiding-scrollbar; /* hide scrollbars in Edge until the scrollable area is hovered */ + } + + .mat-drawer-inner-container::-webkit-scrollbar { + display: none !important; /* hide scrollbars in webkit browsers */ + } diff --git a/tests/example_data_generator/apps.py b/tests/example_data_generator/apps.py index d10bd3f81..c7243ab2c 100644 --- a/tests/example_data_generator/apps.py +++ b/tests/example_data_generator/apps.py @@ -5,4 +5,4 @@ class ExampleDataGeneratorAppConfig(AppConfig): name = "tests.example_data_generator" label = "tests.example_data_generator" verbose_name = "Example Data Generator" - version = "no specific version" + version = ""