ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #4949 from GabrielInTheWorld/lostDeep

Browse Source 
Cleans up the stylesheets a little bit
This commit is contained in:
Emanuel Schütze 2019-09-03 22:04:02 +02:00 committed by GitHub
commit 367c06bb02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 369 additions and 463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/shared/components/head-bar/head-bar.component.html
View File

@ -29,7 +29,7 @@
<div class="spacer"></div> <div class="spacer"></div>
<!-- Button to open the global search --> <!-- Button to open the global search -->
<button *ngIf="!vp.isMobile" mat-icon-button (click)="openSearch()"> <button *ngIf="!editMode" mat-icon-button (click)="openSearch()">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>

49
client/src/app/shared/components/head-bar/head-bar.component.scss
View File

@ -9,39 +9,40 @@
top: 0; top: 0;
z-index: 5; z-index: 5;
position: sticky; position: sticky;
}
.toolbar-left { .toolbar-left {
display: flex; display: flex;
max-width: calc(100% - 100px); max-width: calc(100% - 100px);
button { button {
margin: 12px 0; margin: 12px 0;
} }
.toolbar-left-text { .toolbar-left-text {
margin-left: 10px; margin-left: 10px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
::ng-deep .title-slot { .title-slot {
h2 {
margin: 16px 0; margin: 16px 0;
display: block; display: block;
overflow: hidden; h2 {
text-overflow: ellipsis; overflow: hidden;
white-space: nowrap; text-overflow: ellipsis;
white-space: nowrap;
}
} }
} }
} }
}
.toolbar-centered {
margin: auto;
vertical-align: baseline;
}
.toolbar-right { .toolbar-centered {
display: flex; margin: auto;
::ng-deep .extra-controls-slot { vertical-align: baseline;
}
.toolbar-right {
display: flex; display: flex;
.extra-controls-slot {
display: flex;
}
} }
} }

5
client/src/app/shared/components/head-bar/head-bar.component.ts
View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { MainMenuService } from 'app/core/core-services/main-menu.service'; import { MainMenuService } from 'app/core/core-services/main-menu.service';
@ -54,7 +54,8 @@ import { ViewportService } from 'app/core/ui-services/viewport.service';
@Component({ @Component({
selector: 'os-head-bar', selector: 'os-head-bar',
templateUrl: './head-bar.component.html', templateUrl: './head-bar.component.html',
styleUrls: ['./head-bar.component.scss'] styleUrls: ['./head-bar.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class HeadBarComponent implements OnInit { export class HeadBarComponent implements OnInit {
/** /**

2
client/src/app/shared/components/rounded-input/rounded-input.component.ts
View File

@ -74,7 +74,7 @@ export class RoundedInputComponent implements OnInit, OnDestroy {
* Whether this component should render over the full width. * Whether this component should render over the full width.
*/ */
@Input() @Input()
public fullWidth = true; public fullWidth = false;
/** /**
* Custom `FormControl`. * Custom `FormControl`.

16
client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.scss
View File

@ -32,12 +32,14 @@ mat-divider {
margin-left: 20px; margin-left: 20px;
} }
// adds breaks to mat-checkboxes with long labels mat-checkbox {
::ng-deep .mat-checkbox-layout { // adds breaks to mat-checkboxes with long labels
white-space: normal !important; .mat-checkbox-layout {
} white-space: normal;
}
// rather than center the checkbox, put the checkbox in the first line // rather than center the checkbox, put the checkbox in the first line
::ng-deep .mat-checkbox-inner-container { .mat-checkbox-inner-container {
margin-top: 3px !important; margin-top: 3px;
}
} }

5
client/src/app/shared/components/sort-filter-bar/filter-menu/filter-menu.component.ts
View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { BaseFilterListService, OsFilterOption } from 'app/core/ui-services/base-filter-list.service'; import { BaseFilterListService, OsFilterOption } from 'app/core/ui-services/base-filter-list.service';
import { BaseViewModel } from 'app/site/base/base-view-model'; import { BaseViewModel } from 'app/site/base/base-view-model';
@ -17,7 +17,8 @@ import { BaseViewModel } from 'app/site/base/base-view-model';
@Component({ @Component({
selector: 'os-filter-menu', selector: 'os-filter-menu',
templateUrl: './filter-menu.component.html', templateUrl: './filter-menu.component.html',
styleUrls: ['./filter-menu.component.scss'] styleUrls: ['./filter-menu.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class FilterMenuComponent implements OnInit { export class FilterMenuComponent implements OnInit {
/** /**

6
client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.html
View File

@ -1,6 +1,6 @@
<h1 mat-dialog-title>{{ 'Edit details for' | translate }} {{ item.getTitle() }}</h1> <h1 mat-dialog-title>{{ 'Edit details for' | translate }} {{ item.getTitle() }}</h1>
<div mat-dialog-content> <div mat-dialog-content>
<form class="itemDialogForm" [formGroup]="agendaInfoForm" (keydown)="onKeyDown($event)"> <form class="item-dialog-form" [formGroup]="agendaInfoForm" (keydown)="onKeyDown($event)">
<!-- Visibility --> <!-- Visibility -->
<mat-form-field> <mat-form-field>
<mat-select formControlName="type" placeholder="{{ 'Agenda visibility' | translate }}"> <mat-select formControlName="type" placeholder="{{ 'Agenda visibility' | translate }}">
@ -13,7 +13,9 @@
<!-- Duration --> <!-- Duration -->
<mat-form-field> <mat-form-field>
<input type="string" matInput placeholder="{{ 'Duration' | translate }}" formControlName="durationText" /> <input type="string" matInput placeholder="{{ 'Duration' | translate }}" formControlName="durationText" />
<mat-error *ngIf="agendaInfoForm.invalid">Your input does not match the following structure 'hh:mm'...</mat-error> <mat-error *ngIf="agendaInfoForm.invalid"
>Your input does not match the following structure 'hh:mm'...</mat-error
>
</mat-form-field> </mat-form-field>
<!-- Item number (prefix) --> <!-- Item number (prefix) -->

8
client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.scss
View File

@ -1,8 +1,6 @@
.itemDialogForm { .item-dialog-form {
display: inline-block; display: inline-block;
::ng-deep { .mat-form-field {
.mat-form-field { width: 100%;
width: 100%;
}
} }
} }

2
client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
View File

@ -1,4 +1,4 @@
<div class="poll-wrapper" *ngIf="poll"> <div class="assignment-poll-wrapper" *ngIf="poll">
<div class="poll-menu"> <div class="poll-menu">
<!-- Buttons --> <!-- Buttons -->
<button <button

131
client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss
View File

@ -1,109 +1,48 @@
::ng-deep .progress-green { .assignment-poll-wrapper {
.mat-progress-bar-fill::after { @import '~assets/styles/poll-common-styles.scss';
background-color: #4caf50;
}
.mat-progress-bar-buffer {
background-color: #d5ecd5;
}
}
::ng-deep .progress-red {
.mat-progress-bar-fill::after {
background-color: #f44336;
}
.mat-progress-bar-buffer {
background-color: #fcd2cf;
}
}
::ng-deep .progress-yellow {
.mat-progress-bar-fill::after {
background-color: #ffc107;
}
.mat-progress-bar-buffer {
background-color: #fff0c4;
}
}
.poll-wrapper {
position: relative; position: relative;
padding: 0 15px; padding: 0 15px;
}
.poll-main-content { .poll-main-content {
padding-top: 10px; padding-top: 10px;
} }
.poll-result { .poll-grid {
.poll-progress-bar { display: grid;
height: 5px; grid-gap: 5px;
width: 100%; padding: 5px;
.mat-progress-bar { grid-template-columns: 30px auto 250px 150px;
height: 100%; .candidate-name {
width: 100%; word-wrap: break-word;
} }
} }
.poll-progress {
display: flex; .poll-menu {
margin-bottom: 15px; position: absolute;
margin-top: 15px; top: 0;
right: 0;
}
.poll-quorum {
text-align: right;
margin-right: 10px;
mat-icon { mat-icon {
min-width: 40px; vertical-align: middle;
margin-right: 5px; font-size: 100%;
}
.progress-container {
width: 85%;
} }
} }
}
.main-nav-color { .top-aligned {
color: rgba(0, 0, 0, 0.54); position: absolute;
} top: 0;
left: 0;
}
.poll-quorum-line { .wide {
display: flex; width: 90%;
vertical-align: bottom; }
.mat-button {
padding: 1px; .hint-form {
margin-top: 20px;
} }
} }
.poll-grid {
display: grid;
grid-gap: 5px;
padding: 5px;
grid-template-columns: 30px auto 250px 150px;
.candidate-name {
word-wrap: break-word;
}
}
.poll-menu {
position: absolute;
top: 0;
right: 0;
}
.poll-quorum {
text-align: right;
margin-right: 10px;
mat-icon {
vertical-align: middle;
font-size: 100%;
}
}
.top-aligned {
position: absolute;
top: 0;
left: 0;
}
.wide {
width: 90%;
}
.hint-form {
margin-top: 20px;
}

5
client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
@ -25,7 +25,8 @@ import { ViewAssignmentPollOption } from '../../models/view-assignment-poll-opti
@Component({ @Component({
selector: 'os-assignment-poll', selector: 'os-assignment-poll',
templateUrl: './assignment-poll.component.html', templateUrl: './assignment-poll.component.html',
styleUrls: ['./assignment-poll.component.scss'] styleUrls: ['./assignment-poll.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class AssignmentPollComponent extends BaseViewComponent implements OnInit { export class AssignmentPollComponent extends BaseViewComponent implements OnInit {
/** /**

1
client/src/app/site/common/components/super-search/super-search.component.html
View File

@ -1,6 +1,7 @@
<div class="query-container"> <div class="query-container">
<div class="super-search-input"> <div class="super-search-input">
<os-rounded-input <os-rounded-input
[fullWidth]="true"
[autofocus]="true" [autofocus]="true"
placeholder="{{ 'Search' | translate }}" placeholder="{{ 'Search' | translate }}"
[modelForm]="searchForm" [modelForm]="searchForm"

5
client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.scss
View File

@ -2,11 +2,6 @@
$navbar-size: 64px; $navbar-size: 64px;
// multi line tooltip
::ng-deep .mat-tooltip {
white-space: pre-line !important;
}
.folder-nav-bar { .folder-nav-bar {
width: 100%; width: 100%;
display: flex; display: flex;

4
client/src/app/site/motions/modules/category/components/category-list/category-list.component.scss
View File

@ -17,10 +17,6 @@
} }
} }
::ng-deep .mat-form-field {
width: 50%;
}
.mat-cell > div { .mat-cell > div {
z-index: 1 !important; z-index: 1 !important;
} }

2
client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
View File

@ -28,7 +28,7 @@
<mat-horizontal-stepper #matStepper linear> <mat-horizontal-stepper #matStepper linear>
<mat-step [completed]="contentForm.value.selectedParagraphs.length > 0"> <mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
<ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template> <ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
<div> <div class="amendment-create-wizard-wrapper">
<section <section
*ngFor="let paragraph of paragraphs" *ngFor="let paragraph of paragraphs"
class="paragraph-row" class="paragraph-row"

138
client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.scss
View File

@ -1,85 +1,77 @@
.paragraph-row { .amendment-create-wizard-wrapper {
display: flex; .paragraph-row {
flex-direction: row;
cursor: pointer;
padding: 20px 0;
&:hover {
background-color: #eee;
}
&.active {
cursor: default;
background-color: #ccc;
&:hover {
background-color: #ccc;
}
}
.paragraph-select {
flex-basis: 50px;
flex-grow: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; cursor: pointer;
justify-content: center; padding: 20px 0;
}
.paragraph-text {
flex: 1;
}
}
:host ::ng-deep .motion-text { &:hover {
p, background-color: #eee;
ul, }
ol, &.active {
li, cursor: default;
blockquote { background-color: #ccc;
margin-top: 0; &:hover {
margin-bottom: 0; background-color: #ccc;
}
}
.paragraph-select {
flex-basis: 50px;
flex-grow: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.paragraph-text {
flex: 1;
}
} }
li { .motion-text {
padding-bottom: 10px; p,
} ul,
ol,
li,
blockquote {
margin-top: 0;
margin-bottom: 0;
}
ol, li {
ul { padding-bottom: 10px;
margin-left: 15px; }
margin-bottom: 0;
}
padding-left: 40px; ol,
position: relative; ul {
margin-left: 15px;
margin-bottom: 0;
}
.os-line-number { padding-left: 40px;
display: inline-block; position: relative;
font-size: 0;
line-height: 0;
width: 22px;
height: 22px;
position: absolute;
left: 0;
padding-right: 55px;
&:after { .os-line-number {
content: attr(data-line-number); display: inline-block;
font-size: 0;
line-height: 0;
width: 22px;
height: 22px;
position: absolute; position: absolute;
top: 13px; left: 0;
vertical-align: top; padding-right: 55px;
color: gray;
font-size: 12px; &:after {
font-weight: normal; content: attr(data-line-number);
position: absolute;
top: 13px;
vertical-align: top;
color: gray;
font-size: 12px;
font-weight: normal;
}
} }
} }
} }
.wide-form {
textarea {
height: 25vh;
}
::ng-deep {
width: 100%;
}
}

5
client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.ts
View File

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { Title } from '@angular/platform-browser'; import { Title } from '@angular/platform-browser';
@ -19,7 +19,8 @@ import { ViewMotion } from 'app/site/motions/models/view-motion';
@Component({ @Component({
selector: 'os-amendment-create-wizard', selector: 'os-amendment-create-wizard',
templateUrl: './amendment-create-wizard.component.html', templateUrl: './amendment-create-wizard.component.html',
styleUrls: ['./amendment-create-wizard.component.scss'] styleUrls: ['./amendment-create-wizard.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class AmendmentCreateWizardComponent extends BaseViewComponent { export class AmendmentCreateWizardComponent extends BaseViewComponent {
/** /**

2
client/src/app/site/motions/modules/motion-detail/components/manage-submitters/manage-submitters.component.scss
View File

@ -9,7 +9,7 @@ h4 {
margin: 0; margin: 0;
} }
.small-button ::ng-deep { .small-button {
width: 20px; width: 20px;
height: 20px; height: 20px;

36
client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.html
View File

@ -43,8 +43,7 @@
<!-- The actual diff view --> <!-- The actual diff view -->
<div class="motion-text-with-diffs"> <div class="motion-text-with-diffs">
<div *ngIf="getTitleChangingObject() as changedTitle"> <div *ngIf="getTitleChangingObject() as changedTitle">
<div <div class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
<div class="action-row" *osPerms="'motions.can_manage'"> <div class="action-row" *osPerms="'motions.can_manage'">
<button <button
mat-icon-button mat-icon-button
@ -60,15 +59,14 @@
<i class="grey">{{ 'Rejected' | translate }}</i> <i class="grey">{{ 'Rejected' | translate }}</i>
</div> </div>
<div class="motion-text motion-text-diff" <div
[class.line-numbers-none]="isLineNumberingNone()" class="motion-text motion-text-diff"
[class.line-numbers-inline]="isLineNumberingInline()" [class.line-numbers-none]="isLineNumberingNone()"
[class.line-numbers-outside]="isLineNumberingOutside()" [class.line-numbers-inline]="isLineNumberingInline()"
[attr.data-change-id]="changedTitle.getChangeId()" [class.line-numbers-outside]="isLineNumberingOutside()"
[attr.data-change-id]="changedTitle.getChangeId()"
> >
<div class="bold"> <div class="bold">{{ 'Changed title' | translate }}:</div>
{{ 'Changed title' | translate }}:
</div>
<div [innerHTML]="getFormattedTitleDiff()"></div> <div [innerHTML]="getFormattedTitleDiff()"></div>
</div> </div>
</div> </div>
@ -153,7 +151,7 @@
> >
<mat-icon>thumb_up</mat-icon> <mat-icon>thumb_up</mat-icon>
<span translate>Accept</span> <span translate>Accept</span>
<mat-icon *ngIf="change.isAccepted()" class="active-indicator">done</mat-icon> <mat-icon class="active-indicator">{{ change.isAccepted() ? 'done' : '' }}</mat-icon>
</button> </button>
<button <button
type="button" type="button"
@ -163,7 +161,7 @@
> >
<mat-icon>thumb_down</mat-icon> <mat-icon>thumb_down</mat-icon>
<span translate>Reject</span> <span translate>Reject</span>
<mat-icon *ngIf="change.isRejected()" class="active-indicator">done</mat-icon> <mat-icon class="active-indicator">{{ change.isRejected() ? 'done' : '' }}</mat-icon>
</button> </button>
<button type="button" mat-menu-item (click)="setInternal(change, !change.internal)"> <button type="button" mat-menu-item (click)="setInternal(change, !change.internal)">
<mat-icon>{{ change.internal ? 'check_box_outline_blank' : 'check_box' }}</mat-icon> <mat-icon>{{ change.internal ? 'check_box_outline_blank' : 'check_box' }}</mat-icon>
@ -173,11 +171,21 @@
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
<span translate>Delete</span> <span translate>Delete</span>
</button> </button>
<button type="button" mat-menu-item (click)="editChangeRecommendation(change, $event)" *ngIf="!change.isTitleChange()"> <button
type="button"
mat-menu-item
(click)="editChangeRecommendation(change, $event)"
*ngIf="!change.isTitleChange()"
>
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
<span translate>Edit</span> <span translate>Edit</span>
</button> </button>
<button type="button" mat-menu-item (click)="editTitleChangeRecommendation(change, $event)" *ngIf="change.isTitleChange()"> <button
type="button"
mat-menu-item
(click)="editTitleChangeRecommendation(change, $event)"
*ngIf="change.isTitleChange()"
>
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
<span translate>Edit</span> <span translate>Edit</span>
</button> </button>

13
client/src/app/site/motions/modules/motion-detail/components/motion-detail-diff/motion-detail-diff.component.scss
View File

@ -95,12 +95,9 @@
} }
} }
::ng-deep .mat-menu-content { .active-indicator {
.active-indicator { font-size: 18px;
font-size: 18px; margin-left: 10px;
color: green !important; margin-right: 0;
margin-left: 10px; margin-top: 3px;
margin-right: 0;
margin-top: 3px;
}
} }

5
client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core'; import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox'; import { MatCheckboxChange } from '@angular/material/checkbox';
import { ErrorStateMatcher } from '@angular/material/core'; import { ErrorStateMatcher } from '@angular/material/core';
@ -68,7 +68,8 @@ import {
@Component({ @Component({
selector: 'os-motion-detail', selector: 'os-motion-detail',
templateUrl: './motion-detail.component.html', templateUrl: './motion-detail.component.html',
styleUrls: ['./motion-detail.component.scss'] styleUrls: ['./motion-detail.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class MotionDetailComponent extends BaseViewComponent implements OnInit, OnDestroy { export class MotionDetailComponent extends BaseViewComponent implements OnInit, OnDestroy {
/** /**

80
client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html
View File

@ -4,49 +4,51 @@
<span *ngIf="pollIndex">&nbsp;({{ pollIndex + 1 }})</span> <span *ngIf="pollIndex">&nbsp;({{ pollIndex + 1 }})</span>
</ng-container> </ng-container>
<ng-container class="meta-text-block-content"> <ng-container class="meta-text-block-content">
<div *ngIf="poll.has_votes" class="poll-result"> <div class="motion-poll-wrapper">
<div *ngFor="let key of pollValues"> <div *ngIf="poll.has_votes" class="poll-result">
<div class="poll-progress" *ngIf="poll[key] !== undefined"> <div *ngFor="let key of pollValues">
<mat-icon class="main-nav-color" matTooltip="{{ getLabel(key) | translate }}"> <div class="poll-progress" *ngIf="poll[key] !== undefined">
{{ getIcon(key) }} <mat-icon class="main-nav-color" matTooltip="{{ getLabel(key) | translate }}">
</mat-icon> {{ getIcon(key) }}
<div class="progress-container"> </mat-icon>
<div> <div class="progress-container">
<span>{{ getLabel(key) | translate }}</span <div>
>:&nbsp;{{ getNumber(key) }} <span>{{ getLabel(key) | translate }}</span
<span *ngIf="!isAbstractValue(key)">({{ getPercent(key) }}%)</span> >:&nbsp;{{ getNumber(key) }}
</div> <span *ngIf="!isAbstractValue(key)">({{ getPercent(key) }}%)</span>
<div *ngIf="!isAbstractValue(key)" class="poll-progress-bar"> </div>
<mat-progress-bar <div *ngIf="!isAbstractValue(key)" class="poll-progress-bar">
mode="determinate" <mat-progress-bar
[value]="getPercent(key)" mode="determinate"
[ngClass]="pollService.getProgressBarColor(key)" [value]="getPercent(key)"
> [ngClass]="pollService.getProgressBarColor(key)"
</mat-progress-bar> >
</mat-progress-bar>
</div>
</div> </div>
</div> </div>
<hr *ngIf="key === 'abstain'" flex />
</div> </div>
<hr *ngIf="key === 'abstain'" flex /> <!-- quorum -->
</div> <div *osPerms="'motions.can_manage'">
<!-- quorum --> <div class="poll-quorum-line" *ngIf="!abstractPoll">
<div *osPerms="'motions.can_manage'"> <span>
<div class="poll-quorum-line" *ngIf="!abstractPoll"> <span *ngIf="yesQuorum">
<span> <mat-icon color="warn" *ngIf="!quorumYesReached"> thumb_down </mat-icon>
<span *ngIf="yesQuorum"> <mat-icon color="primary" *ngIf="quorumYesReached"> thumb_up </mat-icon>
<mat-icon color="warn" *ngIf="!quorumYesReached"> thumb_down </mat-icon> </span>
<mat-icon color="primary" *ngIf="quorumYesReached"> thumb_up </mat-icon> <button mat-button [matMenuTriggerFor]="majorityMenu">
&nbsp;<span>{{ getQuorumLabel() | translate }}</span> &nbsp;<span
*ngIf="majorityChoice !== 'disabled'"
>({{ yesQuorum }})</span
>
</button>
<span *ngIf="majorityChoice !== 'disabled'">
<span *ngIf="quorumYesReached" translate> reached.</span>
<span *ngIf="!quorumYesReached" translate> not reached.</span>
</span>
</span> </span>
<button mat-button [matMenuTriggerFor]="majorityMenu"> </div>
&nbsp;<span>{{ getQuorumLabel() | translate }}</span> &nbsp;<span
*ngIf="majorityChoice !== 'disabled'"
>({{ yesQuorum }})</span
>
</button>
<span *ngIf="majorityChoice !== 'disabled'">
<span *ngIf="quorumYesReached" translate> reached.</span>
<span *ngIf="!quorumYesReached" translate> not reached.</span>
</span>
</span>
</div> </div>
</div> </div>
</div> </div>

62
client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.scss
View File

@ -1,61 +1,3 @@
::ng-deep .progress-green { .motion-poll-wrapper {
.mat-progress-bar-fill::after { @import '~assets/styles/poll-common-styles.scss';
background-color: #4caf50;
}
.mat-progress-bar-buffer {
background-color: #d5ecd5;
}
}
::ng-deep .progress-red {
.mat-progress-bar-fill::after {
background-color: #f44336;
}
.mat-progress-bar-buffer {
background-color: #fcd2cf;
}
}
::ng-deep .progress-yellow {
.mat-progress-bar-fill::after {
background-color: #ffc107;
}
.mat-progress-bar-buffer {
background-color: #fff0c4;
}
}
.poll-result {
.poll-progress-bar {
height: 5px;
width: 100%;
.mat-progress-bar {
height: 100%;
width: 100%;
}
}
.poll-progress {
display: flex;
margin-bottom: 15px;
margin-top: 15px;
mat-icon {
min-width: 40px;
margin-right: 5px;
}
.progress-container {
width: 85%;
}
}
}
.main-nav-color {
color: rgba(0, 0, 0, 0.54);
}
.poll-quorum-line {
display: flex;
vertical-align: bottom;
.mat-button {
padding: 1px;
}
} }

5
client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { MatSnackBar } from '@angular/material'; import { MatSnackBar } from '@angular/material';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { Title } from '@angular/platform-browser'; import { Title } from '@angular/platform-browser';
@ -23,7 +23,8 @@ import { MotionPollDialogComponent } from './motion-poll-dialog.component';
@Component({ @Component({
selector: 'os-motion-poll', selector: 'os-motion-poll',
templateUrl: './motion-poll.component.html', templateUrl: './motion-poll.component.html',
styleUrls: ['./motion-poll.component.scss'] styleUrls: ['./motion-poll.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class MotionPollComponent extends BaseViewComponent implements OnInit { export class MotionPollComponent extends BaseViewComponent implements OnInit {
/** /**

2
client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.html
View File

@ -2,7 +2,7 @@
<form [formGroup]="exportForm"> <form [formGroup]="exportForm">
<!-- Content --> <!-- Content -->
<div mat-dialog-content> <div mat-dialog-content class="motion-export-dialog-wrapper">
<div> <div>
<p class="toggle-group-head" translate>Format</p> <p class="toggle-group-head" translate>Format</p>
<mat-button-toggle-group class="smaller-buttons" formControlName="format"> <mat-button-toggle-group class="smaller-buttons" formControlName="format">

22
client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.scss
View File

@ -1,16 +1,16 @@
.toggle-group-head { .motion-export-dialog-wrapper {
margin-bottom: 0; .toggle-group-head {
} margin-bottom: 0;
}
h1 { h1 {
margin: 0; margin: 0;
} }
.smaller-buttons { mat-button-toggle {
::ng-deep { .mat-button-toggle-label-content {
.mat-button-toggle-appearance-standard .mat-button-toggle-label-content { line-height: 2.5;
line-height: 2.5 !important; padding: 0 10px;
padding: 0 10px !important;
} }
} }
} }

5
client/src/app/site/motions/modules/shared-motion/motion-export-dialog/motion-export-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
import { MatButtonToggle } from '@angular/material/button-toggle'; import { MatButtonToggle } from '@angular/material/button-toggle';
import { MatDialogRef } from '@angular/material/dialog'; import { MatDialogRef } from '@angular/material/dialog';
@ -20,7 +20,8 @@ import { ExportFileFormat, MotionExportInfo } from 'app/site/motions/services/mo
@Component({ @Component({
selector: 'os-motion-export-dialog', selector: 'os-motion-export-dialog',
templateUrl: './motion-export-dialog.component.html', templateUrl: './motion-export-dialog.component.html',
styleUrls: ['./motion-export-dialog.component.scss'] styleUrls: ['./motion-export-dialog.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class MotionExportDialogComponent implements OnInit { export class MotionExportDialogComponent implements OnInit {
/** /**

26
client/src/app/site/projector/components/countdown-controls/countdown-controls.component.scss
View File

@ -1,3 +1,5 @@
@import '~assets/styles/custom-button-styles.scss';
.grid-wrapper { .grid-wrapper {
display: grid; display: grid;
width: 100%; width: 100%;
@ -38,27 +40,3 @@
min-width: 60px; min-width: 60px;
margin-right: 10px; margin-right: 10px;
} }
// smaller and closer mat icon buttons.
// use on button-tags
// TODO: Somehow does not apply when in style.scss
.small-mat-icon-button {
$size: 20px;
margin: 0 5px;
position: relative;
width: $size;
height: $size;
::ng-deep .mat-icon {
position: absolute;
left: 0;
top: 0;
line-height: normal;
width: $size;
height: $size;
}
.material-icons {
font-size: $size;
}
}

26
client/src/app/site/projector/components/message-controls/message-controls.component.scss
View File

@ -1,3 +1,5 @@
@import '~assets/styles/custom-button-styles.scss';
.grid-wrapper { .grid-wrapper {
display: grid; display: grid;
width: 100%; width: 100%;
@ -19,27 +21,3 @@
grid-area: buttons; grid-area: buttons;
text-align: right; text-align: right;
} }
// smaller and closer mat icon buttons.
// use on button-tags
// TODO: Somehow does not apply when in style.scss
.small-mat-icon-button {
$size: 20px;
margin: 0 5px;
position: relative;
width: $size;
height: $size;
::ng-deep .mat-icon {
position: absolute;
left: 0;
top: 0;
line-height: normal;
width: $size;
height: $size;
}
.material-icons {
font-size: $size;
}
}

4
client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.scss
View File

@ -8,10 +8,6 @@ form {
margin-top: 10px; margin-top: 10px;
} }
::ng-deep mat-card {
margin: 0;
}
.no-markup { .no-markup {
/* Do not let the a tag ruin the projector */ /* Do not let the a tag ruin the projector */
color: inherit; color: inherit;

4
client/src/app/site/site.component.html
View File

@ -90,10 +90,6 @@
</a> </a>
</span> </span>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a [@navItemAnim] *ngIf="vp.isMobile" mat-list-item routerLinkActive="active" (click)="toggleSearch()">
<mat-icon>search</mat-icon>
<span translate>Search</span>
</a>
<a <a
[@navItemAnim] [@navItemAnim]
mat-list-item mat-list-item

9
client/src/app/site/site.component.ts
View File

@ -211,15 +211,6 @@ export class SiteComponent extends BaseComponent implements OnInit {
this.sideNav.toggle(); this.sideNav.toggle();
} }
/**
* Shows the `super-search.component`,
* only if the user is on a mobile device.
*/
public toggleSearch(): void {
this.overlayService.showSearch();
this.mobileAutoCloseNav();
}
/** /**
* Automatically close the navigation in while navigating in mobile mode * Automatically close the navigation in while navigating in mobile mode
*/ */

8
client/src/app/site/users/components/user-detail/user-detail.component.html
View File

@ -53,9 +53,11 @@
</mat-menu> </mat-menu>
</os-head-bar> </os-head-bar>
<mat-card [ngClass]="editUser ? 'os-form-card' : 'os-card'" *ngIf="isAllowed('seeName')"> <div class="content-container">
<ng-container *ngIf="editUser; then editView; else showView"></ng-container> <mat-card [ngClass]="editUser ? 'os-form-card' : 'os-card'" *ngIf="isAllowed('seeName')">
</mat-card> <ng-container *ngIf="editUser; then editView; else showView"></ng-container>
</mat-card>
</div>
<ng-template #editView> <ng-template #editView>
<form [formGroup]="personalInfoForm" *ngIf="user" (keydown)="onKeyDown($event)"> <form [formGroup]="personalInfoForm" *ngIf="user" (keydown)="onKeyDown($event)">

20
client/src/app/site/users/components/user-detail/user-detail.component.scss
View File

@ -1,28 +1,24 @@
.form70 { @import '~assets/styles/media-queries.scss';
::ng-deep {
@include set-breakpoint-upper(xs) {
.form70 {
width: 70%; width: 70%;
} }
}
.form37 { .form37 {
::ng-deep {
width: 37%; width: 37%;
} }
}
.form25 { .form25 {
::ng-deep {
width: 25%; width: 25%;
} }
}
.form16 { .form16 {
::ng-deep {
width: 16%; width: 16%;
} }
} }
.force-min-with { .force-min-width {
min-width: 110px; min-width: 110px;
} }

2
client/src/app/slides/core/projector-message/projector-message-slide.component.scss
View File

@ -23,7 +23,7 @@
min-height: 20px; min-height: 20px;
line-height: normal; line-height: normal;
::ng-deep p { p {
margin: 0 0 10px; margin: 0 0 10px;
} }
} }

5
client/src/app/slides/core/projector-message/projector-message-slide.component.ts
View File

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, ViewEncapsulation } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { BaseSlideComponent } from 'app/slides/base-slide-component'; import { BaseSlideComponent } from 'app/slides/base-slide-component';
@ -7,7 +7,8 @@ import { ProjectorMessageSlideData } from './projector-message-slide-data';
@Component({ @Component({
selector: 'os-projector-message-slide', selector: 'os-projector-message-slide',
templateUrl: './projector-message-slide.component.html', templateUrl: './projector-message-slide.component.html',
styleUrls: ['./projector-message-slide.component.scss'] styleUrls: ['./projector-message-slide.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class ProjectorMessageSlideComponent extends BaseSlideComponent<ProjectorMessageSlideData> { export class ProjectorMessageSlideComponent extends BaseSlideComponent<ProjectorMessageSlideData> {
public constructor(private sanitizer: DomSanitizer) { public constructor(private sanitizer: DomSanitizer) {

4
client/src/app/slides/motions/motion/motion-slide.component.scss
View File

@ -1,6 +1,6 @@
@import '~assets/styles/motion-styles-common'; @import '~assets/styles/motion-styles-common';
::ng-deep .paragraph-context { .paragraph-context {
opacity: 0.5; opacity: 0.5;
} }
@ -46,7 +46,7 @@
} }
/* override the absolute position of outside linenumbers on motion slide */ /* override the absolute position of outside linenumbers on motion slide */
:host ::ng-deep .motion-text { .motion-text {
&.line-numbers-outside { &.line-numbers-outside {
.os-line-number { .os-line-number {
&:after { &:after {

5
client/src/app/slides/motions/motion/motion-slide.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core'; import { Component, Input, ViewEncapsulation } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
@ -19,7 +19,8 @@ import { MotionSlideObjChangeReco } from './motion-slide-obj-change-reco';
@Component({ @Component({
selector: 'os-motion-slide', selector: 'os-motion-slide',
templateUrl: './motion-slide.component.html', templateUrl: './motion-slide.component.html',
styleUrls: ['./motion-slide.component.scss'] styleUrls: ['./motion-slide.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class MotionSlideComponent extends BaseMotionSlideComponent<MotionSlideData> export class MotionSlideComponent extends BaseMotionSlideComponent<MotionSlideData>
implements IBaseScaleScrollSlideComponent<MotionSlideData> { implements IBaseScaleScrollSlideComponent<MotionSlideData> {

22
client/src/assets/styles/custom-button-styles.scss Normal file
View File

@ -0,0 +1,22 @@
// smaller and closer mat icon buttons.
// use on button-tags
.small-mat-icon-button {
$size: 20px;
margin: 0 5px;
position: relative;
width: $size;
height: $size;
.mat-icon {
position: absolute;
left: 0;
top: 0;
line-height: normal;
width: $size;
height: $size;
}
.material-icons {
font-size: $size;
}
}

8
client/src/assets/styles/motion-styles-common.scss
View File

@ -1,8 +1,4 @@
/* Line numbers */ .motion-text {
// :host ::ng-deep is needed as this styling applies to the motion html that is injected using innerHTML,
// which doesn't have the [ngcontent]-attributes necessary for regular styles.
// An alternative approach (in case ::ng-deep gets removed) might be to change the view encapsulation.
:host ::ng-deep .motion-text {
ins, ins,
.insert { .insert {
color: green; color: green;
@ -115,7 +111,7 @@
} }
} }
:host ::ng-deep .amendment-view { .amendment-view {
.os-split-after { .os-split-after {
margin-bottom: 0; margin-bottom: 0;
} }

63
client/src/assets/styles/poll-common-styles.scss Normal file
View File

@ -0,0 +1,63 @@
.poll-result {
.poll-progress-bar {
height: 5px;
width: 100%;
.mat-progress-bar {
height: 100%;
width: 100%;
}
}
.poll-progress {
display: flex;
margin-bottom: 15px;
margin-top: 15px;
mat-icon {
min-width: 40px;
margin-right: 5px;
}
.progress-container {
width: 85%;
}
}
}
.poll-progress-bar {
mat-progress-bar {
&.progress-green {
.mat-progress-bar-fill::after {
background-color: #4caf50;
}
.mat-progress-bar-buffer {
background-color: #d5ecd5;
}
}
&.progress-red {
.mat-progress-bar-fill::after {
background-color: #f44336;
}
.mat-progress-bar-buffer {
background-color: #fcd2cf;
}
}
&.progress-yellow {
.mat-progress-bar-fill::after {
background-color: #ffc107;
}
.mat-progress-bar-buffer {
background-color: #fff0c4;
}
}
}
}
.poll-quorum-line {
display: flex;
vertical-align: bottom;
.mat-button {
padding: 1px;
}
}
.main-nav-color {
color: rgba(0, 0, 0, 0.54);
}

8
client/src/styles.scss
View File

@ -328,7 +328,7 @@ mat-card {
} }
} }
.os-form-card { .os-form-card {
width: 770px; max-width: 770px;
margin-top: 20px !important; margin-top: 20px !important;
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
@ -825,10 +825,14 @@ button.mat-menu-item.selected {
font-size: 16px; font-size: 16px;
} }
.ellipsis-overflow { .one-line {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
.ellipsis-overflow {
@extend .one-line;
padding-right: 3px; padding-right: 3px;
margin-right: 3px; margin-right: 3px;
} }