events: {
'change #show-hidden': 'toggleHidden',
- 'click #host-controls .view': 'hostEdit',
'click #select-all': 'selectAll',
'click #btn-refresh': 'reloadFiles'
},
this.$noItems = $('#no-items');
this.$error = $('#error');
this.$showHidden = $('#show-hidden');
- this.$host = $('#host-controls');
this.$selectAll = $('#select-all');
this.host = options.host;
this.blur();
},
onBlur: function() {
- view.$host.toggleClass('editing');
-
var value = this.getValue();
if (!value) {
this.addItem(view.host, true);
render: function() {
this.updateSelectAll();
- this.$host.find('.view').text(this.host);
this.$noItems.toggle(!Boolean(this.visibleFiles().length));
this.$error.hide();
},
return this.$showHidden[0].checked;
},
- hostEdit: function() {
- this.$host.toggleClass('editing');
- this.hostSelectize.focus();
- },
-
busy: function() {
this.$el.addClass('busy');
},
<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>
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: "› ";
}
.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;
+ }
+}