style: home heatmap ticker

eallion · Oct 30, 2024 · 8139eb8 · 8139eb8
1 parent 7c7258c
commit 8139eb8
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 162 deletions.
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -276,71 +276,91 @@ html.dark .shiki span {
 /* Tailwind CSS Custom End */
 
 .ticker {
-    /* display: flex; */
-    justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 #ticker {
-    display: flex;
-    flex: 1 auto;
-    align-items: center;
-    line-height: 32px;
-    height: calc(32px + 0.25rem);
-    max-width: 100%;
-    width: auto;
-    text-align: left;
-    padding: 0;
-    padding-right: 0.5rem;
-    margin-bottom: 1rem;
-    position: relative;
-    font-size: 0.875rem;
-    overflow: hidden;
-    background-color: #9BEA6B;
-    border-radius: 9999rem;
-}
-
-.ticker-wrap {
-    overflow: hidden;
+  display: flex;
+  flex: 1 auto;
+  align-items: center;
+  line-height: 32px;
+  height: calc(32px + 0.25rem);
+  max-width: 100%;
+  width: auto;
+  text-align: left;
+  padding: 0;
+  padding-right: 0.5rem;
+  margin-bottom: 1rem;
+  position: relative;
+  font-size: 0.875rem;
+  overflow: hidden;
+  background-color: #9BEA6B;
+  border-radius: 9999rem;
 }
 
 .ticker-list {
-    margin: 0;
-    height: 32px;
-    list-style: none;
-    padding-inline-start: 0;
+  width: 100%;
+  overflow: hidden;
+  margin: 0;
+  height: 32px;
+  list-style: none;
+  padding-inline-start: 0;
+  position: relative;
 }
 
 .ticker-item {
-    list-style: none;
-    margin: 0;
-    width: 100%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-inline-start: 0;
-    color: #6b7280;
-    font-size: 0.875rem;
-}
-
-.ticker-item::before {
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2rem' height='1.2rem' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 2v2h10V2zm10 2v2h2V4zm2 2v8h2V6zm0 8h-8v2h8zm-8 2H9v2h2zm0 2v2h2v-2zm0 2H7v2h4zm-4 0v-2H5v2zm-2-2V6H3v12zM5 6h2V4H5zm4 0v2h2V6zm2 2v2h2V8zm2 0h2V6h-2zm2 0v4h2V8zM9 8H7v4h2z'/%3E%3C/svg%3E");
-    white-space: nowrap;
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: -0.25rem;
-    width: 1.25rem;
-    text-align: center;
-    margin-left: 0.5rem;
+  list-style: none;
+  margin: 0;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-inline-start: 0;
+  color: #6b7280;
+  font-size: 0.875rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+}
+
+.ticker-item.active {
+  text-decoration-line: none;
+  opacity: 1;
+  transform: translateY(0);
+  z-index: 99;
+}
+
+.ticker-item.out {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+.ticker-item.in {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.ticker-header::before {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2rem' height='1.2rem' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 2v2h10V2zm10 2v2h2V4zm2 2v8h2V6zm0 8h-8v2h8zm-8 2H9v2h2zm0 2v2h2v-2zm0 2H7v2h4zm-4 0v-2H5v2zm-2-2V6H3v12zM5 6h2V4H5zm4 0v2h2V6zm2 2v2h2V8zm2 0h2V6h-2zm2 0v4h2V8zM9 8H7v4h2z'/%3E%3C/svg%3E");
+  white-space: nowrap;
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: -0.25rem;
+  width: 1.25rem;
+  text-align: center;
+  margin-left: 0.5rem;
 }
 
 .ticker-item a {
-    color: #6b7280;
-    white-space: nowrap;
-    display: inline;
+  color: #6b7280;
+  white-space: nowrap;
+  display: inline;
 }
 
 .ticker-item.code {
-    white-space: nowrap !important;
+  white-space: nowrap !important;
 }
 
 .heatmap_week {

diff --git a/content/blog/code/blog-heatmap/index.md b/content/blog/code/blog-heatmap/index.md
@@ -335,7 +335,7 @@ function createDay(date, title, count, post) {
         }
 
         if (title && parseInt(title, 10) !== 0) {
-            tooltipContent += '<span class="heatmap_tooltip_title">' + title + '</span>';
+            tooltipContent += '<span class="heatmap_tooltip_title">《' + title + '》</span>';
         }
 
         if (date) {
@@ -398,7 +398,7 @@ function createHeatmap() {
 
         if (articleDataList.length > 0) {
             const titles = articleDataList.map(data => data.title);
-            const title = titles.map(t => `《${t}》`).join('<br />');
+            const title = titles.map(t => `${t}`).join('<br />');
 
             let count = 0;
             let post = articleDataList.length;

diff --git a/example/blog/blog-heatmap/index.md b/example/blog/blog-heatmap/index.md
@@ -335,7 +335,7 @@ function createDay(date, title, count, post) {
         }
 
         if (title && parseInt(title, 10) !== 0) {
-            tooltipContent += '<span class="heatmap_tooltip_title">' + title + '</span>';
+            tooltipContent += '<span class="heatmap_tooltip_title">《' + title + '》</span>';
         }
 
         if (date) {
@@ -398,7 +398,7 @@ function createHeatmap() {
 
         if (articleDataList.length > 0) {
             const titles = articleDataList.map(data => data.title);
-            const title = titles.map(t => `《${t}》`).join('<br />');
+            const title = titles.map(t => `${t}`).join('<br />');
 
             let count = 0;
             let post = articleDataList.length;

diff --git a/layouts/_default/stats.html b/layouts/_default/stats.html
@@ -1132,7 +1132,7 @@ <h3 id="{{ T `stats_tag_cloud` | safeHTML }}" class="headerLink"><a href="#{{ T
 					}
 
 					if (title && parseInt(title, 10) !== 0) {
-						tooltipContent += '<span class="heatmap_tooltip_title">' + title + '</span>';
+						tooltipContent += '<span class="heatmap_tooltip_title">《' + title + '》</span>';
 					}
 
 					if (date) {
@@ -1195,7 +1195,7 @@ <h3 id="{{ T `stats_tag_cloud` | safeHTML }}" class="headerLink"><a href="#{{ T
 
 					if (articleDataList.length > 0) {
 						const titles = articleDataList.map(data => data.title);
-						const title = titles.map(t => `“${t}”`).join('<br />');
+						const title = titles.map(t => `${t}`).join('<br />');
 
 						let count = 0;
 						let post = articleDataList.length;