Template styling improvements

This commit is contained in:
Emanuel Schütze 2018-11-09 09:24:38 +01:00
parent 41caddd976
commit 7febb92267
8 changed files with 45 additions and 25 deletions

View File

@ -9,8 +9,6 @@
<h4> {{welcomeTitle | translate}} </h4>
<span> {{welcomeText | translate}} </span>
<button mat-button (click)="TranslateTest()">Translate in console</button>
<br />
<button mat-button (click)="giveDataStore()">print the dataStore</button>
</div>
</mat-card>

View File

@ -143,7 +143,7 @@
<div *ngIf="editMotion && !newMotion">
<!-- <div *ngIf="editMotion"> -->
<div *ngIf='!editMotion'>
<h3 translate>Identifier</h3>
<h4 translate>Identifier</h4>
{{ motion.identifier }}
</div>
<mat-form-field *ngIf="editMotion">
@ -152,15 +152,15 @@
</div>
<!-- Submitter -->
<div *ngIf="motion && motion.submitters || editMotion">
<div *ngIf="editMotion">
<div *ngIf="motion && motion.submitters || newMotion">
<div *ngIf="newMotion">
<div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
<os-search-value-selector ngDefaultControl [form]="metaInfoForm" [formControl]="this.metaInfoForm.get('submitters_id')"
[multiple]="true" listname="Submitter" [InputListValues]="this.submitterObserver"></os-search-value-selector>
[multiple]="true" listname="{{ 'Submitters' | translate }}" [InputListValues]="this.submitterObserver"></os-search-value-selector>
</div>
</div>
<div *ngIf="!editMotion || !newMotion">
<h3 translate>Submitters</h3>
<div *ngIf="!editMotion && !newMotion">
<h4 translate>Submitters</h4>
<mat-chip-list *ngFor="let submitter of motion.submitters">
<mat-chip>{{ submitter.full_name }}</mat-chip>
</mat-chip-list>
@ -177,7 +177,7 @@
</div>
</div>
<div *ngIf="!editMotion && motion.hasSupporters()">
<h3 translate>Supporters</h3>
<h4 translate>Supporters</h4>
<ul *ngFor="let supporter of motion.supporters">
<li>{{ supporter.full_name }}</li>
</ul>
@ -188,7 +188,7 @@
<div *ngIf='motion && motion.state'>
<div *osPerms="['motions.can_manage', 'motions.can_manage_metadata'];complement:true">
<ng-container *ngIf="!newMotion">
<h3 translate>State</h3>
<h4 translate>State</h4>
{{ motion.state }}
</ng-container>
</div>
@ -226,7 +226,7 @@
<!-- Category -->
<div *ngIf="motion && motion.category_id || editMotion">
<div *ngIf='!editMotion'>
<h3 translate>Category</h3>
<h4 translate>Category</h4>
{{ motion.category }}
</div>
<div *ngIf="editMotion || newMotion">
@ -238,7 +238,7 @@
<!-- Origin -->
<div *ngIf="motion && motion.origin || editMotion">
<div *ngIf='!editMotion'>
<h3 translate> Origin</h3>
<h4 translate>Origin</h4>
{{ motion.origin }}
</div>
<div *osPerms="['motions.can_manage', 'motions.can_manage_metadata']">
@ -250,7 +250,7 @@
<!-- Voting -->
<!-- <div *ngIf='motion.polls && motion.polls.length > 0 || editMotion'>
<h3 translate>Voting</h3>
<h4 translate>Voting</h4>
</div> -->
</form>
</ng-template>
@ -259,7 +259,7 @@
<form class="motion-content" [formGroup]='contentForm' (ngSubmit)='saveMotion()'>
<!-- Line Number and Diff buttons-->
<div class="motion-text-controls">
<div *ngIf="!editMotion" class="motion-text-controls">
<button type="button" mat-icon-button [matMenuTriggerFor]="lineNumberingMenu" matTooltip="{{ 'Line numbering' | translate }}">
<mat-icon>format_list_numbered</mat-icon>
</button>

View File

@ -51,9 +51,12 @@
<ng-container matColumnDef="state">
<mat-header-cell *matHeaderCellDef mat-sort-header>State</mat-header-cell>
<mat-cell *matCellDef="let motion">
<div *ngIf="isDisplayIcon(motion.state) && motion.state" class="innerTable">
<!--div *ngIf='isDisplayIcon(motion.state) && motion.state' class='innerTable'>
<mat-icon>{{ getStateIcon(motion.state) }}</mat-icon>
</div>
</div>-->
<mat-chip-list>
<mat-chip color="accent">{{ motion.state }}</mat-chip>
</mat-chip-list>
</mat-cell>
</ng-container>

View File

@ -9,8 +9,7 @@
/** identifier */
.mat-column-identifier {
padding-left: 10px;
padding-right: 30px;
flex: 0 0 40px;
flex: 0 0 50px;
line-height: 60px; // set the text in the vertical middle, since vertical-align will not work
display: initial; // reset display
text-align: center; // center text
@ -35,8 +34,8 @@
/** State */
.mat-column-state {
flex: 0 0 30px;
text-align: center;
flex: 0 0 160px;
justify-content:flex-end !important;
mat-icon {
font-size: 150%;

View File

@ -5,17 +5,26 @@
}
.os-logo-container {
min-width: 240px;
width: 200px;
margin-left: 10px;
background-image: url(/assets/img/openslides-logo-h-dark-transparent.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.os-logo-container:focus,
.os-logo-container:active,
.os-logo-container:hover,
{
border: none;
outline: none;
}
.side-panel {
border: 0;
box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.2);
width: 260px;
}
.content {

View File

@ -60,6 +60,9 @@
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;

View File

@ -67,7 +67,7 @@ export class SiteComponent extends BaseComponent implements OnInit {
this.operator.getObservable().subscribe(user => {
if (user) {
this.username = user.full_name;
this.username = user.short_name;
} else {
this.username = translate.instant('Guest');
}

View File

@ -23,11 +23,15 @@ mat-icon {
h1,
h2,
h3,
h4,
h5 {
h3 {
font-family: Roboto-condensed, Arial, Helvetica, sans-serif;
}
h4 {
font-weight: 400;
font-size: 12px;
color: rgba(0, 0, 0, 0.54);
margin-bottom: 5px;
}
body {
// background: #e8eaed;
@ -142,3 +146,7 @@ footer {
mat-expansion-panel {
border-radius: 0 !important;
}
mat-panel-title mat-icon {
padding-right: 30px;
}