Gantt Charts (#29)

src/styles/_variables.scss

@@ -17,6 +17,7 @@ $dropdown-content-shadow: none;
 $navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
 $bulmaswatch-import-font: false !default;
 $light-background: #F1F5F8;
+$transition-duration: 100ms;
 
 $vikunja-font: 'Quicksand', sans-serif;
 $vikunja-light-text: darken(#fff, 10%);

src/styles/fancycheckbox.scss

@@ -5,6 +5,10 @@
   padding-right: 5px;
   padding-top: 3px;
 
+  &.is-block {
+    margin: .5em .2em;
+  }
+
   .check {
     cursor: pointer;
     position: relative;
@@ -18,6 +22,11 @@
       stroke: $primary;
     }
 
+    span {
+      font-size: 0.8em;
+      vertical-align: top;
+    }
+
     svg {
       position: relative;
       z-index: 1;

src/styles/gantt.scss

@@ -0,0 +1,215 @@
+$gantt-border: 1px solid $grey-lighter;
+$gantt-vertical-border-color: lighten($grey, 45);
+
+.gantt-chart {
+  padding: 5px 0;
+  overflow-x: auto;
+
+  .dates {
+    display: flex;
+    text-align: center;
+    border-bottom: $gantt-border;
+
+    .months {
+      display: flex;
+
+      .month {
+        padding: 0.5em 0 0;
+        border-right: $gantt-border;
+        font-family: $vikunja-font;
+        font-weight: bold;
+
+        &:last-child {
+          border-right: none;
+        }
+
+        .days {
+          display: flex;
+
+          .day {
+            padding: 0.5em 0;
+            font-weight: normal;
+
+            &.today {
+              background: $primary;
+              color: $white;
+              border-radius: 5px 5px 0 0;
+              font-weight: bold;
+            }
+
+            .theday {
+              padding: 0 .5em;
+              width: 100%;
+              display: block;
+            }
+
+            .weekday {
+              font-size: 0.8em;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .tasks {
+    max-width: 100%;
+    margin: 0;
+
+    .row {
+      height: 45px;
+      /*background: repeating-linear-gradient(90deg, $gantt-vertical-border-color, $gantt-vertical-border-color 1px, lighten($grey, 50) 1px, lighten($grey, 50) 35px);
+
+      &:nth-child(even) {
+        background: repeating-linear-gradient(90deg, $gantt-vertical-border-color, $gantt-vertical-border-color 1px, lighten($grey, 55) 1px, lighten($grey, 55) 35px);
+      }*/
+
+      .task {
+        display: inline-block;
+        border: 2px solid $primary;
+        background: lighten($primary, 40);
+        font-size: 0.85em;
+        margin: 0.5em;
+        border-radius: 6px;
+        padding: 0.25em 0.5em;
+        cursor: grab;
+        position: relative;
+
+        -webkit-touch-callout: none; // iOS Safari
+        -webkit-user-select: none; // Safari
+        -khtml-user-select: none; // Konqueror HTML
+        -moz-user-select: none; // Firefox
+        -ms-user-select: none; // Internet Explorer/Edge
+        user-select: none; // Non-prefixed version, currently  supported by Chrome and Opera
+
+        &.is-current-edit {
+          border-color: $orange;
+          background: lighten($orange, 40);
+        }
+
+        &.done span {
+          position: relative;
+
+          &:after {
+            content: '';
+            border-top: 1px solid $dark;
+            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 .5em;
+          vertical-align: bottom;
+        }
+
+        .edit-toggle {
+          float: right;
+          cursor: pointer;
+          margin-right: 4px;
+        }
+
+        &.nodate {
+          border: 2px dashed $grey-light;
+          background: lighten($grey-light, 40);
+        }
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+    }
+  }
+
+  .taskedit {
+    position: fixed;
+    min-height: 0;
+    top: 10vh;
+    right: 10vw;
+
+    .card-content {
+      max-height: 60vh;
+      overflow-y: auto;
+    }
+  }
+
+  .add-new-task {
+    padding: 1em .7em .4em .7em;
+    display: flex;
+    max-width: 450px;
+
+    .input {
+      margin-right: .7em;
+      font-size: .8em;
+    }
+
+    .button {
+      font-size: .68em;
+    }
+  }
+}
+
+.gantt-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .range-picker {
+    display: flex;
+    margin-bottom: 1em;
+
+    .field {
+      margin: 0 0 0 .5em;
+      max-width: 100px;
+
+      &, .input {
+        font-size: .8em;
+      }
+
+      .select {
+        height: auto;
+      }
+
+      select {
+        height: auto;
+        font-size: 0.75em;
+      }
+
+      .label {
+        font-size: .9em;
+        padding-left: .4em;
+      }
+    }
+  }
+}
+
+.vdr.active::before {
+  display: none;
+}

src/styles/general.scss

@@ -194,13 +194,6 @@
     }
   }
 
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity 150ms;
-  }
-  .fade-enter, .fade-leave-to {
-    opacity: 0;
-  }
-
   .dropdown-trigger .button {
     background: none;
 

src/styles/scrollbars.scss

@@ -0,0 +1,14 @@
+//
+//::-webkit-scrollbar {
+//  width: 8px;
+//}
+//
+//::-webkit-scrollbar-track {
+//  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+//  border-radius: 10px;
+//}
+//
+//::-webkit-scrollbar-thumb {
+//  border-radius: 10px;
+//  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+//}

src/styles/tasks.scss

@@ -55,23 +55,23 @@
         }
       }
 
-      .high-priority{
-        color: $red;
-
-        .icon {
-          vertical-align: middle;
-        }
-
-        &.not-so-high {
-          color: $orange;
-        }
-      }
-
       .tag {
         margin: 0 0.5em;
       }
     }
 
+    .high-priority{
+      color: $red;
+
+      .icon {
+        vertical-align: middle;
+      }
+
+      &.not-so-high {
+        color: $orange;
+      }
+    }
+
     input[type="checkbox"] {
       vertical-align: middle;
     }

src/styles/theme.scss

@@ -240,4 +240,44 @@ h1,h2,h3,h4,h5,h6{
 
 .navbar.main-theme {
   background: $light-background;
-}
+}
+
+.switch-view {
+  background: $white;
+  display: inline-block;
+  margin: 1em 0;
+  border-radius: $radius;
+  font-size: .8em;
+  box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
+
+  a {
+    padding: .5em;
+    display: inline-block;
+    margin: .4em;
+    border-radius: $radius;
+
+    -webkit-transition: all 100ms;
+    -moz-transition: all 100ms;
+    -ms-transition: all 100ms;
+    -o-transition: all 100ms;
+    transition: all 100ms;
+
+    &:not(:last-child) {
+      margin-right: 0;
+    }
+
+    &.is-active, &:hover {
+      color: $white;
+    }
+
+    &.is-active {
+      background: $primary;
+      font-weight: bold;
+      box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
+    }
+
+    &:hover {
+      background: lighten($primary, 5);
+    }
+  }
+}

src/styles/transitions.scss

@@ -0,0 +1,13 @@
+.fade-enter-active, .fade-leave-active {
+  transition: opacity $transition-duration;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.width-enter-active, .width-leave-active {
+  transition: width $transition-duration;
+}
+.width-enter, .width-leave-to {
+  width: 0;
+}