Place the user actions in a dropdown window with labels

lichess-org · May 8, 2024 · 89b2ddb · 89b2ddb
1 parent 4c2cb9d
commit 89b2ddb
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 65 deletions.
diff --git a/app/views/user/show/header.scala b/app/views/user/show/header.scala
@@ -39,7 +39,70 @@ object header:
             )(patronIconChar)
           )
         ),
-        u.enabled.no.option(span(cls := "closed")("CLOSED"))
+        u.enabled.no.option(span(cls := "closed")("CLOSED")),
+        div(cls := "user-actions dropdown")(
+          a(
+            cls      := "text",
+            dataIcon := Icon.List
+          ),
+          div(cls := "dropdown-window")(
+            (ctx
+              .is(u))
+              .option(
+                frag(
+                  a(
+                    cls      := "text",
+                    href     := routes.Account.profile,
+                    dataIcon := Icon.Gear
+                  )(trans.site.editProfile.txt()),
+                  a(
+                    cls      := "text",
+                    href     := routes.Relation.blocks(),
+                    dataIcon := Icon.NotAllowed
+                  )(trans.site.listBlockedPlayers.txt())
+                )
+              ),
+            isGranted(_.UserModView).option(
+              a(
+                cls      := "text mod-zone-toggle",
+                href     := routes.User.mod(u.username),
+                dataIcon := Icon.Agent
+              )("Mod zone (Hotkey: m)")
+            ),
+            a(
+              cls      := "text",
+              href     := routes.User.tv(u.username),
+              dataIcon := Icon.AnalogTv
+            )(trans.site.watchGames.txt()),
+            ctx
+              .isnt(u)
+              .option(
+                views.relation.actions(
+                  u.light,
+                  relation = social.relation,
+                  followable = social.followable,
+                  blocked = social.blocked
+                )
+              ),
+            a(
+              cls      := "text",
+              href     := s"${routes.UserAnalysis.index}#explorer/${u.username}",
+              dataIcon := Icon.Book
+            )(trans.site.openingExplorer.txt()),
+            a(
+              cls      := "text",
+              href     := routes.User.download(u.username),
+              dataIcon := Icon.Download
+            )(trans.site.exportGames.txt()),
+            (ctx.isAuth && ctx.kid.no && ctx.isnt(u)).option(
+              a(
+                cls      := "text",
+                href     := s"${routes.Report.form}?username=${u.username}",
+                dataIcon := Icon.CautionTriangle
+              )(trans.site.reportXToModerators.txt(u.username))
+            )
+          )
+        )
       ),
       div(cls := "user-show__social")(
         div(cls := "number-menu")(
@@ -89,70 +152,6 @@ object header:
           ),
           (ctx.isAuth && ctx.isnt(u))
             .option(a(cls := "nm-item note-zone-toggle")(splitNumber(s"${social.notes.size} Notes")))
-        ),
-        div(cls := "user-actions btn-rack")(
-          (ctx
-            .is(u))
-            .option(
-              frag(
-                a(
-                  cls  := "btn-rack__btn",
-                  href := routes.Account.profile,
-                  titleOrText(trans.site.editProfile.txt()),
-                  dataIcon := Icon.Gear
-                ),
-                a(
-                  cls  := "btn-rack__btn",
-                  href := routes.Relation.blocks(),
-                  titleOrText(trans.site.listBlockedPlayers.txt()),
-                  dataIcon := Icon.NotAllowed
-                )
-              )
-            ),
-          isGranted(_.UserModView).option(
-            a(
-              cls  := "btn-rack__btn mod-zone-toggle",
-              href := routes.User.mod(u.username),
-              titleOrText("Mod zone (Hotkey: m)"),
-              dataIcon := Icon.Agent
-            )
-          ),
-          a(
-            cls  := "btn-rack__btn",
-            href := routes.User.tv(u.username),
-            titleOrText(trans.site.watchGames.txt()),
-            dataIcon := Icon.AnalogTv
-          ),
-          ctx
-            .isnt(u)
-            .option(
-              views.relation.actions(
-                u.light,
-                relation = social.relation,
-                followable = social.followable,
-                blocked = social.blocked
-              )
-            ),
-          a(
-            cls  := "btn-rack__btn",
-            href := s"${routes.UserAnalysis.index}#explorer/${u.username}",
-            titleOrText(trans.site.openingExplorer.txt()),
-            dataIcon := Icon.Book
-          ),
-          a(
-            cls  := "btn-rack__btn",
-            href := routes.User.download(u.username),
-            titleOrText(trans.site.exportGames.txt()),
-            dataIcon := Icon.Download
-          ),
-          (ctx.isAuth && ctx.kid.no && ctx.isnt(u)).option(
-            a(
-              titleOrText(trans.site.reportXToModerators.txt(u.username)),
-              cls      := "btn-rack__btn",
-              href     := s"${routes.Report.form}?username=${u.username}",
-              dataIcon := Icon.CautionTriangle
-            )
-          )
         )
       ),
       ctx.isnt(u).option(noteUi.zone(u, social.notes)),

diff --git a/ui/bits/css/user/_profile.scss b/ui/bits/css/user/_profile.scss
@@ -46,6 +46,11 @@
 
     unicode-bidi: plaintext;
     text-align: start;
+
+    time {
+      font-size: 100%;
+      opacity: 1;
+    }
   }
 
   .insight {

diff --git a/ui/bits/css/user/_show.scss b/ui/bits/css/user/_show.scss
@@ -45,6 +45,58 @@
     }
   }
 
+  &__header {
+    .dropdown {
+      position: relative;
+      font-size: x-large;
+      > a {
+        color: $c-font-page;
+        float: right;
+        padding-left: 0.5em;
+      }
+
+      .dropdown-window {
+        visibility: hidden;
+        background: $c-bg-header-dropdown;
+        border-radius: 3px 0 3px 3px;
+        box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.3);
+        position: absolute;
+        top: 1.45em;
+        right: 0;
+        a {
+          width: 16em;
+          font-size: small;
+          display: block;
+          padding: 0.6rem 1rem;
+          color: $c-header-dropdown;
+          &:first-child {
+            border-radius: 3px 0 0 0;
+          }
+          &:last-child {
+            border-radius: 0 0 3px 3px;
+          }
+          &:hover {
+            background: $c-primary;
+            &,
+            &::after {
+              color: $c-over;
+            }
+          }
+        }
+      }
+    }
+
+    .dropdown:hover {
+      > a {
+        background: $c-bg-header-dropdown;
+        box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.3);
+      }
+      .dropdown-window {
+        visibility: visible;
+      }
+    }
+  }
+
   .claim-title {
     @extend %box-padding;