diff --git a/css/style.css b/css/style.css index 33c7b769c..21ca9f3f4 100644 --- a/css/style.css +++ b/css/style.css @@ -42,12 +42,12 @@ input.input-inline { margin: -4px 0; } -button { +button.button-inline { border: 0; background-color: transparent; } -button:hover { +button.button-inline:hover { border: 0; background-color: transparent; } @@ -126,21 +126,27 @@ button:hover { position: relative; z-index: 120; height: 44px; -} - -#board-header > * { + display: flex; + align-items: center; font-size: 14pt; - padding: 7px; - margin: 7px; - float: left; } -#board-header > a { - background: url('/core/img/breadcrumb.svg?v=1'); - background-repeat: no-repeat; - background-position: right center; +#board-header .crumb { + background-image: url('../../../core/img/breadcrumb.svg?v=1'); background-size: auto 24px; - padding-right: 24px; + background-position: right center; + background-repeat: no-repeat; + padding: 7px 14px; +} + +#board-header > h1 { + white-space: nowrap; + padding: 7px; +} + +#board-header #home { + position: relative; + padding: 0px; } #board-actions { @@ -161,6 +167,38 @@ button:hover { cursor: pointer; } +#board-header-controls { + display: flex; + align-items: center; + position: relative; + margin-left: auto; +} + +#board-header-controls-menu { + display: none; +} + +#board-header-controls-menu button { + padding: 15px 20px 15px 20px; +} + +#board-header-controls-menu #popover-controls { + display: flex; + align-items: center; + padding-left: 3px; +} + +#board-header-controls-menu .popovermenu{ + margin-top: 35px; + margin-right: 6px; +} + +.board-action-button, +.board-action-button * { + display: flex; + align-items: center; +} + .filter-select { position: absolute; right: auto; @@ -192,22 +230,19 @@ button:hover { background-color: transparent; } -#board-header > .board-action-button { - float: right; -} - #stack-add { background-color: rgba(240,240,240,.9); border-radius: 3px; - padding: 0; + margin-right: 3px; +} + +#stack-add > form { + display: flex; } #stack-add input { - padding: 7px; - margin: 0px; + padding: 4px 5px; border: 0px none transparent; - display: table-cell; - vertical-align: middle; min-height: initial; background-color: rgba(240,240,240,.9); } @@ -224,11 +259,6 @@ button:hover { box-shadow:none; } -#stack-add button { - display: table-cell; - vertical-align: middle; -} - .stack { width: 320px; margin-right: 10px; @@ -321,12 +351,17 @@ button:hover { opacity: 1; } -.card .card-controls .space { - width: 100%; +.card .card-controls button { + padding: 0px; + margin-right: 0px; +} + +.app-popover-menu-utils { + margin-left: auto; min-height: 16px; } -.card .popovermenu { +.popovermenu { z-index: 999; opacity: 1; margin-top: 25px; @@ -334,7 +369,7 @@ button:hover { display: block; } -.card .popovermenu.hidden { +.popovermenu.hidden { display: none; } @@ -850,14 +885,12 @@ button:hover { @media (max-width: 480px) { /* hide board actions on mobile */ - #board-actions { + #board-header-controls { display: none !important; } -} -@media only screen and (max-width: 768px) { - #board-header h1 { - margin-left: 50px; + #board-header-controls-menu { + display: flex; } } @@ -959,7 +992,7 @@ button:hover { } .icon-home { - background-image: url('/core/img/places/home.svg'); + background-image: url('../../../core/img/places/home.svg'); } /** diff --git a/js/directive/appPopoverMenuUtils.js b/js/directive/appPopoverMenuUtils.js index 5c366391a..f5f73b7ee 100644 --- a/js/directive/appPopoverMenuUtils.js +++ b/js/directive/appPopoverMenuUtils.js @@ -4,20 +4,20 @@ * @author Julius Härtl * * @license GNU AGPL version 3 or any later version - * + * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Affero General Public License as * published by the Free Software Foundation, either version 3 of the * License, or (at your option) any later version. - * + * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Affero General Public License for more details. - * + * * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . - * + * */ app.directive('appPopoverMenuUtils', function () { @@ -37,7 +37,8 @@ app.directive('appPopoverMenuUtils', function () { e.stopPropagation(); }); scope.$on('documentClicked', function (scope, event) { - if (event.target !== button) { + /* prevent closing popover if target has no-close class */ + if (event.target !== button && !$(event.target).hasClass('no-close')) { menu.addClass('hidden'); } button.css('display',''); @@ -45,4 +46,3 @@ app.directive('appPopoverMenuUtils', function () { } }; }); - diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php index a7c4c7f0c..4a457d5c7 100644 --- a/templates/part.board.mainView.php +++ b/templates/part.board.mainView.php @@ -5,36 +5,59 @@

{{ statusservice.text }}

- + + t('All Boards')); ?>

{{ boardservice.getCurrent().title }}

-
- + -
- - - -
-
- - - -
-
-
- - -
+
+ +
@@ -54,9 +77,9 @@ required maxlength="100"/>
- -
@@ -79,15 +102,14 @@
- +
-
- +