Changeset 12435 for trunk/sources/HeuristicLab.Services.WebApp/3.3/WebApp

Timestamp:

06/12/15 14:59:54 (9 years ago)

Author:

dglaser

Message:

#2394: Improved PluginManager and updated hive status monitor.

Location:

trunk/sources/HeuristicLab.Services.WebApp/3.3/WebApp

Files:

• app.css (modified) (6 diffs)
• shared/directives/flot.js (modified) (1 diff)
• shared/layout/layout.cshtml (modified) (3 diffs)
• shared/menu/menu.cshtml (modified) (1 diff)
• shared/menu/menuCtrl.js (modified) (1 diff)

trunk/sources/HeuristicLab.Services.WebApp/3.3/WebApp/app.css

@@ -79 +79 @@
 
 #menu {
-  position: absolute;
-  min-height: inherit;
-  width: 250px;
+  position: relative;
   background: #FAFAFA;
   display: block;
   overflow: hidden;
-  border-right: 1px solid #D3D3D3;
+  z-index: 10000;
+  width: 100%;
 }
 
@@ -101 +100 @@
 #view {
   position: relative;
-  left: 0px;
-  margin-left: 250px;
+  left: 0;
+  margin-left: 0px;
   display: block;
   overflow: hidden;
 }
+
 
 .view-header {
@@ -124 +124 @@
 }
 
-.navbar-header{
-  width: 250px;
+.navbar-header {
+  width: 100%;
   background: #3c3a39;
   color: #FFFFFF;
+  float: left;
+}
+
+
+@media (min-width: 768px) {
+  #view {
+    margin-left: 250px;
+  }
+
+  #menu {
+    visibility: visible;
+    position: absolute;
+    width: 250px;
+    min-height: inherit;
+    border-right: 1px solid #D3D3D3;
+    z-index: 0;
+  }
+
+  .navbar-header {
+    width: 250px;
+  }
+}
+.container-fluid .navbar-header {
+  margin: 0;
+  padding: 0;
+}
+
+.navbar-nav {
+  margin: 0;
+  padding: 0;
+}
+
+.navbar-right {
+  float: right!important
+}
+
+.navbar-nav>li>a {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.navbar-content {
+  padding-right: 15px;
+}
+
+.navbar-nav > li {
+  float: left;
 }
 
@@ -140 +187 @@
 .nav-sidebar {
   font-size: 12px;
+  padding-bottom: 30px;
 }
 
@@ -279 +327 @@
 }
 
+.table-no-border>thead>tr>th, 
+.table-no-border>tbody>tr>th, 
+.table-no-border>tfoot>tr>th, 
+.table-no-border>thead>tr>td, 
+.table-no-border>tbody>tr>td, 
+.table-no-border>tfoot>tr>td,
+.table-no-border>tbody,
+.table-no-border>thead,
+.table-no-border>tfoot{
+  border-top: none !important; 
+  border-bottom: none !important; 
+}
+
+.table-auto-width {
+  width: auto !important;
+}
+
+.center-element {
+  margin: 0 auto;
+}
+
+.table-content {
+  margin-bottom: 0;
+}
 
 #top-navbar {
@@ -311 +383 @@
 
 .navbar-default .navbar-text {
+  display: block;
   color: #ffffff;
   text-shadow: none !important;
-}
-
+  margin: 0;
+  padding: 15px;
+}
+
+.navbar-nav {
+  float:left;
+  margin:0
+}
+
+.navbar-nav>li {
+  float:left
+}
+
+.navbar-nav>li>a {
+  padding-top:15px;
+  padding-bottom:15px
+}
+
+.navbar-toggle {
+  border: none !important;
+}
+
+.navbar-toggle:focus {
+  background-color: transparent !important;
+}
+
+.navbar-toggle:hover {
+  background-color: #D3D3D3 !important;
+}
+
+#menu .navbar-collapse {
+  padding: 0;
+  margin: 0;
+}
 
 .default-view-container {
   padding: 30px;
 }
+
+.panel-heading a:after {
+    font-family:'Glyphicons Halflings';
+    content:"\e114";
+    float: right;
+    color: grey;
+}
+.panel-heading a.collapsed:after {
+    content:"\e080";
+}
+
+.panel-heading a:focus, a:hover {
+  text-decoration: none;
+}

trunk/sources/HeuristicLab.Services.WebApp/3.3/WebApp/shared/directives/flot.js

@@ -6 +6 @@
             link: function (scope, element, attrs) {
                 var chart = null, opts = scope[attrs.options];
+                var div = null;
 
                 scope.$watchCollection(attrs.dataset, function (newData, oldData) {
                     if (!chart) {
-                        var div = element.append("<div>");
+                        div = element.append("<div>");
                         div.bind("plotselected", function (event, ranges) {
                             $.each(chart.getXAxes(), function (_, axis) {

trunk/sources/HeuristicLab.Services.WebApp/3.3/WebApp/shared/layout/layout.cshtml

@@ -1 @@
-@using HeuristicLab.Services.WebApp.Configs
+@* HeuristicLab
+ * Copyright (C) 2002-2015 Heuristic and Evolutionary Algorithms Laboratory (HEAL)
+ *
+ * This file is part of HeuristicLab.
+ *
+ * HeuristicLab is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * HeuristicLab is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with HeuristicLab. If not, see <http://www.gnu.org/licenses/>.
+*@
+
+@using HeuristicLab.Services.WebApp.Configs
 <!DOCTYPE html>
 <html lang="en" ng-app="app">
@@ -15 +34 @@
     <![endif]-->
     @Scripts.Render("~/Bundles/Vendors/js")
-    @{
-        BundleTable.EnableOptimizations = false;
+    @foreach (var script in BundleConfig.GetWebAppScripts()) {
+        <script src="@script"></script>
     }
-    @Scripts.Render("~/Bundles/WebApp/js") 
-    @{
-        BundleTable.EnableOptimizations = true;
-    }
+
+    @Scripts.Render("~/Bundles/WebApp/Shared")
 </head>
-<body>
-    <div id="app">
-        <header id="toolbar" class="navbar navbar-default navbar-static-top no-border no-padding-margin"
-                ng-controller="app.menu.ctrl">
-            <nav>
-                <div class="container-fluid">
-                    <div class="navbar-header">
-                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar">
+<body ngcloak>
+<div id="app">
+    <header id="toolbar" class="navbar navbar-default navbar-static-top no-border no-padding-margin"
+            ng-controller="app.menu.ctrl">
+        <nav>
+            <div class="container-fluid">
+                <div class="navbar-header">
+                    <div class="center-block">
+                        <a class="navbar-brand" href="#">
+                            <img src="~/WebApp/shared/images/HeuristicLab-Logo.png" style="float: left; height: 100%; margin-right: 5px;"/>
+                            <span style="color: #f7921d">HeuristicLab</span>
+                        </a>
+                        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#menu .navbar-collapse">
                             <span class="sr-only">Toggle navigation</span>
                             <span class="icon-bar"></span>
@@ -36 +58 @@
                             <span class="icon-bar"></span>
                         </button>
-                        <a class="navbar-brand" href="#">
-                            <img src="~/WebApp/shared/images/HeuristicLab-Logo.png" style="float: left; height: 100%; margin-left: 25px; margin-right: 5px;" />
-                            Heuristic<span style="color: #f7921d">Lab</span>
-                        </a>
-                    </div>
-
-                    <div class="collapse navbar-collapse" id="top-navbar">
-                        <ul class="nav navbar-nav navbar-right">
-                            @if (Request.IsAuthenticated) {
-                                <li>
-                                    <p class="navbar-text">Hello @User.Identity.Name!</p>
-                                </li>
-                                <li>
-                                    <a ng-href="" data-ng-click="logout()">Logout</a>
-                                </li>
-                            } else {
-                                <li>
-                                    <a ng-href="#/login">Login</a>
-                                </li>
-                            }
-                        </ul>
                     </div>
                 </div>
-            </nav>
-        </header>
 
-        <aside id="menu" ng-controller="app.menu.ctrl">
+                <div class="navbar-content">
+                    <ul class="nav navbar-nav navbar-right">
+                        @if (Request.IsAuthenticated)
+                        {
+                            <li>
+                                <span class="navbar-text">Hello @User.Identity.Name!</span>
+                            </li>
+                            <li>
+                                <a ng-href="" data-ng-click="logout()">Logout</a>
+                            </li>
+                        }
+                        else
+                        {
+                            <li>
+                                <a ng-href="#/login" data-ng-click="hideMenu()">Login</a>
+                            </li>
+                        }
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <aside id="menu" ng-controller="app.menu.ctrl">
+        <div class="navbar-collapse collapse">
             <ul class="nav nav-sidebar"
                 ng-include="'App/LoadSharedView?directory=menu&view=menu.cshtml&dateTime=@DateTime.Now'"
                 ng-init="entries = menuEntries;"></ul>
-        </aside>
+        </div>
+    </aside>
 
-        <section id="view">
-            <ui-view/>
-        </section>
-    </div>
+    <section id="view">
+        <ui-view/>
+    </section>
+</div>
 </body>
 </html>

trunk/sources/HeuristicLab.Services.WebApp/3.3/WebApp/shared/menu/menu.cshtml

@@ -1 +1 @@
 <li ng-repeat="section in entries" ng-class="{'category':section.isCategory === true, 'active': isActive(section.route)}">
-    <a ng-href="{{section.route}}" ng-if="!section.isCategory">
+    <a ng-href="{{section.route}}" ng-if="!section.isCategory"
+       data-toggle="collapse" data-target="#menu .navbar-collapse">
         <span ng-if="section.icon != ''" ng-class="section.icon" style="padding-right: 10px;"></span>
         <span>{{section.name}}</span>

trunk/sources/HeuristicLab.Services.WebApp/3.3/WebApp/shared/menu/menuCtrl.js

@@ -27 +27 @@
                 });
             };
+
+            $scope.hideMenu = function() {
+                $(".navbar-collapse").collapse('hide');
+            };
         }]
     );