feat: add month indicators

believer · Sep 4, 2024 · f90c3dc · f90c3dc
1 parent 08626fb
commit f90c3dc
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 29 deletions.
diff --git a/public/styles.css b/public/styles.css
@@ -1009,11 +1009,24 @@ video {
 .year-indicator {
  position: sticky;
  top: 0px;
+ z-index: 20;
+}
+
+.month-indicator {
+ position: sticky;
+ top: 3rem;
+ z-index: 10;
+}
+
+@media (min-width: 1024px) {
+ .month-indicator {
+ top: 7rem;
+ }
 }
 
 .year {
  left: -13rem;
- z-index: 10;
+ z-index: 20;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-top: 0.5rem;
@@ -1048,6 +1061,53 @@ video {
  -webkit-text-stroke-width: 2px;
 }
 
+.month {
+ left: -13rem;
+ z-index: 10;
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+ --tw-text-opacity: 1;
+ color: rgb(229 229 229 / var(--tw-text-opacity));
+}
+
+@media (min-width: 1024px) {
+ .month {
+ position: absolute;
+ top: -0.5rem;
+ width: 10rem;
+ text-align: right;
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .month {
+ --tw-bg-opacity: 1;
+ background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+ --tw-text-opacity: 1;
+ color: rgb(64 64 64 / var(--tw-text-opacity));
+ }
+}
+
+.month-indicator + li {
+ margin-top: -1.5rem;
+}
+
+.year-indicator + .month-indicator {
+ margin-top: -1.5rem;
+}
+
+@media (min-width: 1024px) {
+ .year-indicator + .month-indicator {
+ margin-top: 0px;
+ }
+}
+
 .placeholder\:text-neutral-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));

diff --git a/styles.css b/styles.css
@@ -14,11 +14,27 @@
 }
 
 .year-indicator {
- @apply sticky top-0;
+ @apply sticky top-0 z-20;
+}
+
+.month-indicator {
+ @apply sticky top-12 lg:top-28 z-10;
 }
 
 .year {
- @apply text-3xl lg:text-7xl font-mono text-transparent lg:absolute lg:top-3 -left-52 [-webkit-text-stroke-color:_rgba(0,0,0,0.1)] dark:[-webkit-text-stroke-color:_rgba(255,255,255,0.1)] bg-white dark:bg-neutral-900 z-10 py-2 lg:py-4;
+ @apply text-3xl lg:text-7xl font-mono text-transparent lg:absolute lg:top-3 -left-52 [-webkit-text-stroke-color:_rgba(0,0,0,0.1)] dark:[-webkit-text-stroke-color:_rgba(255,255,255,0.1)] z-20 bg-white dark:bg-neutral-900 py-2 lg:py-4;
 
  -webkit-text-stroke-width: 2px;
 }
+
+.month {
+ @apply text-lg lg:text-xl lg:absolute lg:-top-2 -left-52 z-10 bg-white dark:bg-neutral-900 py-2 lg:w-40 lg:text-right text-neutral-200 dark:text-neutral-700;
+}
+
+.month-indicator + li {
+ @apply -mt-6;
+}
+
+.year-indicator + .month-indicator {
+ @apply -mt-6 lg:mt-0;
+}
diff --git a/views/feed.templ b/views/feed.templ
@@ -73,6 +73,7 @@ templ Feed(isAdmin bool, movies types.Movies, nextPage int, query string) {
  <li
  data-movie={ strconv.Itoa(movie.ID) }
  data-year={ movie.WatchedAt.Format("2006") }
+ data-month={ movie.WatchedAt.Format("January") }
  _="init if my @data-year is not equal to @data-year of previous <li/>
  then
  make an <li.year-indicator/>
@@ -82,6 +83,16 @@ templ Feed(isAdmin bool, movies types.Movies, nextPage int, query string) {
  put the @data-year into its textContent
  put it into the previous <li/>
  end
+
+ init if my @data-month is not equal to @data-month of previous <li/>
+ then
+ make an <li.month-indicator/>
+ put it before me
+ then
+ make an <div.month/>
+ put the @data-month into its textContent
+ put it at the end of the previous <li/>
+ end
  "
  >
  <a

diff --git a/views/feed_templ.go b/views/feed_templ.go