1) Caching improvement

2) Lazy Loading

src/Squidex/Startup.cs

@@ -26,6 +26,7 @@ using Squidex.Config.Swagger;
 using Squidex.Config.Web;
 using Squidex.Pipeline;
 using Squidex.Store.MongoDb;
+// ReSharper disable InvertIf
 
 // ReSharper disable ConvertClosureToMethodGroup
 // ReSharper disable AccessToModifiedClosure
@@ -179,15 +180,20 @@ namespace Squidex
 
             app.UseStaticFiles(new StaticFileOptions
             {
-                OnPrepareResponse = (context) =>
+                OnPrepareResponse = context =>
                 {
-                    var headers = context.Context.Response.GetTypedHeaders();
+                    var response = context.Context.Response;
+
+                    if (!string.Equals(response.ContentType, "text/html", StringComparison.OrdinalIgnoreCase))
+                    {
+                        var headers = response.GetTypedHeaders();
 
                         headers.CacheControl = new CacheControlHeaderValue
                         {
                             MaxAge = TimeSpan.FromDays(60)
                         };
                     }
+                }
             });
         }
 

src/Squidex/app-config/webpack.config.js

@@ -45,7 +45,7 @@ module.exports = {
         loaders: [
             {
                 test: /\.ts$/,
-                loaders: ['awesome-typescript', helpers.root('app-config', 'auto-loader') + '?[file].html=template&[file].scss=styles', 'tslint']
+                loaders: ['awesome-typescript', 'angular2-router-loader', helpers.root('app-config', 'auto-loader') + '?[file].html=template&[file].scss=styles', 'tslint']
             }, {
                 test: /\.html$/,
                 loader: 'html'

src/Squidex/app/app.routes.ts

@@ -23,11 +23,6 @@ import {
 } from './shared';
 
 import { SqxFeatureAppsModule } from './features/apps';
-import { SqxFeatureContentModule } from './features/content';
-import { SqxFeatureDashboardModule } from './features/dashboard';
-import { SqxFeatureMediaModule } from './features/media';
-import { SqxFeatureSchemasModule } from './features/schemas';
-import { SqxFeatureSettingsModule } from './features/settings';
 
 export const routes: Ng2Router.Routes = [
     {
@@ -49,19 +44,19 @@ export const routes: Ng2Router.Routes = [
                 children: [
                     {
                         path: '',
-                        loadChildren: () => SqxFeatureDashboardModule
+                        loadChildren: './features/dashboard/module#SqxFeatureDashboardModule'
                     }, {
                         path: 'content',
-                        loadChildren: () => SqxFeatureContentModule
+                        loadChildren: './features/content/module#SqxFeatureContentModule'
                     }, {
                         path: 'media',
-                        loadChildren: () => SqxFeatureMediaModule
+                        loadChildren: './features/media/module#SqxFeatureMediaModule'
                     }, {
                         path: 'schemas',
-                        loadChildren: () => SqxFeatureSchemasModule
+                        loadChildren: './features/schemas/module#SqxFeatureSchemaModule'
                     }, {
                         path: 'settings',
-                        loadChildren: () => SqxFeatureSettingsModule
+                        loadChildren: './features/settings/module#SqxFeatureSettingsModule'
                     }
                 ]
             }

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

@@ -9,6 +9,7 @@
         </a>
     </div>
 
+    <div class="panel-main">
         <div class="panel-content">
             <div class="table-items-row" *ngIf="appClients && appClients.length === 0">
                 No client created yet.
@@ -42,4 +43,5 @@
                 </form>
             </div>
         </div>
+    </div>
 </div>

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

@@ -9,6 +9,7 @@
         </a>
     </div>
 
+    <div class="panel-main">
         <div class="panel-content">
             <table class="table table-items table-fixed">
                 <colgroup>
@@ -62,4 +63,5 @@
                 </form>
             </div>
         </div>
+    </div>
 </div>

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

@@ -9,6 +9,7 @@
         </a>
     </div>
 
+    <div class="panel-main">
         <div class="panel-content">
             <table class="table table-items table-fixed">
                 <colgroup>
@@ -73,4 +74,14 @@
                 </form>
             </div>
         </div>
+        <div class="panel-sidebar">
+            <div class="nav nav-pills nav-stacked nav-light">
+                <li class="nav-item">
+                    <a class="nav-link">
+                        <i class="icon-filter"></i>
+                    </a>
+                </li>
+            </div>
+        </div>
+    </div>
 </div>

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

@@ -7,6 +7,7 @@
         </a>
     </div>
 
+    <div class="panel-main">
         <div class="panel-content">
             <ul class="nav nav-pills nav-stacked nav-dark">
                 <li class="nav-item">
@@ -26,6 +27,7 @@
                 </li>
             </ul>
         </div>
+    </div>
 </div>
 
 <router-outlet></router-outlet>

src/Squidex/app/shared/services/auth.service.ts

@@ -188,7 +188,7 @@ export class AuthService {
 
     private checkResponse(response: Observable<Ng2Http.Response>) {
         return response.catch((error: Ng2Http.Response) => {
-            if (error.status === 401) {
+            if (error.status === 401 || error.status === 404) {
                 this.loginRedirect();
             } else if (error.status === 403) {
                 this.router.navigate(['/404']);

src/Squidex/app/theme/_bootstrap.scss

@@ -255,8 +255,7 @@
 
     &.nav-pills {
         .nav-link {
-            &,
-            &.active {
+            & {
                 color: $color-dark-foreground;
             }
 
@@ -271,6 +270,7 @@
                     @include border-radius(0);
                     background: $color-dark-selected;
                     pointer-events: none;
+                    color: lighten($color-dark-foreground, 30%);
                 }
 
                 &:hover {
@@ -280,3 +280,15 @@
         }
     }
 }
+
+.nav-light {
+    &.nav-pills {
+        .nav-link {
+            &.active {
+                & {
+                    @include border-radius(0);
+                }
+            }
+        }
+    }
+}

src/Squidex/app/theme/_panels.scss

@@ -1,8 +1,9 @@
 @import '_mixins';
 @import '_vars';
 
-$panel-padding: 15px;
-$panel-header: 60px;
+$panel-padding: 20px;
+$panel-header: 70px;
+$panel-sidebar: 60px;
 
 .panel-container {
     @include absolute($size-navbar-height, 0, 0, $size-sidebar-width);
@@ -17,13 +18,19 @@ $panel-header: 60px;
         flex-direction: column;
     }
 
-    &-content,
-    &-header {
-        padding: 15px;
+    &-header,
+    &-content {
+        padding: $panel-padding;
     }
 
+    &-main,
     &-content {
-        overflow-y: auto;
+        @include flex-grow(1);
+    }
+
+    &-main {
+        @include flex-box;
+        flex-direction: row;
     }
 
     &-title {
@@ -32,11 +39,38 @@ $panel-header: 60px;
     }
 
     &-header {
-        height: $panel-header;
+        min-height: $panel-header;
+        max-height: $panel-header;
         position: relative;
         padding-right: 60px;
     }
 
+    &-content {
+        & {
+            overflow-y: auto;
+        }
+
+        & .nav-stacked {
+            margin-left: -$panel-padding;
+            margin-right: -$panel-padding;
+        }
+
+        & .nav-link {
+            padding-left: $panel-padding;
+        }
+    }
+
+    &-sidebar {
+        & {
+            min-width: $panel-sidebar;
+            max-width: $panel-sidebar;
+        }
+
+        & .nav-link {
+            text-align: center;
+        }
+    }
+
     &-close {
         & {
             @include absolute($panel-padding, $panel-padding, auto, auto);
@@ -77,12 +111,21 @@ $panel-header: 60px;
 
         .panel-header {
             background: $color-card-footer;
-            border-bottom: 1px solid $color-border;
+        }
+
+        .panel-content {
+            border-top: 1px solid $color-border;
+        }
+
+        .panel-sidebar {
+            background: $color-card-footer;
+            border-left: 1px solid $color-border;
+            color: lighten($color-dark-foreground, 20%);
         }
 
         .panel-close {
             & {
-                color: $color-dark-foreground;
+                color: lighten($color-dark-foreground, 20%);
             }
 
             &:hover {
@@ -90,11 +133,6 @@ $panel-header: 60px;
             }
         }
     }
-
-    & .nav-stacked {
-        margin-left: -$panel-padding;
-        margin-right: -$panel-padding;
-    }
 }
 
 .panel-menu {

src/Squidex/package.json

@@ -39,6 +39,7 @@
     "@types/jasmine": "^2.5.38",
     "@types/mousetrap": "^1.5.32",
     "@types/node": "^6.0.51",
+    "angular2-router-loader": "^0.3.4",
     "awesome-typescript-loader": "^2.2.4",
     "cpx": "^1.5.0",
     "css-loader": "^0.26.0",