From 392967bd82230c3dda968c46e91cdc55e61ab208 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Fri, 9 Jun 2017 17:54:01 +0200
Subject: [PATCH] More bootstrap elements used.

---
 src/Squidex/Views/Profile/Profile.cshtml        | 11 ++++++-----
 .../event-consumers-page.component.html         |  8 ++++----
 .../pages/users/users-page.component.html       |  2 +-
 .../pages/content/content-field.component.html  |  4 ++--
 .../schemas/pages/schema/field.component.html   | 16 ++++++++--------
 .../pages/schema/schema-page.component.html     |  4 ++--
 .../schema/types/boolean-ui.component.html      |  4 ++--
 .../schema/types/date-time-ui.component.html    |  4 ++--
 .../pages/schema/types/number-ui.component.html |  4 ++--
 .../pages/schema/types/string-ui.component.html |  4 ++--
 .../pages/schemas/schema-form.component.html    |  8 ++++----
 .../pages/languages/language.component.html     |  8 ++++----
 .../shared/components/app-form.component.html   |  8 ++++----
 src/Squidex/app/theme/_bootstrap-vars.scss      |  1 +
 src/Squidex/app/theme/_bootstrap.scss           | 12 ++++++++++--
 src/Squidex/app/theme/_common.scss              |  4 ----
 src/Squidex/app/theme/_forms.scss               | 17 -----------------
 src/Squidex/app/theme/_static.scss              |  6 +-----
 18 files changed, 55 insertions(+), 70 deletions(-)

diff --git a/src/Squidex/Views/Profile/Profile.cshtml b/src/Squidex/Views/Profile/Profile.cshtml
index 968abdf82..c64855702 100644
--- a/src/Squidex/Views/Profile/Profile.cshtml
+++ b/src/Squidex/Views/Profile/Profile.cshtml
@@ -4,16 +4,17 @@
 @model Squidex.Controllers.UI.Profile.ProfileVM
 
 @{
+    ViewBag.Theme = "white";
     ViewBag.Title = "Profile";
 }
 
 <div class="profile profile-lg">
     <img class="profile-logo" src="~/images/logo-small.png" />
     
-    <div>
-        <h4 class="profile-title">Welcome, @Model.DisplayName</h4>
-    </div>
-    
+    <h1>Edit Profile</h1>
+
+    <h2>Personal Information</h2>
+
     @if (!string.IsNullOrWhiteSpace(ViewBag.SuccessMessage))
     {
         <div class="form-success">
@@ -68,7 +69,7 @@
     
     @if (Model.HasPasswordAuth)
     {
-        <h5 class="profile-section">Password</h5>
+        <h2>Password</h2>
 
         @if (Model.HasPassword)
          {
diff --git a/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html b/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html
index 7bb7701fd..367d17a5c 100644
--- a/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html
+++ b/src/Squidex/app/features/administration/pages/event-consumers/event-consumers-page.component.html
@@ -25,10 +25,10 @@
                         <th>
                             Name
                         </th>
-                        <th class="col-right">
+                        <th class="text-right">
                             Event Number
                         </th>
-                        <th class="col-right">
+                        <th class="text-right">
                             Actions
                         </th>
                     </tr>
@@ -44,10 +44,10 @@
                                     {{eventConsumer.name}}
                                 </span>
                             </td>
-                            <td class="col-right">
+                            <td class="text-right">
                                 <span>{{eventConsumer.lastHandledEventNumber}}</span>
                             </td>
-                            <td class="col-right">
+                            <td class="text-right">
                                 <button class="btn btn-link" (click)="reset(eventConsumer.name)" *ngIf="!eventConsumer.isResetting" title="Reset Event Consumer">
                                     <i class="icon icon-reset"></i>
                                 </button>
diff --git a/src/Squidex/app/features/administration/pages/users/users-page.component.html b/src/Squidex/app/features/administration/pages/users/users-page.component.html
index 84ed1525e..0710ebaad 100644
--- a/src/Squidex/app/features/administration/pages/users/users-page.component.html
+++ b/src/Squidex/app/features/administration/pages/users/users-page.component.html
@@ -68,7 +68,7 @@
                             <td>
                                 <span class="user-email table-cell">{{user.email}}</span>
                             </td>
-                            <td class="col-right">
+                            <td class="text-right">
                                 <span *ngIf="user.id !== currentUserId">
                                     <button class="btn btn-link" (click)="lock(user.id); $event.stopPropagation();" *ngIf="!user.isLocked" title="Lock User">
                                         <i class="icon icon-unlocked"></i>
diff --git a/src/Squidex/app/features/content/pages/content/content-field.component.html b/src/Squidex/app/features/content/pages/content/content-field.component.html
index 179b8f1bd..82ce4062b 100644
--- a/src/Squidex/app/features/content/pages/content/content-field.component.html
+++ b/src/Squidex/app/features/content/pages/content/content-field.component.html
@@ -97,7 +97,7 @@
         </div>
     </div>
 
-    <div class="form-hint" *ngIf="field.properties.hints && field.properties.hints.length > 0">
+    <small class="form-text text-muted" *ngIf="field.properties.hints && field.properties.hints.length > 0">
         {{field.properties.hints}}
-    </div>
+    </small>
 </div>
diff --git a/src/Squidex/app/features/schemas/pages/schema/field.component.html b/src/Squidex/app/features/schemas/pages/schema/field.component.html
index cf6f0ff19..f14dea51a 100644
--- a/src/Squidex/app/features/schemas/pages/schema/field.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/field.component.html
@@ -76,9 +76,9 @@
                     <div class="col col-6">
                         <input type="text" class="form-control" id="field-label" readonly [ngModel]="field.name" [ngModelOptions]="{standalone: true}" />
                         
-                        <span class="form-hint">
+                        <small class="form-text text-muted">
                             The name of the field in the API response.
-                        </span>
+                        </small>
                     </div>                        
                 </div>
 
@@ -90,9 +90,9 @@
 
                         <input type="text" class="form-control" id="field-label" maxlength="100" formControlName="label" />
 
-                        <span class="form-hint">
+                        <small class="form-text text-muted">
                             Define the display name for the field for documentation and user interfaces.
-                        </span>
+                        </small>
                     </div>
                 </div>
 
@@ -104,9 +104,9 @@
 
                         <input type="text" class="form-control" id="field-hints" maxlength="100" formControlName="hints" />
 
-                        <span class="form-hint">
+                        <small class="form-text text-muted">
                             Define some hints for the user and editor for the field for documentation and user interfaces.
-                        </span>
+                        </small>
                     </div>
                 </div>
 
@@ -116,9 +116,9 @@
                             <input class="form-check-input" type="checkbox" formControlName="isListField"> List Field
                         </label>
 
-                        <div class="form-hint">
+                        <small class="form-text text-muted">
                             List fields are shown as a column in the content list. If no list field is defined, the first field is shown.
-                        </div>
+                        </small>
                     </div>
                 </div>
             </div>
diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
index dce86d7eb..46e4e69ef 100644
--- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
@@ -77,9 +77,9 @@
                             </label>
                         </div>
 
-                        <div class="form-hint">
+                        <small class="form-text text-muted">
                             You can the field as localizable. It means that is dependent on the language, e.g. a city name.
-                        </div>
+                        </small>
                     </div>
                 </form>
             </div>
diff --git a/src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html
index 163dce32b..f9d3c5453 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html
@@ -5,9 +5,9 @@
         <div class="col col-6">
             <input type="text" class="form-control" id="field-placeholder" maxlength="100" formControlName="placeholder" />
 
-            <span class="form-hint">
+            <small class="form-text text-muted">
                 Define the placeholder for the input control.
-            </span>
+            </small>
         </div>
     </div>
     <div class="form-group row">
diff --git a/src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.html
index 7b503c721..c76e2ac9c 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.html
@@ -5,9 +5,9 @@
         <div class="col col-6">
             <input type="text" class="form-control" id="field-placeholder" maxlength="100" formControlName="placeholder" />
 
-            <span class="form-hint">
+            <small class="form-text text-muted">
                 Define the placeholder for the input control.
-            </span>
+            </small>
         </div>
     </div>
     <div class="form-group row">
diff --git a/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html
index 193c44198..ec17c0a58 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html
@@ -5,9 +5,9 @@
         <div class="col col-6">
             <input type="text" class="form-control" id="field-placeholder" maxlength="100" formControlName="placeholder" />
 
-            <span class="form-hint">
+            <small class="form-text text-muted">
                 Define the placeholder for the input control.
-            </span>
+            </small>
         </div>
     </div>
     <div class="form-group row">
diff --git a/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html
index 2174e2724..14a5d4168 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html
@@ -5,9 +5,9 @@
         <div class="col col-6">
             <input type="text" class="form-control" id="field-input-placeholder" maxlength="100" formControlName="placeholder" />
 
-            <span class="form-hint">
+            <small class="form-text text-muted">
                 Define the placeholder for the input control.
-            </span>
+            </small>
         </div>
     </div>
     <div class="form-group row">
diff --git a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
index 59c2b2976..a6c60dcb5 100644
--- a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
@@ -12,12 +12,12 @@
 
 		<input type="text" class="form-control" id="schema-name" formControlName="name" autocomplete="off" sqxFocusOnInit sqxLowerCaseInput />
         
-        <span class="form-hint">
+        <small class="form-text text-muted">
             The schema name becomes part of the api url,<br /> e.g {{apiUrl.buildUrl("api/content/")}}{{appName}}/<b>{{schemaName | async}}</b>/.
-        </span>
-        <span class="form-hint">
+        </small>
+        <small class="form-text text-muted">
             It must contain lower case letters (a-z), numbers and dashes only, and cannot be longer than 40 characters. The name cannot be changed later.
-        </span>
+        </small>
 	</div>
 
     <div>
diff --git a/src/Squidex/app/features/settings/pages/languages/language.component.html b/src/Squidex/app/features/settings/pages/languages/language.component.html
index dfbecff92..36258b647 100644
--- a/src/Squidex/app/features/settings/pages/languages/language.component.html
+++ b/src/Squidex/app/features/settings/pages/languages/language.component.html
@@ -62,9 +62,9 @@
                         <input class="form-check-input" type="checkbox" formControlName="isMaster"> Is Master
                     </label>
 
-                    <div class="form-hint">
+                    <small class="form-text text-muted">
                         Master language is the last fallback language, when no value for a content and a language is available.
-                    </div>
+                    </small>
                 </div>
 
                 <div class="form-check offset-3 col col-9" *ngIf="!isMaster">
@@ -72,9 +72,9 @@
                         <input class="form-check-input" type="checkbox" formControlName="isOptional"> Is Optional
                     </label>
 
-                    <div class="form-hint">
+                    <small class="form-text text-muted">
                         Values for optional languages must not be specified, even if the field is set to required.
-                    </div>
+                    </small>
                 </div>
             </div>
         </form>
diff --git a/src/Squidex/app/shared/components/app-form.component.html b/src/Squidex/app/shared/components/app-form.component.html
index 0cab1e907..2d64ea8f9 100644
--- a/src/Squidex/app/shared/components/app-form.component.html
+++ b/src/Squidex/app/shared/components/app-form.component.html
@@ -12,13 +12,13 @@
 
 		<input type="text" class="form-control" id="app-name" formControlName="name" autocomplete="off" sqxLowerCaseInput />
         
-        <span class="form-hint">
+        <small class="form-text text-muted">
             The app name becomes part of the api url,<br /> e.g {{apiUrl.buildUrl("api/content/")}}<b>{{appName | async}}</b>/.
-        </span>
+        </small>
           
-        <span class="form-hint">
+        <small class="form-text text-muted">
             It must contain lower case letters (a-z), numbers and dashes only, and cannot be longer than 40 characters. The name cannot be changed later.
-        </span>
+        </small>
 	</div>
 
     <div class="form-group clearfix">
diff --git a/src/Squidex/app/theme/_bootstrap-vars.scss b/src/Squidex/app/theme/_bootstrap-vars.scss
index 0945a94fc..cbff84299 100644
--- a/src/Squidex/app/theme/_bootstrap-vars.scss
+++ b/src/Squidex/app/theme/_bootstrap-vars.scss
@@ -10,6 +10,7 @@ $btn-secondary-border: $color-theme-secondary;
 
 $input-bg-disabled: $color-disabled;
 $input-border-color: $color-input;
+$input-color-placeholder: $color-empty;
 
 $dropdown-border-color: $color-border;
 
diff --git a/src/Squidex/app/theme/_bootstrap.scss b/src/Squidex/app/theme/_bootstrap.scss
index 63f248b3d..bb5042969 100644
--- a/src/Squidex/app/theme/_bootstrap.scss
+++ b/src/Squidex/app/theme/_bootstrap.scss
@@ -3,8 +3,16 @@
 
 @import './../../node_modules/bootstrap/scss/mixins/_buttons';
 
-.col-right {
-    text-align: right;
+h1 {
+    font-size: 1.3rem;
+}
+
+h2 {
+    font-size: 1.1rem;
+}
+
+h3 {
+    font-size: 1.05rem;
 }
 
 .navbar {
diff --git a/src/Squidex/app/theme/_common.scss b/src/Squidex/app/theme/_common.scss
index 49cb100be..202f54da5 100644
--- a/src/Squidex/app/theme/_common.scss
+++ b/src/Squidex/app/theme/_common.scss
@@ -13,10 +13,6 @@ body {
     }
 }
 
-h1 {
-    font-size: 2rem;
-}
-
 .user-ref {
     color: $color-theme-blue-dark;
 }
diff --git a/src/Squidex/app/theme/_forms.scss b/src/Squidex/app/theme/_forms.scss
index 461f67725..256b49678 100644
--- a/src/Squidex/app/theme/_forms.scss
+++ b/src/Squidex/app/theme/_forms.scss
@@ -49,23 +49,6 @@
     text-align: right;
 }
 
-input,
-select {
-    &.form-control {
-        @include placeholder-color($color-empty);
-        padding-top: 0;
-        padding-bottom: 0;
-        height: calc(2.5rem - 2px);
-    }
-}
-
-.form-hint {
-    font-size: .8rem;
-    margin-top: .1rem;
-    margin-bottom: 0;
-    color: lighten($color-text, 30%);
-}
-
 .form-error,
 .form-success {
     @include border-radius(4px);
diff --git a/src/Squidex/app/theme/_static.scss b/src/Squidex/app/theme/_static.scss
index fb754a247..ed1742c84 100644
--- a/src/Squidex/app/theme/_static.scss
+++ b/src/Squidex/app/theme/_static.scss
@@ -11,7 +11,7 @@ noscript {
 
 .profile {
     & {
-        width: 20rem;
+        max-width: 20rem;
         margin: 0 auto;
         padding: 1rem 2rem;
     }
@@ -87,10 +87,6 @@ noscript {
         }
     }
 
-    .form-group {
-        margin-bottom: .5rem;
-    }
-
     .external {
         &-button {
             text-align: left;