KEYCLOAK-162

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css

@@ -94,6 +94,24 @@ body {
   margin-left: -2.27272727272727em;
   padding-top: 2.90909090909091em;
 }
+.error-container {
+  width: 54em;
+  margin-top: 6em;
+  margin-left: 8em;
+}
+.error-container h2 {
+  text-transform: uppercase;
+  font-size: 2.3em;
+  font-family: Overpass, sans-serif;
+  margin-bottom: 1.52173913043478em;
+}
+.error-container p.instruction {
+  font-size: 1.3em;
+}
+.error-container .link-right {
+  float: right;
+  font-size: 1.3em;
+}
 /* Header */
 .header.rcue {
   z-index: 50;
@@ -648,6 +666,7 @@ table.list tbody tr.expanded .form-actions {
   .header.rcue .navbar.utility .navbar-inner,
   .header.rcue .navbar.primary .navbar-inner {
     max-width: 970px;
+    min-width: 560px;
   }
   #container-right-bg {
     margin-left: 242.5px;
@@ -661,13 +680,17 @@ table.list tbody tr.expanded .form-actions {
   }
   .bs-sidebar,
   .user .bs-sidebar {
-    padding-top: 1em;
     width: 100%;
+    padding-top: 0;
   }
   .bs-sidebar ul li,
   .user .bs-sidebar ul li {
     margin-left: 0;
   }
+  .bs-sidebar ul li:first-child,
+  .user .bs-sidebar ul li:first-child {
+    margin-top: 1em;
+  }
   .bs-sidebar ul li a,
   .user .bs-sidebar ul li a {
     border-width: 1px;
@@ -704,8 +727,16 @@ table.list tbody tr.expanded .form-actions {
   #content-area {
     border: none;
   }
+  .bs-sidebar + #content-area {
+    margin-top: 0;
+  }
   #container-right-bg {
     border: none;
     width: 100%;
   }
+  .error-container {
+    width: inherit;
+    margin-right: 6em;
+    margin-left: 6em;
+  }
 }

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less

@@ -117,6 +117,28 @@ body {
     }
 }
 
+.error-container {
+    width: 54em;
+    margin-top: 6em;
+    margin-left: 8em;
+    
+    h2 {
+        text-transform: uppercase;
+        font-size: 2.3em;
+        font-family: Overpass, sans-serif;
+        margin-bottom: 1.52173913043478em;
+    }
+    
+    p.instruction {
+        font-size: 1.3em;
+    }
+    
+    .link-right {
+        float: right;
+        font-size: 1.3em;
+    }
+}
+
 
 /* Header */
 
@@ -808,6 +830,7 @@ table.list {
         .navbar.utility .navbar-inner,
         .navbar.primary .navbar-inner {
             max-width: 970px;
+            min-width: 560px;
         }
     }
     
@@ -829,13 +852,17 @@ table.list {
     
     .bs-sidebar,
     .user .bs-sidebar {
-        padding-top: 1em;
         width: 100%;
+        padding-top: 0;
         
         ul li {
         
             margin-left: 0;
             
+            &:first-child {
+                margin-top: 1em;
+            }
+            
             a {
                 border-width: 1px;
                 padding-left: 1.53846153846154em;
@@ -889,8 +916,18 @@ table.list {
         border: none;
     }
     
+    .bs-sidebar + #content-area {
+        margin-top: 0;
+    }
+    
     #container-right-bg {
         border: none;
         width: 100%;
     }
+    
+    .error-container {
+        width: inherit;
+        margin-right: 6em;
+        margin-left: 6em;
+    }
 }

admin-ui/src/main/resources/META-INF/resources/admin/partials/notfound.html

@@ -1,5 +1,14 @@
 <div id="wrapper" class="container">
     <div class="row">
-        Page not found
+        <div class="bs-sidebar col-md-3 clearfix"></div>
+        <div id="content-area" class="col-md-9" role="main">
+            <div class="error-container">
+                <h2>Page <strong>not found</strong>...</h2>
+                <p class="instruction">We could not find the page you are looking for. Please make sure the URL you entered is correct.</p>
+                <a href="#" class="link-right">Go to the list of realms &raquo;</a>
+                <!-- <a href="#" class="link-right">Go to the realm page &raquo;</a> -->
+            </div>
+        </div>
+        <div id="container-right-bg"></div>
     </div>
 </div>