Merge pull request #4949 from GabrielInTheWorld/lostDeep
Cleans up the stylesheets a little bit
This commit is contained in:
Emanuel Schütze
GitHub
commit
367c06bb02
@ -29,7 +29,7 @@
|
||||
<div class="spacer"></div>
|
||||
|
||||
<!-- 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>
|
||||
</button>
|
||||
|
||||
|
||||
@ -9,39 +9,40 @@
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
max-width: calc(100% - 100px);
|
||||
button {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.toolbar-left-text {
|
||||
margin-left: 10px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
max-width: calc(100% - 100px);
|
||||
button {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.toolbar-left-text {
|
||||
margin-left: 10px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
::ng-deep .title-slot {
|
||||
h2 {
|
||||
.title-slot {
|
||||
margin: 16px 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
h2 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toolbar-centered {
|
||||
margin: auto;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
::ng-deep .extra-controls-slot {
|
||||
.toolbar-centered {
|
||||
margin: auto;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
.extra-controls-slot {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 { MainMenuService } from 'app/core/core-services/main-menu.service';
|
||||
@ -54,7 +54,8 @@ import { ViewportService } from 'app/core/ui-services/viewport.service';
|
||||
@Component({
|
||||
selector: 'os-head-bar',
|
||||
templateUrl: './head-bar.component.html',
|
||||
styleUrls: ['./head-bar.component.scss']
|
||||
styleUrls: ['./head-bar.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class HeadBarComponent implements OnInit {
|
||||
/**
|
||||
|
||||
@ -74,7 +74,7 @@ export class RoundedInputComponent implements OnInit, OnDestroy {
|
||||
* Whether this component should render over the full width.
|
||||
*/
|
||||
@Input()
|
||||
public fullWidth = true;
|
||||
public fullWidth = false;
|
||||
|
||||
/**
|
||||
* Custom `FormControl`.
|
||||
|
||||
@ -32,12 +32,14 @@ mat-divider {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
// adds breaks to mat-checkboxes with long labels
|
||||
::ng-deep .mat-checkbox-layout {
|
||||
white-space: normal !important;
|
||||
}
|
||||
mat-checkbox {
|
||||
// adds breaks to mat-checkboxes with long labels
|
||||
.mat-checkbox-layout {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
// rather than center the checkbox, put the checkbox in the first line
|
||||
::ng-deep .mat-checkbox-inner-container {
|
||||
margin-top: 3px !important;
|
||||
// rather than center the checkbox, put the checkbox in the first line
|
||||
.mat-checkbox-inner-container {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 { BaseViewModel } from 'app/site/base/base-view-model';
|
||||
@ -17,7 +17,8 @@ import { BaseViewModel } from 'app/site/base/base-view-model';
|
||||
@Component({
|
||||
selector: 'os-filter-menu',
|
||||
templateUrl: './filter-menu.component.html',
|
||||
styleUrls: ['./filter-menu.component.scss']
|
||||
styleUrls: ['./filter-menu.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class FilterMenuComponent implements OnInit {
|
||||
/**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<h1 mat-dialog-title>{{ 'Edit details for' | translate }} {{ item.getTitle() }}</h1>
|
||||
<div mat-dialog-content>
|
||||
<form class="itemDialogForm" [formGroup]="agendaInfoForm" (keydown)="onKeyDown($event)">
|
||||
<form class="item-dialog-form" [formGroup]="agendaInfoForm" (keydown)="onKeyDown($event)">
|
||||
<!-- Visibility -->
|
||||
<mat-form-field>
|
||||
<mat-select formControlName="type" placeholder="{{ 'Agenda visibility' | translate }}">
|
||||
@ -13,7 +13,9 @@
|
||||
<!-- Duration -->
|
||||
<mat-form-field>
|
||||
<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>
|
||||
|
||||
<!-- Item number (prefix) -->
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
.itemDialogForm {
|
||||
.item-dialog-form {
|
||||
display: inline-block;
|
||||
::ng-deep {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="poll-wrapper" *ngIf="poll">
|
||||
<div class="assignment-poll-wrapper" *ngIf="poll">
|
||||
<div class="poll-menu">
|
||||
<!-- Buttons -->
|
||||
<button
|
||||
|
||||
@ -1,109 +1,48 @@
|
||||
::ng-deep .progress-green {
|
||||
.mat-progress-bar-fill::after {
|
||||
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 {
|
||||
.assignment-poll-wrapper {
|
||||
@import '~assets/styles/poll-common-styles.scss';
|
||||
position: relative;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.poll-main-content {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.poll-main-content {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.poll-result {
|
||||
.poll-progress-bar {
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
.mat-progress-bar {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.poll-grid {
|
||||
display: grid;
|
||||
grid-gap: 5px;
|
||||
padding: 5px;
|
||||
grid-template-columns: 30px auto 250px 150px;
|
||||
.candidate-name {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
.poll-progress {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
|
||||
.poll-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.poll-quorum {
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
mat-icon {
|
||||
min-width: 40px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.progress-container {
|
||||
width: 85%;
|
||||
vertical-align: middle;
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav-color {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.top-aligned {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.poll-quorum-line {
|
||||
display: flex;
|
||||
vertical-align: bottom;
|
||||
.mat-button {
|
||||
padding: 1px;
|
||||
.wide {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -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 { MatDialog } from '@angular/material/dialog';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
@ -25,7 +25,8 @@ import { ViewAssignmentPollOption } from '../../models/view-assignment-poll-opti
|
||||
@Component({
|
||||
selector: 'os-assignment-poll',
|
||||
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 {
|
||||
/**
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<div class="query-container">
|
||||
<div class="super-search-input">
|
||||
<os-rounded-input
|
||||
[fullWidth]="true"
|
||||
[autofocus]="true"
|
||||
placeholder="{{ 'Search' | translate }}"
|
||||
[modelForm]="searchForm"
|
||||
|
||||
@ -2,11 +2,6 @@
|
||||
|
||||
$navbar-size: 64px;
|
||||
|
||||
// multi line tooltip
|
||||
::ng-deep .mat-tooltip {
|
||||
white-space: pre-line !important;
|
||||
}
|
||||
|
||||
.folder-nav-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -17,10 +17,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-form-field {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.mat-cell > div {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<mat-horizontal-stepper #matStepper linear>
|
||||
<mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
|
||||
<ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
|
||||
<div>
|
||||
<div class="amendment-create-wizard-wrapper">
|
||||
<section
|
||||
*ngFor="let paragraph of paragraphs"
|
||||
class="paragraph-row"
|
||||
|
||||
@ -1,85 +1,77 @@
|
||||
.paragraph-row {
|
||||
display: flex;
|
||||
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;
|
||||
|
||||
.amendment-create-wizard-wrapper {
|
||||
.paragraph-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.paragraph-text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
padding: 20px 0;
|
||||
|
||||
:host ::ng-deep .motion-text {
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
blockquote {
|
||||
margin-top: 0;
|
||||
margin-bottom: 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;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.paragraph-text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.motion-text {
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
blockquote {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
li {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
padding-left: 40px;
|
||||
position: relative;
|
||||
ol,
|
||||
ul {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.os-line-number {
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding-right: 55px;
|
||||
padding-left: 40px;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: attr(data-line-number);
|
||||
.os-line-number {
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
vertical-align: top;
|
||||
color: gray;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
left: 0;
|
||||
padding-right: 55px;
|
||||
|
||||
&:after {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
@ -19,7 +19,8 @@ import { ViewMotion } from 'app/site/motions/models/view-motion';
|
||||
@Component({
|
||||
selector: 'os-amendment-create-wizard',
|
||||
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 {
|
||||
/**
|
||||
|
||||
@ -9,7 +9,7 @@ h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.small-button ::ng-deep {
|
||||
.small-button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
|
||||
@ -43,8 +43,7 @@
|
||||
<!-- The actual diff view -->
|
||||
<div class="motion-text-with-diffs">
|
||||
<div *ngIf="getTitleChangingObject() as changedTitle">
|
||||
<div
|
||||
class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
|
||||
<div class="diff-box diff-box-{{ changedTitle.getChangeId() }} clearfix">
|
||||
<div class="action-row" *osPerms="'motions.can_manage'">
|
||||
<button
|
||||
mat-icon-button
|
||||
@ -60,15 +59,14 @@
|
||||
<i class="grey">{{ 'Rejected' | translate }}</i>
|
||||
</div>
|
||||
|
||||
<div class="motion-text motion-text-diff"
|
||||
[class.line-numbers-none]="isLineNumberingNone()"
|
||||
[class.line-numbers-inline]="isLineNumberingInline()"
|
||||
[class.line-numbers-outside]="isLineNumberingOutside()"
|
||||
[attr.data-change-id]="changedTitle.getChangeId()"
|
||||
<div
|
||||
class="motion-text motion-text-diff"
|
||||
[class.line-numbers-none]="isLineNumberingNone()"
|
||||
[class.line-numbers-inline]="isLineNumberingInline()"
|
||||
[class.line-numbers-outside]="isLineNumberingOutside()"
|
||||
[attr.data-change-id]="changedTitle.getChangeId()"
|
||||
>
|
||||
<div class="bold">
|
||||
{{ 'Changed title' | translate }}:
|
||||
</div>
|
||||
<div class="bold">{{ 'Changed title' | translate }}:</div>
|
||||
<div [innerHTML]="getFormattedTitleDiff()"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -153,7 +151,7 @@
|
||||
>
|
||||
<mat-icon>thumb_up</mat-icon>
|
||||
<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
|
||||
type="button"
|
||||
@ -163,7 +161,7 @@
|
||||
>
|
||||
<mat-icon>thumb_down</mat-icon>
|
||||
<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 type="button" mat-menu-item (click)="setInternal(change, !change.internal)">
|
||||
<mat-icon>{{ change.internal ? 'check_box_outline_blank' : 'check_box' }}</mat-icon>
|
||||
@ -173,11 +171,21 @@
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span translate>Delete</span>
|
||||
</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>
|
||||
<span translate>Edit</span>
|
||||
</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>
|
||||
<span translate>Edit</span>
|
||||
</button>
|
||||
|
||||
@ -95,12 +95,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-menu-content {
|
||||
.active-indicator {
|
||||
font-size: 18px;
|
||||
color: green !important;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.active-indicator {
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
@ -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 { MatCheckboxChange } from '@angular/material/checkbox';
|
||||
import { ErrorStateMatcher } from '@angular/material/core';
|
||||
@ -68,7 +68,8 @@ import {
|
||||
@Component({
|
||||
selector: 'os-motion-detail',
|
||||
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 {
|
||||
/**
|
||||
|
||||
@ -4,49 +4,51 @@
|
||||
<span *ngIf="pollIndex"> ({{ pollIndex + 1 }})</span>
|
||||
</ng-container>
|
||||
<ng-container class="meta-text-block-content">
|
||||
<div *ngIf="poll.has_votes" class="poll-result">
|
||||
<div *ngFor="let key of pollValues">
|
||||
<div class="poll-progress" *ngIf="poll[key] !== undefined">
|
||||
<mat-icon class="main-nav-color" matTooltip="{{ getLabel(key) | translate }}">
|
||||
{{ getIcon(key) }}
|
||||
</mat-icon>
|
||||
<div class="progress-container">
|
||||
<div>
|
||||
<span>{{ getLabel(key) | translate }}</span
|
||||
>: {{ getNumber(key) }}
|
||||
<span *ngIf="!isAbstractValue(key)">({{ getPercent(key) }}%)</span>
|
||||
</div>
|
||||
<div *ngIf="!isAbstractValue(key)" class="poll-progress-bar">
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
[value]="getPercent(key)"
|
||||
[ngClass]="pollService.getProgressBarColor(key)"
|
||||
>
|
||||
</mat-progress-bar>
|
||||
<div class="motion-poll-wrapper">
|
||||
<div *ngIf="poll.has_votes" class="poll-result">
|
||||
<div *ngFor="let key of pollValues">
|
||||
<div class="poll-progress" *ngIf="poll[key] !== undefined">
|
||||
<mat-icon class="main-nav-color" matTooltip="{{ getLabel(key) | translate }}">
|
||||
{{ getIcon(key) }}
|
||||
</mat-icon>
|
||||
<div class="progress-container">
|
||||
<div>
|
||||
<span>{{ getLabel(key) | translate }}</span
|
||||
>: {{ getNumber(key) }}
|
||||
<span *ngIf="!isAbstractValue(key)">({{ getPercent(key) }}%)</span>
|
||||
</div>
|
||||
<div *ngIf="!isAbstractValue(key)" class="poll-progress-bar">
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
[value]="getPercent(key)"
|
||||
[ngClass]="pollService.getProgressBarColor(key)"
|
||||
>
|
||||
</mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr *ngIf="key === 'abstain'" flex />
|
||||
</div>
|
||||
<hr *ngIf="key === 'abstain'" flex />
|
||||
</div>
|
||||
<!-- quorum -->
|
||||
<div *osPerms="'motions.can_manage'">
|
||||
<div class="poll-quorum-line" *ngIf="!abstractPoll">
|
||||
<span>
|
||||
<span *ngIf="yesQuorum">
|
||||
<mat-icon color="warn" *ngIf="!quorumYesReached"> thumb_down </mat-icon>
|
||||
<mat-icon color="primary" *ngIf="quorumYesReached"> thumb_up </mat-icon>
|
||||
<!-- quorum -->
|
||||
<div *osPerms="'motions.can_manage'">
|
||||
<div class="poll-quorum-line" *ngIf="!abstractPoll">
|
||||
<span>
|
||||
<span *ngIf="yesQuorum">
|
||||
<mat-icon color="warn" *ngIf="!quorumYesReached"> thumb_down </mat-icon>
|
||||
<mat-icon color="primary" *ngIf="quorumYesReached"> thumb_up </mat-icon>
|
||||
</span>
|
||||
<button mat-button [matMenuTriggerFor]="majorityMenu">
|
||||
<span>{{ getQuorumLabel() | translate }}</span> <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>
|
||||
<button mat-button [matMenuTriggerFor]="majorityMenu">
|
||||
<span>{{ getQuorumLabel() | translate }}</span> <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>
|
||||
|
||||
@ -1,61 +1,3 @@
|
||||
::ng-deep .progress-green {
|
||||
.mat-progress-bar-fill::after {
|
||||
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;
|
||||
}
|
||||
.motion-poll-wrapper {
|
||||
@import '~assets/styles/poll-common-styles.scss';
|
||||
}
|
||||
|
||||
@ -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 { MatDialog } from '@angular/material/dialog';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
@ -23,7 +23,8 @@ import { MotionPollDialogComponent } from './motion-poll-dialog.component';
|
||||
@Component({
|
||||
selector: 'os-motion-poll',
|
||||
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 {
|
||||
/**
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<form [formGroup]="exportForm">
|
||||
<!-- Content -->
|
||||
<div mat-dialog-content>
|
||||
<div mat-dialog-content class="motion-export-dialog-wrapper">
|
||||
<div>
|
||||
<p class="toggle-group-head" translate>Format</p>
|
||||
<mat-button-toggle-group class="smaller-buttons" formControlName="format">
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
.toggle-group-head {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.motion-export-dialog-wrapper {
|
||||
.toggle-group-head {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.smaller-buttons {
|
||||
::ng-deep {
|
||||
.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
|
||||
line-height: 2.5 !important;
|
||||
padding: 0 10px !important;
|
||||
mat-button-toggle {
|
||||
.mat-button-toggle-label-content {
|
||||
line-height: 2.5;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 { MatButtonToggle } from '@angular/material/button-toggle';
|
||||
import { MatDialogRef } from '@angular/material/dialog';
|
||||
@ -20,7 +20,8 @@ import { ExportFileFormat, MotionExportInfo } from 'app/site/motions/services/mo
|
||||
@Component({
|
||||
selector: 'os-motion-export-dialog',
|
||||
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 {
|
||||
/**
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import '~assets/styles/custom-button-styles.scss';
|
||||
|
||||
.grid-wrapper {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
@ -38,27 +40,3 @@
|
||||
min-width: 60px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import '~assets/styles/custom-button-styles.scss';
|
||||
|
||||
.grid-wrapper {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
@ -19,27 +21,3 @@
|
||||
grid-area: buttons;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,10 +8,6 @@ form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
::ng-deep mat-card {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.no-markup {
|
||||
/* Do not let the a tag ruin the projector */
|
||||
color: inherit;
|
||||
|
||||
@ -90,10 +90,6 @@
|
||||
</a>
|
||||
</span>
|
||||
<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
|
||||
[@navItemAnim]
|
||||
mat-list-item
|
||||
|
||||
@ -211,15 +211,6 @@ export class SiteComponent extends BaseComponent implements OnInit {
|
||||
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
|
||||
*/
|
||||
|
||||
@ -53,9 +53,11 @@
|
||||
</mat-menu>
|
||||
</os-head-bar>
|
||||
|
||||
<mat-card [ngClass]="editUser ? 'os-form-card' : 'os-card'" *ngIf="isAllowed('seeName')">
|
||||
<ng-container *ngIf="editUser; then editView; else showView"></ng-container>
|
||||
</mat-card>
|
||||
<div class="content-container">
|
||||
<mat-card [ngClass]="editUser ? 'os-form-card' : 'os-card'" *ngIf="isAllowed('seeName')">
|
||||
<ng-container *ngIf="editUser; then editView; else showView"></ng-container>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<ng-template #editView>
|
||||
<form [formGroup]="personalInfoForm" *ngIf="user" (keydown)="onKeyDown($event)">
|
||||
|
||||
@ -1,28 +1,24 @@
|
||||
.form70 {
|
||||
::ng-deep {
|
||||
@import '~assets/styles/media-queries.scss';
|
||||
|
||||
@include set-breakpoint-upper(xs) {
|
||||
.form70 {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.form37 {
|
||||
::ng-deep {
|
||||
.form37 {
|
||||
width: 37%;
|
||||
}
|
||||
}
|
||||
|
||||
.form25 {
|
||||
::ng-deep {
|
||||
.form25 {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.form16 {
|
||||
::ng-deep {
|
||||
.form16 {
|
||||
width: 16%;
|
||||
}
|
||||
}
|
||||
|
||||
.force-min-with {
|
||||
.force-min-width {
|
||||
min-width: 110px;
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
min-height: 20px;
|
||||
line-height: normal;
|
||||
|
||||
::ng-deep p {
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
|
||||
import { BaseSlideComponent } from 'app/slides/base-slide-component';
|
||||
@ -7,7 +7,8 @@ import { ProjectorMessageSlideData } from './projector-message-slide-data';
|
||||
@Component({
|
||||
selector: 'os-projector-message-slide',
|
||||
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> {
|
||||
public constructor(private sanitizer: DomSanitizer) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import '~assets/styles/motion-styles-common';
|
||||
|
||||
::ng-deep .paragraph-context {
|
||||
.paragraph-context {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
}
|
||||
|
||||
/* override the absolute position of outside linenumbers on motion slide */
|
||||
:host ::ng-deep .motion-text {
|
||||
.motion-text {
|
||||
&.line-numbers-outside {
|
||||
.os-line-number {
|
||||
&:after {
|
||||
|
||||
@ -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 { TranslateService } from '@ngx-translate/core';
|
||||
@ -19,7 +19,8 @@ import { MotionSlideObjChangeReco } from './motion-slide-obj-change-reco';
|
||||
@Component({
|
||||
selector: 'os-motion-slide',
|
||||
templateUrl: './motion-slide.component.html',
|
||||
styleUrls: ['./motion-slide.component.scss']
|
||||
styleUrls: ['./motion-slide.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MotionSlideComponent extends BaseMotionSlideComponent<MotionSlideData>
|
||||
implements IBaseScaleScrollSlideComponent<MotionSlideData> {
|
||||
|
||||
22
client/src/assets/styles/custom-button-styles.scss
Normal file
22
client/src/assets/styles/custom-button-styles.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,4 @@
|
||||
/* Line numbers */
|
||||
// :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 {
|
||||
.motion-text {
|
||||
ins,
|
||||
.insert {
|
||||
color: green;
|
||||
@ -115,7 +111,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .amendment-view {
|
||||
.amendment-view {
|
||||
.os-split-after {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
63
client/src/assets/styles/poll-common-styles.scss
Normal file
63
client/src/assets/styles/poll-common-styles.scss
Normal 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);
|
||||
}
|
||||
@ -328,7 +328,7 @@ mat-card {
|
||||
}
|
||||
}
|
||||
.os-form-card {
|
||||
width: 770px;
|
||||
max-width: 770px;
|
||||
margin-top: 20px !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
@ -825,10 +825,14 @@ button.mat-menu-item.selected {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ellipsis-overflow {
|
||||
.one-line {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ellipsis-overflow {
|
||||
@extend .one-line;
|
||||
padding-right: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user