enable/disable sidebar - renamed sticky-view in sticky-package

debomatic-webui/public/javascripts/page_distribution.js

@@ -304,21 +304,24 @@ function Page_Distrubion(socket)
       $(window).off("scroll")
     },
     show: function() {
+      if (config.preferences.sidebar) {
         $("#sticky").addClass('fixed')
-      $("#sticky-view").fadeIn()
+      }
+      debug(2, "showing sticky")
+      $("#sticky-package").fadeIn()
     },
     hide: function() {
       $("#sticky").removeClass('fixed')
-      $("#sticky-view").fadeOut(150)
+      $("#sticky-package").fadeOut(150)
     },
     update: function() {
       var sidebar = $("#files")
       sidebarOffset = sidebar.offset().top
       if (Utils.check_view_distribution(view))
-        $("#sticky-view .distribution").html(view.distribution.name)
+        $("#sticky-package .distribution").html(view.distribution.name)
       if (Utils.check_view_package(view)) {
-        $("#sticky-view .name").html(view.package.name)
-        $("#sticky-view .version").html(view.package.version)
+        $("#sticky-package .name").html(view.package.name)
+        $("#sticky-package .version").html(view.package.version)
         sticky.set_status()
       }
     },
@@ -335,10 +338,10 @@ function Page_Distrubion(socket)
       {
         // update html
         var info = Utils.get_status_icon_and_class(status_data)
-        var panel = $("#sticky-view")
+        var panel = $("#sticky-package-content")
         panel.removeClass()
         panel.addClass('panel panel-' + info.className)
-        var div = $("#sticky-view .status")
+        var div = $("#sticky-package .status")
         div.find('span.icon').remove()
         div.html(div.html() + ' ' + Utils.get_status_icon_html(status_data))
       }
@@ -364,6 +367,19 @@ function Page_Distrubion(socket)
     },
   }
 
+  var preferences = function() {
+    if (! config.preferences.sidebar) {
+      debug(2, "no sidebar - updating html")
+      $("#sidebar").removeClass()
+      $("#sidebar").addClass("col-md-12 row")
+      $("#packages").addClass("col-md-4")
+      $("#logs").addClass("col-md-4")
+      $("#files .others").addClass("col-md-4")
+      $("#main").removeClass().addClass("col-md-12")
+      $("#sticky-package").addClass("on-top")
+    }
+  }
+  
   var select = function() {
       unselect()
       if (Utils.check_view_distribution(view)) {
@@ -497,8 +513,8 @@ function Page_Distrubion(socket)
         return
       populate()
 
-      // Init sticky-view back_on_top on click
-      $("#sticky-view").on("click", function(){
+      // Init sticky-package back_on_top on click
+      $("#sticky-package").on("click", function(){
         $('html').animate({scrollTop: 0}, 100);
       })
 
@@ -519,6 +535,9 @@ function Page_Distrubion(socket)
         setTimeout(watch_for_new_lines, 200);
       }
       watch_for_new_lines()
+
+      // Update html according with preferences
+      preferences()
     });
   }
 

debomatic-webui/public/stylesheets/style.css

@@ -36,26 +36,31 @@ aside .nav-pills li {
   top: 0;
 }
 
-#sticky-view {
+#sticky-package {
   display: none;
   position: fixed;
   bottom: 50px;
   font-size: 22px;
   cursor: pointer;
 }
+#sticky-package.on-top {
+  top: 10px;
+  right: 10px;
+  z-index: 1;
+}
 
-#sticky-view .package .version,
-#sticky-view .distribution,
-#sticky-view .icon {
+#sticky-package .package .version,
+#sticky-package .distribution,
+#sticky-package .icon {
   font-size: 16px;
 }
 
-#sticky-view .panel-body {
+#sticky-package .panel-body {
   padding: 10px 15px;
   min-width: 200px;
 }
 
-#sticky-view .panel-heading {
+#sticky-package .panel-heading {
   padding: 8px 15px;
 }
 

debomatic-webui/views/distribution.ejs

@@ -20,6 +20,7 @@
           <h3 class="title">Files</h3>
           <ul class="nav nav-pills nav-stacked"></ul>
         </nav>
+        <div class="others">
           <nav id="sources">
             <h4>Sources</h4>
             <ul></ul>
@@ -28,8 +29,10 @@
             <h4>Debs</h4>
             <ul></ul>
           </nav>
+        </div>
       </section>
-      <section title="Back on Top" id="sticky-view">
+      <section title="Back on Top" id="sticky-package">
+        <div id="sticky-package-content">
           <div class="panel-heading">
             <h3 class="panel-title">
               <span class="name"></span>
@@ -40,10 +43,11 @@
             <div class="version"></div>
             <div class="distribution text-muted"></div>
           </div>
+        </div>
       </section>
   </aside>
 
-  <section class="col-md-9">
+  <section id="main" class="col-md-9">
     <header>
       <h1 id="title"></h1>
     </header>