@asd20/ui 3.2.805 → 3.2.807

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.805",
+  "version": "3.2.807",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/templates/Asd20ArticleDigestTemplate/index.vue

@@ -132,6 +132,7 @@
                   transparent
                   centered
                   opposite
+                  :disabled="counter === 1"
                 />
                 <p>
                   Page {{ Math.ceil(counter2 / numberToShow) }} of
@@ -147,6 +148,7 @@
                   horizontal
                   transparent
                   centered
+                  :disabled="cards.length < counter2"
                 />
               </div>
             </div>
@@ -187,6 +189,7 @@
                     transparent
                     centered
                     opposite
+                    :disabled="counter === 1"
                   />
                 </a>
                 <p>
@@ -204,6 +207,7 @@
                     horizontal
                     transparent
                     centered
+                    :disabled="cards.length < counter2"
                   />
                 </a>
               </div>
@@ -427,71 +431,90 @@ export default {
     //   }
     // }
   }
-  .feed-title {
-    margin: space(1) 0 0 space(1);
-  }
-  .asd20-card {
-    margin-bottom: space(0.5);
-    // &__date-time {
-    //   display: none;
-    // }
-    // &__description {
-    //   display: none;
-    // }
+  .notification-group--inline {
+    margin: space(2) space(1) space(1) space(1);
   }
-  .article-pagination {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: space(1) space(0.25) space(0) space(0.25);
-    flex-direction: column;
-    p {
-      margin: 0;
+  .article-digest {
+    .feed-title {
+      margin: space(1) 0 0 space(1);
     }
-    .page-selector {
+    .asd20-card {
+      margin: space(1) space(1) space(2) space(1);
+      // &__date-time {
+      //   display: none;
+      // }
+      // &__description {
+      //   display: none;
+      // }
+    }
+
+    .article-pagination {
       display: flex;
       align-items: center;
-      .prev-next {
+      justify-content: space-between;
+      margin: space(1) space(0.25) space(0) space(0.25);
+      flex-direction: column;
+      p {
+        margin: 0;
+      }
+      .page-selector {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        a {
-          text-decoration: none !important;
-        }
-        .asd20-button {
-          padding: 0;
-          > .asd20-button__label {
-            margin: 0;
+        .prev-next {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          a {
+            text-decoration: none !important;
+          }
+          .asd20-button {
+            padding: 0;
+            > .asd20-button__label {
+              margin: 0;
+              padding: 0.5rem;
+            }
+          }
+          p {
+            margin: 0 space(0.25);
           }
-        }
-        p {
-          margin: 0;
         }
       }
     }
-  }
-  .notification-group--inline {
-    margin: space(2) space(1) space(1) space(1);
-  }
-  .search-header,
-  .result-count {
-    margin: space(0) space(1) space(1) space(1);
-  }
+    .search-header,
+    .result-count {
+      margin: space(0) space(1) space(1) space(1);
+    }
 
-  .asd20-search-field {
-    border: 2px solid var(--color__accent);
-    margin: space(0.5) 0;
-    .asd20-icon {
-      margin-left: space(0.5);
+    .asd20-search-field {
+      margin: space(0.5) 0;
+      .asd20-icon {
+        margin-left: space(0.5);
+      }
+      input {
+        border: 2px solid var(--color__accent);
+        font-family: var(--website-typography__font-family-headlines);
+        font-size: 1rem;
+      }
     }
-  }
-  .asd20-multiselect-input {
-    .multiselect__placeholder {
-      padding-left: 1rem;
+    .asd20-multiselect-input {
+      line-height: 1;
+      .multiselect__placeholder {
+        padding-left: space(0.5);
+        font-size: 1rem;
+      }
     }
   }
 }
 
+@media (min-width: 768px) {
+  .asd20-template-article-digest {
+    .article-digest {
+      .asd20-card {
+        margin: space(1) space(1) space(2) space(1);
+      }
+    }
+  }
+}
 @media (min-width: 1024px) {
   .asd20-template-article-digest {
     @include template-desktop;
@@ -508,62 +531,61 @@ export default {
       //   }
       // }
     }
-    .feed-title {
-      margin-left: 0;
+    .notification-group--inline {
+      margin: space(2) space(3) space(1) space(3);
+      flex-basis: 100%;
     }
-
     .asd20-page-content {
-      margin-top: space(1);
+      margin: 0 space(1);
       display: flex;
       justify-content: space-between;
-      align-items: stretch;
       flex-wrap: wrap;
     }
-    .notification-group--inline {
-      margin: space(2) space(3) space(1) space(3);
-      flex-basis: 100%;
-    }
-    .prev-next {
-      margin: space(1) 0;
-    }
-    .primary-messaging-section {
-      max-width: 100vw;
-    }
-    .feed-items {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-gap: space(1);
-      margin-bottom: space(1);
-      .asd20-card {
-        margin-bottom: 0;
+
+    .article-digest {
+      // flex-basis: 100%;
+      margin: space(0) space(3) space(1) space(3);
+      .feed-title {
+        margin-left: 0;
       }
-    }
-    .search-header,
-    .result-count {
-      margin: space(0) space(0) space(1) space(0);
-    }
-    .search-header {
-      display: flex;
-      flex-basis: 100%;
-      justify-content: space-between;
-      .asd20-search-field {
-        border: none;
-        flex-basis: 50%;
-        .asd20-icon {
-          margin-left: 0;
+      .prev-next {
+        margin: space(1) 0;
+      }
+      .primary-messaging-section {
+        max-width: 100vw;
+      }
+      .feed-items {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: space(1);
+        margin-bottom: space(1);
+        .asd20-card {
+          margin: 0;
         }
       }
-      .asd20-multiselect-input {
-        margin-bottom: 0;
-        flex-basis: 50%;
+      .search-header,
+      .result-count {
+        margin: space(0) space(0) space(1) space(0);
+      }
+      .search-header {
+        display: flex;
+        flex-basis: 100%;
+        justify-content: space-between;
+        .asd20-search-field {
+          margin: space(0.5) space(0.5);
+          flex-basis: 50%;
+          .asd20-icon {
+            margin-left: 0;
+          }
+        }
+        .asd20-multiselect-input {
+          margin-bottom: 0;
+          flex-basis: 50%;
+        }
+      }
+      .article-pagination {
+        flex-direction: row;
       }
-    }
-    .article-pagination {
-      flex-direction: row;
-    }
-    .article-digest {
-      // flex-basis: 100%;
-      margin: space(1) space(3) space(1) space(3);
     }
   }
 }

package/src/components/templates/Asd20ArticleListTemplate/index.vue

@@ -170,6 +170,7 @@
                     transparent
                     centered
                     opposite
+                    :disabled="counter === 1"
                   />
                   <p>
                     Page {{ Math.ceil(counter2 / numberToShow) }} of
@@ -185,6 +186,7 @@
                     horizontal
                     transparent
                     centered
+                    :disabled="cards.length < counter2"
                   />
                 </div>
               </div>
@@ -224,6 +226,7 @@
                       transparent
                       centered
                       opposite
+                      :disabled="counter === 1"
                     />
                   </a>
                   <p>
@@ -241,6 +244,7 @@
                       horizontal
                       transparent
                       centered
+                      :disabled="cards.length < counter2"
                     />
                   </a>
                 </div>
@@ -499,10 +503,11 @@ export default {
           padding: space(0.25);
           > .asd20-button__label {
             margin: 0;
+            padding: 0.5rem;
           }
         }
         p {
-          margin: 0;
+          margin: 0 space(0.25);
         }
       }
     }
@@ -516,21 +521,27 @@ export default {
     // --website-icon__fill-color: #436c74;
     margin: 0 space(1);
     .asd20-card {
-      margin-bottom: space(-0.5);
+      // margin-bottom: space(-0.5);
       .asd20-card__content:hover {
         background: rgba(200, 200, 200, 0.2);
       }
     }
     .asd20-search-field {
-      border: 2px solid var(--color__accent);
       margin: space(0.5) 0;
       .asd20-icon {
         margin-left: space(0.5);
       }
+      input {
+        border: 2px solid var(--color__accent);
+        font-family: var(--website-typography__font-family-headlines);
+        font-size: 1rem;
+      }
     }
     .asd20-multiselect-input {
+      line-height: 1;
       .multiselect__placeholder {
-        padding-left: 1rem;
+        padding-left: space(0.5);
+        font-size: 1rem;
       }
     }
     .asd20-card__content {
@@ -589,7 +600,7 @@ export default {
       flex-basis: 100%;
       justify-content: space-between;
       .asd20-search-field {
-        border: none;
+        margin: space(0.5) space(0.5);
         flex-basis: 50%;
         .asd20-icon {
           margin-left: 0;