deepcrayon/lila
deepcrayon/lila
1
0
Fork 0
Code Releases Activity

Sleeker challenge notification

Browse source
This commit is contained in:
clarkerubber 2014-11-24 23:21:07 +11:00
parent 9c9f0fc287
commit 198766960e
2 changed files with 55 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
app/views/setup/challengeNotification.scala.html
View file

@ -1,12 +1,33 @@
@(g: Game, user: User)
@notification.view("challenge_reminder_" + g.id, cssClass = "challenge_reminder foldable glowing", closable = false) {
@userLink(user)<br />
@trans.challengeToPlay.en()<br />
@clockNameNoCtx(g.clock)<br />
@game.variantLink(g.variant, variantNameNoCtx(g.variant), hintAsTitle = true), @modeNameNoCtx(g.mode)
<div class="actions">
<a class="action decline" href="@routes.Setup.decline(g.id)" data-icon="L">&nbsp;@trans.decline.en()</a>
<a class="action" href="@routes.Round.watcher(g.id, "white")" data-icon="v">&nbsp;View challenge</a>
</div>
}
<div id="challenge_reminder_@g.id" class="notification challenge_reminder glowing">
<a class="notification_link" href="@routes.Round.watcher(g.id, "white")"></a>
<div class="inner">
<div class="actions">
<a class="action decline" href="@routes.Setup.decline(g.id)" data-icon="L">&nbsp;</a>
</div>
<div class="game_infos" data-icon="@g.perfType match {
case _ if g.fromPosition => {*}
case _ if g.hasAi => {:}
case _ if g.imported => {/}
case Some(p) => {@p.iconChar}
case _ => {8}
}">
<div class="header">
<b>@usernameOrId(user.id)</b><br />
<span class="setup">
@g.clock.map(_.show).getOrElse {∞} •
@if(g.variant.exotic) {
if (g.variant == chess.Variant.KingOfTheHill) g.variant.shortName else g.variant.name).toUpperCase
} else {
@g.perfType.map { pt =>
@pt.name.toUpperCase
}
} • @g.rated.fold(trans.rated.en(), trans.casual.en()).toUpperCase
</span>
</div>
</div>
</div>
</div>

32
public/stylesheets/common.css
View file

@ -804,13 +804,26 @@ div.side_box .top {
div.side_box .padded {
padding: 7px;
}
.notification a.notification_link {
position: absolute;
width: 100%;
height: calc(100% - 10px);
top: 0;
left: 0;
text-decoration: none;
z-index: 3;
}
.notification .game_infos,
div.side_box .game_infos {
padding-left: 36px;
padding-bottom: 8px;
border-bottom: 1px solid #ccc;
margin-bottom: 6px;
position: relative;
}
div.side_box .game_infos {
border-bottom: 1px solid #ccc;
padding-bottom: 8px;
margin-bottom: 6px;
}
.notification .game_infos::before,
div.side_box .game_infos::before {
position: absolute;
top: 2px;
@ -1792,9 +1805,11 @@ div.progressbar.flashy.green div {
font-weight: bold;
}
#notifications .actions {
text-align: right;
width: 100%;
margin: 3px 0 3px 0;
position: absolute;
right: 5px;
top: 6px;
z-index: 4;
text-decoration: none;
}
#notifications a {
font-weight: bold;
@ -1802,9 +1817,10 @@ div.progressbar.flashy.green div {
}
#notifications .actions a {
margin-left: 10px;
transition: color 0.5s;
}
#notifications a:hover {
text-decoration: underline;
#notifications .actions a:hover {
color: #d85000;
}
a.hover_text > .base,
a.hover_text:hover > .hover {