From b713d9cd6b8bb4e58588243088bd9b37accc9292 Mon Sep 17 00:00:00 2001
From: Maciej Tronowski <mtro@man.poznan.pl>
Date: Fri, 10 Apr 2015 17:10:10 +0200
Subject: [PATCH] redo gridftp navbar

---
 filex/static/filex/filex.js       |   10 --------
 filex/templates/filex/source.html |   44 +++++++++++++-------------------
 qcg/static/qcg/main.css           |   51 ++++++++++++++++++++++++++++---------
 3 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/filex/static/filex/filex.js b/filex/static/filex/filex.js
index 68051c3..10dc6bc 100644
--- a/filex/static/filex/filex.js
+++ b/filex/static/filex/filex.js
@@ -209,7 +209,6 @@ $(function(){
 
         events: {
             'change #show-hidden': 'toggleHidden',
-            'click #host-controls .view': 'hostEdit',
             'click #select-all': 'selectAll',
             'click #btn-refresh': 'reloadFiles'
         },
@@ -218,7 +217,6 @@ $(function(){
             this.$noItems = $('#no-items');
             this.$error = $('#error');
             this.$showHidden = $('#show-hidden');
-            this.$host = $('#host-controls');
             this.$selectAll = $('#select-all');
 
             this.host = options.host;
@@ -256,8 +254,6 @@ $(function(){
                     this.blur();
                 },
                 onBlur: function() {
-                    view.$host.toggleClass('editing');
-
                     var value = this.getValue();
                     if (!value) {
                         this.addItem(view.host, true);
@@ -280,7 +276,6 @@ $(function(){
 
         render: function() {
             this.updateSelectAll();
-            this.$host.find('.view').text(this.host);
             this.$noItems.toggle(!Boolean(this.visibleFiles().length));
             this.$error.hide();
         },
@@ -365,11 +360,6 @@ $(function(){
             return this.$showHidden[0].checked;
         },
 
-        hostEdit: function() {
-            this.$host.toggleClass('editing');
-            this.hostSelectize.focus();
-        },
-
         busy: function() {
             this.$el.addClass('busy');
         },
diff --git a/filex/templates/filex/source.html b/filex/templates/filex/source.html
index 276a7cd..4a3b21e 100644
--- a/filex/templates/filex/source.html
+++ b/filex/templates/filex/source.html
@@ -1,36 +1,26 @@
 <div id="filex">
-    <div class="row">
-        <div class="col-sm-3">
-            <div id="host-controls" style="margin-top: 1px">
-                <div class="change">
-                    <label for="host-selector" class="sr-only">Wybierz host</label>
-                    <select id="host-selector"></select>
-                </div>
-                <button class="btn btn-default view"></button>
-            </div>
+    <nav aria-label="Pasek narzędzi nawigacyjnych">
+        <div id="host">
+            <label for="host-selector" class="sr-only">Wybierz host</label>
+            <select id="host-selector"></select>
         </div>
 
-        <div class="col-sm-6">
-            <ol class="breadcrumb path"></ol>
-        </div>
-
-        <div class="col-sm-3 text-right">
-            <div class="btn-toolbar" role="toolbar" style="margin-top: 1px">
-                <div class="btn-group" role="group">
-                    <button id="btn-refresh" type="button" class="btn btn-default" aria-label="Odśwież">
-                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
-                    </button>
-                </div>
-
-                <div class="btn-group" data-toggle="buttons">
-                    <label class="btn btn-default">
-                        <input id="show-hidden" type="checkbox" autocomplete="off"> Pokaż ukryte
-                    </label>
-                </div>
+        <div id="controls">
+            <button id="btn-refresh" type="button" class="btn btn-default" aria-label="Odśwież">
+                <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
+            </button>
 
+            <div class="btn-group" data-toggle="buttons">
+                <label class="btn btn-default">
+                    <input id="show-hidden" type="checkbox" autocomplete="off"> Pokaż ukryte
+                </label>
             </div>
         </div>
-    </div>
+
+        <div id="path">
+            <ol class="breadcrumb path"></ol>
+        </div>
+    </nav>
 
     <table class="table table-hover">
         <thead>
diff --git a/qcg/static/qcg/main.css b/qcg/static/qcg/main.css
index c2d0aaf..1ff595a 100644
--- a/qcg/static/qcg/main.css
+++ b/qcg/static/qcg/main.css
@@ -90,18 +90,6 @@ textarea {
     margin: 0;
 }
 
-#host-controls .change {
-    display: none;
-}
-
-#host-controls.editing .view {
-    display: none;
-}
-
-#host-controls.editing .change {
-    display: initial;
-}
-
 .path.breadcrumb > li + li::before {
     content: "› ";
 }
@@ -120,3 +108,42 @@ textarea {
 .busy #spinner-overlay {
     display: initial;
 }
+
+#filex nav {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+#host {
+    flex: 1 auto;
+    margin-right: 10px;
+}
+
+#controls {
+    flex: 0 auto;
+    white-space: nowrap;
+}
+
+#path {
+    flex: 1 100%;
+}
+
+@media (min-width: 768px) {
+    #host {
+        order: 1;
+        flex: 1 auto;
+        margin-right: 10px;
+    }
+
+    #path {
+        order: 2;
+        flex: 10 auto;
+        margin-top: -1px;
+        margin-right: 10px;
+    }
+
+    #controls {
+        order: 3;
+        flex: 0 auto;
+    }
+}
-- 
1.7.9.5