浏览代码

HUE-2173 [search] Make it responsive

Enrico Berti 9 年之前
父节点
当前提交
5ba3152aad

+ 29 - 0
apps/search/src/search/static/search/css/search.css

@@ -648,4 +648,33 @@ em {
 
 .grid-side-btn:hover {
   color: #338bb8;
+}
+
+@media screen and (max-width: 1000px) {
+  .card-widget, .card-column {
+    float: left !important;
+    width: 100% !important;
+    margin-left: 0!important;
+  }
+  .search-bar > .pull-right {
+    display: block;
+    text-align: center;
+    float: none!important;
+    margin-bottom: 5px;
+  }
+  .search-bar {
+    text-align: center;
+  }
+  .search-bar input {
+    border-left: 1px solid #c0c0c0!important;
+  }
+  .dashboard {
+    margin-top: 40px;
+  }
+  .with-top-margin {
+    margin-top: 100px;
+  }
+  .form-search > strong, .form-search > .input-append .selectMask, .form-search > .input-append a.btn, .form-search > .time-filter, .form-search > .time-fixed-filter {
+    display: none;
+  }
 }

+ 4 - 4
apps/search/src/search/templates/search.mako

@@ -82,8 +82,8 @@ ${ commonheader(_('Search'), "search", user, request, "80px") | n,unicode }
     <!-- /ko -->
 
     <select data-bind="options: $root.availableDateFields, value: collection.timeFilter.field, optionsValue: 'name', visible: $root.isEditing() && $root.availableDateFields().length > 0" class="input-medium" style="margin-left: 4px"></select>
-    <span data-bind="template: {name: 'time-filter'}, visible: collection.timeFilter.type() == 'rolling'"></span>
-    <span data-bind="template: {name: 'time-fixed-filter'}, visible: collection.timeFilter.type() == 'fixed'"></span>
+    <span class="time-filter" data-bind="template: {name: 'time-filter'}, visible: collection.timeFilter.type() == 'rolling'"></span>
+    <span class="time-fixed-filter" data-bind="template: {name: 'time-fixed-filter'}, visible: collection.timeFilter.type() == 'fixed'"></span>
   </form>
 
   <form class="form-search" style="margin: 0" data-bind="submit: searchBtn, visible: columns().length != 0">
@@ -111,8 +111,8 @@ ${ commonheader(_('Search'), "search", user, request, "80px") | n,unicode }
       </button>
 
     </div>
-    <span data-bind="template: {name: 'time-filter'}, visible: collection.timeFilter.type() == 'rolling'"></span>
-    <span data-bind="template: {name: 'time-fixed-filter'}, visible: collection.timeFilter.type() == 'fixed'"></span>
+    <span class="time-filter" data-bind="template: {name: 'time-filter'}, visible: collection.timeFilter.type() == 'rolling'"></span>
+    <span class="time-fixed-filter" data-bind="template: {name: 'time-fixed-filter'}, visible: collection.timeFilter.type() == 'fixed'"></span>
   </form>
 </div>
 

+ 12 - 0
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -644,6 +644,9 @@
         var _max = _options.maxWidth * 1;
         $(element).width(Math.min($(element).parent().width(), _max));
       }
+      else {
+        $(element).width($(element).parent().width() - 10);
+      }
 
       $(element).height($(element).width() / 2.23);
 
@@ -878,6 +881,15 @@
       $(element).parents(_parentSelector).one("resize", function () {
         ko.bindingHandlers.mapChart.render(element, valueAccessor);
       });
+
+      var _resizeTimeout = -1;
+      nv.utils.windowResize(function () {
+        window.clearTimeout(_resizeTimeout);
+        _resizeTimeout = window.setTimeout(function () {
+          ko.bindingHandlers.mapChart.render(element, valueAccessor);
+        }, 200);
+      });
+
       chartsNormalState();
     },
     init: function (element, valueAccessor) {