Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

profile actions bar reworked into dropdown for mobile only #14205

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

profile actions bar reworked into dropdown for mobile only #14205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80924eb
profile actions bar reworked into dropdown for mobile without changin…
awestm Dec 21, 2023
f49b9aa
profile actions bar update refactored
awestm Feb 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
113 changes: 62 additions & 51 deletions app/views/user/show/header.scala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,61 @@ object header:
private val dataToints = attr("data-toints")
private val dataTab = attr("data-tab")

private def generateUserActions(deviceCanHover: Boolean, u: User, social: UserInfo.Social)(using ctx: Context) =
div(cls := (if deviceCanHover then "user-actions btn-rack" else "dropdown-window"))(
(ctx is u) option frag(
a(
cls := (if deviceCanHover then "btn-rack__btn" else "text"),
href := routes.Account.profile,
titleOrText(trans.editProfile.txt()),
dataIcon := licon.Gear
)(if deviceCanHover then "" else trans.editProfile.txt()),
a(
cls := (if deviceCanHover then "btn-rack__btn" else "text"),
href := routes.Relation.blocks(),
titleOrText(trans.listBlockedPlayers.txt()),
dataIcon := licon.NotAllowed
)(if deviceCanHover then "" else trans.listBlockedPlayers.txt()),
),
isGranted(_.UserModView) option
a(
cls := (if deviceCanHover then "btn-rack__btn mod-zone-toggle" else "text"),
href := routes.User.mod(u.username),
titleOrText("Mod zone (Hotkey: m)"),
dataIcon := licon.Agent
)(if deviceCanHover then "" else "Mod zone (Hotkey: m)"),
a(
cls := (if deviceCanHover then "btn-rack__btn" else "text"),
href := routes.User.tv(u.username),
titleOrText(trans.watchGames.txt()),
dataIcon := licon.AnalogTv
)(if deviceCanHover then "" else trans.watchGames.txt()),
!ctx.is(u) option views.html.relation.actions(
u.light,
relation = social.relation,
followable = social.followable,
blocked = social.blocked
),
a(
cls := (if deviceCanHover then "btn-rack__btn" else "text"),
href := s"${routes.UserAnalysis.index}#explorer/${u.username}",
titleOrText(trans.openingExplorer.txt()),
dataIcon := licon.Book
)(if deviceCanHover then "" else trans.openingExplorer.txt()),
a(
cls := (if deviceCanHover then "btn-rack__btn" else "text"),
href := routes.User.download(u.username),
titleOrText(trans.exportGames.txt()),
dataIcon := licon.Download
)(if deviceCanHover then "" else trans.exportGames.txt()),
(ctx.isAuth && ctx.kid.no && !ctx.is(u)) option a(
titleOrText(trans.reportXToModerators.txt(u.username)),
cls := (if deviceCanHover then "btn-rack__btn" else "text"),
href := s"${reportRoutes.form}?username=${u.username}",
dataIcon := licon.CautionTriangle
)(if deviceCanHover then "" else trans.reportXToModerators.txt(u.username))
)

def apply(u: User, info: UserInfo, angle: UserInfo.Angle, social: UserInfo.Social)(using ctx: Context) =
val userDom =
span(
Expand Down Expand Up @@ -91,59 +146,15 @@ object header:
(ctx.isAuth && !ctx.is(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.editProfile.txt()),
dataIcon := licon.Gear
),
a(
cls := "btn-rack__btn",
href := routes.Relation.blocks(),
titleOrText(trans.listBlockedPlayers.txt()),
dataIcon := licon.NotAllowed
)
),
isGranted(_.UserModView) option
a(
cls := "btn-rack__btn mod-zone-toggle",
href := routes.User.mod(u.username),
titleOrText("Mod zone (Hotkey: m)"),
dataIcon := licon.Agent
),
a(
cls := "btn-rack__btn",
href := routes.User.tv(u.username),
titleOrText(trans.watchGames.txt()),
dataIcon := licon.AnalogTv
),
!ctx.is(u) option views.html.relation.actions(
u.light,
relation = social.relation,
followable = social.followable,
blocked = social.blocked
),
generateUserActions(true, u, social),
div(cls := "user-actions dropdown")(
a(
cls := "btn-rack__btn",
href := s"${routes.UserAnalysis.index}#explorer/${u.username}",
titleOrText(trans.openingExplorer.txt()),
dataIcon := licon.Book
cls := "text",
titleOrText(trans.list.txt()),
dataIcon := licon.List
),
a(
cls := "btn-rack__btn",
href := routes.User.download(u.username),
titleOrText(trans.exportGames.txt()),
dataIcon := licon.Download
),
(ctx.isAuth && ctx.kid.no && !ctx.is(u)) option a(
titleOrText(trans.reportXToModerators.txt(u.username)),
cls := "btn-rack__btn",
href := s"${reportRoutes.form}?username=${u.username}",
dataIcon := licon.CautionTriangle
)
)
generateUserActions(false, u, social)
),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the feature idea, but I hate that all this code is duplicated!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I totally agree, I couldn't find a way to make it more concise since the class names and text content had to be different for each link element. Maybe someone more experienced can help me out.

Alternatively, adding text to each link for desktop and mobile might help solve the issue as originally suggested by @kuba-orlik

),
!ctx.is(u) option noteZone(u, social.notes),
isGranted(_.UserModView) option div(cls := "mod-zone mod-zone-full none"),
Expand Down
67 changes: 62 additions & 5 deletions ui/site/css/user/_show.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}

&__social {
@extend %flex-between;
@extend %flex-between-nowrap;

background: $c-bg-zebra;

Expand All @@ -32,17 +32,74 @@

.user-actions {
margin: 1em;
}

form {
.btn-rack {
display: none;
@media (hover: hover) {
display: inherit;
}
a {
display: inline;
}
}

.relation-actions {
@extend %flex-center-nowrap;
.dropdown {
@media (hover: hover) {
display: none;
}
position: relative;
top: 0.6em;
font-size: x-large;
height: 2.5em;
margin-right: 1em;
padding: 0.2em 0 0 0.5em;
> a {
color: $c-font-page;
text-shadow: $text-shadow;
float: right;
padding-left: 0.5em;
}

border-#{$end-direction}: $border;
.dropdown-window {
visibility: hidden;
background: $c-bg-header-dropdown;
box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.3);
position: absolute;
top: 1.6em;
right: 0;
a {
width: 10em;
font-size: small;
display: block;
padding: 0.4rem 0.5rem;
vertical-align: middle;
color: $c-header-dropdown;
&:hover {
background: $c-primary;
&,
&::after {
color: $c-primary-over;
}
}
}
}
}
.dropdown:hover {
> a {
background: $c-bg-header-dropdown;
box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.3);
}
.dropdown-window {
visibility: visible;
}
}
}

.relation-actions {
@extend %flex-center-nowrap;

border-#{$end-direction}: $border;
}

.claim-title {
Expand Down