Merge pull request #4005 from emanuelschuetze/ui

Template styling improvements

client/src/app/site/common/components/start/start.component.html

@@ -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>

client/src/app/site/motions/components/motion-detail/motion-detail.component.html

@@ -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>

client/src/app/site/motions/components/motion-list/motion-list.component.html

@@ -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>
 

client/src/app/site/motions/components/motion-list/motion-list.component.scss

@@ -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%;

client/src/app/site/site.component.scss

@@ -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 {

client/src/app/site/site.component.scss-theme.scss

@@ -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;

client/src/app/site/site.component.ts

@@ -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');
             }

client/src/styles.scss

@@ -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;
+}