konrad
cac8b09263
All checks were successful
continuous-integration/drone/push Build is passing
Prevent dropping a task onto a bucket which has its limit reached Fix closing the dropdown Add notice to show the limit Add input to change kanban bucket limit Add menu item to save bucket limit Fix parsing dates from the api Co-authored-by: kolaente <k@knt.li> Reviewed-on: #234
273 lines
5.5 KiB
SCSS
273 lines
5.5 KiB
SCSS
$bucket-background: #e8f0f5;
|
|
$task-background: $white;
|
|
$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
|
|
$bucket-width: 300px;
|
|
|
|
$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
|
|
|
|
.app-content.list\.kanban {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.kanban {
|
|
|
|
display: flex;
|
|
align-items: flex-start;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
height: calc(#{$crazy-height-calculation});
|
|
margin: 0 -1.5rem;
|
|
padding: 0 1.5em;
|
|
|
|
.bucket {
|
|
|
|
background-color: $bucket-background;
|
|
border-radius: $radius;
|
|
position: relative;
|
|
|
|
flex: 0 0 $bucket-width;
|
|
margin: 0 1em 0 0;
|
|
max-height: 100%;
|
|
min-height: 20px;
|
|
max-width: $bucket-width;
|
|
|
|
.tasks {
|
|
max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2em - #{$button-height} - 1em);
|
|
overflow: auto;
|
|
|
|
.task {
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
-webkit-touch-callout: none; // iOS Safari
|
|
-webkit-user-select: none; // Safari
|
|
-khtml-user-select: none; // Konqueror HTML
|
|
-moz-user-select: none; // Old versions of Firefox
|
|
-ms-user-select: none; // Internet Explorer/Edge
|
|
user-select: none; // Non-prefixed version, currently supported by Chrome, Opera and Firefox
|
|
|
|
transition: $ease-out;
|
|
cursor: pointer;
|
|
box-shadow: 2px 2px 2px darken($white, 12%);
|
|
display: block;
|
|
|
|
font-size: .9em;
|
|
padding: .5em;
|
|
margin: .5em;
|
|
border-radius: $radius;
|
|
background: $task-background;
|
|
|
|
&.loader-container.is-loading:after {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
top: calc(50% - .75em);
|
|
left: calc(50% - .75em);
|
|
border-width: 2px;
|
|
}
|
|
|
|
h3 {
|
|
font-family: $family-sans-serif;
|
|
font-size: .85rem;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.due-date {
|
|
float: right;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
margin-right: 2px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
&.overdue {
|
|
color: $red;
|
|
}
|
|
}
|
|
|
|
.label-wrapper .tag {
|
|
margin: .5em .5em 0 0;
|
|
}
|
|
|
|
.footer {
|
|
background: transparent;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.items {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> :not(:last-child) {
|
|
margin-right: .5em;
|
|
}
|
|
}
|
|
|
|
.assignees {
|
|
display: flex;
|
|
|
|
.user {
|
|
display: inline;
|
|
margin: 0 -12px 0 0;
|
|
|
|
img {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
svg {
|
|
margin: 4px 0 4px 4px;
|
|
fill: $dark;
|
|
|
|
&:not(.svg-inline--fa) {
|
|
width: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer .icon,
|
|
.due-date,
|
|
.priority-label {
|
|
background: darken($task-background, 5%);
|
|
border-radius: $radius;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.priority-label {
|
|
margin: .5em 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
.task-id {
|
|
color: $grey;
|
|
font-size: .8rem;
|
|
}
|
|
|
|
.is-done {
|
|
margin: 0;
|
|
font-size: .8em;
|
|
padding: .25em .5em;
|
|
}
|
|
|
|
&.is-moving {
|
|
opacity: .5;
|
|
}
|
|
|
|
span {
|
|
width: auto;
|
|
}
|
|
|
|
&.has-light-text {
|
|
color: $white;
|
|
|
|
.task-id {
|
|
color: $grey-lighter;
|
|
}
|
|
|
|
.footer .icon,
|
|
.due-date,
|
|
.priority-label {
|
|
background: darken($task-background, 80%);
|
|
}
|
|
|
|
.footer {
|
|
.icon svg {
|
|
fill: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.drop-preview {
|
|
border-radius: $radius;
|
|
margin: 0 .5em .5em;
|
|
background: transparent;
|
|
border: 3px dashed darken($bucket-background, 5%);
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
&.new-bucket {
|
|
// Because of reasons, this button ignores the margin we gave it to the right.
|
|
// To make it still look like it has some, we modify the container to have a padding of 1rem,
|
|
// which is the same as the margin it should have. Then we make the container itself bigger
|
|
// to hide the fact we just made the button smaller.
|
|
min-width: calc(#{$bucket-width} + 1rem);
|
|
background: transparent;
|
|
padding-right: 1rem;
|
|
|
|
.button {
|
|
background: $bucket-background;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
a.dropdown-item {
|
|
padding-right: 1rem;
|
|
|
|
.input {
|
|
height: 2.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bucket-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: .5em;
|
|
|
|
.limit {
|
|
padding-left: .5rem;
|
|
font-weight: bold;
|
|
|
|
&.is-max {
|
|
color: $red;
|
|
}
|
|
}
|
|
|
|
.dropdown-trigger {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.title.input {
|
|
height: auto;
|
|
padding: .4em .5em;
|
|
}
|
|
}
|
|
|
|
.bucket-footer {
|
|
padding: .5em;
|
|
|
|
.button {
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
background-color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ghost-task {
|
|
transition: transform 0.18s ease;
|
|
transform: rotateZ(3deg)
|
|
}
|
|
|
|
.ghost-task-drop {
|
|
transition: transform 0.18s ease-in-out;
|
|
transform: rotateZ(0deg)
|
|
}
|