From c07f75ac8930cee1ef39d3baddd7df78e6e862fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Fri, 23 Jun 2017 10:27:09 +0200 Subject: [PATCH 1/5] Move to SCSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- .gitignore | 1 + Makefile | 5 ++++- css/{style.css => style.scss} | 0 js/package.json | 3 ++- 4 files changed, 7 insertions(+), 2 deletions(-) rename css/{style.css => style.scss} (100%) 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.scss similarity index 100% rename from css/style.css rename to css/style.scss 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" From c9d4eb0784f72b0574a82d50dbbd5dab6c4d586f Mon Sep 17 00:00:00 2001 From: Marin Treselj Date: Thu, 29 Jun 2017 15:35:42 +0200 Subject: [PATCH 2/5] Convert to SCSS and cleanup Signed-off-by: Marin Treselj --- css/style.scss | 1498 ++++++++++++++--------------- templates/part.board.mainView.php | 6 +- templates/part.boardlist.php | 2 +- templates/part.card.php | 10 +- 4 files changed, 740 insertions(+), 776 deletions(-) diff --git a/css/style.scss b/css/style.scss index cc06fd8da..9fb29754c 100644 --- a/css/style.scss +++ b/css/style.scss @@ -22,13 +22,33 @@ */ /** - * General styles + * 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, 20%); +$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 { @@ -41,15 +61,7 @@ input.input-inline { -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; @@ -58,68 +70,64 @@ button.button-inline:hover { .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-entry-menu { + ul { + flex-direction: row; + } } -#app-navigation .app-navigation-entry-edit .colorselect div{ - height: 32px; -} +#app-navigation { + .app-navigation-entry-edit { + height: auto; -#app-navigation .app-navigation-entry-edit form { - display: flex; -} + .colorselect div{ + height: 32px; + } + 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; -} + .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-entry-utils { + .app-navigation-entry-utils-menu-button { + display: block !important; // TODO: is this needed? + } -#app-navigation .app-navigation-entry-menu ul { - flex-direction: row; + .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: #fff; + background-color: $color-main-background; } #board { @@ -134,6 +142,12 @@ button.button-inline:hover { #innerBoard { padding: 10px; + + > .as-sortable-placeholder { + display: inline-block !important; + margin-top: 0; + margin-left: 0; + } } #controls { @@ -145,35 +159,33 @@ button.button-inline:hover { position: inherit; width: 100% !important; padding-left: 44px; -} -#controls .crumb, #controls a { - top: 12px; -} + .crumb, + #controls a { + top: 12px; + } -#controls > h1 { - white-space: nowrap; - padding: 7px; -} + > h1 { + white-space: nowrap; + padding: 7px; + } -#controls button { - height: inherit; -} + 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; -} + input[type='text'] { + padding: 6px; + 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; + .icon-home { // TODO: deprecate this + background-position: 8px center; + padding: 10px 24px 10px 14px; + } } #app-navigation-toggle { @@ -188,24 +200,24 @@ button.button-inline:hover { .board-header-controls { margin-left: auto; align-items: center; -} -.board-header-controls.app-popover-menu-utils { - display: flex; -} + &.app-popover-menu-utils { + display: flex; -.board-header-controls > button { - padding: 16px 20px; -} + #popover-controls { + display: flex; + align-items: center; + } -.board-header-controls.app-popover-menu-utils #popover-controls { - display: flex; - align-items: center; -} + .popovermenu { + margin-top: 35px; + margin-right: 6px; + } + } -.board-header-controls.app-popover-menu-utils .popovermenu { - margin-top: 35px; - margin-right: 6px; + > button { + padding: 16px 20px; + } } .filter-select { @@ -213,134 +225,134 @@ button.button-inline:hover { 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; + li { + padding: 3px; + overflow: hidden; + width: auto; + + span { + display: block; + float: left; + width: 20px; + height: 20px; + margin-right: 5px; + } + } } #stack-add { - background-color: rgba(240,240,240,.9); + background-color: $color-lightgrey; 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; -} + > form { + display: flex; + align-content: center; + } -#stack-add input:-moz-ui-invalid { - box-shadow:none; + input { + &:invalid, + &:-moz-submit-invalid, + &:-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; -} + 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; + } + } -.stack h2:hover button { - display: flex; + form { + width: 100%; + } } .card { - background-color: #ffffff; + background-color: $color-main-background; 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; -} + -webkit-box-shadow: 0 0 5px $color-darkgrey; -.card .card-controls .card-options { - opacity: 0.3; - position: absolute; - right: 10px; - top: 8px; -} + &.archived .card-upper { + opacity: 0.5; + } -.card .card-controls:hover .card-options { - opacity: 1; -} + .card-upper { + overflow: hidden; + position: relative; + padding: 5px; + } -.card .card-controls button { - padding: 0px; - margin-right: 0px; + .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 { @@ -354,129 +366,121 @@ button.button-inline:hover { 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; -} + &.hidden { + display: none; + } -.card.has-labels h3 { - margin-top: 15px; + ul { + display: flex !important; + flex-direction: column; + } } -.card .labels { - position: absolute; - top: -5px; - left: 10px; - -} +.card { + &:hover { + background-color: $color-lightgrey; + } + .card-assignees { + margin: 5px; + } -.card .labels li { - padding: 0; - width: 15px; - height: 20px; - -webkit-border-radius: 3px; - font-size: 80%; - border: none transparent; - float: left; -} + a { + display: block; + } -.card .labels li span { - display: none; -} + h3 { + font-weight: bold; + font-size: 10pt; + padding: 0; + margin: 5px; + overflow: hidden; + text-overflow: ellipsis; + } -.card .labels li:hover { + &.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; + } + } + } -.card .labels li: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 #aaa; -} -#innerBoard > .as-sortable-placeholder { - display: inline-block !important; - margin-top: 0; - margin-left: 0; + border: 1px dashed $color-darkgrey; } .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; -} + opacity: 0.5; -.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; -} + i { + margin-left: 2px; + } -.card-controls .icon-filetype-text { - margin-right: 10px; + span { + margin-right: 2px; + } } .due { @@ -484,288 +488,259 @@ button.button-inline:hover { margin: -4px 4px -4px -4px; padding: 0px 4px; font-size: 90%; - opacity: 0.7; + opacity: 0.5; 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; -} + .icon { + background-size: contain; + } -#card-tag-label { - padding-top: 0px !important; - margin-top: 0px; -} + &.overdue { + background-color: $color-error; + color: $color-primary-text; -#card-meta .duedate { - display: flex; - align-content: center; - min-height: 38px; -} + .icon-badge { + background-image: url('../img/calendar-white.svg'); + } + } + &.now { + background-color: $color-warning; + } + &.next { + background-color: $color-warning-light; + } -#card-meta .duedate .timepicker-input { - width: 50px; - border-radius: 0px 3px 3px 0px; + span { + margin-left: 3px; + } } -#card-meta .duedate .datepicker-input { - width: 85px; - margin: 3px 0px; - border-right: 0; - border-radius: 3px 0px 0px 3px; +/** + * App sidebar + */ +#app-sidebar { + right: -500px; + max-width: 100%; + width: 500px; + display:flex; + flex-direction: column; + + &.details-visible { + right: 0; + } } -#card-meta .duedate .icon { - opacity: 0.5; -} +#sidebar-header { + h2 { + font-size: 14pt; + padding: 9px 10px; + overflow: hidden; + margin-bottom: 0; + background-color: $color-lightgrey; -#card-meta .duedate .icon:hover { - opacity: 0.7; -} + input { + min-height: 0px; + margin: 0px; + } + } -#card-meta .select2-container { - margin: 0px; + .icon-close { + position: absolute; + top: 0px; + right: 0px; + padding: 14px; + height: 44px; + width: 44px; + } } -#card-description { +#card-meta { // TODO: use .card-block instead? height: 100%; display: flex; flex-direction: column; -} - -#card-meta h3 { - border-bottom: 1px solid #dbdbdb; - padding: 15px 0px 5px 0px; -} + padding: 15px; -#card-meta h3 > div { - display: flex; - align-content: center; - justify-content: space-between; -} + .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; + } + } + } -#card-description > div { - height: 100%; -} + .select2-container { + margin: 0px; + } -#card-description textarea { - width: 100%; - height: 200px; - border: none; - margin: 0; - padding: 0; -} + h3 { + border-bottom: 1px solid $color-lightgrey; + padding: 15px 0px 5px 0px; -#card-description .container { - background-color: white; -} + > div { + display: flex; + align-content: center; + justify-content: space-between; + } + } -#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; -} + .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; + } -.card-block { - padding: 15px; -} + .icon-help { + opacity: 0.5; + padding: 5px 15px; + display: inline; + } -#card-attachments ul { - margin: 5px; -} + #card-dates { + font-size: 80%; + opacity: 0.5; + text-align: right; + } -#card-attachments .details { - font-size: 8pt; - padding-left: 15px; -} + #card-tag-label { + padding-top: 0px !important; + margin-top: 0px; + } -#attachment-add button { - background-color: #eeeeee; - font-size: 9pt; + #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; + } + } } -#app-sidebar { - right: -500px; - max-width: 100%; - border-left: none; - width: 500px; - border-left: 1px solid #eeeeee; - display:flex; - flex-direction: column; -} +#card-attachments { + ul { + margin: 5px; + } -#app-sidebar.details-visible { - right: 0; + .details { + font-size: 8pt; + padding-left: 15px; + } } #app-content { overflow: hidden; display: flex; flex-direction: column; -} -#app-content.details-visible { - margin-right: 500px; + &.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; + 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; -} - -.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; -} + .color { + opacity: 0.7; + height: 100%; + flex-grow: 1; + border: none; + } -.colorselect .dark.selected { - background-image: url(../../../core/img/actions/checkmark-white.svg); + .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; -} +.labels { + .colorselect { + padding: 0; + clear: none; + overflow: visible; + + .color { + width: 26px; + height: 26px; + } + } -.labels .colorselect .color { - width: 26px; - height: 26px; -} + .label-edit { + display: flex; + width: 100%; -.labels .label-edit { - display: flex; - width: 100%; -} + .colorselect { + margin: 0px 0px 0px 3px; + } -.labels .label-edit .colorselect{ - margin: 0px 0px 0px 3px; + input { + border-bottom: 1px solid $color-lightgrey; + padding: 5px 5px 4px 5px !important; + } + } } -.labels .label-edit input { - border-bottom: 1px solid #333333; - padding: 5px 5px 4px 5px !important; -} /** * Board list main screen area @@ -776,184 +751,181 @@ button.button-inline:hover { 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; -} + thead td { + opacity: .5; + } -#boardlist td input[type=submit] { - width: 32px; -} + td { + padding: 0 10px; + border-bottom: 1px solid $color-lightgrey; + + .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; + } + } + } -#boardlist td .app-popover-menu-utils { - float: right; - width: 30px; - display: inline; - position: relative; -} + .icon { + padding: 22px; + margin: 0 0 0 auto; + } -#boardlist td .app-popover-menu-utils button { - opacity: 0.3; -} + tr.deleted td *, + tbody .board-create td { + opacity: 0.5; + } -#boardlist td .app-popover-menu-utils:hover button { - opacity: 0.7; -} + .popovermenu { + margin-top: 5px; + } + .board-edit-controls { + display: flex; + } -#boardlist .popovermenu { - margin-top: 5px; -} + input { + margin: 0px; + } -#boardlist .board-edit-controls { - float: right; - display: flex; -} + #assigned-users { + display: flex; -#boardlist input { - margin: 0px; + .avatardiv { + margin: 6px; + } + } } /** * 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; -} + 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; -} + .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; -} + .icon-delete { + display: inline-block; + background-size: 16px 16px; + width: 16px; + height: 16px; + padding: 0; + margin-top: 5px; + } -.shareOption { - margin-top: 4px; -} + .shareOption { + margin-top: 4px; + } -#board-detail-labels ul li input { - margin: 0px; - padding: 5px; - min-height: 0px; -} + .avatardiv { + background-color: $color-lightgrey; + border-radius: 16px; + width: 32px; + height: 32px; -#board-detail-labels ul li .label-title { - width: 100%; - padding: 4px; - border: none; - border-radius: 0px 0px 5px 5px; + .icon-group { + padding: 16px; + opacity: 0.5; + } + } } -#board-detail-labels ul li a.icon { - padding: 5px; - opacity: 0.3; -} +#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; + } + } + } -#board-detail-labels ul li a.icon:hover { - opacity: 0.7; + .color { + width: 28px; + height: 100%; + } } .label-create { width: 100%; padding: 0px 56px 0px 0px !important; -} -.label-create a { - margin: 0px; -} - -.label-create .icon { - margin-right: 10px; -} + a { + margin: 0px; + } -#board-detail-labels .color { - width: 28px; - height: 100%; + .icon { + margin-right: 10px; + } } .tabHeaders { @@ -966,39 +938,29 @@ button.button-inline:hover { 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; -} + .select-label { + color: $color-primary-text; + padding: 6px 23px 6px 6px; + margin-right: -23px !important; + } -.ui-select-choices-group .choose-label { - padding: 6px; + .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 { @@ -1007,133 +969,133 @@ button.button-inline:hover { 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; + + .select-label { + padding: 4px; + min-width: 26px !important; + height: 100%; + display: inline-block; + } } .select2-search input { - width:100% !important; + width: 100% !important; } .select2-result-label { padding: 0px !important; -} -.select2-result-label span { - display: flex; + span { + display: flex; + padding: 6px; + } } /** - * Mobile optimizations + * Markdown rendering */ +#markdown { + width: 100% !important; -@media (min-width: 481px) { - /* hide board actions on mobile */ - .board-header-controls { - display: flex; + p { + margin-bottom: 15px; } - .board-header-controls.app-popover-menu-utils { - display: none; + * { + white-space: normal; + word-wrap: break-word; + overflow-wrap: break-word; } - #innerBoard { - display: flex; - } - .stack { - width: 320px; - min-width: 320px; - display: inline-block; - border-right: 1px solid #eee; - margin-right: 10px; - padding-right: 10px; + a { + opacity: 0.5; + text-decoration: underline; } - .stack:last-child { - border-right: 1px solid transparent; + ol, + ul { + margin-left: 20px; + margin-bottom: 10px; } - .stack h2 button { - display: none; + ul { + list-style-type: disc; } -} - -/** - * Markdown rendering - */ -#markdown { - width: 100% !important; -} + h1 { + font-size: 18px; + font-weight: 600; + margin-bottom: 5px; + } -#markdown p { - margin-bottom: 15px; -} + h2 { + font-size: 16px; + font-weight: 600; + } -#markdown * { - white-space: normal; - word-wrap: break-word; - overflow-wrap: break-word; -} + h3 { + font-size: 14px; + font-weight: 600; + } -#markdown a { - color: #666666; - text-decoration: underline; -} + h4 { + font-size: 13px; + font-weight: 600; + } -#markdown ol, #markdown ul { - margin-left: 20px; - margin-bottom: 10px; -} + h6 { + font-size: 12px; + font-weight: 600; + } -#markdown ul { - list-style-type: disc; + pre { + background-color: $color-lightgrey; + padding: 3px; + } } -#markdown h1 { - font-size: 18px; - font-weight: 600; - margin-bottom: 5px; -} +/** + * Mobile optimizations + */ +@media (min-width: 481px) { + /* hide board actions on mobile */ + .board-header-controls { + display: flex; -#markdown h2 { - font-size: 16px; - font-weight: 600; -} + &.app-popover-menu-utils { + display: none; + } + } -#markdown h3 { - font-size: 14px; - font-weight: 600; -} + #innerBoard { + display: flex; + } -#markdown h4 { - font-size: 13px; - font-weight: 600; -} + .stack { + width: 320px; + min-width: 320px; + display: inline-block; + border-right: 1px solid $color-lightgrey; + margin-right: 10px; + padding-right: 10px; -#markdown h6 { - font-size: 12px; - font-weight: 600; -} + &:last-child { + border-right: 1px solid transparent; + } -#markdown pre { - background-color: #eeeeee; - padding: 3px; + h2 button { + display: none; + } + } } /** * Custom icons */ - .icon-deck { - background-image: url(../img/deck-dark.svg); + background-image: url('../img/deck-dark.svg'); } .icon-group { @@ -1142,8 +1104,6 @@ button.button-inline:hover { .icon-help { background-image: url('../../../settings/img/help.svg'); - padding: 11px 20px; - vertical-align: text-bottom; } .icon-add-white { @@ -1170,6 +1130,10 @@ button.button-inline:hover { 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 */ 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..d80c13ca2 100644 --- a/templates/part.boardlist.php +++ b/templates/part.boardlist.php @@ -1,7 +1,7 @@
- +
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')); ?>
- +