forked from vikunja/frontend
konrad
fb3cf94cba
Fix setting the new reminder component to null after adding a new date Add "close on change" event which only fires if the component closed and the value actually changed Hide the "today" option after 21:00 Add "confirm" button to close the component Use disabled in reminders Add a disabled property to the datepicker Cleanup workarounds for flatpickr Use the new datepicker for end dates Use the new datepicker for start date Use the new datepicker for due dates Mobile styling Format Sync flatpickr when clicking on choose a date Make sure to only hide the popup when not clicked something inside of it Make flatpickr dates work Use datepicker component for reminders Merge branch 'master' into feature/better-reminders Fix bottom padding of inline flatpickr Set time Add method to calculate the neares time Move time helpers in separate folder Remove separate flatpickr date Cleanup Set the flatpickr date when setting changing the date Better formatting of the chosen date Bubble Set date when choosing one Fix test Show correct weekday in preview Change hover background color Make label to show if selected date is null configurable Use a different icon for weekend Ignore test files when linting Add tests to dron Move day interval calculation to separate file and test it Add next date calculation Add basic date picker component Co-authored-by: kolaente <k@knt.li> Reviewed-on: vikunja/frontend#308 Co-Authored-By: konrad <konrad@kola-entertainments.de> Co-Committed-By: konrad <konrad@kola-entertainments.de>
247 lines
4.3 KiB
SCSS
247 lines
4.3 KiB
SCSS
.task-view {
|
|
// This is a workaround to hide the llama background from the top on the task detail page
|
|
margin-top: -1.5em;
|
|
padding: 1em;
|
|
background-color: $light-background;
|
|
|
|
.subtitle {
|
|
color: $grey;
|
|
|
|
a {
|
|
color: $grey-dark;
|
|
}
|
|
}
|
|
|
|
.has-top-border {
|
|
border-top: 1px solid lighten($grey, 35%);
|
|
padding-top: .5em;
|
|
}
|
|
|
|
h3 .button {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.icon.is-grey {
|
|
color: lighten($grey, 5%);
|
|
}
|
|
|
|
.heading {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-transform: none;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-bottom: 0;
|
|
|
|
&.input {
|
|
// 1.8rem is the font-size, 1.125 is the line-height, .3em padding everywhere, 1px border around the whole thing.
|
|
min-height: calc(1.8rem * 1.125 + .6em + 2px);
|
|
}
|
|
}
|
|
|
|
.title.task-id {
|
|
color: lighten($grey, 25%);
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.date-input {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
a.remove {
|
|
color: $red;
|
|
vertical-align: middle;
|
|
padding-left: .5em;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.datepicker {
|
|
width: 100%;
|
|
|
|
a.show {
|
|
color: $text;
|
|
padding: .25rem .5rem;
|
|
transition: background-color $transition;
|
|
border-radius: $radius;
|
|
display: block;
|
|
margin: .1rem 0;
|
|
|
|
&:hover {
|
|
background: $white;
|
|
}
|
|
}
|
|
|
|
&.disabled a.show:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
table {
|
|
table-layout: fixed;
|
|
|
|
td {
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
padding-bottom: 0.75em;
|
|
flex-flow: row wrap;
|
|
|
|
.detail-title {
|
|
display: block;
|
|
color: lighten($grey, 15%);
|
|
}
|
|
|
|
.none {
|
|
font-style: italic;
|
|
}
|
|
|
|
// Break after the 2nd element
|
|
.column:nth-child(2n) {
|
|
page-break-after: always; // CSS 2.1 syntax
|
|
break-after: always; // New syntax
|
|
}
|
|
|
|
&.labels-list, .assignees {
|
|
.multiselect__tags {
|
|
padding: 3px 0 0 3px;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.multiselect__input, .multiselect__single {
|
|
width: auto !important;
|
|
margin: 0;
|
|
padding: .35em !important;
|
|
position: relative !important;
|
|
background: transparent;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.multiselect__placeholder {
|
|
display: none;
|
|
}
|
|
|
|
.multiselect__select {
|
|
// We may need to enable this since it may also be responsable for showing the loading spinner
|
|
display: none;
|
|
}
|
|
|
|
.multiselect__content-wrapper {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
&.description .editor {
|
|
|
|
&.is-pulled-up {
|
|
margin-top: -3.5rem;
|
|
}
|
|
|
|
.tabs {
|
|
margin-bottom: 0;
|
|
|
|
ul {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.details, .heading {
|
|
.input:not(.has-defaults),
|
|
.textarea,
|
|
.select:not(.has-defaults) select {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: all $transition-duration;
|
|
|
|
&::placeholder {
|
|
color: $text-light;
|
|
opacity: 1;
|
|
font-style: italic;
|
|
}
|
|
|
|
&:not(:disabled) {
|
|
&:hover, &:active {
|
|
background: $input-background-color;
|
|
border-color: $input-border-color;
|
|
cursor: text;
|
|
}
|
|
|
|
&:focus {
|
|
background: $input-background-color;
|
|
border-color: $input-focus-border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select:not(.has-defaults):after {
|
|
opacity: 0;
|
|
}
|
|
|
|
.select:not(.has-defaults):hover:after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.attachments {
|
|
margin-bottom: 0;
|
|
|
|
table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
a.button {
|
|
width: 100%;
|
|
margin-bottom: .5em;
|
|
justify-content: left;
|
|
}
|
|
}
|
|
|
|
.created {
|
|
font-size: .75rem;
|
|
color: $grey;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.task-view-container {
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
.is-done {
|
|
background: $green;
|
|
color: $white;
|
|
padding: .5em;
|
|
font-size: 1.5em;
|
|
margin-left: .5em;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.modal-container .task-view {
|
|
border-radius: $radius;
|
|
padding: 1em;
|
|
color: $text;
|
|
|
|
.task {
|
|
max-width: 500px;
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
border-radius: 0;
|
|
padding-top: 2rem;
|
|
}
|
|
}
|