Show last visited list on home page

src/styles/components/list.scss

@@ -163,3 +163,140 @@ $filter-container-top-link-share-list: -47px;
 .is-archived .notification.is-warning {
   margin-bottom: 1rem;
 }
+
+$lists-per-row: 5;
+$list-height: 150px;
+$list-spacing: 1rem;
+
+.list-card {
+  cursor: pointer;
+  width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+  height: $list-height;
+  background: $white;
+  margin: 0 $list-spacing $list-spacing 0;
+  padding: 1rem;
+  border-radius: $radius;
+  box-shadow: $shadow-sm;
+  transition: box-shadow $transition;
+
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  &:hover {
+    box-shadow: $shadow-md;
+  }
+
+  &:active,
+  &:focus,
+  &:focus:not(:active) {
+    box-shadow: $shadow-xs !important;
+  }
+
+  @media screen and (min-width: $widescreen) {
+    &:nth-child(#{$lists-per-row}n) {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (max-width: $widescreen) and (min-width: $tablet) {
+    $lists-per-row: 3;
+    & {
+      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+    }
+
+    &:nth-child(#{$lists-per-row}n) {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (max-width: $tablet) {
+    $lists-per-row: 2;
+    & {
+      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+    }
+
+    &:nth-child(#{$lists-per-row}n) {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (max-width: $mobile) {
+    $lists-per-row: 1;
+    & {
+      width: 100%;
+      margin-right: 0;
+    }
+  }
+
+  .is-archived-container {
+    width: 100%;
+    text-align: right;
+
+    .is-archived {
+      font-size: .75rem;
+      float: left;
+    }
+  }
+
+  .title {
+    align-self: flex-end;
+    font-family: $vikunja-font;
+    font-weight: 400;
+    font-size: 1.5rem;
+    color: $text;
+    width: 100%;
+    margin-bottom: 0;
+    max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  &.has-light-text .title {
+    color: $light;
+  }
+
+  &.has-background {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .title {
+      text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
+      color: $white;
+    }
+  }
+
+  .favorite {
+    transition: opacity $transition, color $transition;
+    opacity: 0;
+
+    &:hover {
+      color: $orange;
+    }
+
+    &.is-archived {
+      display: none;
+    }
+
+    &.is-favorite {
+      display: inline-block;
+      opacity: 1;
+      color: $orange;
+    }
+  }
+
+  &:hover .favorite {
+    opacity: 1;
+  }
+}
+
+.list-cards-wrapper-2-rows {
+  flex-wrap: wrap;
+  max-height: calc(#{$list-height * 2} + #{$list-spacing * 2});
+  overflow: hidden;
+}

src/styles/components/namespaces.scss

@@ -1,5 +1,3 @@
-$lists-per-row: 5;
-
 .namespaces-list {
   .button.new-namespace {
     float: right;
@@ -44,133 +42,6 @@ $lists-per-row: 5;
     .lists {
       display: flex;
       flex-flow: row wrap;
-
-      .list {
-        cursor: pointer;
-        width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-        height: 150px;
-        background: $white;
-        margin: 0 1rem 1rem 0;
-        padding: 1rem;
-        border-radius: $radius;
-        box-shadow: $shadow-sm;
-        transition: box-shadow $transition;
-
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-
-        &:hover {
-          box-shadow: $shadow-md;
-        }
-
-        &:active,
-        &:focus,
-        &:focus:not(:active) {
-          box-shadow: $shadow-xs !important;
-        }
-
-        @media screen and (min-width: $widescreen) {
-          &:nth-child(#{$lists-per-row}n) {
-            margin-right: 0;
-          }
-        }
-
-        @media screen and (max-width: $widescreen) and (min-width: $tablet) {
-          $lists-per-row: 3;
-          & {
-            width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-          }
-
-          &:nth-child(#{$lists-per-row}n) {
-            margin-right: 0;
-          }
-        }
-
-        @media screen and (max-width: $tablet) {
-          $lists-per-row: 2;
-          & {
-            width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-          }
-
-          &:nth-child(#{$lists-per-row}n) {
-            margin-right: 0;
-          }
-        }
-
-        @media screen and (max-width: $mobile) {
-          $lists-per-row: 1;
-          & {
-            width: 100%;
-            margin-right: 0;
-          }
-        }
-
-        .is-archived-container {
-          width: 100%;
-          text-align: right;
-
-          .is-archived {
-            font-size: .75rem;
-            float: left;
-          }
-        }
-
-        .title {
-          align-self: flex-end;
-          font-family: $vikunja-font;
-          font-weight: 400;
-          font-size: 1.5rem;
-          color: $text;
-          width: 100%;
-          margin-bottom: 0;
-          max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
-          overflow: hidden;
-          text-overflow: ellipsis;
-
-          display: -webkit-box;
-          -webkit-line-clamp: 3;
-          -webkit-box-orient: vertical;
-        }
-
-        &.has-light-text .title {
-          color: $light;
-        }
-
-        &.has-background {
-          background-size: cover;
-          background-repeat: no-repeat;
-          background-position: center;
-
-          .title {
-            text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
-            color: $white;
-          }
-        }
-
-        .favorite {
-          transition: opacity $transition, color $transition;
-          opacity: 0;
-
-          &:hover {
-            color: $orange;
-          }
-
-          &.is-archived {
-            display: none;
-          }
-
-          &.is-favorite {
-            display: inline-block;
-            opacity: 1;
-            color: $orange;
-          }
-        }
-
-        &:hover .favorite {
-          opacity: 1;
-        }
-      }
     }
   }
 }