Add wrapping for usage conditions on small screens

This commit is contained in:
toasted-nutbread 2019-09-28 13:30:41 -04:00
parent 4e0fe1d5fb
commit 9b929ffcd4
2 changed files with 32 additions and 1 deletions

View File

@ -48,6 +48,20 @@
border-color: #f00000; 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 { .condition>.condition-prefix:after {
content: "IF"; content: "IF";
} }
@ -55,6 +69,9 @@
content: "AND"; content: "AND";
} }
.input-group .condition-prefix {
flex: 0 0 auto;
}
.input-group .condition-prefix, .input-group .condition-prefix,
.input-group .condition-group-separator-label { .input-group .condition-group-separator-label {
width: 60px; width: 60px;
@ -122,3 +139,16 @@
margin-top: 15px; margin-top: 15px;
} }
} }
@media screen and (max-width: 600px) {
.condition {
flex-wrap: wrap;
}
.condition-input {
order: 2;
}
.condition-line-break {
display: block;
order: 1;
}
}

View File

@ -105,7 +105,8 @@
<div class="input-group-addon condition-prefix"></div> <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-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> <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 class="input-group-btn"><button class="btn btn-danger condition-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div>
</div></template> </div></template>
<template id="condition-group-separator-template"><div class="input-group"> <template id="condition-group-separator-template"><div class="input-group">