Design fixes

src/Squidex/app/app.module.ts

@@ -16,7 +16,8 @@ import {
     DecimalSeparatorConfig,
     SqxFrameworkModule,
     SqxSharedModule,
-    TitlesConfig
+    TitlesConfig,
+    UserReportConfig
 } from './shared';
 
 import { SqxShellModule } from './shell';
@@ -39,6 +40,10 @@ export function configCurrency() {
     return new CurrencyConfig('EUR', '€', true);
 }
 
+export function configUserReport() {
+    return new UserReportConfig('5e3e70c2-19b8-493a-9fa0-af240d50e0ba');
+}
+
 @NgModule({
     imports: [
         BrowserModule,
@@ -54,7 +59,8 @@ export function configCurrency() {
         { provide: ApiUrlConfig, useFactory: configApiUrl },
         { provide: CurrencyConfig, useFactory: configCurrency },
         { provide: DecimalSeparatorConfig, useFactory: configDecimalSeparator },
-        { provide: TitlesConfig, useFactory: configTitles }
+        { provide: TitlesConfig, useFactory: configTitles },
+        { provide: UserReportConfig, useFactory: configUserReport }
     ],
     bootstrap: [AppComponent]
 })

src/Squidex/app/features/content/pages/content/content-page.component.html

@@ -4,7 +4,7 @@
     <sqx-panel panelWidth="36rem">
         <div class="panel-header">
             <div class="panel-title-row">
-                <div class="float-xs-right">
+                <div class="float-right">
                     <button type="submit" class="btn btn-primary">
                         Save
                     </button>

src/Squidex/app/features/content/pages/contents/contents-page.component.html

@@ -3,7 +3,7 @@
 <sqx-panel panelWidth="61rem">
     <div class="panel-header">
         <div class="panel-title-row">
-            <div class="float-xs-right">
+            <div class="float-right">
                 <form class="form-inline" (ngSubmit)="search()">
                     <input class="form-control" [formControl]="contentsFilter" placeholder="Search for content..." />
                 </form>
@@ -66,7 +66,7 @@
             </table>
 
             <div class="clearfix" *ngIf="contentTotal > 0">
-                <div class="float-xs-right pagination">
+                <div class="float-right pagination">
                     {{itemFirst}}-{{itemLast}} of {{contentTotal}}
 
                     <button class="btn btn-simple pagination-button" [disabled]="!canGoPrev" (click)="goPrev()">

src/Squidex/app/features/content/pages/contents/contents-page.component.ts

@@ -164,7 +164,7 @@ export class ContentsPageComponent extends AppComponentBase implements OnDestroy
 
     private load() {
         this.appName()
-            .switchMap(app => this.contentsService.getContents(app, this.schema.name, this.pageSize, this.currentPage *this.pageSize, this.currentQuery))
+            .switchMap(app => this.contentsService.getContents(app, this.schema.name, this.pageSize, this.currentPage * this.pageSize, this.currentQuery))
                .subscribe(dtos => {
                     this.contentItems = ImmutableArray.of(dtos.items);
                     this.contentTotal = dtos.total;
@@ -196,8 +196,8 @@ export class ContentsPageComponent extends AppComponentBase implements OnDestroy
     private updatePaging() {
         const totalPages = Math.ceil(this.contentTotal / this.pageSize);
 
-        this.itemFirst = this.currentPage *this.pageSize + 1;
-        this.itemLast = Math.min(this.contentTotal, (this.currentPage + 1) *this.pageSize);
+        this.itemFirst = this.currentPage * this.pageSize + 1;
+        this.itemLast = Math.min(this.contentTotal, (this.currentPage + 1) * this.pageSize);
 
         this.canGoNext = this.currentPage < totalPages - 1;
         this.canGoPrev = this.currentPage > 0;

src/Squidex/app/features/content/pages/schemas/schemas-page.component.html

@@ -21,7 +21,7 @@
 
     <div class="panel-main">
         <div class="panel-content">
-            <ul class="nav nav-pills nav-stacked nav-dark nav-dark-bordered">
+            <ul class="nav nav-pills flex-column nav-dark nav-dark-bordered">
                 <li class="nav-item" *ngFor="let schema of schemasFiltered | async">
                     <a class="nav-link" [routerLink]="[schema.name]" routerLinkActive="active">
                         {{schema|displayName}}

src/Squidex/app/features/schemas/pages/schema/field.component.html

@@ -1,7 +1,7 @@
 <div class="table-items-row field"> 
     <div class="field-summary">
         <div class="row">
-            <div class="col-xs-6">
+            <div class="col col-6">
                 <span class="field-name">
                     <i class="field-icon icon-type-{{field.properties.fieldType}}"></i> 
 
@@ -9,14 +9,14 @@
                     <span class="field-hints">{{field.properties.hints}}</span>
                 </span>
             </div>
-            <div class="col-xs-3">
-                <div class="float-xs-right">
+            <div class="col col-3">
+                <div class="float-right">
                     <span class="tag tag-success" *ngIf="!field.isDisabled">Enabled</span>
                     <span class="tag tag-danger" *ngIf="field.isDisabled">Disabled</span>
                 </div>
             </div>
-            <div class="col-xs-3">
-                <div class="float-xs-right">
+            <div class="col col-3">
+                <div class="float-right">
                     <button type="button" class="btn btn-secondary field-edit-button" [class.active]="isEditing" (click)="toggleEditing()">
                         <i class="icon-settings2"></i>
                     </button>
@@ -63,7 +63,7 @@
                     </li>
                 </ul>
 
-                <div class="float-xs-right">
+                <div class="float-right">
                     <button type="reset" class="btn btn-link" (click)="cancel()">Cancel</button>
                     <button type="submit" class="btn btn-primary">Save</button>
                 </div>
@@ -71,9 +71,9 @@
 
             <div class="field-details-tab" [class.hidden]="selectedTab !== 0">
                 <div class="form-group row">
-                    <label for="field-label" class="col-xs-3 col-form-label">Name</label>
+                    <label for="field-label" class="col col-3 col-form-label">Name</label>
 
-                    <div class="col-xs-6">
+                    <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">
@@ -83,9 +83,9 @@
                 </div>
 
                 <div class="form-group row">
-                    <label for="field-label" class="col-xs-3 col-form-label">Label</label>
+                    <label for="field-label" class="col col-3 col-form-label">Label</label>
 
-                    <div class="col-xs-6">
+                    <div class="col col-6">
                         <sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>
 
                         <input type="text" class="form-control" id="field-label" maxlength="100" formControlName="label" />
@@ -97,9 +97,9 @@
                 </div>
 
                 <div class="form-group row">
-                    <label for="field-hints" class="col-xs-3 col-form-label">Hints</label>
+                    <label for="field-hints" class="col col-3 col-form-label">Hints</label>
 
-                    <div class="col-xs-6">
+                    <div class="col col-6">
                         <sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>
 
                         <input type="text" class="form-control" id="field-hints" maxlength="100" formControlName="hints" />
@@ -111,7 +111,7 @@
                 </div>
 
                 <div class="form-group row">
-                    <div class="form-check offset-xs-3 col-xs-6">
+                    <div class="form-check offset-3 col col-6">
                         <label class="form-check-label">
                             <input class="form-check-input" type="checkbox" formControlName="isListField"> List Field
                         </label>
@@ -119,7 +119,7 @@
                 </div>
 
                 <div class="form-group row">
-                    <div class="form-check offset-xs-3 col-xs-6">
+                    <div class="form-check offset-3 col col-6">
                         <label class="form-check-label">
                             <input class="form-check-input" type="checkbox" formControlName="isLocalizable"> Localizable
                         </label>

src/Squidex/app/features/schemas/pages/schema/field.component.scss

@@ -24,6 +24,9 @@ $field-header: #e7ebef;
     &-edit-button {
         & {
             color: $color-theme-blue;
+            line-height: 1rem;
+            font-size: 1rem;
+            font-weight: normal;
         }
 
         &:hover {

src/Squidex/app/features/schemas/pages/schema/field.component.ts

@@ -47,7 +47,7 @@ export class FieldComponent implements OnInit {
     @Output()
     public deleting = new EventEmitter<FieldDto>();
 
-    public isEditing: boolean = false;
+    public isEditing = false;
     public selectedTab = 0;
 
     public get displayName() {

src/Squidex/app/features/schemas/pages/schema/schema-edit-form.component.html

@@ -22,7 +22,7 @@
 	</div>
 
     <div class="form-group clearfix">
-        <button type="reset" class="float-xs-left btn btn-secondary" (click)="cancel()">Cancel</button>
-        <button type="submit" class="float-xs-right btn btn-primary">Save</button>
+        <button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button>
+        <button type="submit" class="float-right btn btn-primary">Save</button>
     </div>
 </form>

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -3,7 +3,7 @@
 <sqx-panel panelWidth="48rem">
     <div class="panel-header">
         <div class="panel-title-row">
-            <div class="float-xs-right">
+            <div class="float-right">
                 <div class="btn-group btn-group-sm" data-toggle="buttons">
                     <button type="button" class="btn btn-publishing btn-secondary" [class.btn-success]="isPublished" [disabled]="isPublished" (click)="publish()">
                         Published
@@ -25,7 +25,7 @@
     </div>
 
     <div class="panel-main">
-        <div class="panel-content">
+        <div class="panel-content panel-content-scroll">
             <div *ngFor="let field of schemaFields">
                 <sqx-field [field]="field"
                     (disabling)="disableField(field)"
@@ -38,13 +38,13 @@
             
             <div class="table-items-footer">
                 <form class="form-inline" [formGroup]="addFieldForm" (ngSubmit)="addField()">
-                    <div class="form-group">
+                    <div class="form-group mr-2">
                         <select class="form-control" formControlName="type">
                             <option *ngFor="let type of fieldTypes">{{type}}</option>
                         </select>
                     </div>
 
-                    <div class="form-group">
+                    <div class="form-group mr-2">
                         <sqx-control-errors for="name" [submitted]="addFieldFormSubmitted"></sqx-control-errors>
 
                         <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter field name" />

src/Squidex/app/features/schemas/pages/schema/schema-page.component.scss

@@ -6,10 +6,6 @@
     max-width: 48rem;
 }
 
-.panel-content {
-    overflow-y: scroll;
-}
-
 .btn-publishing {
     &.disabled,
     &:disabled {

src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html

@@ -1,8 +1,8 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label for="field-placeholder" class="col-xs-3 col-form-label">Placeholder</label>
+        <label for="field-placeholder" class="col col-3 col-form-label">Placeholder</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <sqx-control-errors for="placeholder" [submitted]="editFormSubmitted"></sqx-control-errors>
 
             <input type="text" class="form-control" id="field-placeholder" maxlength="100" formControlName="placeholder" />
@@ -13,9 +13,9 @@
         </div>
     </div>
     <div class="form-group row">
-        <label for="field-editor" class="col-xs-3 col-form-label">Editor</label>
+        <label for="field-editor" class="col col-3 col-form-label">Editor</label>
 
-        <div class="col-xs-9">
+        <div class="col col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls.editor.value === 'Checkbox'">
                 <input type="radio" class="radio-input" formControlName="editor" value="Checkbox" />
 

src/Squidex/app/features/schemas/pages/schema/types/boolean-validation.component.html

@@ -1,16 +1,16 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label class="col-xs-3 col-form-checkbox-label" for="field-required">Required</label>
+        <label class="col col-3 col-form-checkbox-label" for="field-required">Required</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <input type="checkbox" class="form-check-input" id="field-required" formControlName="isRequired" />
         </div>
     </div>
 
     <div class="form-group row" [class.hidden]="(hideDefaultValue | async)">
-        <label class="col-xs-3 col-form-label" for="field-default-value">Default Value</label>
+        <label class="col col-3 col-form-label" for="field-default-value">Default Value</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <input type="number" class="form-control" id="field-default-value" formControlName="defaultValue" />
         </div>
     </div>

src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html

@@ -1,8 +1,8 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label for="field-placeholder" class="col-xs-3 col-form-label">Placeholder</label>
+        <label for="field-placeholder" class="col col-3 col-form-label">Placeholder</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <sqx-control-errors for="placeholder" [submitted]="editFormSubmitted"></sqx-control-errors>
 
             <input type="text" class="form-control" id="field-placeholder" maxlength="100" formControlName="placeholder" />
@@ -13,9 +13,9 @@
         </div>
     </div>
     <div class="form-group row">
-        <label for="field-editor" class="col-xs-3 col-form-label">Editor</label>
+        <label for="field-editor" class="col col-3 col-form-label">Editor</label>
 
-        <div class="col-xs-9">
+        <div class="col col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls.editor.value === 'Input'">
                 <input type="radio" class="radio-input" formControlName="editor" value="Input" />
 
@@ -40,9 +40,9 @@
         </div>
     </div>
     <div class="form-group row" [class.hidden]="hideAllowedValues | async">
-        <label for="field-allowed-values" class="col-xs-3 col-form-label">Allowed Values</label>
+        <label for="field-allowed-values" class="col col-3 col-form-label">Allowed Values</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <sqx-tag-editor formControlName="allowedValues" [converter]="converter"></sqx-tag-editor>
         </div>
     </div>

src/Squidex/app/features/schemas/pages/schema/types/number-validation.component.html

@@ -1,29 +1,29 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label class="col-xs-3 col-form-checkbox-label" for="field-required">Required</label>
+        <label class="col col-3 col-form-checkbox-label" for="field-required">Required</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <input type="checkbox" class="form-check-input" id="field-required" formControlName="isRequired" />
         </div>
     </div>
 
     <div class="form-group row">
-        <label class="col-xs-3 col-form-label">Range</label>
+        <label class="col col-3 col-form-label">Range</label>
 
-        <div class="col-xs-3 minlength-col">
+        <div class="col col-3 minlength-col">
             <input type="number" class="form-control" id="field-min-value" formControlName="minValue" placeholder="Min Value" />
             
             <label class="col-form-label minlength-label">-</label>
         </div>
-        <div class="col-xs-3">
+        <div class="col col-3">
             <input type="number" class="form-control" id="field-max-value" formControlName="maxValue" placeholder="Max Value" />
         </div>
     </div>
 
     <div class="form-group row" [class.hidden]="(hideDefaultValue | async)">
-        <label class="col-xs-3 col-form-label" for="field-default-value">Default Value</label>
+        <label class="col col-3 col-form-label" for="field-default-value">Default Value</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <input type="number" class="form-control" id="field-default-value" formControlName="defaultValue" />
         </div>
     </div>

src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html

@@ -1,8 +1,8 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label for="field-input-placeholder" class="col-xs-3 col-form-label">Placeholder</label>
+        <label for="field-input-placeholder" class="col col-3 col-form-label">Placeholder</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <sqx-control-errors for="placeholder" [submitted]="editFormSubmitted"></sqx-control-errors>
 
             <input type="text" class="form-control" id="field-input-placeholder" maxlength="100" formControlName="placeholder" />
@@ -13,9 +13,9 @@
         </div>
     </div>
     <div class="form-group row">
-        <label for="field-input-editor" class="col-xs-3 col-form-label">Editor</label>
+        <label for="field-input-editor" class="col col-3 col-form-label">Editor</label>
 
-        <div class="col-xs-9">
+        <div class="col col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls.editor.value === 'Input'">
                 <input type="radio" class="radio-input" formControlName="editor" value="Input" />
 
@@ -47,9 +47,9 @@
         </div>
     </div>
     <div class="form-group row" [class.hidden]="hideAllowedValues | async">
-        <label for="field-allowed-values" class="col-xs-3 col-form-label">Allowed Values</label>
+        <label for="field-allowed-values" class="col col-3 col-form-label">Allowed Values</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <sqx-tag-editor formControlName="allowedValues"></sqx-tag-editor>
         </div>
     </div>

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.html

@@ -1,44 +1,44 @@
 <div [formGroup]="editForm">
     <div class="form-group row">
-        <label class="col-xs-3 col-form-checkbox-label" for="field-required">Required</label>
+        <label class="col col-3 col-form-checkbox-label" for="field-required">Required</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <input type="checkbox" class="form-check-input" id="field-required" formControlName="isRequired" />
         </div>
     </div>
 
     <div class="form-group row">
-        <label class="col-xs-3 col-form-label">Length</label>
+        <label class="col col-3 col-form-label">Length</label>
 
-        <div class="col-xs-3 minlength-col">
+        <div class="col col-3 minlength-col">
             <input type="number" class="form-control" id="field-min-length" formControlName="minLength" placeholder="Min Length" />
             
             <label class="col-form-label minlength-label">-</label>
         </div>
-        <div class="col-xs-3">
+        <div class="col col-3">
             <input type="number" class="form-control" id="field-max-length" formControlName="maxLength" placeholder="Max Length" />
         </div>
     </div>
 
     <div class="form-group row">
-        <label class="col-xs-3 col-form-label" for="field-pattern">Pattern</label>
+        <label class="col col-3 col-form-label" for="field-pattern">Pattern</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <input type="text" class="form-control" id="field-pattern" formControlName="pattern" placeholder="Regex Pattern" />
         </div>
     </div>
     <div class="form-group row" [class.hidden]="hidePatternMessage | async">
-        <label class="col-xs-3 col-form-label" for="field-pattern-message">Pattern Message</label>
+        <label class="col col-3 col-form-label" for="field-pattern-message">Pattern Message</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <input type="text" class="form-control" id="field-pattern-message" formControlName="patternMessage" />
         </div>
     </div>
 
     <div class="form-group row" [class.hidden]="(hideDefaultValue | async)">
-        <label class="col-xs-3 col-form-label" for="field-default-value">Default Value</label>
+        <label class="col col-3 col-form-label" for="field-default-value">Default Value</label>
 
-        <div class="col-xs-6">
+        <div class="col col-6">
             <input type="text" class="form-control" id="field-default-value" formControlName="defaultValue" />
         </div>
     </div>

src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html

@@ -21,7 +21,7 @@
 	</div>
 
     <div class="form-group clearfix">
-        <button type="reset" class="float-xs-left btn btn-secondary" (click)="cancel()">Cancel</button>
-        <button type="submit" class="float-xs-right btn btn-success">Create</button>
+        <button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button>
+        <button type="submit" class="float-right btn btn-success">Create</button>
     </div>
 </form>

src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.html

@@ -25,19 +25,19 @@
 
     <div class="panel-main">
         <div class="panel-content">
-            <ul class="nav nav-pills nav-stacked nav-dark nav-dark-bordered">
+            <ul class="nav nav-pills flex-column nav-dark nav-dark-bordered">
                 <li class="nav-item" *ngFor="let schema of schemasFiltered">
                     <a class="nav-link" [routerLink]="[schema.name]" routerLinkActive="active">
                         <div class="row">
-                            <div class="col-xs-4">
+                            <div class="col col-4">
                                 <span class="schema-name">{{schema|displayName}}</span> 
                             </div>
-                            <div class="col-xs-4">
+                            <div class="col col-4">
                                 <span class="schema-user">
                                     <i class="icon-person"></i> {{userName(schema.lastModifiedBy, true) | async}}
                                 </span>
                             </div>
-                            <div class="col-xs-4 schema-modified">
+                            <div class="col col-4 schema-modified">
                                 <span class="item-modified">{{schema.lastModified | fromNow}}</span>
                                 <span class="item-published" [class.unpublished]="!schema.isPublished"></span>
                             </div>

src/Squidex/app/features/schemas/pages/schemas/schemas-page.component.scss

@@ -13,9 +13,11 @@ $button-size: calc(2.5rem - 2px);
     margin-right: .4rem;
     min-width: $button-size;
     max-width: $button-size;
+    padding: 0;
     padding-left: 0;
     padding-right: 0;
-    font-size: 1.1rem;
+    font-size: 1rem;
+    line-height: 2.5rem;
 }
 
 .schema {

src/Squidex/app/features/settings/pages/clients/client.component.html

@@ -8,13 +8,13 @@
 
         <tr>
             <td colspan="2">
-                <div class="float-xs-right">
+                <div class="float-right">
                     <button class="btn btn-secondary" (click)="createToken(client)">Create Token</button>
                 </div>
 
                 <div class="client-header">
                     <form *ngIf="isRenaming" class="form-inline" [formGroup]="renameForm"  (ngSubmit)="rename()">
-                        <div class="form-group">
+                        <div class="form-group mr-2">
                             <sqx-control-errors for="name" [submitted]="renameFormSubmitted"></sqx-control-errors>
                             
                             <input type="text" class="form-control client-name enabled" formControlName="name" maxlength="20" sqxFocusOnInit (keydown)="onKeyDown($event.keyCode)" />

src/Squidex/app/features/settings/pages/clients/client.component.scss

@@ -38,6 +38,7 @@ $color-editor: #eceeef;
             padding: 0 .6rem;
             border: 0;
             background: transparent;
+            font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
             font-size: 1.2rem;
             font-weight: normal;
             display: inline-block;

src/Squidex/app/features/settings/pages/clients/clients-page.component.html

@@ -12,7 +12,7 @@
     </div>
 
     <div class="panel-main">
-        <div class="panel-content">
+        <div class="panel-content panel-content-scroll">
             <div class="table-items-row" *ngIf="appClients && appClients.length === 0">
                 No client created yet.
             </div>
@@ -25,7 +25,7 @@
 
             <div class="table-items-footer">
                 <form class="form-inline" [formGroup]="addClientForm" (ngSubmit)="attachClient()">
-                    <div class="form-group">
+                    <div class="form-group mr-2">
                         <sqx-control-errors for="name" [submitted]="addClientFormSubmitted"></sqx-control-errors>
 
                         <input type="text" class="form-control" formControlName="name" maxlength="40" placeholder="Enter client name" />

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html

@@ -12,7 +12,7 @@
     </div>
 
     <div class="panel-main">
-        <div class="panel-content">
+        <div class="panel-content panel-content-scroll">
             <table class="table table-items table-fixed">
                 <colgroup>
                     <col style="width: 70px" />
@@ -69,7 +69,7 @@
             
             <div class="table-items-footer">
                 <form class="form-inline" [formGroup]="addContributorForm" (ngSubmit)="assignContributor()">
-                    <div class="form-group">
+                    <div class="form-group mr-2">
                         <sqx-autocomplete [source]="usersDataSource" formControlName="user" [inputName]="contributor"></sqx-autocomplete>
                     </div>
 

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.scss

@@ -6,10 +6,6 @@ sqx-panel {
     max-width: 50rem;
 }
 
-.panel-content {
-    overflow-y: scroll;
-}
-
 .card {
     max-width: 44rem;
 }

src/Squidex/app/features/settings/pages/languages/languages-page.component.html

@@ -66,7 +66,7 @@
 
             <div class="table-items-footer">
                 <form class="form-inline" [formGroup]="addLanguageForm" (ngSubmit)="addLanguage()">
-                    <div class="form-group">
+                    <div class="form-group mr-2">
                         <select class="form-control language-select" formControlName="language">
                             <option *ngFor="let language of newLanguages" [ngValue]="language">{{language.englishName}}</option>
                         </select>

src/Squidex/app/features/settings/settings-area.component.html

@@ -11,7 +11,7 @@
 
     <div class="panel-main">
         <div class="panel-content">
-            <ul class="nav nav-pills nav-stacked nav-dark">
+            <ul class="nav nav-pills flex-column nav-dark">
                 <li class="nav-item">
                     <a class="nav-link" routerLink="clients" routerLinkActive="active">
                         Clients

src/Squidex/app/framework/angular/autocomplete.component.ts

@@ -52,7 +52,7 @@ export class AutocompleteComponent implements ControlValueAccessor, OnDestroy, O
     public source: AutocompleteSource;
 
     @Input()
-    public inputName: string = 'autocompletion';
+    public inputName = 'autocompletion';
 
     public items: AutocompleteItem[] = [];
     public itemSelection = -1;

src/Squidex/app/framework/angular/panel.component.ts

@@ -25,10 +25,10 @@ import { PanelService } from './../services/panel.service';
 })
 export class PanelComponent implements OnDestroy, AfterViewInit {
     @Input()
-    public theme: string = 'light';
+    public theme = 'light';
 
     @Input()
-    public panelWidth: string = '10rem';
+    public panelWidth = '10rem';
 
     @ViewChild('panel')
     public panel: ElementRef;

src/Squidex/app/framework/angular/slider.component.ts

@@ -35,7 +35,7 @@ export class SliderComponent implements ControlValueAccessor {
     private value: number;
     private isDragging = false;
 
-    public isDisabled: boolean = false;
+    public isDisabled = false;
 
     @ViewChild('bar')
     public bar: ElementRef;
@@ -79,7 +79,7 @@ export class SliderComponent implements ControlValueAccessor {
 
         const relativeValue = this.getRelativeX(event);
 
-        this.value = Math.round((relativeValue *(this.max - this.min) + this.min) / this.step) *this.step;
+        this.value = Math.round((relativeValue * (this.max - this.min) + this.min) / this.step) * this.step;
 
         this.updateThumbPosition();
         this.updateTouched();
@@ -89,7 +89,7 @@ export class SliderComponent implements ControlValueAccessor {
     }
 
     public onThumbMouseDown(event: MouseEvent): boolean {
-        this.centerStartOffset = event.offsetX - this.thumb.nativeElement.clientWidth *0.5;
+        this.centerStartOffset = event.offsetX - this.thumb.nativeElement.clientWidth * 0.5;
 
         this.startValue = this.value;
 
@@ -117,7 +117,7 @@ export class SliderComponent implements ControlValueAccessor {
 
         const relativeValue = this.getRelativeX(event);
 
-        this.value = Math.round((relativeValue *(this.max - this.min) + this.min) / this.step) *this.step;
+        this.value = Math.round((relativeValue * (this.max - this.min) + this.min) / this.step) * this.step;
 
         this.updateThumbPosition();
         this.updateTouched();
@@ -175,7 +175,7 @@ export class SliderComponent implements ControlValueAccessor {
     private updateThumbPosition() {
         const relativeValue = Math.min(1, Math.max(0, (this.value - this.min) / (this.max - this.min)));
 
-        this.renderer.setElementStyle(this.thumb.nativeElement, 'left', relativeValue *100 + '%');
+        this.renderer.setElementStyle(this.thumb.nativeElement, 'left', relativeValue * 100 + '%');
     }
 
     private releaseMouseHandlers() {

src/Squidex/app/framework/angular/tag-editor.component.ts

@@ -71,10 +71,10 @@ export class TagEditorComponent implements ControlValueAccessor {
     public converter: Converter = new NoopConverter();
 
     @Input()
-    public useDefaultValue: boolean = true;
+    public useDefaultValue = true;
 
     @Input()
-    public inputName: string = 'tag-editor';
+    public inputName = 'tag-editor';
 
     public items: any[] = [];
 

src/Squidex/app/framework/services/panel.service.ts

@@ -33,7 +33,7 @@ export class PanelService {
 
     private update(renderer: Renderer) {
         let currentPosition = 0;
-        let currentLayer = this.elements.length *10;
+        let currentLayer = this.elements.length * 10;
 
         for (let element of this.elements) {
             const width = element.getBoundingClientRect().width;

src/Squidex/app/framework/utils/date-time.ts

@@ -89,7 +89,7 @@ export class DateTime {
 
         const date = new Date(parseInt(value.substr(6), 10));
         const time = (date.getTime());
-        const offs = (date.getTimezoneOffset() + off *60) *60000;
+        const offs = (date.getTimezoneOffset() + off * 60) * 60000;
 
         date.setTime(time + offs);
 
@@ -154,7 +154,7 @@ export class DateTime {
     }
 
     public firstOfWeek(): DateTime {
-        const weekStart = new Date(this.value.valueOf() - (this.weekDay - 1) *86400000);
+        const weekStart = new Date(this.value.valueOf() - (this.weekDay - 1) * 86400000);
 
         return new DateTime(weekStart);
     }
@@ -192,7 +192,7 @@ export class DateTime {
     public addHours(value: number): DateTime {
         const clone = this.cloneDate();
 
-        clone.setTime(clone.getTime() + (value *60 *60 *1000));
+        clone.setTime(clone.getTime() + (value * 60 * 60 * 1000));
 
         return new DateTime(clone);
     }
@@ -200,7 +200,7 @@ export class DateTime {
     public addMinutes(value: number): DateTime {
         const clone = this.cloneDate();
 
-        clone.setTime(clone.getTime() + (value *60 *1000));
+        clone.setTime(clone.getTime() + (value * 60 * 1000));
 
         return new DateTime(clone);
     }
@@ -208,7 +208,7 @@ export class DateTime {
     public addSeconds(value: number): DateTime {
         const clone = this.cloneDate();
 
-        clone.setTime(clone.getTime() + (value *1000));
+        clone.setTime(clone.getTime() + (value * 1000));
 
         return new DateTime(clone);
     }

src/Squidex/app/framework/utils/math-helper.ts

@@ -39,15 +39,15 @@ export module MathHelper {
     }
 
     export function s4(): string {
-        return Math.floor((1 + Math.random()) *0x10000).toString(16).substring(1);
+        return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
     }
 
     export function toRad(degree: number): number {
-        return degree *Math.PI / 180;
+        return degree * Math.PI / 180;
     }
 
     export function toDegree(rad: number): number {
-        return rad *180 / Math.PI;
+        return rad * 180 / Math.PI;
     }
 
     export function simpleCos(degree: number): number {
@@ -63,11 +63,11 @@ export module MathHelper {
     }
 
     export function roundToMultipleOf(value: number, factor: number): number {
-        return Math.round(value / factor) *factor;
+        return Math.round(value / factor) * factor;
     }
 
     export function roundToMultipleOfTwo(value: number): number {
-        return Math.round(value / 2) *2;
+        return Math.round(value / 2) * 2;
     }
 
     export function toPositiveDegree(degree: number): number {

src/Squidex/app/shared/components/app-form.component.html

@@ -22,7 +22,7 @@
 	</div>
 
     <div class="form-group clearfix">
-        <button type="reset" class="float-xs-left btn btn-secondary" (click)="cancel()">Cancel</button>
-        <button type="submit" class="float-xs-right btn btn-success">Create</button>
+        <button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button>
+        <button type="submit" class="float-right btn btn-success">Create</button>
     </div>
 </form>

src/Squidex/app/shell/pages/app/left-menu.component.html

@@ -1,5 +1,5 @@
 <div class="sidebar">
-    <ul class="nav nav-stacked">
+    <ul class="nav flex-column">
         <li class="nav-item" *ngIf="permission !== 'Editor'">
             <a class="nav-link" routerLink="schemas" routerLinkActive="active">
                 <i class="nav-icon icon-schemas"></i> <div class="nav-text">Schemas</div>

src/Squidex/app/shell/pages/internal/internal-area.component.html

@@ -1,13 +1,13 @@
-<nav class="navbar navbar-fixed-top navbar-dark bg-primary bg-faded">
+<nav class="navbar navbar-fixed-top navbar-inverse bg-primary bg-faded">
     <span class="navbar-brand">
         <i class="icon-logo"></i>
     </span>
 
-    <div class="float-xs-left apps-menu">
+    <div class="float-left apps-menu">
         <sqx-apps-menu></sqx-apps-menu>
     </div>
 
-    <div class="float-xs-right profile-menu">
+    <div class="float-right profile-menu">
         <sqx-profile-menu></sqx-profile-menu>
     </div>
 </nav>
@@ -21,3 +21,5 @@
         {{notification.message}}
     </div>
 </div>
+
+<sqx-user-report></sqx-user-report>

src/Squidex/app/shell/pages/internal/internal-area.component.scss

@@ -3,6 +3,7 @@
 
 .navbar {
     @include box-shadow(0, 4px, 4px, .2px);
+    display: block;
 }
 
 .navbar-brand {
@@ -14,6 +15,7 @@
     margin-right: 2rem;
     font-size: 1.8rem;
     text-align: center;
+    float: left;
 }
 
 .notification {

src/Squidex/app/theme/_bootstrap.scss

@@ -14,6 +14,11 @@ body {
         line-height: 2.2rem;
     }
 
+    &-fixed-top {
+        @include fixed(0, 0, auto, 0);
+        z-index: 10000;
+    }
+
     .dropdown-menu {
         top: 2.6rem;
     }
@@ -107,6 +112,7 @@ body {
 @mixin link-button($color) {
     & {
         color: $color;
+        cursor: pointer;
     }
 
     &:focus {
@@ -117,6 +123,12 @@ body {
         @include opacity(.4);
     }
 
+    &:disabled,
+    &.disabled {
+        cursor: not-allowed;
+        border: 0;
+    }
+
     &:focus,
     &:active,
     &:hover {

src/Squidex/app/theme/_panels.scss

@@ -78,7 +78,7 @@
             overflow-y: scroll;
         }
 
-        & .nav-stacked {
+        & .flex-column {
             margin-left: -$panel-padding;
             margin-right: -$panel-padding;
         }