Merge pull request #332 from Shikkanime/dev

Change UI
Shikkanime · Apr 3, 2024 · a7d1a65 · a7d1a65
2 parents 5951ed2 + e5f7548
commit a7d1a65
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 57 deletions.
diff --git a/src/main/resources/assets/css/main.css b/src/main/resources/assets/css/main.css
@@ -1,5 +1,6 @@
 body {
     background-color: #000;
+    font-family: Satoshi, sans-serif;
 }
 
 .text-truncate-2 {
@@ -26,9 +27,17 @@ body {
 }
 
 .text-muted {
-    color: #a0a0a0 !important;
+    color: #b9b9b9 !important;
 }
 
 .blur {
     filter: blur(0.5rem);
+}
+
+.border-light {
+    border: 1px solid #FFFFFF14 !important;
+}
+
+.bg-blur {
+    backdrop-filter: blur(0.25rem);
 }
diff --git a/src/main/resources/assets/css/purged/bootstrap.min.css b/src/main/resources/assets/css/purged/bootstrap.min.css
diff --git a/src/main/resources/assets/css/purged/main.min.css b/src/main/resources/assets/css/purged/main.min.css
diff --git a/src/main/resources/templates/site/_navigation.ftl b/src/main/resources/templates/site/_navigation.ftl
@@ -4,9 +4,10 @@
     <@layout.main header="${header}">
         <#assign margin = "mx-md-2">
 
-        <header>
-            <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
-                <div class="container-fluid mx-md-5">
+        <header class="position-fixed" style="z-index: 1000; width: 100%;">
+            <nav class="navbar navbar-expand-lg bg-black bg-opacity-75" data-bs-theme="dark"
+                 style="backdrop-filter: blur(0.5rem);">
+                <div class="container-fluid px-md-5 d-md-flex">
                     <a class="navbar-brand" href="/">
                         <img src="/assets/img/light_banner.webp" alt="Logo" width="181" height="24"
                              class="d-inline-block align-text-top">
@@ -17,7 +18,7 @@
                         <span class="navbar-toggler-icon"></span>
                     </button>
                     <div class="collapse navbar-collapse" id="navbarNavDropdown">
-                        <ul class="navbar-nav">
+                        <ul class="navbar-nav ms-md-auto me-md-0">
                             <#list links as link>
                                 <li class="nav-item ${margin}">
                                     <a href="${link.href}"
@@ -32,7 +33,7 @@
             </nav>
         </header>
 
-        <main>
+        <main style="padding-top: 50px;">
             <div class="text-white container-fluid px-md-5">
                 <#nested 1>
             </div>

diff --git a/src/main/resources/templates/site/anime.ftl b/src/main/resources/templates/site/anime.ftl
@@ -8,32 +8,28 @@
         <div class="row g-3 mt-3">
             <div class="col-md-4 col-12 mt-0 text-center">
                 <img src="https://api.shikkanime.fr/v1/attachments?uuid=${anime.uuid}&type=image"
-                     alt="${su.sanitizeXSS(anime.shortName)} anime image" class="img-fluid w-50" width="480"
+                     alt="${su.sanitizeXSS(anime.shortName)} anime image" class="img-fluid w-50 rounded-4 border-light"
+                     width="480"
                      height="720">
             </div>
 
             <div class="col-md-8 col-12 text-start mt-md-0 mt-5 d-flex flex-column justify-content-center">
-                <h1 class="h6">${anime.shortName?upper_case}</h1>
-                <p class="text-muted">${anime.name}</p>
+                <h1 class="h6 fw-bold mb-0">${anime.shortName?upper_case}</h1>
 
-                <#if (anime.simulcasts?size > 1)>
-                    <div class="my-3 d-inline">
+                <#if (anime.simulcasts?size > 0)>
+                    <div class="mt-3 d-inline">
                         <#list anime.simulcasts as simulcast>
-                            <a href="/catalog/${simulcast.slug}" class="text-white">${simulcast.label}</a>
-
-                            <#if (simulcast?has_next)>
-                                <span class="mx-1 text-muted">-</span>
-                            </#if>
+                            <a href="/catalog/${simulcast.slug}" class="btn btn-outline-light">${simulcast.label}</a>
                         </#list>
                     </div>
                 </#if>
 
-                <span class="mt-2">${anime.description}</span>
+                <span class="mt-3">${anime.description}</span>
             </div>
         </div>
     </div>
 
-    <div class="row g-3 mt-5 justify-content-center">
+    <div class="row g-3 mt-4 justify-content-center">
         <#list episodes as episode>
             <@episodeComponent.display episode=episode cover=false desktopColSize="col-md-2" mobileColSize="col-6" />
         </#list>

diff --git a/src/main/resources/templates/site/calendar.ftl b/src/main/resources/templates/site/calendar.ftl
@@ -4,7 +4,7 @@
 
 <@navigation.display header="${canonicalUrl}">
     <div class="table-responsive">
-        <table class="table table-dark table-borderless my-5">
+        <table class="table table-dark table-borderless my-3">
             <thead>
             <tr>
                 <#list weeklyAnimes as dailyAnimes>
@@ -17,17 +17,17 @@
             <tbody>
             <tr>
                 <#list weeklyAnimes as dailyAnimes>
-                    <td style="background-color: #060606">
+                    <td class="bg-black border-start border-end border-dark">
                         <#list dailyAnimes.releases as release>
-                            <article x-data="{ hover: false }">
+                            <article x-data="{ hover: false }" class="rounded-4 border-light mb-3">
                                 <a href="/animes/${release.anime.slug}" class="text-decoration-none text-white"
                                    @mouseenter="hover = true"
                                    @mouseleave="hover = false">
                                     <div class="position-relative">
                                         <div class="position-relative">
                                             <img src="https://api.shikkanime.fr/v1/attachments?uuid=${release.anime.uuid}&type=banner"
                                                  alt="${su.sanitizeXSS(release.anime.shortName)} anime banner"
-                                                 class="img-fluid" width="640"
+                                                 class="img-fluid rounded-top-4" width="640"
                                                  height="360">
 
                                             <div class="position-absolute top-0 end-0 p-1">
@@ -42,13 +42,13 @@
                                             </div>
                                         </div>
 
-                                        <div class="mt-1 mb-2">
-                                            <span class="h6 text-truncate-2 mb-0">${release.anime.shortName}</span>
-                                            <span class="text-muted mt-0"
+                                        <div class="mt-1 mx-2">
+                                            <span class="h6 text-truncate-2 mb-0 fw-bold">${release.anime.shortName}</span>
+                                            <span class="text-muted mt-0 mb-1"
                                                   data-release-date-time="${release.releaseDateTime}"></span>
                                         </div>
 
-                                        <div class="bg-black bg-opacity-75 position-absolute top-0 start-0 w-100 h-100 mh-100 p-3"
+                                        <div class="bg-black bg-opacity-75 bg-blur position-absolute top-0 start-0 w-100 h-100 mh-100 p-3 rounded-4"
                                              x-show="hover">
                                             <#if release.anime.description??>
                                                 <div class="text-truncate-6">

diff --git a/src/main/resources/templates/site/components/anime.ftl b/src/main/resources/templates/site/components/anime.ftl
@@ -1,19 +1,20 @@
 <#macro display anime>
-    <div class="col-md-2 col-6 mt-0">
-        <article x-data="{ hover: false }">
+    <div class="col-md-2 col-6 mt-0 mb-4">
+        <article x-data="{ hover: false }" class="rounded-4 border-light">
             <a href="/animes/${anime.slug}" class="text-decoration-none text-white" @mouseenter="hover = true"
                @mouseleave="hover = false">
                 <div class="position-relative">
                     <img src="https://api.shikkanime.fr/v1/attachments?uuid=${anime.uuid}&type=image"
-                         alt="${su.sanitizeXSS(anime.shortName)} anime image" class="img-fluid" width="480"
+                         alt="${su.sanitizeXSS(anime.shortName)} anime image" class="img-fluid rounded-top-4"
+                         width="480"
                          height="720">
 
-                    <span class="h6 mt-2 text-truncate-2">${anime.shortName}</span>
+                    <span class="h6 mt-2 text-truncate-2 fw-bold mx-2">${anime.shortName}</span>
 
-                    <div class="bg-black bg-opacity-75 position-absolute top-0 start-0 w-100 h-100 mh-100 p-3"
+                    <div class="bg-black bg-opacity-75 bg-blur position-absolute top-0 start-0 w-100 h-100 mh-100 p-3 rounded-top-4"
                          x-show="hover">
-                        <div class="h6 text-truncate-2">
-                            ${anime.name?upper_case}
+                        <div class="h6 text-truncate-2 fw-bold">
+                            ${anime.shortName?upper_case}
                         </div>
 
                         <hr>

diff --git a/src/main/resources/templates/site/components/episode.ftl b/src/main/resources/templates/site/components/episode.ftl
@@ -12,13 +12,13 @@
 <#macro display episode desktopColSize mobileColSize cover>
     <div class="${desktopColSize} ${mobileColSize}" x-data="{ hover: false }" @mouseenter="hover = true"
          @mouseleave="hover = false">
-        <article>
+        <article class="rounded-4 border-light">
             <a href="${episode.url}" target="_blank" class="text-decoration-none text-white">
                 <div class="position-relative">
                     <div class="position-relative">
                         <img src="https://api.shikkanime.fr/v1/attachments?uuid=${episode.uuid}&type=image"
                              alt="${su.sanitizeXSS(episode.anime.shortName)} episode preview image"
-                             class="<#if cover>w-100 object-fit-cover<#else>img-fluid</#if> <#if episode.uncensored>blur</#if>"
+                             class="<#if cover>w-100 object-fit-cover rounded-4<#else>img-fluid rounded-top-4</#if> <#if episode.uncensored>blur</#if>"
                              width="640" height="360">
 
                         <img src="https://www.shikkanime.fr/assets/img/platforms/${episode.platform.image}"
@@ -27,32 +27,34 @@
                              height="24">
 
                         <#if cover?? && cover>
-                            <div class="position-absolute bottom-0 start-0 py-2 px-3 bg-black bg-opacity-50 m w-100">
-                                <span class="h6 mt-2 text-truncate-2">${episode.anime.shortName}</span>
+                            <div class="position-absolute bottom-0 start-0 p-2 bg-black bg-opacity-25 bg-blur rounded-bottom-4 m w-100">
+                                <span class="h6 mt-2 mb-1 text-truncate-2 fw-bold">${episode.anime.shortName}</span>
 
                                 <p class="text-muted mb-0">Saison ${episode.season?c} |
                                     ${getPrefixEpisode(episode.episodeType)} ${episode.number?c}<#if episode.uncensored> non censuré</#if>
                                 </p>
 
-                                <p class="text-muted mt-0 mb-0 pb-0"><#if episode.langType == 'SUBTITLES'>Sous-titrage<#else>Doublage</#if></p>
+                                <p class="text-muted mt-0 mb-0"><#if episode.langType == 'SUBTITLES'>Sous-titrage<#else>Doublage</#if></p>
                             </div>
                         </#if>
                     </div>
 
                     <#if cover?? && !cover>
-                        <span class="h6 mt-2 text-truncate-2">${episode.anime.shortName}</span>
+                        <div class="mx-2">
+                            <h6 class="h6 mt-2 mb-1 text-truncate-2 fw-bold">${episode.anime.shortName}</h6>
 
-                        <p class="text-muted mb-0">Saison ${episode.season?c} |
-                            ${getPrefixEpisode(episode.episodeType)} ${episode.number?c}<#if episode.uncensored> non censuré</#if>
-                        </p>
+                            <p class="text-muted mb-0">Saison ${episode.season?c} |
+                                ${getPrefixEpisode(episode.episodeType)} ${episode.number?c}<#if episode.uncensored> non censuré</#if>
+                            </p>
 
-                        <p class="text-muted mt-0 mb-0 pb-0"><#if episode.langType == 'SUBTITLES'>Sous-titrage<#else>Doublage</#if></p>
+                            <p class="text-muted mt-0 mb-1"><#if episode.langType == 'SUBTITLES'>Sous-titrage<#else>Doublage</#if></p>
+                        </div>
                     </#if>
 
-                    <div class="bg-black bg-opacity-75 position-absolute top-0 start-0 w-100 h-100 mh-100 p-3"
+                    <div class="bg-black bg-opacity-75 bg-blur position-absolute top-0 start-0 w-100 h-100 mh-100 p-3 rounded-4"
                          style="display: none;" x-show="hover">
                         <#if episode.title??>
-                            <div class="h6 text-truncate-2">
+                            <div class="h6 text-truncate-2 fw-bold">
                                 ${episode.title}
                             </div>
                         </#if>

diff --git a/src/main/resources/templates/site/home.ftl b/src/main/resources/templates/site/home.ftl
@@ -31,11 +31,11 @@
         </div>
     </#if>
 
-    <div class="d-flex align-content-center my-3">
+    <div class="d-flex align-content-center my-4">
         <h1 class="h3 ms-0 me-auto">Simulcast en cours</h1>
 
         <#if currentSimulcast??>
-            <a href="/catalog/${currentSimulcast.slug}" class="btn btn-outline-light ms-auto me-0 rounded-pill px-3">
+            <a href="/catalog/${currentSimulcast.slug}" class="btn btn-outline-light ms-auto me-0 rounded-pill px-4">
                 PLUS
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                      class="bi bi-chevron-right" viewBox="0 0 16 16">

diff --git a/src/main/resources/templates/site/presentation.ftl b/src/main/resources/templates/site/presentation.ftl
@@ -1,6 +1,8 @@
 <#import "_navigation.ftl" as navigation />
 
-<@navigation.display>
+<#assign canonicalUrl = "<link rel=\"canonical\" href=\"https://www.shikkanime.fr/presentation\"/>" />
+
+<@navigation.display header="${canonicalUrl}">
     <div class="container mt-3">
         <h2>Shikkanime : Révolutionnez votre expérience de visionnage d'animés !</h2>
         <p><strong>Qu'est-ce que Shikkanime ?</strong></p>

diff --git a/src/main/resources/templates/site/search.ftl b/src/main/resources/templates/site/search.ftl
@@ -49,21 +49,21 @@
         }
 
         function template(anime) {
-            return `<div class="col-md-2 col-6 mt-0">
-        <article x-data="{ hover: false }">
+            return `<div class="col-md-2 col-6 mt-0 mb-4">
+        <article x-data="{ hover: false }" class="rounded-4 border-light">
             <a href="/animes/` + anime.slug + `" class="text-decoration-none text-white" @mouseenter="hover = true"
                @mouseleave="hover = false">
                 <div class="position-relative">
                     <img src="https://api.shikkanime.fr/v1/attachments?uuid=` + anime.uuid + `&type=image"
-                         alt="` + anime.shortName.replace("\"", "'") + ` anime image" class="img-fluid" width="480"
+                         alt="` + anime.shortName.replace("\"", "'") + ` anime image" class="img-fluid rounded-top-4" width="480"
                          height="720">
 
-                    <span class="h6 mt-2 text-truncate-2">` + anime.shortName + `</span>
+                    <span class="h6 mt-2 text-truncate-2 fw-bold mx-2">` + anime.shortName + `</span>
 
-                    <div class="bg-black bg-opacity-75 position-absolute top-0 start-0 w-100 h-100 mh-100 p-3"
+                    <div class="bg-black bg-opacity-75 bg-blur position-absolute top-0 start-0 w-100 h-100 mh-100 p-3 rounded-top-4"
                          x-show="hover">
-                        <div class="h6 text-truncate-2">
-                            ` + anime.name.toUpperCase() + `
+                        <div class="h6 text-truncate-2 fw-bold">
+                            ` + anime.shortName.toUpperCase() + `
                         </div>
 
                         <hr>