work on user powertips

This commit is contained in:
Thibault Duplessis 2013-05-22 14:49:09 +02:00
parent 9b574010fd
commit c247757d0a
10 changed files with 145 additions and 40 deletions

View file

@ -46,6 +46,7 @@ object User extends LilaController {
private def mini(username: String)(implicit ctx: Context) =
OptionOk(UserRepo named username) { user
Thread sleep 200
html.user.mini(user)
}

View file

@ -1,5 +1,5 @@
@(pov: Pov, visible: Boolean = false)(implicit ctx: Context)
<div class="undergame_box game_analysis @visible.fold("", "none")">
<div class="undergame_box revert-underline game_analysis @visible.fold("", "none")">
<a href="@routes.Analyse.replay(pov.gameId, pov.color.name)">@trans.viewTheComputerAnalysis()</a>
</div>

View file

@ -63,7 +63,7 @@ moreJs = moreJs) {
data-columns="@a.advantageChart.columns"
data-rows="@a.advantageChart.rows"></div>
} else {
<div class="undergame_box game_analysis status">
<div class="undergame_box revert-underline game_analysis status">
@a.fail.map { f =>
@trans.theComputerAnalysisHasFailed()<br />@f<br />
<form class="request_analysis" action="@routes.Analyse.computer(gameId, color.name)" method="post">

View file

@ -3,7 +3,7 @@
@import pov._
@defining(netBaseUrl + routes.Round.watcher(gameId, color.name)) { url =>
<div class="undergame_box game_more">
<div class="undergame_box revert-underline game_more">
<div class="more_top">
@bookmark.toggle(game)
<a title="@trans.shareThisUrlToLetSpectatorsSeeTheGame()"

View file

@ -3,7 +3,7 @@
<div class="pairings">
@tour.numerotedPairings.map {
case (number, pairing) => {
<a href="@routes.Round.watcher(pairing.gameId, "white")">
<a class="revert-underline" href="@routes.Round.watcher(pairing.gameId, "white")">
@number
@{ Html(pairing.users.map(u =>
"<span class='%s'>%s</span>".format(

View file

@ -1,5 +1,9 @@
@(u: User)(implicit ctx: Context)
@userLink(u, go = true)
@friend.button(u.id)
<div class="title">
<span class="user_link @isOnline(u.id).fold("online", "offline")">
@u.elo ELO, @u.nbGames @trans.games()
</span>
</div>
<div class="content">
@friend.button(u.id)
</div>

View file

@ -143,8 +143,8 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
syncFriends: function() {
var self = this;
clearTimeout(self.syncFriendsSchedule);
self.syncFriendsSchedule = setTimeout(function() {
self.syncFriends();
self.syncFriendsSchedule = setTimeout(function() {
self.syncFriends();
}, self.options.syncFriendsDelay);
this.ws.send(JSON.stringify({
t: "friends"
@ -309,26 +309,36 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
$('#friend_box').friends();
$('#lichess').on('click', 'div.friend_button a', function() {
$('body').on('click', 'div.friend_button a', function() {
var $a = $(this).css('opacity', 0.2);
$.ajax({
url: $a.attr('href'),
type: 'post',
success: function(html) { $a.parent().replaceWith(html); }
});
return false;
});
$('body').on('click', 'a.user_link', function() {
$.ajax({
url: $(this).attr('href'),
success: function(html) {
console.debug(html);
$a.parent().replaceWith(html);
}
});
return false;
});
function userPowertips() {
$('a.user_link:not(.powertiped)').addClass('.powertiped').powerTip({
placement: 's',
smartPlacement: true,
mouseOnToPopup: true,
closeDelay: 9999999
}).on({
powerTipPreRender: function() {
$.ajax({
url: $(this).attr('href'),
success: function(html) { $('#powerTip').html(html); }
});
}
}).data('powertip', ' ');
}
userPowertips();
$('body').on('lichess.content_loaded', userPowertips);
// Start game
var $game = $('div.lichess_game').orNot();
if ($game) $game.game(_ld_);

View file

@ -22,10 +22,15 @@ a, a:visited {
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
a.revert-underline {
text-decoration: none;
}
a.revert-underline:hover {
text-decoration: underline;
}
strong {
font-weight: bold;
@ -294,7 +299,6 @@ div.lichess_goodies div.box {
border: 1px solid #C0C0C0;
padding: 7px;
border-radius: 4px;
box-shadow: 0 0 7px #d0d0d0;
}
div.lichess_goodies div.box .player {
margin: 4px 0;
@ -777,7 +781,10 @@ div.lichess_board_wrap,
.button.strong,
.button.shadowed,
#friend_box,
div.content_box
div.content_box,
div.undergame_box,
div.lichess_goodies div.box,
#powerTip
{
box-shadow: 0 0 7px #d0d0d0;
border-radius: 4px;
@ -828,17 +835,10 @@ div.checkmateCaptcha.failure div.failure {
div.undergame_box {
margin-top: 10px;
width: 512px;
box-shadow: 0 0 7px #d0d0d0;
border: 1px solid #ccc;
border-radius: 5px;
line-height: 24px;
}
div.undergame_box a {
text-decoration: none;
}
div.undergame_box a:hover {
text-decoration: underline;
}
div.undergame_box div.inner {
padding: 10px 10px 0 10px;
width: 492px;
@ -1014,3 +1014,103 @@ input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder { color: transparent; }
input:focus:-ms-input-placeholder { color: transparent; }
/* PowerTip Plugin */
#powerTip {
width: 200px;
min-height: 6em;
cursor: default;
background-color: #f0f0f0;
border: 1px solid #c0c0c0;
border-radius: 4px;
display: none;
position: absolute;
z-index: 2147483647;
}
#powerTip > .title {
padding: 8px;
border-bottom: 1px solid #c0c0c0;
}
#powerTip > .content {
padding: 16px 8px;
}
#powerTip:before {
content: "";
position: absolute;
}
#powerTip.n:before, #powerTip.s:before {
border-right: 5px solid transparent;
border-left: 5px solid transparent;
left: 50%;
margin-left: -5px;
}
#powerTip.e:before, #powerTip.w:before {
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
margin-top: -5px;
top: 50%;
}
#powerTip.n:before {
border-top: 10px solid #acacac;
border-top: 10px solid rgba(172, 172, 172, 0.8);
bottom: -10px;
}
#powerTip.e:before {
border-right: 10px solid #acacac;
border-right: 10px solid rgba(172, 172, 172, 0.8);
left: -10px;
}
#powerTip.s:before {
border-bottom: 10px solid #acacac;
border-bottom: 10px solid rgba(172, 172, 172, 0.8);
top: -10px;
}
#powerTip.w:before {
border-left: 10px solid #acacac;
border-left: 10px solid rgba(172, 172, 172, 0.8);
right: -10px;
}
#powerTip.ne:before, #powerTip.se:before {
border-right: 10px solid transparent;
border-left: 0;
left: 10px;
}
#powerTip.nw:before, #powerTip.sw:before {
border-left: 10px solid transparent;
border-right: 0;
right: 10px;
}
#powerTip.ne:before, #powerTip.nw:before {
border-top: 10px solid #acacac;
border-top: 10px solid rgba(172, 172, 172, 0.8);
bottom: -10px;
}
#powerTip.se:before, #powerTip.sw:before {
border-bottom: 10px solid #acacac;
border-bottom: 10px solid rgba(172, 172, 172, 0.8);
top: -10px;
}
#powerTip.nw-alt:before, #powerTip.ne-alt:before,
#powerTip.sw-alt:before, #powerTip.se-alt:before {
border-top: 10px solid #acacac;
border-top: 10px solid rgba(172, 172, 172, 0.8);
bottom: -10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
left: 10px;
}
#powerTip.ne-alt:before {
left: auto;
right: 10px;
}
#powerTip.sw-alt:before, #powerTip.se-alt:before {
border-top: none;
border-bottom: 10px solid #acacac;
border-bottom: 10px solid rgba(172, 172, 172, 0.8);
bottom: auto;
top: -10px;
}
#powerTip.se-alt:before {
left: auto;
right: 10px;
}

View file

@ -98,13 +98,9 @@
#tournament_side div.pairings a {
padding: 0.3em 0.2em;
display: block;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
}
#tournament_side div.pairings a:hover {
text-decoration: underline;
}
#tournament_side div.pairings span {
font-weight: bold;
}

View file

@ -102,12 +102,6 @@ div.user_show .mod_zone .listings .blocked {
color: red;
font-weight: bold;
}
div.user_show .mod_zone .usernames a {
text-decoration: none;
}
div.user_show .mod_zone .usernames a:hover {
text-decoration: underline;
}
div.user_show .mod_zone strong {
display: block;
margin-top: 0.5em;