diff --git a/.gitignore b/.gitignore index ee470a22c..b7b3607d7 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,6 @@ js/node_modules/* js/vendor/ build/ js/public/ +css/style.css tests/integration/vendor/ tests/integration/composer.lock diff --git a/Makefile b/Makefile index cc7768876..f281df216 100644 --- a/Makefile +++ b/Makefile @@ -25,11 +25,14 @@ install-deps: cd js && npm install --deps cd js && ./node_modules/.bin/bower install -build: build-js +build: build-js build-css build-js: install-deps cd js && ./node_modules/.bin/grunt build +build-css: install-deps + ./js/node_modules/node-sass/bin/node-sass --output-style compressed css/style.scss css/style.css + watch: cd js && ./node_modules/.bin/grunt watch diff --git a/css/style.css b/css/style.css deleted file mode 100644 index cc06fd8da..000000000 --- a/css/style.css +++ /dev/null @@ -1,1178 +0,0 @@ -/* - * @copyright Copyright (c) 2016 Julius Härtl - * - * @author Julius Härtl - * @author Artem Anufrij - * - * @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 . - * - */ - -/** - * General styles - */ - -button, -.button, -.app-deck .icon { - display: flex; -} - -input.input-inline { - font-size: inherit !important; - font-weight: inherit; - background-color: transparent; - padding: 0; - border: none; - width: 100%; - -webkit-border-radius: 0; -} - -button.button-inline { - border: 0; - background-color: transparent; -} - -button.button-inline:hover { - border: 0; - background-color: transparent; -} - -#searchbox { - display: flex !important; -} - -.editable-inline { - cursor: text; -} -/** - * Navigation sidebar - */ - -.app-navigation-entry-menu ul { - flex-direction: row; -} - -.app-navigation-entry-utils-menu-button { - display: block !important; -} - -.app-navigation-entry-utils-menu-share { - display: flex !important; - padding: 14px; - opacity: 0.3; -} - -#app-navigation .app-navigation-entry-edit { - height: auto; -} - -#app-navigation .app-navigation-entry-edit .colorselect div{ - height: 32px; -} - -#app-navigation .app-navigation-entry-edit form { - display: flex; -} - -#app-navigation .board-bullet { - position: absolute; - margin-left: 17px; - margin-top: 16px; - width: 12px; - height: 12px; - border: none; - border-radius: 50%; - cursor: pointer; -} - -#app-navigation .app-navigation-entry-utils li.board-delete-undo { - background-color: #aa0000; - color: #fff; - cursor: pointer; - width: auto !important; -} - -#app-navigation .app-navigation-entry-menu ul { - flex-direction: row; -} - -/** - * Board view - */ - -#board-status { - position: absolute; - z-index: 999; - width: 100%; - height: 100%; - background-color: #fff; -} - -#board { - position: absolute; - white-space: nowrap; - overflow: auto; - z-index: 100; - width: 100%; - bottom: 0px; - top: 44px; -} - -#innerBoard { - padding: 10px; -} - -#controls { - width: inherit; - z-index: 120; - display: flex; - align-items: center; - font-size: 14pt; - position: inherit; - width: 100% !important; - padding-left: 44px; -} - -#controls .crumb, #controls a { - top: 12px; -} - -#controls > h1 { - white-space: nowrap; - padding: 7px; -} - -#controls button { - height: inherit; -} - -#controls input[type='text'] { - padding: 4px 5px; - margin: 3px 3px 3px 0px; - border: 0px none transparent; - min-height: initial; - background-color: transparent; - height: inherit; -} - -#controls #button-home { - background-image: url(../../../core/img/places/home.svg); - background-position: 8px center; - background-repeat: no-repeat; - padding: 10px 24px 10px 14px; -} - -#app-navigation-toggle { - width: 44px; - height: 44px; - cursor: pointer; - opacity: 1; - display: inline-block !important; - position: fixed; -} - -.board-header-controls { - margin-left: auto; - align-items: center; -} - -.board-header-controls.app-popover-menu-utils { - display: flex; -} - -.board-header-controls > button { - padding: 16px 20px; -} - -.board-header-controls.app-popover-menu-utils #popover-controls { - display: flex; - align-items: center; -} - -.board-header-controls.app-popover-menu-utils .popovermenu { - margin-top: 35px; - margin-right: 6px; -} - -.filter-select { - position: absolute; - right: auto; - top: 42px; - left: -21%; -} - -.filter-select li { - padding: 3px; - overflow: hidden; - width: auto; -} - -.filter-select li span { - display: block; - float: left; - width: 20px; - height: 20px; - margin-right: 5px; -} - -#stack-add { - background-color: rgba(240,240,240,.9); - border-radius: 3px; - margin: 3px; - display: flex; - align-content: center; -} - -#stack-add > form { - display: flex; - align-content: center; -} - -#stack-add input:invalid { - box-shadow: none; -} - -#stack-add input:-moz-submit-invalid { - box-shadow: none; -} - -#stack-add input:-moz-ui-invalid { - box-shadow:none; -} - -.stack { - width: 100%; - vertical-align: top; -} - -.stack h2 { - padding: 10px 10px 8px; - margin: 0; - font-size: 12pt; - font-weight: 700; - overflow: hidden; - display: flex; - min-height: 40px; -} - -.stack h2 input { - padding: 0; - width: 100%; - margin: 0; - font-size: 12pt; - font-weight: 700; - border: 0; - background-color: white; - min-height: initial; -} - -.stack form { - width: 100%; -} - -.stack h2 span { - white-space: normal; - overflow: hidden; - text-overflow: ellipsis; -} - -.stack h2 button { - margin-left: auto; - display: flex; - opacity: 0.3; - padding-right: 0; -} - -.stack h2:hover button { - display: flex; -} - -.card { - background-color: #ffffff; - margin: 10px; - white-space: normal; - position: relative; - opacity: 1.0; - -webkit-box-shadow: 0 0 5px #bbb; -} - -.card.archived .card-upper { - opacity: 0.5; -} - -.card-upper { - overflow: hidden; - position: relative; - padding: 5px; -} - -.card .card-controls { - padding: 10px; - background: #f8f8f8; - display: flex; - position: relative; -} - -.card .card-controls .card-options { - opacity: 0.3; - position: absolute; - right: 10px; - top: 8px; -} - -.card .card-controls:hover .card-options { - opacity: 1; -} - -.card .card-controls button { - padding: 0px; - margin-right: 0px; -} - -.app-popover-menu-utils { - margin-left: auto; - min-height: 16px; -} - -.popovermenu { - z-index: 999; - opacity: 1; - display: block; - margin-top: 25px; - margin-right: 0px; -} - -.popovermenu.hidden { - display: none; -} - -.card .card-assignees { - margin: 5px; -} - -.card:hover { - background-color: #fcfcfc; -} - -.card a { - display: block; -} - -.card h3 { - font-weight: bold; - font-size: 10pt; - padding: 0; - margin: 5px; - overflow: hidden; - text-overflow: ellipsis; -} - -.card.has-labels h3 { - margin-top: 15px; -} - -.card .labels { - position: absolute; - top: -5px; - left: 10px; - -} - -.card .labels li { - padding: 0; - width: 15px; - height: 20px; - -webkit-border-radius: 3px; - font-size: 80%; - border: none transparent; - float: left; -} - -.card .labels li span { - display: none; -} - -.card .labels li:hover { - -} - -.card .labels li:hover span { - position: absolute; - padding: 3px; - background-color: inherit; -} - -.as-sortable-placeholder { - margin: 10px; - border: 1px dashed #aaa; -} -#innerBoard > .as-sortable-placeholder { - display: inline-block !important; - margin-top: 0; - margin-left: 0; -} - -.info { - padding-left: 5px; - padding-right: 5px; - display: inline-block; - color: #aaa; -} - -.info i { - margin-left: 2px; -} - -.info span { - margin-right: 2px; -} - -.card.create { - text-align: center; - padding: 10px; - margin: 10px; - border: none; - overflow: hidden; - -webkit-box-shadow: none; -} - -.card.create:hover { - text-align: center; - opacity: 1; -} - -.card.create h3 { - width: 100%; - padding: 0; - margin: 0 0 1px; -} - -.card.create h3 input { - width: 100%; - border: 0; - font-weight: bold; - font-size: 10pt; - margin: 0; - padding: 0; - border-bottom: 1px solid #ffffff; - border-radius: 0; - color: #ffffff; - background-color: transparent !important; - min-height: initial; -} - -.card-controls .icon-filetype-text { - margin-right: 10px; -} - -.due { - border-radius: 3px; - margin: -4px 4px -4px -4px; - padding: 0px 4px; - font-size: 90%; - opacity: 0.7; - display: flex; - align-items: center; -} -.due .icon { - background-size: contain; - float:left; - opacity: 0.7; - width: 16px; - height: 16px; -} -.overdue { - background-color: #e12419; - color: #fff; -} -.due.now { - background-color: #fbd850; -} -.due.next { - background-color: #fbf790; -} - -.due .badge-icon { - background-image: url(../../../core/img/places/calendar-dark.svg); - margin-right: 3px; -} -.overdue .badge-icon { - background-image: url(../img/calendar-white.svg); -} -.now .badge-icon { - background-image: url(../../../core/img/places/calendar-dark.svg); -} -.next .badge-icon { - background-image: url(../../../core/img/places/calendar-dark.svg); -} -/** - * Card view right sidebar - */ - -#card-header { -} - -#card-header h2, #sidebar-header h2 { - font-size: 14pt; - padding: 9px 10px; - overflow: hidden; - margin-bottom: 0; - background-color: #f0f0f0; -} - -#card-header h2 input { - min-height: 0px; - margin: 0px; -} - -#sidebar-header .icon-close, #card-header .icon-close { - position: absolute; - top: 0px; - right: 0px; - padding: 14px; - height: 44px; - width: 44px; -} - -#card-meta { - height: 100%; - display: flex; - flex-direction: column; -} - -#card-dates { - font-size: 80%; - color: #aaaaaa; - text-align: right; -} - -#card-tag-label { - padding-top: 0px !important; - margin-top: 0px; -} - -#card-meta .duedate { - display: flex; - align-content: center; - min-height: 38px; -} - -#card-meta .duedate .timepicker-input { - width: 50px; - border-radius: 0px 3px 3px 0px; -} - -#card-meta .duedate .datepicker-input { - width: 85px; - margin: 3px 0px; - border-right: 0; - border-radius: 3px 0px 0px 3px; -} - -#card-meta .duedate .icon { - opacity: 0.5; -} - -#card-meta .duedate .icon:hover { - opacity: 0.7; -} - -#card-meta .select2-container { - margin: 0px; -} - -#card-description { - height: 100%; - display: flex; - flex-direction: column; -} - -#card-meta h3 { - border-bottom: 1px solid #dbdbdb; - padding: 15px 0px 5px 0px; -} - -#card-meta h3 > div { - display: flex; - align-content: center; - justify-content: space-between; -} - -#card-description > div { - height: 100%; -} - -#card-description textarea { - width: 100%; - height: 200px; - border: none; - margin: 0; - padding: 0; -} - -#card-description .container { - background-color: white; -} - -#card-meta .save-indicator { - background-color: #009900; - color: #ffffff; - border-radius: 3px; - float: right; - padding: 0px 10px; - font-size: 8pt !important; - display: none; - align-self: flex-end; -} -#card-meta .icon-help { - opacity: 0.5; -} - -.card-block { - padding: 15px; -} - -#card-attachments ul { - margin: 5px; -} - -#card-attachments .details { - font-size: 8pt; - padding-left: 15px; -} - -#attachment-add button { - background-color: #eeeeee; - font-size: 9pt; -} - -#app-sidebar { - right: -500px; - max-width: 100%; - border-left: none; - width: 500px; - border-left: 1px solid #eeeeee; - display:flex; - flex-direction: column; -} - -#app-sidebar.details-visible { - right: 0; -} - -#app-content { - overflow: hidden; - display: flex; - flex-direction: column; -} - -#app-content.details-visible { - margin-right: 500px; -} - -.labels { - display: block; - overflow: hidden; -} - -.labels li { - padding: 0px 0px 5px 0px; - -webkit-border-radius: 3px; - margin: 1px; - color: #ffffff; - min-width: 20px; - display: flex; -} - -#assigned-users .avatardiv { - float: left; - background-color: #eee; - border-radius: 16px; - width: 32px; - height: 32px; - margin-right: 3px; -} - -#assigned-users .avatardiv .icon-group { - margin: 7px; - opacity: 0.5; - display: block !important; -} - -/** - * Color selection - */ - -.colorselect { - overflow: hidden; - border-radius:3px; - flex-direction: row; - display: flex; -} - -.colorselect .color { - opacity: 0.7; - height: 100%; - flex-grow: 1; - border: none; -} - -.colorselect .selected { - background-image: url(../../../core/img/actions/checkmark.svg); - background-position: center center; - background-repeat: no-repeat; - opacity: 1; -} - -.colorselect .dark.selected { - background-image: url(../../../core/img/actions/checkmark-white.svg); -} - -.labels .colorselect { - padding: 0; - clear: none; - overflow: visible; -} - -.labels .colorselect .color { - width: 26px; - height: 26px; -} - -.labels .label-edit { - display: flex; - width: 100%; -} - -.labels .label-edit .colorselect{ - margin: 0px 0px 0px 3px; -} - -.labels .label-edit input { - border-bottom: 1px solid #333333; - padding: 5px 5px 4px 5px !important; -} - -/** - * Board list main screen area - */ -#boardlist { - position: absolute; - overflow: auto; - width: 100%; - bottom: 0px; - top: 44px; -} - -#boardlist thead td { - color: #999; -} - -#boardlist td .board-bullet { - width: 30px; - height: 30px; - border: none; - border-radius: 50%; - position: relative; - cursor: pointer; - display: block; - margin: 2px 0px; -} - -.popovermenu ul { - display: flex !important; - flex-direction: column; -} - -#boardlist td { - padding: 10px; - border-bottom: 1px solid #eee; -} - -#boardlist span.icon { - width: 30px; - height: 30px; - margin: 2px 0px; -} - -.cell-board-bullet { - width: 50px; -} - -.cell-board-title { - width: 50%; -} - -#boardlist tr.deleted td * { - opacity: 0.5; -} - -#boardlist tbody .board-create td { - opacity: 0.5; -} - -#boardlist td form { - display: flex; - width: 100%; -} - -#boardlist td .colorselect { - flex-grow: 1; -} - -#boardlist td .colorselect div { - min-width: 32px; -} - -#boardlist td input[type=text] { - flex-grow: 2; -} - -#boardlist td input[type=submit] { - width: 32px; -} - -#boardlist td .app-popover-menu-utils { - float: right; - width: 30px; - display: inline; - position: relative; -} - -#boardlist td .app-popover-menu-utils button { - opacity: 0.3; -} - -#boardlist td .app-popover-menu-utils:hover button { - opacity: 0.7; -} - - -#boardlist .popovermenu { - margin-top: 5px; -} - -#boardlist .board-edit-controls { - float: right; - display: flex; -} - -#boardlist input { - margin: 0px; -} - -/** - * Board details - */ - -#shareWithList { - list-style-type: none; - padding: 0 0 16px; -} - -#shareWithList li { - padding-top: 5px; - padding-bottom: 5px; - font-weight: bold; - white-space: normal; - display: flex; - align-items: center; -} - -#shareWithList .username { - padding-right: 8px; - padding-left: 8px; - white-space: nowrap; - text-overflow: ellipsis; - display: inline-block; - overflow: hidden; - vertical-align: middle; -} - -.shareWithList .icon-delete { - display: inline-block; - background-size: 16px 16px; - width: 16px; - height: 16px; - padding: 0; - margin-top: 5px; -} - -.shareOption { - margin-top: 4px; -} - -#board-detail-labels ul li input { - margin: 0px; - padding: 5px; - min-height: 0px; -} - -#board-detail-labels ul li .label-title { - width: 100%; - padding: 4px; - border: none; - border-radius: 0px 0px 5px 5px; -} - -#board-detail-labels ul li a.icon { - padding: 5px; - opacity: 0.3; -} - -#board-detail-labels ul li a.icon:hover { - opacity: 0.7; -} - -.label-create { - width: 100%; - padding: 0px 56px 0px 0px !important; -} - -.label-create a { - margin: 0px; -} - -.label-create .icon { - margin-right: 10px; -} - -#board-detail-labels .color { - width: 28px; - height: 100%; -} - -.tabHeaders { - clear: both; - overflow: hidden; - margin-bottom: 0; -} - -.tabsContainer { - margin-top: 15px; -} - -#shareWithList .avatar { - float: left; - margin-top: -5px; - margin-right: 10px; -} - -.ui-select-offscreen { - display: none; -} - -.ui-select-match-close { - float: right; - z-index: 100; - position: relative; - display: inline-block !important; - margin-right: 7px; -} - -.ui-select-match-item { - padding: 0; - float: left !important; - display: block; - border-radius: 0px 0px 5px 5px !important; -} - -.ui-select-match-item .select-label { - color: #fff; - padding: 6px 23px 6px 6px; - margin-right: -23px !important; -} - -.ui-select-choices-group .choose-label { - padding: 6px; -} - -.select2-container-multi .select2-choices .select2-search-choice { - padding: 3px 0 !important; - border: 0 !important; - overflow: hidden; -} - -.ui-select-container[disabled] .ui-select-match-item .select-label { - padding: 4px; - min-width: 26px !important; - height: 100%; - display: inline-block; -} - -.ui-select-container[disabled] .ui-select-match-item { - margin-right: 0 !important; -} - -.select2-search input { - width:100% !important; -} - -.select2-result-label { - padding: 0px !important; -} - -.select2-result-label span { - display: flex; -} - -/** - * Mobile optimizations - */ - -@media (min-width: 481px) { - /* hide board actions on mobile */ - .board-header-controls { - display: flex; - } - - .board-header-controls.app-popover-menu-utils { - display: none; - } - - #innerBoard { - display: flex; - } - .stack { - width: 320px; - min-width: 320px; - display: inline-block; - border-right: 1px solid #eee; - margin-right: 10px; - padding-right: 10px; - } - - .stack:last-child { - border-right: 1px solid transparent; - } - - .stack h2 button { - display: none; - } -} - -/** - * Markdown rendering - */ - -#markdown { - width: 100% !important; -} - -#markdown p { - margin-bottom: 15px; -} - -#markdown * { - white-space: normal; - word-wrap: break-word; - overflow-wrap: break-word; -} - -#markdown a { - color: #666666; - text-decoration: underline; -} - -#markdown ol, #markdown ul { - margin-left: 20px; - margin-bottom: 10px; -} - -#markdown ul { - list-style-type: disc; -} - -#markdown h1 { - font-size: 18px; - font-weight: 600; - margin-bottom: 5px; -} - -#markdown h2 { - font-size: 16px; - font-weight: 600; -} - -#markdown h3 { - font-size: 14px; - font-weight: 600; -} - -#markdown h4 { - font-size: 13px; - font-weight: 600; -} - -#markdown h6 { - font-size: 12px; - font-weight: 600; -} - -#markdown pre { - background-color: #eeeeee; - padding: 3px; -} - -/** - * Custom icons - */ - -.icon-deck { - background-image: url(../img/deck-dark.svg); -} - -.icon-group { - background-image: url('../../../settings/img/users.svg'); -} - -.icon-help { - background-image: url('../../../settings/img/help.svg'); - padding: 11px 20px; - vertical-align: text-bottom; -} - -.icon-add-white { - background-image: url('../img/add-white.svg'); -} - -.icon-archive { - background-image: url('../img/archive.svg'); -} - -.icon-archive-white { - background-image: url('../img/archive-white.svg'); -} - -.icon-details { - background-image: url('../img/details.svg'); -} - -.icon-details-white { - background-image: url('../img/details-white.svg'); -} - -.icon-home { - background-image: url('../../../core/img/places/home.svg'); -} - -/** - * Hotfix for https://github.com/angular-ui/ui-select/issues/1652 - */ -.ui-select-dropdown.select2-drop-active { - opacity: 1 !important; -} diff --git a/css/style.scss b/css/style.scss new file mode 100644 index 000000000..58611c8a5 --- /dev/null +++ b/css/style.scss @@ -0,0 +1,1144 @@ +/* + * @copyright Copyright (c) 2016 Julius Härtl + * + * @author Julius Härtl + * @author Artem Anufrij + * @author Marin Treselj + * + * @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 . + * + */ + +/** + * Variables + */ +$color-main-background: #fff; +$color-primary-text: #fff; +$color-error: #e9322d; +$color-warning: #fbd850; +$color-warning-light: nc-lighten($color-warning, 15%); +$color-success: #46ba61; +$color-lightgrey: nc-darken($color-main-background, 4%); +$color-grey: nc-darken($color-main-background, 7%); +$color-darkgrey: nc-darken($color-main-background, 32%); + +/** + * General styles + */ +button, +.button, +.app-deck .icon { + display: flex; + &.button-inline { + border: 0; + background-color: transparent; + } + &.button-inline:hover { + border: 0; + background-color: transparent; + } +} + +input.input-inline { + font-size: inherit !important; + font-weight: inherit; + background-color: transparent; + padding: 0; + border: none; + width: 100%; + -webkit-border-radius: 0; +} + + + +#searchbox { + display: flex !important; +} + +.editable-inline { + cursor: text; +} + +/** + * Navigation sidebar + */ +.app-navigation-entry-menu { + ul { + flex-direction: row; + } +} + +#app-navigation { + .app-navigation-entry-edit { + height: auto; + + .colorselect div{ + height: 32px; + } + form { + display: flex; + } + } + + .board-bullet { + position: absolute; + margin-left: 17px; + margin-top: 16px; + width: 12px; + height: 12px; + border: none; + border-radius: 50%; + cursor: pointer; + } + + .app-navigation-entry-utils { + .app-navigation-entry-utils-menu-button { + display: block !important; // TODO: is this needed? + } + + .app-navigation-entry-utils-menu-share { + display: flex !important; + padding: 14px; + opacity: 0.5; + } + } + .app-navigation-entry-menu ul { + flex-direction: row; + } +} + +/** + * Board view + */ +#board-status { + position: absolute; + z-index: 999; + width: 100%; + height: 100%; + background-color: $color-main-background; +} + +#board { + position: absolute; + white-space: nowrap; + overflow: auto; + z-index: 100; + width: 100%; + bottom: 0px; + top: 44px; +} + +#innerBoard { + padding: 10px; + + > .as-sortable-placeholder { + display: inline-block !important; + margin-top: 0; + margin-left: 0; + } +} + +#controls { + width: inherit; + z-index: 120; + display: flex; + align-items: center; + font-size: 14pt; + position: inherit; + width: 100% !important; + padding-left: 44px; + + .crumb, + #controls a { + top: 12px; + } + + > h1 { + white-space: nowrap; + padding: 7px; + } + + button { + height: inherit; + } + + input[type='text'] { + padding: 6px; + border: 0px none transparent; + min-height: initial; + background-color: transparent; + height: inherit; + } + + .icon-home { // TODO: deprecate this + background-position: 8px center; + padding: 10px 24px 10px 14px; + } +} + +#app-navigation-toggle { + width: 44px; + height: 44px; + cursor: pointer; + opacity: 1; + display: inline-block !important; + position: fixed; +} + +.board-header-controls { + margin-left: auto; + align-items: center; + + &.app-popover-menu-utils { + display: flex; + + #popover-controls { + display: flex; + align-items: center; + } + + .popovermenu { + margin-top: 35px; + margin-right: 6px; + } + } + + > button { + padding: 16px 20px; + } +} + +.filter-select { + position: absolute; + right: auto; + top: 42px; + left: -21%; + + li { + padding: 3px; + overflow: hidden; + width: auto; + + span { + display: block; + float: left; + width: 20px; + height: 20px; + margin-right: 5px; + } + } +} + +#stack-add { + background-color: $color-lightgrey; + border-radius: 3px; + margin: 3px; + display: flex; + align-content: center; + + > form { + display: flex; + align-content: center; + } + + input { + &:invalid, + &:-moz-submit-invalid, + &:-moz-ui-invalid { + box-shadow: none; + } + } +} + +.stack { + width: 100%; + vertical-align: top; + + h2 { + padding: 10px 10px 8px; + margin: 0; + font-size: 12pt; + font-weight: 700; + overflow: hidden; + display: flex; + min-height: 40px; + + &:hover button { + display: flex; + } + + input { + padding: 0; + width: 100%; + margin: 0; + font-size: 12pt; + font-weight: 700; + border: 0; + background-color: $color-main-background; + min-height: initial; + } + + span { + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; + } + + button { + margin-left: auto; + display: flex; + opacity: 0.3; + padding-right: 0; + } + } + + form { + width: 100%; + } +} + +.card { + background-color: $color-main-background; + margin: 10px; + white-space: normal; + position: relative; + opacity: 1.0; + -webkit-box-shadow: 0 0 5px $color-darkgrey; + + &.archived .card-upper { + opacity: 0.5; + } + + .card-upper { + overflow: hidden; + position: relative; + padding: 5px; + } + + .card-controls { + padding: 10px; + background: $color-lightgrey; + display: flex; + position: relative; + + .card-options { + opacity: 0.3; + position: absolute; + right: 10px; + top: 8px; + } + + &:hover .card-options { + opacity: 1; + } + + .icon-filetype-text { + margin-right: 10px; + } + + button { + padding: 0px; + margin-right: 0px; + } + } +} + +.app-popover-menu-utils { + margin-left: auto; + min-height: 16px; +} + +.popovermenu { + z-index: 999; + opacity: 1; + display: block; + margin-top: 25px; + margin-right: 0px; + + &.hidden { + display: none; + } + + ul { + display: flex !important; + flex-direction: column; + } +} + +.card { + &:hover { + background-color: $color-lightgrey; + } + .card-assignees { + margin: 5px; + } + + a { + display: block; + } + + h3 { + font-weight: bold; + font-size: 10pt; + padding: 0; + margin: 5px; + overflow: hidden; + text-overflow: ellipsis; + } + + &.has-labels h3 { + margin-top: 15px; + } + + .labels { + position: absolute; + top: -5px; + left: 10px; + + li { + padding: 0; + width: 15px; + height: 20px; + -webkit-border-radius: 3px; + font-size: 80%; + border: none transparent; + float: left; + + span { + display: none; + } + + &:hover span { + position: absolute; + padding: 3px; + background-color: inherit; + } + } + } + + &.create { + text-align: center; + padding: 10px; + margin: 10px; + border: none; + overflow: hidden; + -webkit-box-shadow: none; + + &:hover { + text-align: center; + opacity: 1; + } + + h3 { + width: 100%; + padding: 0; + margin: 0 0 1px; + + input { + width: 100%; + border: 0; + font-weight: bold; + font-size: 10pt; + margin: 0; + padding: 0; + border-bottom: 1px solid $color-primary-text; + border-radius: 0; + color: $color-primary-text; + background-color: transparent !important; + min-height: initial; + } + } + } +} + +.as-sortable-placeholder { + margin: 10px; + border: 1px dashed $color-darkgrey; +} + +.info { + padding-left: 5px; + padding-right: 5px; + display: inline-block; + opacity: 0.5; + + i { + margin-left: 2px; + } + + span { + margin-right: 2px; + } +} + +.due { + border-radius: 3px; + margin: -4px 4px -4px -4px; + padding: 0px 4px; + font-size: 90%; + opacity: 0.5; + display: flex; + align-items: center; + + .icon { + background-size: contain; + } + + &.overdue { + background-color: $color-error; + color: $color-primary-text; + + .icon-badge { + background-image: url('../img/calendar-white.svg'); + } + } + &.now { + background-color: $color-warning; + } + &.next { + background-color: $color-warning-light; + } + + span { + margin-left: 3px; + } +} + +/** + * App sidebar + */ +#app-sidebar { + right: -500px; + max-width: 100%; + width: 500px; + display:flex; + flex-direction: column; + + &.details-visible { + right: 0; + } +} + +#sidebar-header { + h2 { + font-size: 14pt; + padding: 9px 10px; + overflow: hidden; + margin-bottom: 0; + background-color: $color-lightgrey; + + input { + min-height: 0px; + margin: 0px; + } + } + + .icon-close { + position: absolute; + top: 0px; + right: 0px; + padding: 14px; + height: 44px; + width: 44px; + } +} + +#card-meta { // TODO: use .card-block instead? + height: 100%; + display: flex; + flex-direction: column; + padding: 15px; + + .duedate { + display: flex; + align-content: center; + min-height: 38px; + + .timepicker-input { + width: 50px; + border-radius: 0px 3px 3px 0px; + } + + .datepicker-input { + width: 85px; + margin: 3px 0px; + border-right: 0; + border-radius: 3px 0px 0px 3px; + } + + .icon { + opacity: 0.5; + &:hover { + opacity: 1; + } + } + } + + .select2-container { + margin: 0px; + } + + h3 { + border-bottom: 1px solid $color-lightgrey; + padding: 15px 0px 5px 0px; + + > div { + display: flex; + align-content: center; + justify-content: space-between; + } + } + + .save-indicator { + background-color: $color-success; + color: $color-primary-text; + border-radius: 3px; + float: right; + padding: 0px 10px; + font-size: 8pt !important; + display: none; + align-self: flex-end; + } + + .icon-help { + opacity: 0.5; + padding: 5px 15px; + display: inline; + } + + #card-dates { + font-size: 80%; + opacity: 0.5; + text-align: right; + } + + #card-tag-label { + padding-top: 0px !important; + margin-top: 0px; + } + + #card-description { + height: 100%; + display: flex; + flex-direction: column; + + > div { + height: 100%; + } + + textarea { + width: 100%; + height: 200px; + border: none; + margin: 0; + padding: 0; + } + + .container { + background-color: $color-main-background; + } + } +} + +#card-attachments { + ul { + margin: 5px; + } + + .details { + font-size: 8pt; + padding-left: 15px; + } +} + +#app-content { + overflow: hidden; + display: flex; + flex-direction: column; + + &.details-visible { + margin-right: 500px; + } +} + +.labels { + display: block; + overflow: hidden; + + li { + padding: 0px 0px 5px 0px; + -webkit-border-radius: 3px; + margin: 1px; + color: $color-primary-text; + min-width: 20px; + display: flex; + } +} + +/** + * Color selection + */ +.colorselect { + overflow: hidden; + border-radius:3px; + flex-direction: row; + display: flex; + + .color { + opacity: 0.7; + height: 100%; + flex-grow: 1; + border: none; + } + + .selected { + background-image: url('../../../core/img/actions/checkmark.svg'); + background-position: center center; + background-repeat: no-repeat; + opacity: 1; + &.selected { + background-image: url('../../../core/img/actions/checkmark-white.svg'); + } + } +} + +.labels { + .colorselect { + padding: 0; + clear: none; + overflow: visible; + + .color { + width: 26px; + height: 26px; + } + } + + .label-edit { + display: flex; + width: 100%; + + .colorselect { + margin: 0px 0px 0px 3px; + } + + input { + border-bottom: 1px solid $color-lightgrey; + padding: 5px 5px 4px 5px !important; + } + } +} + + +/** + * Board list main screen area + */ +#boardlist { + position: absolute; + overflow: auto; + width: 100%; + bottom: 0px; + top: 44px; + + thead td { + opacity: .5; + padding: 15px; + } + + td { + padding: 0 10px; + border-bottom: 1px solid $color-grey; + + .board-bullet { + width: 32px; + height: 32px; + border-radius: 50%; + cursor: pointer; + margin: 6px; + } + + form { + display: flex; + width: 100%; + } + + .colorselect { + flex-grow: 1; + + div { + min-width: 32px; + } + } + + input[type=text] { + flex-grow: 2; + } + + input[type=submit] { + width: 32px; + } + + .app-popover-menu-utils { + position: relative; + + button { + opacity: 0.5; + } + + &:hover button { + opacity: 1; + } + } + } + + .icon { + padding: 25px; + margin: 0 0 0 auto; + } + + tr.deleted td *, + tbody .board-create td { + opacity: 0.5; + } + + .popovermenu { + margin-top: 5px; + } + + .board-edit-controls { + display: flex; + } + + input { + margin: 0px; + } + + #assigned-users { + display: flex; + + .avatardiv { + margin: 6px; + } + } +} + +/** + * Board details + */ +#shareWithList { + list-style-type: none; + padding: 0 0 16px; + + li { + padding-top: 5px; + padding-bottom: 5px; + font-weight: bold; + white-space: normal; + display: flex; + align-items: center; + } + + .username { + padding-right: 8px; + padding-left: 8px; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + overflow: hidden; + vertical-align: middle; + } + + .icon-delete { + display: inline-block; + background-size: 16px 16px; + width: 16px; + height: 16px; + padding: 0; + margin-top: 5px; + } + + .shareOption { + margin-top: 4px; + } + + .avatardiv { + background-color: $color-lightgrey; + border-radius: 16px; + width: 32px; + height: 32px; + + .icon-group { + padding: 16px; + opacity: 0.5; + } + } +} + +#board-detail-labels { + ul li { + input { + margin: 0px; + padding: 5px; + min-height: 0px; + } + + .label-title { + width: 100%; + padding: 4px; + border: none; + border-radius: 0px 0px 5px 5px; + } + + a.icon { + padding: 5px; + opacity: 0.5; + &:hover { + opacity: 1; + } + } + } + + .color { + width: 28px; + height: 100%; + } +} + +.label-create { + width: 100%; + padding: 0px 56px 0px 0px !important; + + a { + margin: 0px; + } + + .icon { + margin-right: 10px; + } +} + +.tabHeaders { + clear: both; + overflow: hidden; + margin-bottom: 0; +} + +.tabsContainer { + margin-top: 15px; +} + +.ui-select-offscreen { + display: none; +} + +.ui-select-match-item { + padding: 0; + float: left !important; + display: block; + border-radius: 0px 0px 5px 5px !important; + + .select-label { + color: $color-primary-text; + padding: 6px 23px 6px 6px; + margin-right: -23px !important; + } + + .select2-search-choice-close { + z-index: 100; + position: relative; + display: inline-flex !important; + margin-right: 7px; + vertical-align: top; + } +} + +.select2-container-multi .select2-choices .select2-search-choice { + padding: 3px 0 !important; + border: 0 !important; + overflow: hidden; +} + +.ui-select-container[disabled] .ui-select-match-item { + margin-right: 0 !important; + + .select-label { + padding: 4px; + min-width: 26px !important; + height: 100%; + display: inline-block; + } +} + +.select2-search input { + width: 100% !important; +} + +.select2-result-label { + padding: 0px !important; + + span { + display: flex; + padding: 6px; + } +} + +/** + * Markdown rendering + */ +#markdown { + width: 100% !important; + + p { + margin-bottom: 15px; + } + + * { + white-space: normal; + word-wrap: break-word; + overflow-wrap: break-word; + } + + a { + opacity: 0.5; + text-decoration: underline; + } + + ol, + ul { + margin-left: 20px; + margin-bottom: 10px; + } + + ul { + list-style-type: disc; + } + + h1 { + font-size: 18px; + font-weight: 600; + margin-bottom: 5px; + } + + h2 { + font-size: 16px; + font-weight: 600; + } + + h3 { + font-size: 14px; + font-weight: 600; + } + + h4 { + font-size: 13px; + font-weight: 600; + } + + h6 { + font-size: 12px; + font-weight: 600; + } + + pre { + background-color: $color-lightgrey; + padding: 3px; + } +} + +/** + * Mobile optimizations + */ +@media (min-width: 481px) { + /* hide board actions on mobile */ + .board-header-controls { + display: flex; + + &.app-popover-menu-utils { + display: none; + } + } + + #innerBoard { + display: flex; + } + + .stack { + width: 320px; + min-width: 320px; + display: inline-block; + border-right: 1px solid $color-lightgrey; + margin-right: 10px; + padding-right: 10px; + + &:last-child { + border-right: 1px solid transparent; + } + + h2 button { + display: none; + } + } +} + +/** + * Custom icons + */ +.icon-deck { + background-image: url('../img/deck-dark.svg'); +} + +.icon-group { + background-image: url('../../../settings/img/users.svg'); +} + +.icon-help { + background-image: url('../../../settings/img/help.svg'); +} + +.icon-add-white { + background-image: url('../img/add-white.svg'); +} + +.icon-archive { + background-image: url('../img/archive.svg'); +} + +.icon-archive-white { + background-image: url('../img/archive-white.svg'); +} + +.icon-details { + background-image: url('../img/details.svg'); +} + +.icon-details-white { + background-image: url('../img/details-white.svg'); +} + +.icon-home { + background-image: url('../../../core/img/places/home.svg'); +} + +.icon-badge { + background-image: url('../../../core/img/places/calendar-dark.svg'); +} + +/** + * Hotfix for https://github.com/angular-ui/ui-select/issues/1652 + */ +.ui-select-dropdown.select2-drop-active { + opacity: 1 !important; +} diff --git a/js/package.json b/js/package.json index 1bd2af10c..5d30f57e1 100644 --- a/js/package.json +++ b/js/package.json @@ -16,7 +16,8 @@ "grunt-phpunit": "^0.3.6", "grunt-wrap": "^0.3.0", "jshint-stylish": "^2.2.1", - "karma": "^1.4.1" + "karma": "^1.4.1", + "node-sass": "^4.5.3" }, "scripts": { "test": "echo \"Warning: no test specified\" && exit 0" diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php index 33f3ecde9..3f5efdbf2 100644 --- a/templates/part.board.mainView.php +++ b/templates/part.board.mainView.php @@ -7,7 +7,7 @@
- +

@@ -63,11 +63,11 @@

- +
- + {{ c.duedate | relativeDateFilterString }}
diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php index a8c8afadf..ff694e236 100644 --- a/templates/part.boardlist.php +++ b/templates/part.boardlist.php @@ -1,7 +1,7 @@
- +
@@ -20,8 +20,8 @@ - +
{{ b.title }}
diff --git a/templates/part.card.php b/templates/part.card.php index 467e94926..67ebe73d6 100644 --- a/templates/part.card.php +++ b/templates/part.card.php @@ -5,7 +5,7 @@

{{ statusservice.text }}

{{card=cardservice.getCurrent();""}} -
+ - +

t('Description')); ?> - +
t('Saved')); ?>
- +