diff --git a/app/views/dailyFeed.scala b/app/views/dailyFeed.scala index 193e73b24a63b..f1cc41312096d 100644 --- 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 new file mode 100644 index 0000000000000..319994f83386b Binary files /dev/null and b/public/flair/img/symbols.white-star.webp differ diff --git a/public/flair/list.txt b/public/flair/list.txt index 099dd75bc651c..1d777b96195a0 100644 --- 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 index 6112a9c640766..907db985f80a2 100644 --- a/ui/lobby/css/_feed.scss +++ b/ui/lobby/css/_feed.scss @@ -21,31 +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; - } - &__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 index 65cc42f780285..64dfac79c93b1 100644 --- a/ui/site/css/_dailyFeed.scss +++ b/ui/site/css/_dailyFeed.scss @@ -17,31 +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; - } - &__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 {