diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2019-09-28 13:30:41 -0400 |
|---|---|---|
| committer | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2019-09-28 16:04:22 -0400 |
| commit | 9b929ffcd4bf34b784b94137f636a8a483b1f18e (patch) | |
| tree | a205e19835b981013a37a09986cfc32c72606eba | |
| parent | 4e0fe1d5fb53bdd2e6c1c061127bca4053dec922 (diff) | |
Add wrapping for usage conditions on small screens
| -rw-r--r-- | ext/bg/css/settings.css | 30 | ||||
| -rw-r--r-- | ext/bg/settings.html | 3 |
2 files changed, 32 insertions, 1 deletions
diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css index 150209e3..12bbe8a8 100644 --- a/ext/bg/css/settings.css +++ b/ext/bg/css/settings.css @@ -48,6 +48,20 @@ border-color: #f00000; } +.condition { + display: flex; + -flex-wrap: wrap; +} +.condition-input { + flex: 1 1 auto; +} +.condition-line-break { + flex: 1 0 100%; + display: none; +} +.condition>.input-group-btn { + width: auto; +} .condition>.condition-prefix:after { content: "IF"; } @@ -55,6 +69,9 @@ content: "AND"; } +.input-group .condition-prefix { + flex: 0 0 auto; +} .input-group .condition-prefix, .input-group .condition-group-separator-label { width: 60px; @@ -122,3 +139,16 @@ margin-top: 15px; } } + +@media screen and (max-width: 600px) { + .condition { + flex-wrap: wrap; + } + .condition-input { + order: 2; + } + .condition-line-break { + display: block; + order: 1; + } +} diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 4db0a9b0..1406826b 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -105,7 +105,8 @@ <div class="input-group-addon condition-prefix"></div> <div class="input-group-btn"><select class="form-control btn btn-default condition-type"><optgroup label="Type"></optgroup></select></div> <div class="input-group-btn"><select class="form-control btn btn-default condition-operator"><optgroup label="Operator"></optgroup></select></div> - <input type="text" class="form-control" /> + <div class="condition-line-break"></div> + <div class="condition-input"><input type="text" class="form-control" /></div> <div class="input-group-btn"><button class="btn btn-danger condition-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div> </div></template> <template id="condition-group-separator-template"><div class="input-group"> |