From a2ffc05d86c39f63158e7e670f44a8965e51c70e Mon Sep 17 00:00:00 2001
From: Alex Orluc <alex.orluc@maarch.org>
Date: Thu, 16 Jan 2020 19:38:22 +0100
Subject: [PATCH] fix custom label  contact

---
 .../page/form/contacts-form.component.html    |   2 +
 .../page/form/contacts-form.component.scss    | 120 +++++++++---------
 2 files changed, 65 insertions(+), 57 deletions(-)

diff --git a/src/frontend/app/administration/contact/page/form/contacts-form.component.html b/src/frontend/app/administration/contact/page/form/contacts-form.component.html
index 09828a19a94..065bcf72598 100644
--- a/src/frontend/app/administration/contact/page/form/contacts-form.component.html
+++ b/src/frontend/app/administration/contact/page/form/contacts-form.component.html
@@ -122,6 +122,7 @@
                                     </mat-form-field>
                                 </ng-container>
                                 <ng-container *ngIf="field.type === 'radio'">
+                                    <label class="labelCustom">{{field.label}}</label>
                                     <mat-radio-group class="radio-form" color="primary" [formControl]="field.control">
                                         <mat-radio-button *ngFor="let value of field.values" [value]="value.id">
                                             {{value.label}}
@@ -129,6 +130,7 @@
                                     </mat-radio-group>
                                 </ng-container>
                                 <ng-container *ngIf="field.type === 'checkbox'">
+                                    <label class="labelCustom">{{field.label}}</label>
                                     <mat-selection-list #shoes class="checkbox-form" [formControl]="field.control">
                                         <mat-list-option *ngFor="let value of field.values" [value]="value.id"
                                             color="primary" checkboxPosition="before">
diff --git a/src/frontend/app/administration/contact/page/form/contacts-form.component.scss b/src/frontend/app/administration/contact/page/form/contacts-form.component.scss
index 7083e2fac59..88db748170b 100644
--- a/src/frontend/app/administration/contact/page/form/contacts-form.component.scss
+++ b/src/frontend/app/administration/contact/page/form/contacts-form.component.scss
@@ -1,104 +1,110 @@
-@import '../../../../../css/vars.scss';
+@import "../../../../../css/vars.scss";
 
 .contact-item {
-    height: auto !important;
+  height: auto !important;
 }
 
 .multipleUnits div:nth-child(1) {
-    display: inline-grid !important;
-    width: 50%;
+  display: inline-grid !important;
+  width: 50%;
 }
 
 .multipleUnits div:nth-child(2) {
-    display: inline-grid !important;
-    width: 50%;
+  display: inline-grid !important;
+  width: 50%;
 }
 
 .unitTitle {
-    display: flex;
-    color: $primary;
+  display: flex;
+  color: $primary;
 }
 
 .contact-address {
-    cursor: pointer;
-    color: #337ab7;
+  cursor: pointer;
+  color: #337ab7;
 
-    &:hover {
-        .contact-content {
-            text-decoration: underline;
-        }
+  &:hover {
+    .contact-content {
+      text-decoration: underline;
     }
+  }
 }
 
 .smallInput {
-    font-size: 11px;
-    padding-left: 20px;
-    padding-right: 20px;
-    .mat-button {
-        width: 30px;
-        height: 25px;
-        color: $primary;
-
-        ::ng-deep.mat-button-wrapper {
-            display: flex;
-            line-height: initial;
-            align-items: center;
-        }
-    }
-    ::ng-deep.mat-form-field-infix {
-        padding : 0px;
-        padding-bottom: 5px;
+  font-size: 11px;
+  padding-left: 20px;
+  padding-right: 20px;
+  .mat-button {
+    width: 30px;
+    height: 25px;
+    color: $primary;
+
+    ::ng-deep.mat-button-wrapper {
+      display: flex;
+      line-height: initial;
+      align-items: center;
     }
+  }
+  ::ng-deep.mat-form-field-infix {
+    padding: 0px;
+    padding-bottom: 5px;
+  }
 }
 .radio-form {
-    display: flex;
+  display: flex;
 
-    .mat-radio-button {
-        flex: 1;
-    }
+  .mat-radio-button {
+    flex: 1;
+  }
 }
 
 .checkbox-form {
-    overflow: auto;
-    max-height: 200px;
+  overflow: auto;
+  max-height: 200px;
 }
 
 .loading {
-    display: flex;
-    height: 100%;
+  display: flex;
+  height: 100%;
 }
 
 .fillingBar {
-    ::ng-deep .mat-progress-bar-buffer {
-        background: #E4E8EB;
-    }
+  ::ng-deep .mat-progress-bar-buffer {
+    background: #e4e8eb;
+  }
 }
 
 .rate {
-    font-size: 10px;
-    text-align: right;
+  font-size: 10px;
+  text-align: right;
 }
 
 .fillingBar.mat-warn {
-    ::ng-deep.mat-progress-bar-fill::after {
-        background-color: #E81C2B;
-    }
+  ::ng-deep.mat-progress-bar-fill::after {
+    background-color: #e81c2b;
+  }
 }
 
 .fillingBar.mat-primary {
-    ::ng-deep.mat-progress-bar-fill::after {
-        background-color: #F4891E;
-    }
+  ::ng-deep.mat-progress-bar-fill::after {
+    background-color: #f4891e;
+  }
 }
 
 .fillingBar.mat-accent {
-    ::ng-deep.mat-progress-bar-fill::after {
-        background-color: #0AA34F;
-    }
+  ::ng-deep.mat-progress-bar-fill::after {
+    background-color: #0aa34f;
+  }
 }
 
 .mat-error {
-    font-size: 10px;
-    text-align: right;
-    font-weight: bold;
-}
\ No newline at end of file
+  font-size: 10px;
+  text-align: right;
+  font-weight: bold;
+}
+
+.labelCustom {
+  color: rgba(0, 0, 0, 0.54);
+  transform: scale(0.75);
+  font-weight: 400;
+}
-- 
GitLab