user mod zone WIP

more-scalatags
Thibault Duplessis 2019-04-04 11:45:56 +07:00
parent 62002ad056
commit c2286d7093
20 changed files with 177 additions and 168 deletions

View File

@ -1,23 +0,0 @@
@(title: String, side: Option[Html] = None, robots: Boolean = true, evenMoreJs: Html = emptyHtml, evenMoreCss: Html = emptyHtml, openGraph: Option[lila.app.ui.OpenGraph] = None, menu: Option[Html] = None, withInfScroll: Boolean = true)(body: Html)(implicit ctx: Context)
@moreCss = {
@cssTags("user-list.css", "user-show.css")
@evenMoreCss
}
@moreJs = {
@if(withInfScroll) {
@infiniteScrollTag
}
@jsAt("compiled/user.js")
@evenMoreJs
}
@base.layout(
title = title,
side = side,
moreCss = moreCss,
moreJs = moreJs,
menu = menu,
robots = robots,
openGraph = openGraph)(body).toHtml

View File

@ -2,81 +2,86 @@
<div id="mz_actions">
@if(isGranted(_.UserEvaluate)) {
<form method="post" action="@routes.Mod.spontaneousInquiry(u.username)" title="Start an inquiry">
<button class="button inquiry" type="submit"><i></i></button>
</form>
<form method="post" action="@routes.Mod.refreshUserAssess(u.username)" title="Collect data and analyze if the user is suspicious.">
<input class="button" type="submit" value="Evaluate" />
</form>
@if(isGranted(_.Shadowban)) {
<a class="button" href="@routes.Mod.communicationPublic(u.id)" title="View communications">Comms</a>
<div class="btn-rack">
<form method="post" action="@routes.Mod.spontaneousInquiry(u.username)" title="Start an inquiry">
<button class="btn-rack__btn inquiry" type="submit"><i></i></button>
</form>
<form method="post" action="@routes.Mod.refreshUserAssess(u.username)" title="Collect data and analyze if the user is suspicious.">
<button class="btn-rack__btn" type="submit">Evaluate</button>
</form>
@if(isGranted(_.Shadowban)) {
<a class="btn-rack__btn" href="@routes.Mod.communicationPublic(u.id)" title="View communications">Comms</a>
}
<form method="post" action="@routes.Mod.notifySlack(u.id)" title="Notify slack #tavern" class="xhr">
<button class="btn-rack__btn" type="submit">Slack</button>
</form>
</div>
}
<form method="post" action="@routes.Mod.notifySlack(u.id)" title="Notify slack #tavern" class="xhr">
<input class="button" type="submit" value="Slack" />
</form>
}
@if(isGranted(_.MarkEngine)) {
<form method="post" action="@routes.Mod.engine(u.username, !u.engine)" title="This user is clearly cheating." class="xhr">
<input class="button@when(u.engine, " active")" type="submit" value="Engine" />
</form>
}
@if(isGranted(_.MarkBooster)) {
<form method="post" action="@routes.Mod.booster(u.username, !u.booster)" title="Marks the user as a booster or sandbagger." class="xhr">
<input class="button@when(u.booster, " active")" type="submit" value="Booster" />
</form>
}
@if(isGranted(_.Shadowban)) {
<form method="post" action="@routes.Mod.troll(u.username, !u.troll)" title="@if(u.troll){En}else{Dis}able communication features for this user." class="xhr">
<input class="button@when(u.troll, " active")" type="submit" value="Shadowban" />
</form>
@if(u.troll) {
<form method="post" action="@routes.Mod.deletePmsAndChats(u.username)" title="Delete all PMs and public chat messages" class="xhr">
<input class="button confirm" type="submit" value="Clear PMs & chats" />
</form>
}
}
@if(isGranted(_.IpBan)) {
<form method="post" action="@routes.Mod.ban(u.username, !u.ipBan)" class="xhr">
<input class="button@when(u.ipBan, " active")" type="submit" value="IP ban" />
</form>
}
@if(u.totpSecret.isDefined && isGranted(_.DisableTwoFactor)) {
<form method="post" action="@routes.Mod.disableTwoFactor(u.username)" title="Disables two-factor authentication for this account." class="xhr">
<input class="button confirm" type="submit" value="Disable 2FA" />
</form>
}
@if(u.enabled) {
@if(isGranted(_.CloseAccount)) {
<form method="post" action="@routes.Mod.closeAccount(u.username)" title="Disables this account." class="xhr">
<input class="button" type="submit" value="Close" />
</form>
}
} else {
@if(erased.value) {
Erased
} else {
@if(isGranted(_.ReopenAccount)) {
<form method="post" action="@routes.Mod.reopenAccount(u.username)" title="Re-activates this account." class="xhr">
<input type="submit" class="button active" value="Closed" />
</form>
}
}
}
<div class="second_mod_button_row">
<div class="btn-rack">
@if(isGranted(_.MarkEngine)) {
<form method="post" action="@routes.Mod.engine(u.username, !u.engine)" title="This user is clearly cheating." class="xhr">
<button class="btn-rack__btn@when(u.engine, " active")" type="submit">Engine</button>
</form>
}
@if(isGranted(_.MarkBooster)) {
<form method="post" action="@routes.Mod.booster(u.username, !u.booster)" title="Marks the user as a booster or sandbagger." class="xhr">
<button class="btn-rack__btn@when(u.booster, " active")" type="submit">Booster</button>
</form>
}
@if(isGranted(_.Shadowban)) {
<form method="post" action="@routes.Mod.troll(u.username, !u.troll)" title="@if(u.troll){En}else{Dis}able communication features for this user." class="xhr">
<button class="btn-rack__btn@when(u.troll, " active")" type="submit">Shadowban</button>
</form>
@if(u.troll) {
<form method="post" action="@routes.Mod.deletePmsAndChats(u.username)" title="Delete all PMs and public chat messages" class="xhr">
<button class="btn-rack__btn confirm" type="submit">Clear PMs & chats</button>
</form>
}
}
@if(isGranted(_.RemoveRanking)) {
<form method="post" action="@routes.Mod.rankban(u.username, !u.rankban)" title="@if(u.rankban){In}else{Ex}cludes this user @if(u.rankban){from}else{in} the rankings." class="xhr">
<input class="button@when(u.rankban, " active")" type="submit" value="Ban from ranking" />
<button class="btn-rack__btn@when(u.rankban, " active")" type="submit">Rankban</button>
</form>
}
@if(isGranted(_.ReportBan)) {
<form method="post" action="@routes.Mod.reportban(u.username, !u.reportban)" title="@if(u.reportban){En}else{Dis}able the report feature for this user." class="xhr">
<input class="button@when(u.reportban, " active")" type="submit" value="Reportban" />
<button class="btn-rack__btn@when(u.reportban, " active")" type="submit">Reportban</button>
</form>
}
</div>
<div class="btn-rack">
@if(isGranted(_.IpBan)) {
<form method="post" action="@routes.Mod.ban(u.username, !u.ipBan)" class="xhr">
<button class="btn-rack__btn@when(u.ipBan, " active")" type="submit">IP ban</button>
</form>
}
@if(u.enabled) {
@if(isGranted(_.CloseAccount)) {
<form method="post" action="@routes.Mod.closeAccount(u.username)" title="Disables this account." class="xhr">
<button class="btn-rack__btn" type="submit">Close</button>
</form>
}
} else {
@if(erased.value) {
Erased
} else {
@if(isGranted(_.ReopenAccount)) {
<form method="post" action="@routes.Mod.reopenAccount(u.username)" title="Re-activates this account." class="xhr">
<button type="submit" class="btn-rack__btn active">Closed</button>
</form>
}
}
}
</div>
<div class="btn-rack">
@if(u.totpSecret.isDefined && isGranted(_.DisableTwoFactor)) {
<form method="post" action="@routes.Mod.disableTwoFactor(u.username)" title="Disables two-factor authentication for this account." class="xhr">
<button class="btn-rack__btn confirm" type="submit">Disable 2FA</button>
</form>
}
@if(isGranted(_.Impersonate)) {
<form method="post" action="@routes.Mod.impersonate(u.username)">
<input class="button" type="submit" value="Impersonate" />
<button class="btn-rack__btn" type="submit">Impersonate</button>
</form>
}
</div>
@ -88,7 +93,7 @@
@if(isGranted(_.SetEmail)) {
<form class="email" method="post" action="@routes.Mod.setEmail(u.username)">
<input type="email" value="@emails.current" name="email" placeholder="Email address" />
<button type="submit" class="thin button" data-icon="E"></button>
<button type="submit" class="button" data-icon="E"></button>
</form>
@emails.previous.map { email =>
Previously @email

View File

@ -29,8 +29,8 @@ object gamesContent {
)(userGameFilterTitle(u, nbs, f))
}
),
filters.current.name == "me" option nbs.crosstable.map { c =>
div(cls := "crosstable")(views.html.game.crosstable(c, none))
nbs.crosstable.ifTrue(filters.current.name == "me").map {
views.html.game.crosstable(_, none)
},
div(cls := "search_result")(
if (filterName == "search") {

View File

@ -74,7 +74,7 @@ object header {
a(cls := "btn-rack__btn", href := routes.Relation.blocks(), title := trans.listBlockedPlayers.txt(), dataIcon := "k")
),
isGranted(_.UserSpy) option
a(cls := "btn-rack__btn mod_zone_toggle", href := routes.User.mod(u.username), title := "Mod zone", dataIcon := ""),
a(cls := "btn-rack__btn mod-zone-toggle", href := routes.User.mod(u.username), title := "Mod zone", dataIcon := ""),
a(cls := "btn-rack__btn", href := routes.User.tv(u.username), title := trans.watchGames.txt(), dataIcon := "1"),
(ctx.isAuth && !ctx.is(u)) option
views.html.relation.actions(u.id, relation = social.relation, followable = social.followable, blocked = social.blocked),
@ -122,7 +122,7 @@ object header {
}
),
((ctx is u) && u.perfs.bestStandardRating > 2400 && !u.hasTitle && !ctx.pref.hasSeenVerifyTitle) option claimTitle(u),
isGranted(_.UserSpy) option div(cls := "mod_zone none"),
isGranted(_.UserSpy) option div(cls := "mod-zone none"),
angle match {
case Angle.Games(Some(searchForm)) => views.html.search.user(u, searchForm)
case _ =>

View File

@ -81,6 +81,3 @@
class="trophy award icon3d streamer@if(isStreaming(u.id)){ streaming}"
title="@if(isStreaming(u.id)){Live now!}else{Lichess Streamer}"></a>
}
<a href="@routes.Streamer.show(u.username)"
class="trophy award icon3d streamer streaming"
title="Live now!"></a>

View File

@ -39,7 +39,7 @@ object page {
),
moreCss = frag(
responsiveCssTag("user.show.activity"),
isGranted(_.UserSpy) option responsiveCssTag("user-mod")
isGranted(_.UserSpy) option responsiveCssTag("mod.user")
),
responsive = true
) {
@ -62,6 +62,7 @@ object page {
)(implicit ctx: Context) = views.html.base.layout(
title = s"${u.username} : ${userGameFilterTitleNoTag(u, info.nbs, filters.current)}${if (games.currentPage == 1) "" else " - page " + games.currentPage}",
moreJs = frag(
infiniteScrollTag,
jsAt("compiled/user.js"),
info.ratingChart.map { ratingChart =>
frag(
@ -74,7 +75,8 @@ object page {
),
moreCss = frag(
responsiveCssTag("user.show.games"),
isGranted(_.UserSpy) option responsiveCssTag("user-mod")
info.nbs.crosstable.isDefined option responsiveCssTag("crosstable"),
isGranted(_.UserSpy) option responsiveCssTag("mod.user")
),
responsive = true
) {

View File

@ -7,11 +7,11 @@
.btn-rack { /* embedded racks */
border: none;
}
&__btn {
&__btn,
form {
@extend %flex-center, %metal;
justify-content: center;
text-align: center;
padding: 0 12px;
line-height: 2rem;
cursor: pointer;
border-right: $border;
@ -32,4 +32,7 @@
letter-spacing: -1px;
}
}
&__btn {
padding: 0 .6em;
}
}

View File

@ -0,0 +1,2 @@
@import '../../../common/css/plugin';
@import '../../../common/css/component/crosstable';

View File

@ -0,0 +1,3 @@
@import '../../../common/css/plugin';
@import '../../../common/css/component/slist';
@import '../mod/user';

View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/dark';
@import 'crosstable';

View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/light';
@import 'crosstable';

View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/transp';
@import 'crosstable';

View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/dark';
@import 'mod.user';

View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/light';
@import 'mod.user';

View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/transp';
@import 'mod.user';

View File

@ -1,12 +1,12 @@
.mod_zone {
.mod-zone {
display: flex;
flex-flow: column;
margin: 1em 20px;
}
.mod_zone.none {
.mod-zone.none {
display: none;
}
.mod_zone .spinner {
.mod-zone .spinner {
margin: 100px auto;
}
#mz_actions { order: 1; }
@ -26,74 +26,75 @@
top: 0;
left: 0;
padding: 0;
}
#mz_menu .inner {
position: absolute;
right: -137px;
top: 0;
margin-top: 20px;
display: flex;
flex-flow: column;
}
#mz_menu a {
padding: 7px 10px;
}
#mz_menu a.disabled {
opacity: 0.6;
}
#mz_menu a:not(.disabled):hover {
color: #3893E8;
.inner {
@extend %roboto;
position: absolute;
right: -156px;
top: 0;
margin-top: 20px;
display: flex;
flex-flow: column;
}
a {
padding: 7px 10px;
color: $c-font;
&.disabled {
opacity: 0.6;
}
&:not(.disabled):hover {
color: $c-link;
}
}
}
#mz_actions {
@extend %flex-center;
text-align: center;
padding: 10px 0;
padding-top: 0;
.btn-rack, > form {
margin: 1em 1em 0 0;
}
.btn-rack .active {
}
}
#mz_actions .inquiry {
border-radius: 3px;
height: 32px;
width: 32px;
height: 2em;
width: 2em;
margin: 0;
padding: 0;
vertical-align: top;
background: #484541;
i {
display: block;
height: 30px;
width: 30px;
background: no-repeat url(../images/icons/octopus.svg);
background-size: 80%;
background-position: 50% 50%;
}
}
#mz_actions .inquiry i {
display: block;
height: 30px;
width: 30px;
background: no-repeat url(../images/icons/octopus.svg);
background-size: 80%;
background-position: 50% 50%;
}
.mod_zone .second_mod_button_row {
margin: 5px 0 10px 0;
}
.mod_zone > * {
.mod-zone > * {
padding: 20px 0 0 0;
}
.mod_zone .neural strong {
.mod-zone .neural strong {
display: inline;
}
.mod_zone .slist {
border: 1px solid #ccc;
.mod-zone .slist {
border: $border;
border-top: none;
font-size: 0.9em;
margin-bottom: 1em;
}
body.dark .mod_zone .slist {
border-color: #3d3d3d;
}
.mod_zone .same {
.mod-zone .same {
font-style: italic;
font-weight: bold;
background: rgba(56,147,232,0.2)!important;
border-left: 3px solid rgba(56,147,232,0.8)!important;
}
.mod_zone time {
.mod-zone time {
opacity: 0.7;
}
.mod_zone form {
.mod-zone form {
display: inline;
}
#mz_identification > div {
@ -130,14 +131,14 @@ body.dark .mod_zone .slist {
color: red;
font-weight: bold;
}
.mod_zone .ip .intel {
.mod-zone .ip .intel {
margin-left: 10px;
}
.mod_zone strong {
.mod-zone strong {
display: block;
margin-top: 0.5em;
}
.mod_zone strong.inline {
.mod-zone strong.inline {
display: inline;
}
#mz_plan ul {
@ -209,11 +210,11 @@ body.dark .mod_zone .slist {
/* orange */
}
#mz_assessments .sig_5 {
color: #E73B38;
color: $c-bad;
/* red */
}
#mz_assessments .result_4 {
color: #E73B38;
color: $c-bad;
/* red */
}
#mz_assessments .result_3 {
@ -230,13 +231,13 @@ body.dark .mod_zone .slist {
}
#mz_assessments .match {
font-weight: bold;
color: #759900;
color: $c-good;
}
#mz_irwin header {
margin-top: 10px;
display: flex;
border: 1px solid #ccc;
border: $border;
}
#mz_irwin header > * {
flex: 1 1 100%;
@ -245,19 +246,15 @@ body.dark .mod_zone .slist {
align-items: center;
justify-content: center;
white-space: nowrap;
border-left: 1px solid #ccc;
border-left: $border;
padding: 5px 10px;
}
#mz_irwin header > *:first-child {
border-left: none;
}
body.dark #mz_irwin header,
body.dark #mz_irwin header > * {
border-color: #3d3d3d;
}
#mz_irwin header .title {
flex-flow: row;
color: #3893E8;
color: $c-link;
font-size: 1.4em;
text-transform: uppercase;
letter-spacing: 3px;
@ -322,7 +319,7 @@ body.dark #mz_irwin header > * {
color: #E79B64;
}
#mz_irwin .text .red {
color: #E73B38;
color: $c-bad;
}
#mz_irwin .moves .green {
/* actually blue */
@ -335,7 +332,7 @@ body.dark #mz_irwin header > * {
background-color: #E79B64;
}
#mz_irwin .moves .red {
background-color: #E73B38;
background-color: $c-bad;
}
.mz_reports .score {

View File

@ -21,19 +21,24 @@
margin-top: .7em;
padding-bottom: 0.8em;
@include transition();
border-bottom: $border;
&:first-child {
box-radius-top-left: 0;
border-top-left-radius: 0;
border-left: 0!important;
}
&:last-child {
box-radius-top-right: 0;
border-top-right-radius: 0;
border-right: 0!important;
}
&:hover {
background: mix($c-link, $c-bg-box, 10%);
color: $c-font-clear;
}
&.active {
color: $c-font;
margin-bottom: -1px;
background: #fff;
color: $c-font-clear;
border: $border;
border-bottom: 0;
background: $c-bg-box;
}
}
strong {

View File

@ -32,7 +32,7 @@
margin: 10px 0;
}
.rating_history {
flex: 1 1 62%;
flex: 0 0 62%;
margin-left: -10px;
height: 350px;
}
@ -102,7 +102,8 @@
}
}
.crosstable {
margin: 25px 10px 15px 10px;
margin: 2em 1em;
width: auto;
}
.new-player {
padding: 1.5em;
@ -138,4 +139,8 @@
justify-content: center;
}
}
.activity {
margin-bottom: 2em;
}
}

View File

@ -67,6 +67,7 @@
display: inline-block;
}
strong {
color: $c-font-dim;
font-weight: bold;
font-size: 1.2em;
}

View File

@ -16,8 +16,8 @@ function streamLoad(opts) {
source.onerror = function() { source.close(); };
}
var $toggle = $('div.user_show .mod_zone_toggle');
var $zone = $('div.user_show .mod_zone');
var $toggle = $('.user-show .mod-zone-toggle');
var $zone = $('.user-show .mod-zone');
function loadZone() {
$zone.html(lichess.spinnerHtml).removeClass('none');