More bootstrap elements used.

9 years ago · 392967bd82
18 changed files with 55 additions and 70 deletions
--- 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)
         {
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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">
--- 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">
--- 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">
--- 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">
--- 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>
--- 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>
--- 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">
--- 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;

--- 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 {
--- 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;
 }
--- 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);
--- 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;