-
-
-
+
+
+ {{ __(title) }}
+
+
+
+
+
+ + {{ __("Add " + doctype) }}
-
-
-
-
-
-
diff --git a/frappe/public/less/kanban.less b/frappe/public/less/kanban.less
index 1878e39421..56eab7485a 100644
--- a/frappe/public/less/kanban.less
+++ b/frappe/public/less/kanban.less
@@ -1,195 +1,195 @@
-@import "variables.less";
+// @import "variables.less";
-.kanban {
- min-height: ~"calc(100vh - 252px)";
- background-color: @light-bg;
- display: flex;
- overflow: auto;
+// .kanban {
+// min-height: ~"calc(100vh - 252px)";
+// background-color: @light-bg;
+// display: flex;
+// overflow: auto;
- .kanban-column {
- flex: 0 0 230px;
- max-width: 230px;
- background-color: @light-bg;
- border-right: 1px solid @border-color;
- padding: 15px;
+// .kanban-column {
+// flex: 0 0 230px;
+// max-width: 230px;
+// background-color: @light-bg;
+// border-right: 1px solid @border-color;
+// padding: 15px;
- &.add-new-column {
- order: 1;
- border-right: none;
- }
- }
+// &.add-new-column {
+// order: 1;
+// border-right: none;
+// }
+// }
- .kanban-column-title {
- margin-top: 0;
- margin-bottom: 15px;
- position: relative;
- font-weight: bold;
- font-size: 12px;
+// .kanban-column-title {
+// margin-top: 0;
+// margin-bottom: 15px;
+// position: relative;
+// font-weight: bold;
+// font-size: 12px;
- .column-options {
+// .column-options {
- .button-group {
- display: flex;
- padding: 12px 14px;
+// .button-group {
+// display: flex;
+// padding: 12px 14px;
- .btn.indicator {
- flex: 1;
- }
- }
+// .btn.indicator {
+// flex: 1;
+// }
+// }
- .indicator::before {
- margin: 0;
- }
- }
+// .indicator::before {
+// margin: 0;
+// }
+// }
- &:hover {
- cursor: pointer;
- }
- }
+// &:hover {
+// cursor: pointer;
+// }
+// }
- .sortable-ghost > .kanban-card:not(.add-card) {
- background: #ccc !important;
- color: transparent;
+// .sortable-ghost > .kanban-card:not(.add-card) {
+// background: #ccc !important;
+// color: transparent;
- * {
- background: transparent !important;
- color: transparent !important;
- }
+// * {
+// background: transparent !important;
+// color: transparent !important;
+// }
- }
+// }
- .kanban-card {
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,0.30);
- border-radius: 2px;
- padding: 6px 6px 6px 8px;
- margin-top: 10px;
+// .kanban-card {
+// background-color: #fff;
+// box-shadow: 0 1px 3px rgba(0,0,0,0.30);
+// border-radius: 2px;
+// padding: 6px 6px 6px 8px;
+// margin-top: 10px;
- &.add-card {
- background-color: transparent;
- box-shadow: none;
- color: @text-muted;
+// &.add-card {
+// background-color: transparent;
+// box-shadow: none;
+// color: @text-muted;
- &:hover {
- box-shadow: none;
- color: @text-color;
- cursor: pointer;
- }
+// &:hover {
+// box-shadow: none;
+// color: @text-color;
+// cursor: pointer;
+// }
- .octicon-plus {
- top: -1px;
- font-size: 1em;
- margin-right: 5px;
- position:relative;
- }
- }
- }
+// .octicon-plus {
+// top: -1px;
+// font-size: 1em;
+// margin-right: 5px;
+// position:relative;
+// }
+// }
+// }
- .kanban-card-wrapper {
- position: relative;
+// .kanban-card-wrapper {
+// position: relative;
- .kanban-card-redirect {
- display: block;
+// .kanban-card-redirect {
+// display: block;
- &:hover,
- &:focus {
- text-decoration: none;
- }
- }
- }
+// &:hover,
+// &:focus {
+// text-decoration: none;
+// }
+// }
+// }
- .kanban-card:hover, .new-card-area, .edit-card-area {
- box-shadow: 0 2px 4px rgba(0,0,0,0.30);
- }
+// .kanban-card:hover, .new-card-area, .edit-card-area {
+// box-shadow: 0 2px 4px rgba(0,0,0,0.30);
+// }
- .kanban-card-wrapper:hover {
- cursor: pointer;
- text-decoration: none;
+// .kanban-card-wrapper:hover {
+// cursor: pointer;
+// text-decoration: none;
- .kanban-card-edit {
- opacity: 1;
- }
- }
+// .kanban-card-edit {
+// opacity: 1;
+// }
+// }
- .kanban-card-title {
- max-width: 90%;
- font-size: 12px;
- }
+// .kanban-card-title {
+// max-width: 90%;
+// font-size: 12px;
+// }
- .kanban-card-edit {
- position: absolute;
- right: 10px;
- opacity: 0;
- transition: 0.2s ease;
- }
+// .kanban-card-edit {
+// position: absolute;
+// right: 10px;
+// opacity: 0;
+// transition: 0.2s ease;
+// }
- .new-card-area, .edit-card-area {
- margin-bottom: 10px;
+// .new-card-area, .edit-card-area {
+// margin-bottom: 10px;
- textarea {
- font-size: 12px;
- resize: none;
- border: none;
- background: none;
- overflow: hidden;
- word-wrap: break-word;
- width: 100%;
+// textarea {
+// font-size: 12px;
+// resize: none;
+// border: none;
+// background: none;
+// overflow: hidden;
+// word-wrap: break-word;
+// width: 100%;
- &:focus {
- outline: none;
- }
- }
- }
+// &:focus {
+// outline: none;
+// }
+// }
+// }
- .compose-column-form {
- .new-column-title {
- background: transparent;
- border: none;
- outline: none;
- }
- }
+// .compose-column-form {
+// .new-column-title {
+// background: transparent;
+// border: none;
+// outline: none;
+// }
+// }
- .add-new-column a:hover {
- color: @text-color !important;
- }
+// .add-new-column a:hover {
+// color: @text-color !important;
+// }
- .kanban-card-meta {
- margin-top: 8px;
- text-align: right;
+// .kanban-card-meta {
+// margin-top: 8px;
+// text-align: right;
- .avatar {
- width: 16px;
- height: 16px;
- }
- }
+// .avatar {
+// width: 16px;
+// height: 16px;
+// }
+// }
- .kanban-empty-state {
- width: 100%;
- line-height: 400px;
- }
-}
+// .kanban-empty-state {
+// width: 100%;
+// line-height: 400px;
+// }
+// }
-body[data-route*="Kanban"] {
- .modal .add-assignment:hover {
- // border-color: @text-color;
- i {
- color: @text-color !important;
- }
- }
-}
+// body[data-route*="Kanban"] {
+// .modal .add-assignment:hover {
+// // border-color: @text-color;
+// i {
+// color: @text-color !important;
+// }
+// }
+// }
-.edit-card-title {
- .h4 {
- margin-top: 5px;
- margin-bottom: 5px;
- }
- span:hover {
- background-color: @light-yellow;
- cursor: pointer;
- }
- input {
- border: none;
- outline: none;
- width: 100%;
- }
-}
\ No newline at end of file
+// .edit-card-title {
+// .h4 {
+// margin-top: 5px;
+// margin-bottom: 5px;
+// }
+// span:hover {
+// background-color: @light-yellow;
+// cursor: pointer;
+// }
+// input {
+// border: none;
+// outline: none;
+// width: 100%;
+// }
+// }
\ No newline at end of file
diff --git a/frappe/public/scss/kanban.scss b/frappe/public/scss/kanban.scss
new file mode 100644
index 0000000000..34a65dc30c
--- /dev/null
+++ b/frappe/public/scss/kanban.scss
@@ -0,0 +1,229 @@
+.kanban {
+ min-height: #{"calc(100vh - 252px)"};
+ // background-color: @light-bg;
+ display: flex;
+ overflow: auto;
+
+ .kanban-column {
+ flex: 0 0 290px;
+ max-width: 290px;
+ border-right: 1px solid $border-color;
+ padding: 15px;
+ border-radius: $border-radius;
+
+ &.add-new-column {
+ order: 1;
+ border-right: none;
+ background-color: var(--grey-50);
+ }
+ }
+
+ .kanban-column-header {
+ margin-top: 0;
+ margin-bottom: 15px;
+ position: relative;
+ font-weight: 500;
+ font-size: 12px;
+ display: flex;
+ justify-content: space-between;
+ // align-items: center;
+ .indicator-pill {
+ padding: 2px 8px;
+ width: 20px;
+ height: 20px;
+
+ &:before{
+ margin-right: 0px;
+ }
+ }
+
+ .column-options {
+
+ .button-group {
+ display: flex;
+ padding: 8px;
+
+ div.indicator-pill {
+ margin: 0 5px;
+ }
+
+ .btn.indicator {
+ flex: 1;
+ }
+ }
+
+ .indicator::before {
+ margin: 0;
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ .kanban-column-title {
+ font-size: $font-size-lg;
+ color: var(--grey-900);
+ display: flex;
+ align-items: center;
+ font-weight: normal;
+
+ // margin-left: 10px;
+ .kanban-title {
+ margin-left: 10px;
+ }
+ }
+
+ .sortable-ghost > .kanban-card:not(.add-card) {
+ background: #ccc !important;
+ color: transparent;
+
+ * {
+ background: transparent !important;
+ color: transparent !important;
+ }
+
+ }
+
+ .kanban-card {
+ background-color: #fff;
+ background: #FFFFFF;
+ box-shadow: 0px 0px 2px rgba(17, 43, 66, 0.16), 0px 1px 5px rgba(17, 43, 66, 0.1);
+ border-radius: 8px;
+ padding: 10px 14px;
+ margin-top: 10px;
+ width: 260px;
+ min-height: 100px;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ }
+
+ .add-card {
+ justify-content: center;
+ display: flex;
+ align-items: center;
+ color: var(--grey-700);
+ background-color: var(--grey-100);
+ box-shadow: none;
+ height: 28px;
+ border-radius: 8px;
+ &:hover {
+ box-shadow: none;
+ color: $text-color;
+ cursor: pointer;
+ }
+
+ .octicon-plus {
+ top: -1px;
+ font-size: 1em;
+ margin-right: 5px;
+ position:relative;
+ }
+ }
+
+ .kanban-card-wrapper {
+ position: relative;
+
+ .kanban-card-redirect {
+ display: block;
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
+ }
+ }
+
+ .kanban-card:hover, .new-card-area, .edit-card-area {
+ box-shadow: 0 2px 4px rgba(0,0,0,0.30);
+ }
+
+ .kanban-card-wrapper:hover {
+ cursor: pointer;
+ text-decoration: none;
+
+ .kanban-card-edit {
+ opacity: 1;
+ }
+ }
+
+ .kanban-card-title {
+ max-width: 90%;
+ font-size: $font-size-base;
+ }
+
+ .kanban-card-edit {
+ position: absolute;
+ right: 10px;
+ opacity: 0;
+ transition: 0.2s ease;
+ }
+
+ .new-card-area, .edit-card-area {
+ margin-bottom: 10px;
+
+ textarea {
+ font-size: 12px;
+ resize: none;
+ border: none;
+ background: none;
+ overflow: hidden;
+ word-wrap: break-word;
+ width: 100%;
+
+ &:focus {
+ outline: none;
+ }
+ }
+ }
+
+ .compose-column-form {
+ .new-column-title {
+ background: transparent;
+ border: none;
+ outline: none;
+ }
+ }
+
+ .add-new-column a:hover {
+ color: $text-color !important;
+ }
+
+ .kanban-card-meta {
+ .kanban-assignments {
+ float: right;
+ }
+ }
+
+ .kanban-empty-state {
+ width: 100%;
+ line-height: 400px;
+ }
+}
+
+body[data-route*="Kanban"] {
+ .modal .add-assignment:hover {
+ // border-color: @text-color;
+ i {
+ color: $text-color !important;
+ }
+ }
+}
+
+.edit-card-title {
+ .h4 {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ }
+ span:hover {
+ // background-color: @light-yellow;
+ cursor: pointer;
+ }
+ input {
+ border: none;
+ outline: none;
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/frappe/public/scss/main.scss b/frappe/public/scss/main.scss
index 0a8ca1d7ab..f2ed13539f 100644
--- a/frappe/public/scss/main.scss
+++ b/frappe/public/scss/main.scss
@@ -21,6 +21,7 @@
@import "report";
@import "frappe-datatable";
@import "image-view";
+@import "kanban";
@import "frappe/public/css/font-awesome";
@import "multilevel-dropdown";