Version 1.0 (#26)

Issues :

* [x] Pouvoir partager sa collection #1
* [x] Exporter sa collection #2
* [x] Pouvoir visualiser le détail d'un album #3
* [x] Pouvoir visualiser les médias d'un album #5
* [x] Avoir un titre distinct par page #29
* [x] Avoir des statistiques avec Matomo #30
* [x] Avoir un logo pour les pages d'erreurs #32

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/26

sass/500.scss

@@ -0,0 +1,22 @@
+.body-500 {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    font-weight: 400;
+    font-size: larger;
+    line-height: 200%;
+
+    text-align: center;
+
+    img {
+        max-width: 60%;
+        margin-bottom: 32px;
+
+        @include respond-to("small-up") {
+            max-width: 30%;
+        }
+    }
+}

sass/button.scss

@@ -54,7 +54,7 @@
     &.is-link {
         background-color: transparent;
         border-color: $nord9;
-        color: $nord9;
+        color: var(--button-link-text-color);
 
         &:hover {
             border-color: darken($nord9, $hoverAmount);

sass/collection.scss

@@ -1,4 +1,9 @@
-.ma-collection {
+.collection {
+    h1 {
+        i {
+            cursor: pointer;
+        }
+    }
     .filters {
         display: flex;
         justify-content: end;

sass/colors.scss

@@ -29,7 +29,7 @@ $danger-color-hl: darken($danger-color, $hoverAmount);
 $warning-color-hl: darken($warning-color, $hoverAmount);
 $success-color-hl: darken($success-color, $hoverAmount);
 
-$button-font-color: $nord1;
+$button-font-color: #2C364A;
 $button-alternate-color: #01103C;
 
 $pagination-border-color: $nord3;
@@ -38,6 +38,7 @@ $pagination-hover-color: rgb(115, 151, 186);
 :root {
     --default-color: #{$white};
     --bg-color: #{darken($white, 5%)};
+    --bg-alternate-color: #{darken($white, 8%)};
     --font-color: #{$nord3};
     --footer-color: #{$darken-white};
     --link-color: #{$nord1};
@@ -45,18 +46,38 @@ $pagination-hover-color: rgb(115, 151, 186);
     --input-font-color: #{$nord3};
     --input-color: #{$white};
     --input-active-color: #{$nord5};
-    
+
     --navbar-color: #{darken($white, 5%)};
 
     --box-bg-color: #F8F9FB;
     --box-shadow-color: #{rgba($nord4, 0.35)};
 
     --border-color: #{$nord4};
+
+    --button-link-text-color: #2C364A;
+
+    --nord0: #{$nord0};
+    --nord1: #{$nord1};
+    --nord2: #{$nord2};
+    --nord3: #{$nord3};
+    --nord4: #{$nord4};
+    --nord5: #{$nord5};
+    --nord6: #{$nord6};
+    --nord7: #{$nord7};
+    --nord8: #{$nord8};
+    --nord9: #{$nord9};
+    --nord10: #{$nord10};
+    --nord11: #{$nord11};
+    --nord12: #{$nord12};
+    --nord13: #{$nord13};
+    --nord14: #{$nord14};
+    --nord15: #{$nord15};
 }
 
 [data-theme="dark"] {
     --default-color: #{$nord3};
     --bg-color: #{lighten($nord0, 2%)};
+    --bg-alternate-color: #{lighten($nord3, 8%)};
     --font-color: #{$nord6};
     --footer-color: #{$nord1};
     --link-color: #{$nord4};
@@ -71,4 +92,6 @@ $pagination-hover-color: rgb(115, 151, 186);
     --box-shadow-color: #{rgba($nord4, 0.2)};
 
     --border-color: #{$nord1};
+
+    --button-link-text-color: #{$white};
 }

sass/composants.scss

@@ -0,0 +1,13 @@
+.composants {
+  .couleur {
+    margin-bottom: 1rem;
+    text-align: center;
+
+    border: 1px solid var(--input-active-color);
+    box-shadow: var(--box-shadow-color) 0px 3px 6px 0px;
+
+    div {
+      height: 56px;
+    }
+  } 
+}

sass/global.scss

@@ -82,4 +82,8 @@ html {
     @include respond-to("small-up") {
         display: initial;
     }
+}
+
+.is-danger {
+    color: $nord12;
 }

sass/icons.scss

@@ -46,6 +46,7 @@
 .icon-link-ext:before { content: '\f08e'; } /* '' */
 .icon-sun:before { content: '\f185'; } /* '' */
 .icon-moon:before { content: '\f186'; } /* '' */
+.icon-share:before { content: '\f1e0'; } /* '' */
 .icon-trash:before { content: '\f1f8'; } /* '' */
 .icon-blind:before { content: '\f29d'; } /* '' */
 
@@ -61,4 +62,4 @@
     100% {
         transform: rotate(359deg);
     }
-}
+}

sass/index.scss

@@ -41,7 +41,9 @@
 @import './box';
 
 @import './error';
+@import './500';
 @import './home';
 @import './ajouter-un-album';
-@import './ma-collection';
-@import './ma-collection-details';
+@import './collection';
+@import './ma-collection-details';
+@import './composants';

sass/list.scss

@@ -3,30 +3,35 @@
 
     .item{
         padding: 0.5rem 0.75rem;
-        border-bottom: 1px solid var(--border-color);
+        border-bottom: 2px solid var(--border-color);
+        background-color: var(--bg-alternate-color);
         @include transition() {}
 
         @include respond-to("medium") {
             &:nth-child(2n) {
                 background-color: var(--default-color);
             }
+            border: none;
         }
+
         @include respond-to("medium-up") {
-            border-left: 1px solid var(--border-color);
+            border-left: 2px solid var(--border-color);
+
+            &:nth-child(4n),
+            &:nth-child(4n-1)
+            {
+                background-color: var(--default-color);
+            }
 
             &:first-child,
             &:nth-child(2) {
-                border-top: 1px solid var(--border-color);
+                border-top: 2px solid var(--border-color);
             }
 
             &:nth-child(2n),
             &:last-child {
-                border-right: 1px solid var(--border-color);
-                margin-right: -1px;
-            }
-
-            &:hover {
-                background-color: var(--default-color);
+                border-right: 2px solid var(--border-color);
+                margin-right: -2px;
             }
         }
 
@@ -44,4 +49,10 @@
             max-width: 90%;
         }
     }
+
+    &.hover {
+        .item:hover {
+            background-color: var(--border-color);
+        }
+    }
 }

sass/ma-collection-details.scss

@@ -16,6 +16,7 @@
 
             img {
                 max-width: 90%;
+                max-height: 90%;
             }
         }
     }

sass/toast.scss

@@ -13,6 +13,11 @@
     color: $button-alternate-color;
     border-radius: 6px;
 
+    &.success {
+        background-color: $success-color;
+        color: $button-font-color;
+    }
+
     &.show {
         visibility: visible;
         animation: toastrFadein 0.5s, toastrFadeout 0.5s 2.5s;