feat(events): Narrow mode layout (mobile portrait)
Simpler1
parent
51211ce271
commit
8b94b0774f
|
|
@ -1114,10 +1114,10 @@ class Filter extends ZM_Object {
|
|||
#$html .= ($i == 0) ? '' : htmlSelect("filter[Query][terms][$i][cnj]", $conjunctionTypes, $term['cnj']).PHP_EOL;
|
||||
$html .= ($i == 0) ? '' : html_input("filter[Query][terms][$i][cnj]", 'hidden', $term['cnj']).PHP_EOL;
|
||||
if ( isset($term['attr']) ) {
|
||||
$html .= '<span class="term '.$term['attr'].'"><label>'.$attrTypes[$term['attr']].'</label>';
|
||||
$html .= '<span class="term '.$term['attr'].'"><span class="term-label-wrapper"><label>'.$attrTypes[$term['attr']].'</label>';
|
||||
$html .= html_input("filter[Query][terms][$i][attr]", 'hidden', $term['attr']);
|
||||
$html .= html_input("filter[Query][terms][$i][op]", 'hidden', $term['op']).PHP_EOL;
|
||||
$html .= '<span>'. $term['op'].'</span>'.PHP_EOL;
|
||||
$html .= '<span>'. $term['op'].'</span></span>'.PHP_EOL;
|
||||
#$html .= '<span>'.htmlSelect("filter[Query][terms][$i][op]", $opTypes, $term['op']).'</span>'.PHP_EOL;
|
||||
|
||||
if ( $term['attr'] == 'Archived' ) {
|
||||
|
|
@ -1132,7 +1132,7 @@ class Filter extends ZM_Object {
|
|||
if (count($selected) == 1 and !$selected[0]) {
|
||||
$selected = null;
|
||||
}
|
||||
$options = ['class'=>'chosen', 'multiple'=>'multiple', 'data-placeholder'=>translate('All Tags')];
|
||||
$options = ['class'=>'term-value-wrapper chosen', 'multiple'=>'multiple', 'data-placeholder'=>translate('All Tags')];
|
||||
if (isset($term['cookie'])) {
|
||||
$options['data-cookie'] = $term['cookie'];
|
||||
|
||||
|
|
@ -1144,7 +1144,7 @@ class Filter extends ZM_Object {
|
|||
// echo '<pre>selected: '; print_r($selected); echo '</pre>';
|
||||
// echo '<pre>options: '; print_r($options); echo '</pre>';
|
||||
|
||||
$html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", $availableTags, $selected, $options).'</span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper">'.htmlSelect("filter[Query][terms][$i][val]", $availableTags, $selected, $options).'</span>'.PHP_EOL;
|
||||
// $html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", array_combine($availableTags,$availableTags), $term['val'],
|
||||
// $options).'</span>'.PHP_EOL;
|
||||
// $html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", $availableTags, $term['val'], $options).'</span>'.PHP_EOL;
|
||||
|
|
@ -1157,7 +1157,7 @@ class Filter extends ZM_Object {
|
|||
|
||||
|
||||
} else if ( $term['attr'] == 'DateTime' || $term['attr'] == 'StartDateTime' || $term['attr'] == 'EndDateTime') {
|
||||
$html .= '<span><input type="text" class="datetimepicker" name="filter[Query][terms]['.$i.'][val]"';
|
||||
$html .= '<span class="term-value-wrapper"><input type="text" class="term-value datetimepicker" name="filter[Query][terms]['.$i.'][val]"';
|
||||
if (isset($term['id'])) {
|
||||
$html .= ' id="'.$term['id'].'"';
|
||||
} else {
|
||||
|
|
@ -1172,7 +1172,7 @@ class Filter extends ZM_Object {
|
|||
if (!isset($term['placeholder'])) $term['placeholder'] = translate('Attr'.$term['attr']);
|
||||
$html .= ' placeholder="'.$term['placeholder'].'"/></span>'.PHP_EOL;
|
||||
} else if ( $term['attr'] == 'Date' || $term['attr'] == 'StartDate' || $term['attr'] == 'EndDate' ) {
|
||||
$html .= '<span><input type="text" class="datepicker" name="filter[Query][terms]['.$i.'][val]" id="filter[Query][terms]['.$i.'][val]"';
|
||||
$html .= '<span class="term-value-wrapper"><input type="text" class="term-value datepicker" name="filter[Query][terms]['.$i.'][val]" id="filter[Query][terms]['.$i.'][val]"';
|
||||
if (isset($term['cookie'])) {
|
||||
if (!$term['val'] and isset($_COOKIE[$term['cookie']])) $term['val'] = $_COOKIE[$term['cookie']];
|
||||
$html .= ' data-cookie="'.$term['cookie'].'"';
|
||||
|
|
@ -1180,19 +1180,19 @@ class Filter extends ZM_Object {
|
|||
$html .= ' value="'.(isset($term['val'])?validHtmlStr($term['val']):'').'" placeholder="'.translate('Attr'.$term['attr']).'"';
|
||||
$html .= '/></span>'.PHP_EOL;
|
||||
} else if ( $term['attr'] == 'StartTime' || $term['attr'] == 'EndTime' ) {
|
||||
$html .= '<span><input type="text" name="filter[Query][terms]['.$i.'][val]" id="filter[Query][terms]['.$i.'][val]" value="'.(isset($term['val'])?validHtmlStr(str_replace('T', ' ', $term['val'])):'' ).'"/></span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper"><input type="text" name="filter[Query][terms]['.$i.'][val]" id="filter[Query][terms]['.$i.'][val]" value="'.(isset($term['val'])?validHtmlStr(str_replace('T', ' ', $term['val'])):'' ).'"/></span>'.PHP_EOL;
|
||||
} else if ( $term['attr'] == 'ExistsInFileSystem' ) {
|
||||
$html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", $booleanValues, $term['val']).'</span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper">'.htmlSelect("filter[Query][terms][$i][val]", $booleanValues, $term['val']).'</span>'.PHP_EOL;
|
||||
|
||||
} else if ( $term['attr'] == 'Group') {
|
||||
$html .= '<td>'.htmlSelect("filter[Query][terms][$i][val]", Group::get_dropdown_options(), $term['val'],
|
||||
['class'=>'chosen',
|
||||
['class'=>'term-value chosen',
|
||||
'multiple'=>'multiple',
|
||||
'data-placeholder'=>translate('All Groups')]).'</td>'.PHP_EOL;
|
||||
} else if ( $term['attr'] == 'StateId' ) {
|
||||
$html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", $states, $term['val']).'</span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper">'.htmlSelect("filter[Query][terms][$i][val]", $states, $term['val']).'</span>'.PHP_EOL;
|
||||
} else if ( strpos($term['attr'], 'Weekday') !== false ) {
|
||||
$html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", $weekdays, $term['val']).'</span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper">'.htmlSelect("filter[Query][terms][$i][val]", $weekdays, $term['val']).'</span>'.PHP_EOL;
|
||||
} else if ( $term['attr'] == 'Monitor' ) {
|
||||
$monitors = [];
|
||||
foreach (Monitor::find(['Deleted'=>false], ['order'=>'lower(Name)']) as $m) {
|
||||
|
|
@ -1205,14 +1205,14 @@ class Filter extends ZM_Object {
|
|||
if (count($selected) == 1 and !$selected[0]) {
|
||||
$selected = null;
|
||||
}
|
||||
$options = ['class'=>'chosen', 'multiple'=>'multiple', 'data-placeholder'=>translate('All Monitors')];
|
||||
$options = ['class'=>'term-value chosen', 'multiple'=>'multiple', 'data-placeholder'=>translate('All Monitors')];
|
||||
if (isset($term['cookie'])) {
|
||||
$options['data-cookie'] = $term['cookie'];
|
||||
|
||||
if (!$selected and isset($_COOKIE[$term['cookie']]) and $_COOKIE[$term['cookie']])
|
||||
$selected = explode(',', $_COOKIE[$term['cookie']]);
|
||||
}
|
||||
$html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", $monitors, $selected, $options).'</span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper">'.htmlSelect("filter[Query][terms][$i][val]", $monitors, $selected, $options).'</span>'.PHP_EOL;
|
||||
} else if ( $term['attr'] == 'MonitorName' ) {
|
||||
$monitor_names = [];
|
||||
foreach (Monitor::find(['Deleted'=>false], ['order'=>'lower(Name)']) as $m) {
|
||||
|
|
@ -1220,22 +1220,22 @@ class Filter extends ZM_Object {
|
|||
$monitor_names[$m->Name()] = validHtmlStr($m->Name());
|
||||
}
|
||||
}
|
||||
$html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", array_combine($monitor_names,$monitor_names), $term['val'],
|
||||
['class'=>'chosen', 'multiple'=>'multiple', 'data-placeholder'=>translate('All Monitors')]).'</span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper">'.htmlSelect("filter[Query][terms][$i][val]", array_combine($monitor_names,$monitor_names), $term['val'],
|
||||
['class'=>'term-value chosen', 'multiple'=>'multiple', 'data-placeholder'=>translate('All Monitors')]).'</span>'.PHP_EOL;
|
||||
} else if ( $term['attr'] == 'ServerId' || $term['attr'] == 'MonitorServerId' || $term['attr'] == 'StorageServerId' || $term['attr'] == 'FilterServerId' ) {
|
||||
$html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", $servers, $term['val'],
|
||||
['class'=>'chosen', 'multiple'=>'multiple']).'</span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper">'.htmlSelect("filter[Query][terms][$i][val]", $servers, $term['val'],
|
||||
['class'=>'term-value chosen', 'multiple'=>'multiple']).'</span>'.PHP_EOL;
|
||||
} else if ( ($term['attr'] == 'StorageId') || ($term['attr'] == 'SecondaryStorageId') ) {
|
||||
if (!$storageareas) {
|
||||
$storageareas = array('' => array('Name'=>'NULL Unspecified'), '0' => array('Name'=>'Zero')) + ZM_Object::Objects_Indexed_By_Id('ZM\Storage');
|
||||
}
|
||||
$html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", $storageareas, $term['val'],
|
||||
['class'=>'chosen', 'multiple'=>'multiple']).'</span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper">'.htmlSelect("filter[Query][terms][$i][val]", $storageareas, $term['val'],
|
||||
['class'=>'term-value chosen', 'multiple'=>'multiple']).'</span>'.PHP_EOL;
|
||||
} else if ( $term['attr'] == 'AlarmedZoneId' ) {
|
||||
$html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", $zones, $term['val'],
|
||||
['class'=>'chosen', 'multiple'=>'multiple']).'</span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper">'.htmlSelect("filter[Query][terms][$i][val]", $zones, $term['val'],
|
||||
['class'=>'term-value chosen', 'multiple'=>'multiple']).'</span>'.PHP_EOL;
|
||||
} else if ( $term['attr'] == 'Notes' ) {
|
||||
$attrs = ['class'=>'chosen', 'multiple'=>'multiple', 'data-placeholder'=>translate('Event Type')];
|
||||
$attrs = ['class'=>'term-value chosen', 'multiple'=>'multiple', 'data-placeholder'=>translate('Event Type')];
|
||||
$selected = explode(',', $term['val']);
|
||||
if (count($selected) == 1 and !$selected[0]) {
|
||||
$selected = null;
|
||||
|
|
@ -1256,13 +1256,13 @@ class Filter extends ZM_Object {
|
|||
'car' => 'Car',
|
||||
'truck' => 'Truck',
|
||||
'vehicle' => 'Vehicle'];
|
||||
$html .= '<span>'.htmlSelect("filter[Query][terms][$i][val]", $options, $selected, $attrs).'</span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper">'.htmlSelect("filter[Query][terms][$i][val]", $options, $selected, $attrs).'</span>'.PHP_EOL;
|
||||
} else {
|
||||
#$html .= $term['attr'];
|
||||
$html .= '<span><input type="text" name="filter[Query][terms]['.$i.'][val]" value="'.validHtmlStr($term['val']).'"/></span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper"><input class="term-value"type="text" name="filter[Query][terms]['.$i.'][val]" value="'.validHtmlStr($term['val']).'"/></span>'.PHP_EOL;
|
||||
}
|
||||
} else { # no attr ?
|
||||
$html .= '<span><input type="text" name="filter[Query][terms]['.$i.'][val]" value="'.(isset($term['val'])?validHtmlStr($term['val']):'' ).'"/></span>'.PHP_EOL;
|
||||
$html .= '<span class="term-value-wrapper"><input class="term-value" type="text" name="filter[Query][terms]['.$i.'][val]" value="'.(isset($term['val'])?validHtmlStr($term['val']):'' ).'"/></span>'.PHP_EOL;
|
||||
}
|
||||
|
||||
$html .= '</span>';
|
||||
|
|
|
|||
|
|
@ -84,3 +84,24 @@ body.sticky #eventTable thead {
|
|||
position: sticky;
|
||||
top: -1px;
|
||||
}
|
||||
@media screen and (max-width:500px) {
|
||||
.term {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.term-label-wrapper {
|
||||
text-wrap: nowrap;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.term-value-wrapper {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.term-value, .chosen-container{
|
||||
width: 100% !important;
|
||||
margin-left: 5px;
|
||||
}
|
||||
label {
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue