diff --git a/public/font/icon.eot b/public/font/icon.eot index 1609d73..8664abe 100644 Binary files a/public/font/icon.eot and b/public/font/icon.eot differ diff --git a/public/font/icon.svg b/public/font/icon.svg index 67c8d09..9370b56 100644 --- a/public/font/icon.svg +++ b/public/font/icon.svg @@ -20,6 +20,10 @@ + + + + diff --git a/public/font/icon.ttf b/public/font/icon.ttf index cbdbe4d..1f0de7e 100644 Binary files a/public/font/icon.ttf and b/public/font/icon.ttf differ diff --git a/public/font/icon.woff b/public/font/icon.woff index 4bed225..6474d86 100644 Binary files a/public/font/icon.woff and b/public/font/icon.woff differ diff --git a/public/font/icon.woff2 b/public/font/icon.woff2 index b39dcc9..72207f3 100644 Binary files a/public/font/icon.woff2 and b/public/font/icon.woff2 differ diff --git a/public/js/main.js b/public/js/main.js index 710d84b..0422e77 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,7 +1,7 @@ /** - * Fonction permettant d'afficher un message dans un toastr - * @param {String} message - */ + * Fonction permettant d'afficher un message dans un toastr + * @param {String} message + */ function showToastr(message) { let x = document.getElementById("toastr"); if ( message ) { @@ -124,7 +124,6 @@ document.addEventListener('DOMContentLoaded', () => { if ( currentThemeIsDark === 'false' && window.matchMedia ) { currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } - console.log('currentThemeIsDark:', currentThemeIsDark); switchTheme({target: {checked: currentThemeIsDark === 'dark'}}); toggleSwitch.checked = currentThemeIsDark === 'dark'; }); \ No newline at end of file diff --git a/sass/global.scss b/sass/global.scss index 2165147..491b9ca 100644 --- a/sass/global.scss +++ b/sass/global.scss @@ -1,5 +1,6 @@ html { min-height: 100vh; + scroll-behavior: smooth; body { background-color: var(--bg-color); @@ -69,4 +70,16 @@ html { .is-hidden { display: none; +} + +.ml-4 { + margin-left: 1rem; +} + +.sm-hidden { + display: none; + + @include respond-to("small-up") { + display: initial; + } } \ No newline at end of file diff --git a/sass/icons.scss b/sass/icons.scss index ec219a8..05250a2 100644 --- a/sass/icons.scss +++ b/sass/icons.scss @@ -39,6 +39,8 @@ .icon-link:before { content: '\e804'; } /* '' */ .icon-heart:before { content: '\e805'; } /* '' */ .icon-eye:before { content: '\e806'; } /* '' */ +.icon-left-open:before { content: '\e807'; } /* '' */ +.icon-right-open:before { content: '\e808'; } /* '' */ .icon-spin:before { content: '\e839'; } /* '' */ .icon-link-ext:before { content: '\f08e'; } /* '' */ .icon-sun:before { content: '\f185'; } /* '' */ diff --git a/sass/index.scss b/sass/index.scss index a2d268e..7ff8d31 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -43,4 +43,5 @@ @import './error'; @import './home'; @import './ajouter-un-album'; -@import './ma-collection'; \ No newline at end of file +@import './ma-collection'; +@import './ma-collection-details'; \ No newline at end of file diff --git a/sass/ma-collection-details.scss b/sass/ma-collection-details.scss new file mode 100644 index 0000000..6d4ba32 --- /dev/null +++ b/sass/ma-collection-details.scss @@ -0,0 +1,55 @@ +.ma-collection-details { + .galerie { + display: flex; + flex-wrap: wrap; + + div { + width: 80px; + height: 80px; + margin: 0.25rem; + padding: 0.25rem; + border: 2px solid var(--font-color); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + + img { + max-width: 90%; + } + } + } + + .modal { + button.close { + height: 36px; + max-height: 36px; + max-width: 36px; + min-height: 36px; + min-width: 36px; + width: 36px; + position: absolute; + background-color: rgba(10,10,10,.6); + right: 12px; + top: 12px; + } + + .navigation { + position: absolute; + top: 50%; + cursor: pointer; + z-index: 10; + + &.previous { + left: 12px; + } + &.next { + right: 12px; + } + i { + font-size: 2rem; + color: $nord4; + } + } + } +} \ No newline at end of file diff --git a/sass/modal.scss b/sass/modal.scss index ffe0571..e44de67 100644 --- a/sass/modal.scss +++ b/sass/modal.scss @@ -24,6 +24,47 @@ top: 0; } + button.close { + user-select: none; + background-color: rgba(10,10,10,.2); + border: none; + border-radius: 9999px; + cursor: pointer; + pointer-events: auto; + display: inline-block; + flex-grow: 0; + flex-shrink: 0; + font-size: 0; + height: 20px; + max-height: 20px; + max-width: 20px; + min-height: 20px; + min-width: 20px; + outline: none; + position: relative; + width: 20px; + + &::before, + &::after { + background-color: var(--default-color); + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; + } + &::before { + height: 2px; + width: 50%; + } + &::after { + height: 50%; + width: 2px; + } + } + .modal-card { position: relative; width: 300px; @@ -62,47 +103,6 @@ justify-content: space-between; font-size: 1.5rem; @include transition() {} - - button { - user-select: none; - background-color: rgba(10,10,10,.2); - border: none; - border-radius: 9999px; - cursor: pointer; - pointer-events: auto; - display: inline-block; - flex-grow: 0; - flex-shrink: 0; - font-size: 0; - height: 20px; - max-height: 20px; - max-width: 20px; - min-height: 20px; - min-width: 20px; - outline: none; - position: relative; - width: 20px; - - &::before, - &::after { - background-color: var(--default-color); - content: ""; - display: block; - left: 50%; - position: absolute; - top: 50%; - transform: translateX(-50%) translateY(-50%) rotate(45deg); - transform-origin: center center; - } - &::before { - height: 2px; - width: 50%; - } - &::after { - height: 50%; - width: 2px; - } - } } section { background-color: var(--default-color); diff --git a/src/middleware/Albums.js b/src/middleware/Albums.js index fe795c3..7e4d5d7 100644 --- a/src/middleware/Albums.js +++ b/src/middleware/Albums.js @@ -137,6 +137,20 @@ class Albums extends Pages { this.setPageContent("artists", artists); this.setPageContent("formats", formats); } + + /** + * Méthode permettant d'afficher le détails d'un album + */ + async loadItem() { + const { itemId: _id } = this.req.params; + const { _id: User } = this.req.user; + const item = await AlbumsModel.findOne({ + _id, + User, + }); + + this.setPageContent("item", item); + } } export default Albums; diff --git a/src/routes/index.js b/src/routes/index.js index 8a340a0..fca9847 100644 --- a/src/routes/index.js +++ b/src/routes/index.js @@ -107,6 +107,20 @@ router } }); +router + .route("/ma-collection/:itemId") + .get(ensureLoggedIn("/connexion"), async (req, res, next) => { + try { + const page = new Albums(req, "mon-compte/ma-collection/details"); + + await page.loadItem(); + + render(res, page); + } catch (err) { + next(err); + } + }); + router.route("/nous-contacter").get(async (req, res, next) => { try { const page = new Pages(req, "nous-contacter"); diff --git a/views/pages/ajouter-un-album.ejs b/views/pages/ajouter-un-album.ejs index 8a26488..bdebb4e 100644 --- a/views/pages/ajouter-un-album.ejs +++ b/views/pages/ajouter-un-album.ejs @@ -52,12 +52,12 @@ -