local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: merge gantt.scss with component styles

Browse source
This commit is contained in:
Dominik Pschenitschni 2021-10-18 14:20:23 +02:00
parent 3cb68c945f
commit ba1942e757
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
4 changed files with 260 additions and 253 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

195
src/components/tasks/gantt-component.vue
View file

@ -445,3 +445,198 @@ export default {
},
}
</script>
<style lang="scss" scoped>
$gantt-border: 1px solid $grey-200;
$gantt-vertical-border-color: $grey-100;
.gantt-chart {
overflow-x: auto;
border-top: 1px solid $grey-200;
.dates {
display: flex;
text-align: center;
.months {
display: flex;
.month {
padding: 0.5rem 0 0;
border-right: $gantt-border;
font-family: $vikunja-font;
font-weight: bold;
&:last-child {
border-right: none;
}
.days {
display: flex;
.day {
padding: 0.5rem 0;
font-weight: normal;
&.today {
background: $primary;
color: $white;
border-radius: 5px 5px 0 0;
font-weight: bold;
}
.theday {
padding: 0 .5rem;
width: 100%;
display: block;
}
.weekday {
font-size: 0.8rem;
}
}
}
}
}
}
.tasks {
max-width: unset !important;
margin: 0;
border-top: $gantt-border;
.row {
height: 45px;
.task {
display: inline-block;
border: 2px solid $primary;
font-size: 0.85rem;
margin: 0.5rem;
border-radius: 6px;
padding: 0.25rem 0.5rem;
cursor: grab;
position: relative;
height: 31px !important;
-webkit-touch-callout: none; // iOS Safari
user-select: none; // Non-prefixed version
&.is-current-edit {
border-color: $orange !important;
}
&.has-light-text {
color: $light;
&.done span:after {
border-top: 1px solid $light;
}
.edit-toggle {
color: $light;
}
}
&.has-dark-text {
color: $text;
&.done span:after {
border-top: 1px solid $dark;
}
.edit-toggle {
color: $text;
}
}
&.done span {
position: relative;
&::after {
content: '';
position: absolute;
right: 0;
left: 0;
top: 57%;
}
}
span:not(.high-priority) {
max-width: calc(100% - 20px);
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
&.has-high-priority {
max-width: calc(100% - 90px);
}
&.has-not-so-high-priority {
max-width: calc(100% - 70px);
}
&.has-super-high-priority {
max-width: calc(100% - 111px);
}
&.icon {
width: 10px;
text-align: center;
}
}
.high-priority {
margin: 0 0 0 .5rem;
vertical-align: bottom;
}
.edit-toggle {
float: right;
cursor: pointer;
margin-right: 4px;
}
&.nodate {
border: 2px dashed $grey-300;
background: $grey-100;
}
&:active {
cursor: grabbing;
}
}
}
}
.taskedit {
position: fixed;
min-height: 0;
top: 10vh;
right: 10vw;
z-index: 5;
// FIXME: should be an option of the card, e.g. overflow
::v-deep.card-content {
max-height: 60vh;
overflow-y: auto;
}
}
.add-new-task {
padding: 1rem .7rem .4rem .7rem;
display: flex;
max-width: 450px;
.input {
margin-right: .7rem;
font-size: .8rem;
}
.button {
font-size: .68rem;
}
}
}
</style>

1
src/styles/components/_index.scss
View file

@ -1,4 +1,3 @@
@import "gantt";
@import "tooltip";
@import "labels";
@import "list";

251
src/styles/components/gantt.scss
View file

@ -1,251 +0,0 @@
$gantt-border: 1px solid $grey-200;
$gantt-vertical-border-color: $grey-100;
.gantt-chart-container {
padding-bottom: 1rem;
}
.gantt-chart {
overflow-x: auto;
border-top: 1px solid $grey-200;
.dates {
display: flex;
text-align: center;
.months {
display: flex;
.month {
padding: 0.5rem 0 0;
border-right: $gantt-border;
font-family: $vikunja-font;
font-weight: bold;
&:last-child {
border-right: none;
}
.days {
display: flex;
.day {
padding: 0.5rem 0;
font-weight: normal;
&.today {
background: $primary;
color: $white;
border-radius: 5px 5px 0 0;
font-weight: bold;
}
.theday {
padding: 0 .5rem;
width: 100%;
display: block;
}
.weekday {
font-size: 0.8rem;
}
}
}
}
}
}
.tasks {
max-width: unset !important;
margin: 0;
border-top: $gantt-border;
.row {
height: 45px;
.task {
display: inline-block;
border: 2px solid $primary;
font-size: 0.85rem;
margin: 0.5rem;
border-radius: 6px;
padding: 0.25rem 0.5rem;
cursor: grab;
position: relative;
height: 31px !important;
user-select: none;
&.is-current-edit {
border-color: $orange !important;
}
&.has-light-text {
color: $light;
&.done span:after {
border-top: 1px solid $light;
}
.edit-toggle {
color: $light;
}
}
&.has-dark-text {
color: $text;
&.done span:after {
border-top: 1px solid $dark;
}
.edit-toggle {
color: $text;
}
}
&.done span {
position: relative;
&:after {
content: '';
position: absolute;
right: 0;
left: 0;
top: 57%;
}
}
span:not(.high-priority) {
max-width: calc(100% - 20px);
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
&.has-high-priority {
max-width: calc(100% - 90px);
}
&.has-not-so-high-priority {
max-width: calc(100% - 70px);
}
&.has-super-high-priority {
max-width: calc(100% - 111px);
}
&.icon {
width: 10px;
text-align: center;
}
}
.high-priority {
margin: 0 0 0 .5rem;
vertical-align: bottom;
}
.edit-toggle {
float: right;
cursor: pointer;
margin-right: 4px;
}
&.nodate {
border: 2px dashed $grey-300;
background: $grey-100;
}
&:active {
cursor: grabbing;
}
}
}
}
.taskedit {
position: fixed;
min-height: 0;
top: 10vh;
right: 10vw;
z-index: 5;
.card-content {
max-height: 60vh;
overflow-y: auto;
}
}
.add-new-task {
padding: 1rem .7rem .4rem .7rem;
display: flex;
max-width: 450px;
.input {
margin-right: .7rem;
font-size: .8rem;
}
.button {
font-size: .68rem;
}
}
}
.gantt-options {
display: flex;
justify-content: space-between;
align-items: center;
@media screen and (max-width: $tablet) {
flex-direction: column;
}
.range-picker {
display: flex;
margin-bottom: 1rem;
width: 50%;
@media screen and (max-width: $tablet) {
flex-direction: column;
width: 100%;
}
.field {
margin-bottom: 0;
width: 33%;
&:not(:last-child) {
padding-right: .5rem;
}
@media screen and (max-width: $tablet) {
width: 100%;
max-width: 100%;
margin-top: .5rem;
padding-right: 0 !important;
}
&, .input {
font-size: .8rem;
}
.select, .select select {
height: auto;
width: 100%;
font-size: .8rem;
}
.label {
font-size: .9rem;
padding-left: .4rem;
}
}
}
}
.vdr.active::before {
display: none;
}

66
src/views/list/views/Gantt.vue
View file

@ -103,4 +103,68 @@ export default {
},
},
}
</script>
</script>
<style lang="scss">
.gantt-chart-container {
padding-bottom: 1rem;
}
.gantt-options {
display: flex;
justify-content: space-between;
align-items: center;
@media screen and (max-width: $tablet) {
flex-direction: column;
}
.range-picker {
display: flex;
margin-bottom: 1rem;
width: 50%;
@media screen and (max-width: $tablet) {
flex-direction: column;
width: 100%;
}
.field {
margin-bottom: 0;
width: 33%;
&:not(:last-child) {
padding-right: .5rem;
}
@media screen and (max-width: $tablet) {
width: 100%;
max-width: 100%;
margin-top: .5rem;
padding-right: 0 !important;
}
&, .input {
font-size: .8rem;
}
.select, .select select {
height: auto;
width: 100%;
font-size: .8rem;
}
.label {
font-size: .9rem;
padding-left: .4rem;
}
}
}
}
// vue-draggable overwrites
.vdr.active::before {
display: none;
}
</style>