Skip to content

Commit 01b07f9

Browse files
sg00dwinsg00dwin
committed
Set larger label-filter default input click targets based on
statdard media query widths
1 parent 105dc93 commit 01b07f9

File tree

3 files changed

+28
-8
lines changed

3 files changed

+28
-8
lines changed

‎app/styles/_data-toolbar.less

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
/* Data toolbar
22
- Includes customizations for label filter input and active filter
33
---------------------------------------------------------------------------- */
4+
// @screen-md-min - (sidebar-left + left + right margin); 992 - (145 + 30 + 30) = 787
5+
@data-toolbar-filter-max-width: (@screen-md-min - (@sidebar-left-width-md + @middle-content-container-padding-lg + @middle-content-container-padding-lg));
6+
@label-filter-input-width-lg: 730px; // max width available for input at > 992
7+
@label-filter-input-width-md: 540px; // max width available for input at > 768
8+
@label-filter-input-width-sm: 400px; // max width available for input at > 480
9+
@label-filter-input-width-xs: 240px; // 320 - (40 + 40); container - ((left + right margin) + button)
10+
411

512
.data-toolbar {
613
padding: 5px 0;
@@ -26,13 +33,20 @@
2633
.flex(@columns: 1 1 0%);
2734
}
2835
@media (min-width: @screen-md-min) {
29-
max-width: 600px;
36+
max-width: @data-toolbar-filter-max-width;
3037
}
3138
.filter .navbar-filter-widget .label-filter .selectize-control .selectize-input {
3239
&, & input {
3340
font-size: @font-size-base;
3441
}
3542
}
43+
.label-filter-key .selectize-input.not-full {
44+
// Increase default input click target
45+
width: @label-filter-input-width-xs;
46+
@media (min-width: @screen-xs-min) { width: @label-filter-input-width-sm;}
47+
@media (min-width: @screen-sm-min) { width: @label-filter-input-width-md;}
48+
@media (min-width: @screen-md-min) { width: @label-filter-input-width-lg;}
49+
}
3650
.form-group {
3751
margin-bottom: 0;
3852
}

‎dist/scripts/vendor.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3396,7 +3396,7 @@ case "[object Date]":
33963396
return new a.constructor(a.valueOf());
33973397

33983398
case "[object RegExp]":
3399-
var c = new RegExp(a.source, a.toString().match(/[^\/]*$/)[0]);
3399+
var c = new RegExp(a.source, a.toString().match(/[^/]*$/)[0]);
34003400
return c.lastIndex = a.lastIndex, c;
34013401

34023402
case "[object Blob]":
@@ -4321,7 +4321,7 @@ return B || (e.history && Sd(a).on("popstate", h), Sd(a).on("hashchange", h), B
43214321
Sd(a).off("hashchange popstate", h);
43224322
}, k.$$checkUrlChange = j, k.baseHref = function() {
43234323
var a = x.attr("href");
4324-
return a ? a.replace(/^(https?:)?\/\/[^\/]*/, "") :"";
4324+
return a ? a.replace(/^(https?:)?\/\/[^/]*/, "") :"";
43254325
}, k.defer = function(a, b) {
43264326
var c;
43274327
return s++, c = o(function() {
@@ -9240,7 +9240,7 @@ h.$$parentForm.$removeControl(h), l(a, void 0), j(h, eg);
92409240
};
92419241
return e;
92429242
} ];
9243-
}, hg = gg(), ig = gg(!0), jg = /^\d{4,}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+(?:[+-][0-2]\d:[0-5]\d|Z)$/, kg = /^[a-z][a-z\d.+-]*:\/*(?:[^:@]+(?::[^@]+)?@)?(?:[^\s:\/?#]+|\[[a-f\d:]+])(?::\d+)?(?:\/[^?#]*)?(?:\?[^#]*)?(?:#.*)?$/i, lg = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+\/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+\/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/, mg = /^\s*(-|\+)?(\d+|(\d*(\.\d*)))([eE][+-]?\d+)?\s*$/, ng = /^(\d{4,})-(\d{2})-(\d{2})$/, og = /^(\d{4,})-(\d\d)-(\d\d)T(\d\d):(\d\d)(?::(\d\d)(\.\d{1,3})?)?$/, pg = /^(\d{4,})-W(\d\d)$/, qg = /^(\d{4,})-(\d\d)$/, rg = /^(\d\d):(\d\d)(?::(\d\d)(\.\d{1,3})?)?$/, sg = "keydown wheel mousedown", tg = pa();
9243+
}, hg = gg(), ig = gg(!0), jg = /^\d{4,}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+(?:[+-][0-2]\d:[0-5]\d|Z)$/, kg = /^[a-z][a-z\d.+-]*:\/*(?:[^:@]+(?::[^@]+)?@)?(?:[^\s:/?#]+|\[[a-f\d:]+])(?::\d+)?(?:\/[^?#]*)?(?:\?[^#]*)?(?:#.*)?$/i, lg = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/, mg = /^\s*(-|\+)?(\d+|(\d*(\.\d*)))([eE][+-]?\d+)?\s*$/, ng = /^(\d{4,})-(\d{2})-(\d{2})$/, og = /^(\d{4,})-(\d\d)-(\d\d)T(\d\d):(\d\d)(?::(\d\d)(\.\d{1,3})?)?$/, pg = /^(\d{4,})-W(\d\d)$/, qg = /^(\d{4,})-(\d\d)$/, rg = /^(\d\d):(\d\d)(?::(\d\d)(\.\d{1,3})?)?$/, sg = "keydown wheel mousedown", tg = pa();
92449244
d("date,datetime-local,month,time,week".split(","), function(a) {
92459245
tg[a] = !0;
92469246
});
@@ -10866,7 +10866,7 @@ return c;
1086610866
}
1086710867
var f = b.$$minErr("$resource"), g = /^(\.[a-zA-Z_$@][0-9a-zA-Z_$@]*)+$/;
1086810868
b.module("ngResource", [ "ng" ]).provider("$resource", function() {
10869-
var a = /^https?:\/\/[^\/]*/, c = this;
10869+
var a = /^https?:\/\/[^/]*/, c = this;
1087010870
this.defaults = {
1087110871
stripTrailingSlashes:!0,
1087210872
cancellable:!1,
@@ -12520,7 +12520,7 @@ return e.push({
1252012520
name:c,
1252112521
optional:!!f
1252212522
}), b = b || "", "" + (f ? "" :b) + "(?:" + (f ? b :"") + (g && "(.+?)" || "([^/]+)") + (f || "") + ")" + (f || "");
12523-
}).replace(/([\/$*])/g, "\\$1"), d.regexp = new RegExp("^" + a + "$", c ? "i" :""), d;
12523+
}).replace(/([/$*])/g, "\\$1"), d.regexp = new RegExp("^" + a + "$", c ? "i" :""), d;
1252412524
}
1252512525
h = b.isArray, i = b.isObject;
1252612526
var e = {};

‎dist/styles/main.css

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4136,9 +4136,16 @@ copy-to-clipboard .input-group.limit-width{max-width:300px}
41364136
.data-toolbar{padding:5px 0}
41374137
.data-toolbar.other-resources-toolbar .data-toolbar-dropdown{min-width:210px}
41384138
.data-toolbar .checkbox{margin-bottom:0;margin-top:10px}
4139+
.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:240px}
4140+
@media (min-width:480px){.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:400px}
4141+
}
41394142
@media (min-width:768px){.data-toolbar{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex}
41404143
.data-toolbar .checkbox{-webkit-flex:1 1 0%;-moz-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;margin-left:20px;margin-top:3px;text-align:right}
41414144
.data-toolbar .data-toolbar-filter{-webkit-flex:1 1 0%;-moz-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%}
4145+
.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:540px}
4146+
}
4147+
@media (min-width:992px){.data-toolbar .data-toolbar-filter{max-width:787px}
4148+
.data-toolbar .data-toolbar-filter .label-filter-key .selectize-input.not-full{width:730px}
41424149
}
41434150
.data-toolbar .data-toolbar-filter .form-group{margin-bottom:0}
41444151
.data-toolbar .data-toolbar-views{-webkit-flex:0 1 auto;-moz-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;text-align:right}
@@ -4192,8 +4199,7 @@ h2+.list-view-pf{margin-top:20px}
41924199
.list-view-pf-additional-info-item{display:inline-block;text-align:left}
41934200
.list-view-pf-description{-ms-flex:1 0 55%;flex:1 0 55%}
41944201
.list-view-pf-main-info{padding-bottom:10px;padding-top:10px}
4195-
@media (min-width:992px){.data-toolbar .data-toolbar-filter{max-width:600px}
4196-
.list-view-pf .list-group-item-heading,.list-view-pf .list-group-item-text{-ms-flex:1 0 auto;flex:1 0 auto;margin:0;padding:0 20px 0 0;width:50%}
4202+
@media (min-width:992px){.list-view-pf .list-group-item-heading,.list-view-pf .list-group-item-text{-ms-flex:1 0 auto;flex:1 0 auto;margin:0;padding:0 20px 0 0;width:50%}
41974203
.list-view-pf-additional-info{width:40%}
41984204
.list-view-pf-description{width:60%}
41994205
}

0 commit comments

Comments
 (0)