Move list edit/namespace to separate pages and in a menu (#397)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/397
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/styles/components/base/card.scss

@@ -14,6 +14,11 @@
     border-bottom: 1px solid $grey-200;
     border-radius: $radius $radius 0 0;
   }
+
+  .modal-card-foot {
+    background: $grey-50;
+    border-top: 0;
+  }
 }
 
 .box, .card {

src/styles/components/kanban.scss

@@ -250,10 +250,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
       }
     }
 
-    .dropdown-trigger {
-      cursor: pointer;
-    }
-
     .title.input {
       height: auto;
       padding: .4rem .5rem;
@@ -261,6 +257,11 @@ $filter-container-height: '1rem - #{$switch-view-height}';
     }
   }
 
+  .dropdown-trigger {
+    cursor: pointer;
+    padding: .5rem;
+  }
+
   .bucket-footer {
     padding: .5rem;
 

src/styles/components/list-backgrounds.scss

@@ -77,7 +77,7 @@
   }
 
   .is-load-more-button {
-    margin: 0 auto;
+    margin: 1rem auto 0 !important;
     display: block;
     width: 200px;
   }

src/styles/components/list.scss

@@ -8,24 +8,6 @@
   .content {
     padding: 0;
   }
-
-  .table {
-    border-top: 1px solid $grey-100;
-    border-radius: 4px;
-    overflow: hidden;
-
-    td {
-      vertical-align: middle;
-    }
-
-    td.type, td.actions {
-      width: 250px;
-    }
-
-    td.actions {
-      text-align: right;
-    }
-  }
 }
 
 .task-add {
@@ -51,11 +33,12 @@
     margin: 0;
   }
 
-  .icon {
+  .dropdown-trigger {
     color: $grey-400;
     margin-left: 1rem;
     height: 1rem;
     width: 1rem;
+    cursor: pointer;
   }
 }
 
@@ -63,6 +46,10 @@
   padding-bottom: 1rem;
 }
 
+$filter-container-top-default: -59px;
+$filter-container-top-link-share-gantt: -138px;
+$filter-container-top-link-share-list: -47px;
+
 .filter-container {
   text-align: right;
   width: 100%;
@@ -70,7 +57,7 @@
   max-width: 180px;
   position: absolute;
   right: 1.5rem;
-  margin-top: -59px;
+  margin-top: $filter-container-top-default;
   z-index: 4;
 
   .items {
@@ -146,20 +133,42 @@
   }
 }
 
+.list-namespace-title {
+  color: $grey-500;
+}
+
 .link-share-container .gantt-chart-container .filter-container,
 .gantt-chart-container .filter-container {
-  margin-top: calc(-138px - 2rem);
+  right: 0;
+  margin-top: calc(#{$filter-container-top-link-share-gantt} - 2rem);
 }
 
 .link-share-container .list-view .filter-container {
-  margin-top: -47px;
+  margin-top: $filter-container-top-link-share-list;
 }
 
 .link-share-container .filter-container {
   right: 9rem;
-  margin-top: -59px;
+  margin-top: $filter-container-top-default;
 }
 
-.list-namespace-title {
-  color: $grey-500;
+.is-archived {
+  $notification-height: 1.25rem + 1.25rem + 1.5rem + 1.5rem;
+
+  .filter-container {
+    margin-top: calc(#{$filter-container-top-default} - #{$notification-height});
+  }
+
+  .link-share-container .gantt-chart-container .filter-container,
+  .gantt-chart-container .filter-container {
+    margin-top: calc(#{$filter-container-top-link-share-gantt} - 2rem - #{$notification-height});
+  }
+  
+  .link-share-container .list-view .filter-container {
+    margin-top: calc(#{$filter-container-top-link-share-list} - #{$notification-height});
+  }
+  
+  .link-share-container .filter-container {
+    margin-top: calc(#{$filter-container-top-default} - #{$notification-height});
+  }
 }

src/styles/components/modal.scss

@@ -39,6 +39,12 @@
       transform: translate(-50%, -50%);
       text-align: center;
 
+      @media screen and (max-width: $tablet) {
+        margin: 0;
+        top: 25%;
+        transform: translate(-50%, -25%);
+      }
+
       .header {
         font-size: 2rem;
         font-weight: 700;
@@ -56,6 +62,11 @@
       color: $white;
       font-size: 2rem;
     }
+
+    .is-wide {
+      max-width: $desktop;
+      width: calc(100% - 2rem);
+    }
   }
 }
 

src/styles/theme/content.scss

@@ -64,3 +64,17 @@
 .underline-none {
   text-decoration: none !important;
 }
+
+.table.has-actions {
+  border-top: 1px solid $grey-100;
+  border-radius: 4px;
+  overflow: hidden;
+
+  td {
+    vertical-align: middle;
+  }
+
+  td.actions {
+    text-align: right;
+  }
+}

src/styles/theme/form.scss

@@ -36,6 +36,11 @@
 
 .field.has-addons .button {
   height: 2.5rem;
+  margin-left: 0 !important;
+}
+
+.field.has-addons .select select {
+  margin-right: 0;
 }
 
 .input,

src/styles/theme/navigation.scss

@@ -179,13 +179,14 @@
           }
         }
 
-        .actions {
-          flex: 0 0 auto;
+        a:not(.dropdown-item) {
+          color: $vikunja-nav-color;
+          padding: 0 .25rem;
+        }
 
-          a {
-            color: $vikunja-nav-color;
-            padding: 0 .25rem;
-          }
+        .dropdown-trigger {
+          padding: .5rem;
+          cursor: pointer;
         }
       }
 
@@ -223,15 +224,36 @@
         &.can-be-hidden {
           transition: all $transition;
           height: 0;
-          overflow: hidden;
+          //overflow: hidden;
           opacity: 0;
         }
 
         li {
           height: 44px;
+          display: flex;
+          align-items: center;
+
+          .dropdown-trigger {
+            opacity: 0;
+            padding: .5rem;
+            cursor: pointer;
+            transition: $transition;
+          }
+
+          &:hover {
+            background: $white;
+
+            .dropdown-trigger {
+              opacity: 1;
+            }
+          }
         }
 
-        span.list-menu-link, a {
+        a:hover {
+          background: transparent;
+        }
+
+        span.list-menu-link, li > a {
           padding: 0.75rem .5rem 0.75rem $navbar-padding * 1.5;
           transition: all 0.2s ease;
 
@@ -261,10 +283,8 @@
           }
 
           &:hover {
-            background: $white;
             border-left: $vikunja-nav-selected-width solid $primary;
           }
-
         }
       }
 
@@ -302,7 +322,7 @@
           font-family: $vikunja-font;
         }
 
-        span.list-menu-link, a {
+        span.list-menu-link, li > a {
           padding-left: 2rem;
           display: inline-block;
         }
@@ -342,12 +362,6 @@
       box-shadow: none !important;
     }
   }
-
-  .dropdown-menu {
-    .dropdown-content {
-      box-shadow: $shadow-md;
-    }
-  }
 }
 
 .menu-hide-button, .menu-show-button {

src/styles/theme/theme.scss

@@ -72,11 +72,26 @@ button.table {
   margin-bottom: 0 !important;
 }
 
-.dropdown-item.is-disabled {
-  cursor: not-allowed;
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: left !important;
 
-  &:hover {
-    background-color: transparent;
+  .icon {
+    padding-right: .5rem;
+    color: $grey-300 !important;
+  }
+
+  &.has-text-danger .icon {
+    color: $danger !important;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent;
+    }
   }
 }
 
@@ -120,3 +135,9 @@ button.table {
   border-radius: 100%;
   margin-right: 4px;
 }
+
+.dropdown-menu {
+  .dropdown-content {
+    box-shadow: $shadow-md;
+  }
+}

src/styles/theme/variables/colors.scss

@@ -1,3 +1,4 @@
+$grey-50: #F9FAFB;
 $grey-100: #f3f4f6;
 $grey-200: #E5E7EB;
 $grey-300: #D1D5DB;