diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less index 87427fe9a..2c0fe1a46 100644 --- a/modules/monitoring/public/css/module.less +++ b/modules/monitoring/public/css/module.less @@ -47,17 +47,6 @@ } } -// Multi-selection info -.selection-info { - float: right; - font-size: @font-size-small; - padding: @vertical-padding / 2 0; - - &:hover { - cursor: help; - } -} - // Performance data pie charts .sparkline { height: 1em; diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less index 325954877..9bc611dcd 100644 --- a/public/css/icinga/controls.less +++ b/public/css/icinga/controls.less @@ -1,20 +1,34 @@ /*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */ +// TODO(el): Rename .filter to .filter-control + +// Backend selection control in user and group list views .backend-selection { float: left; } -.filter { - clear: both; +.backend-selection, +.pagination-control, +.selection-info, +.sort-controls-container { + margin-bottom: 0.5em; } -.limiter-control, -.sort-control { - display: inline-block; +.backend-selection, +.pagination-control, +.sort-controls-container { + // Select controls may not respect font-size thus leading to improperly vertical alignment w/o big enough line-height + line-height: 2em; +} + +.filter { + // Display filter control on a new line + clear: both; } .limiter-control > .control-group { padding: 0; + // Note that the sort-control form does not have padding as it's utilizing different decorators > .control-label-group { text-align: left; @@ -31,7 +45,14 @@ } } +.limiter-control, +.sort-control { + // Display limiter and sort control both on the same line; floating could be used here too to achieve the same + display: inline-block; +} + .pagination-control { + // Display the pagination-control on a new line clear: both; float: left; @@ -73,7 +94,19 @@ } } +// Multi-selection info +.selection-info { + float: right; + font-size: @font-size-small; + + &:hover { + cursor: help; + } +} + .sort-control { + margin-left: 0.25em; + label { width: auto; margin-right: 0.5em; @@ -99,6 +132,11 @@ float: right; } +.sort-direction-control { + margin-left: 0.25em; + width: 1em; +} + html.no-js .sort-control form { display: table; margin-left: auto; diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less index 402c76f05..fa5066064 100644 --- a/public/css/icinga/main.less +++ b/public/css/icinga/main.less @@ -177,38 +177,6 @@ a:hover > .icon-cancel { width: @name-value-table-name-width; } -.controls { - .limiter-control { - padding: @vertical-padding / 2 0; - margin-bottom: 0.25em; - } - - .pagination-control { - padding: @vertical-padding / 2 0; - margin-bottom: 0.25em; - } - - .sort-control { - padding: @vertical-padding / 2 0; - margin-bottom: 0.25em; - margin-left: 0.5em; - } - - .sort-direction-control { - margin-bottom: 0.5em; - margin-left: 0.5em; - width: 1em; - } - - .filter { - margin-bottom: 0.5em; - } - - .selection-info { - margin-left: 0.5em; - } -} - /* Styles for centering content of unknown width and height both horizontally and vertically * * Example markup: