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);
+    }
   }
 }