better fix

lichess-org · Dec 25, 2023 · 6a367da · 6a367da
1 parent ac1c324
commit 6a367da
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 50 deletions.
diff --git a/app/views/dailyFeed.scala b/app/views/dailyFeed.scala
@@ -44,7 +44,7 @@ object dailyFeed:
         .filter(_.published || editor)
         .map: update =>
           div(cls := "daily-feed__update", id := update.id)(
-            flairOrStar(update),
+            marker(update.flair),
             div(cls := "daily-feed__update__content")(
               st.section(cls := "daily-feed__update__day")(
                 h2(a(href := s"#${update.id}")(momentFromNow(update.at))),
@@ -67,7 +67,7 @@ object dailyFeed:
     div(cls := "daily-feed__updates")(
       ups.map: update =>
         div(cls := "daily-feed__update")(
-          flairOrStar(update),
+          marker(update.flair),
           div(
             a(cls := "daily-feed__update__day", href := s"/feed#${update.id}"):
               momentFromNow(update.at)
@@ -83,10 +83,6 @@ object dailyFeed:
       )
     )
 
-  private def flairOrStar(up: Update) =
-    up.flair.fold(iconTag(licon.StarOutline)): f =>
-      updateFlair(f)(cls := "daily-feed__update__flair")
-
   def create(form: Form[?])(using PageContext) =
     layout("Lichess updates: New", true):
       main(cls := "daily-feed page-small box box-pad")(
@@ -142,13 +138,17 @@ object dailyFeed:
       )(form3.textarea(_)(rows := 10)),
       form3.group(form("flair"), "Icon", half = false): field =>
         form3.flairPicker(field, Flair from form("flair").value, label = frag("Update icon")):
-          span(cls := "flair-container".some):
-            Flair.from(form("flair").value).map(updateFlair).map(_(cls := "uflair"))
+          span(cls := "flair-container"):
+            Flair.from(form("flair").value).map(f => marker(f.some, "uflair".some))
       ,
       form3.action(form3.submit("Save"))
     )
 
-  private def updateFlair(flair: Flair) = img(src := flairSrc(flair))
+  private def marker(flair: Option[Flair], customClass: Option[String] = none) =
+    img(
+      src := flairSrc(flair getOrElse Flair("symbols.white-star")),
+      cls := customClass getOrElse s"daily-feed__update__marker ${flair.nonEmpty so " nobg"}"
+    )
 
   def atom(ups: List[Update])(using Lang) =
     import views.html.base.atom.{ atomDate, category }

diff --git a/public/flair/img/symbols.white-star.webp b/public/flair/img/symbols.white-star.webp
diff --git a/public/flair/list.txt b/public/flair/list.txt
@@ -3289,6 +3289,7 @@ symbols.white-large-square
 symbols.white-medium-small-square
 symbols.white-question-mark
 symbols.white-square-button
+symbols.white-star
 symbols.wireless
 symbols.womens-room
 symbols.yellow-heart

diff --git a/ui/lobby/css/_feed.scss b/ui/lobby/css/_feed.scss
@@ -21,35 +21,23 @@ $c-contours: mix($c-brag, $c-shade, 80%);
       display: none;
     }
 
-    > i {
-      font-size: 13px;
+    &__marker {
       float: $start-direction;
       width: 32px;
       height: 32px;
+      padding: 5px;
       margin-top: -5px;
       margin-#{$start-direction}: -42px;
-      line-height: 27px;
-      text-align: center;
       background-color: $c-contours;
       border: 3px solid $c-bg-box;
       border-radius: 50%;
-      color: #fff;
-    }
-    > i::before {
-      position: relative;
-      top: -2px;
-    }
-    &__flair {
-      float: $start-direction;
-      width: 32px;
-      height: 32px;
-      padding: 5px;
-      margin-top: -5px;
-      margin-#{$start-direction}: -42px;
-      background: $c-bg-box;
-      border: 2px solid $c-contours;
-      border-radius: 50%;
+
+      &.nobg {
+        background: $c-bg-box;
+        border: 2px solid $c-contours;
+      }
     }
+
     &__day {
       @extend %flex-center;
       display: inline;

diff --git a/ui/site/css/_dailyFeed.scss b/ui/site/css/_dailyFeed.scss
@@ -17,35 +17,23 @@ $c-contours: mix($c-brag, $c-shade, 80%);
     padding-#{$start-direction}: 45px;
     margin-bottom: 4em;
 
-    > i {
-      font-size: 24px;
-      float: $start-direction;
-      width: 50px;
-      height: 50px;
-      margin-top: -12px;
-      margin-#{$start-direction}: -72px;
-      line-height: 42px;
-      text-align: center;
-      background-color: $c-contours;
-      border: 3px solid $c-bg-box;
-      border-radius: 50%;
-      color: #fff;
-    }
-    > i::before {
-      position: relative;
-      top: -2px;
-    }
-    &__flair {
+    &__marker {
       float: $start-direction;
       width: 54px;
       height: 54px;
       padding: 7px;
       margin-top: -14px;
       margin-#{$start-direction}: -74px;
-      background: $c-bg-box;
-      border: 2px solid $c-contours;
+      background-color: $c-contours;
+      border: 3px solid $c-bg-box;
       border-radius: 50%;
+
+      &.nobg {
+        background: $c-bg-box;
+        border: 2px solid $c-contours;
+      }
     }
+
     &__day {
       @extend %flex-center;
       h2 {