Commit c22eaa9f authored by hannes's avatar hannes

hoover cards (almost finished)

parent 3de43b6b
......@@ -1345,7 +1345,7 @@ body.rtl #footer-spinner-container {
font-size:12px;
background-color: #fff;
color: #eee;
z-index: 10000;
z-index: 9998;
position:absolute;
display:block;
font-style: normal;
......@@ -1357,7 +1357,7 @@ body.rtl #footer-spinner-container {
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.hoover-card-caret {
z-index: 10001;
z-index: 9999;
opacity:0;
display:block;
content:' ';
......@@ -1375,12 +1375,6 @@ body.rtl #footer-spinner-container {
border-bottom:0 none;
}
.hoover-card .profile-card {
width:290px;
margin-bottom:0;
border:0 none;
}
#settings-container {
padding:10px 10px 150px 10px;
}
......@@ -2200,24 +2194,37 @@ body.rtl .view-more-container-bottom { direction:rtl; }
}
.stream-item-header .name {
font-size: 14px;
font-weight: 700;
color: #333333;
line-height: 18px;
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 18px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
white-space: nowrap;
}
.stream-item-header .screen-name,
.stream-item-header .reply-to,
.stream-item-header .in-groups,
.stream-item-header .h-card {
font-size: 13px;
color: #999999;
line-height: 18px;
direction: ltr;
font-style:normal;
direction: ltr;
display: inline-block;
font-size: 13px;
font-style: normal;
height: 18px;
line-height: 18px;
vertical-align: top;
}
.stream-item-header .h-card:hover {
text-decoration:underline;
}
.stream-item-header .addressees {
display: inline-block;
vertical-align: top;
}
.stream-item-header .addressees span:first-child:before {
content: "\f105";
display:inline-block;
......@@ -2565,6 +2572,14 @@ ul.queet-actions li .icon.is-mine:before {
color:#999;
font-weight:normal;
}
.queet > .context .with-icn .requeet-text a b {
display: inline-block;
max-width: 350px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
white-space: nowrap;
}
.queet > .context .with-icn .requeet-text a:hover b {
text-decoration:underline;
color:#555;
......@@ -2672,6 +2687,14 @@ ul.stats li {
.profile-card ul.stats li {
padding-top: 7px;
}
.hoover-card .profile-card ul.stats li {
padding-top: 6px;
min-width:70px;
}
.hoover-card .profile-card ul.stats li.follower-num,
.hoover-card .profile-card ul.stats li.groups-num {
display:none;
}
.queet.rtl ul.stats li {
float:right;
}
......@@ -2685,6 +2708,9 @@ ul.stats a {
line-height: 18px;
font-weight: normal;
}
.hoover-card ul.stats a {
font-size: 9px;
}
.queet.rtl ul.stats a{
border-right: 1px solid #E8E8E8;
border-left: 0 none;
......@@ -2696,6 +2722,9 @@ ul.stats a strong {
line-height: 16px;
display: block;
}
.hoover-card ul.stats a strong {
font-size: 17px;
}
ul.stats .avatar-row {
overflow: hidden;
......@@ -2949,6 +2978,11 @@ span.inline-reply-caret .caret-inner {
position: relative;
z-index: 200;
margin-top:8px;
overflow:hidden;
height:16px;
text-overflow: ellipsis;
max-width: 260px;
white-space:nowrap;
}
#user-screen-name {
font-weight:normal;
......@@ -3432,6 +3466,13 @@ div.nav-session {
position: relative;
width: 588px;
}
.hoover-card .profile-card {
width:290px;
margin-bottom:0;
border:0 none;
}
.modal-body .profile-card {
margin-right:-1px;
margin-top:-5px;
......@@ -3454,6 +3495,13 @@ div.nav-session {
-o-background-size: cover;
background-size: cover;
}
.hoover-card .profile-header-inner {
height: 200px;
}
.profile-header-inner a:hover {
text-decoration: underline;
color:#fff;
}
.profile-header-inner .profile-header-inner-overlay {
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
......@@ -3466,6 +3514,9 @@ div.nav-session {
top: 60px;
width: 100%;
}
.hoover-card .profile-header-inner .profile-header-inner-overlay {
height: 140px;
}
.profile-header-inner .profile-picture {
outline: 0 none;
background-color: #FFFFFF;
......@@ -3479,12 +3530,27 @@ div.nav-session {
width: 73px;
z-index: 5;
}
.hoover-card .profile-header-inner .profile-picture {
border: 2px solid #ffffff;
border-radius: 4px;
height: 40px;
overflow: hidden;
width: 40px;
}
.profile-header-inner .profile-picture img {
height: 73px;
width: 73px;
border-radius: 3px 3px 3px 3px;
float: none;
}
.hoover-card .profile-header-inner .profile-picture img {
border-radius: 3px;
height: 40px;
width: 40px;
}
.profile-header-inner .profile-card-inner {
text-align: center;
line-height: 16px;
......@@ -3499,13 +3565,23 @@ div.nav-session {
font-weight: bold;
line-height: 1;
margin: 0 auto 2px auto;
color: #FFFFFF;
color: #fff;
font-size: 24px;
white-space: nowrap;
padding:0;
height:24px;
height:28px;
line-height:24px;
display:block;
overflow: hidden;
max-width:100%;
text-overflow: ellipsis;
}
.hoover-card .profile-card-inner .fullname {
font-size: 14px;
font-weight: 700;
height: 26px;
line-height: 16px;
margin:0;
}
.profile-header-inner .profile-card-inner h1.fullname span {
font-size: 24px;
......@@ -3520,6 +3596,28 @@ div.nav-session {
line-height: 24px;
margin-bottom: 1px;
text-rendering: optimizelegibility;
overflow: hidden;
max-width:100%;
white-space: nowrap;
text-overflow: ellipsis;
}
.hoover-card .profile-header-inner .profile-card-inner h2.username {
font-size: 14px;
line-height:18px;
margin-bottom: 4px;
}
.profile-header-inner .profile-card-inner h2.username .ostatus-link {
background-position: 7px -240px;
font-size: 0;
opacity: 0.9 !important;
overflow: hidden;
right: -22px;
text-shadow: none;
top: -74px;
}
.profile-header-inner .profile-card-inner h2.username .ostatus-link:hover {
background-position: 7px -210px;
}
.profile-header-inner .profile-card-inner h2.username .follows-you {
......@@ -3534,6 +3632,14 @@ div.nav-session {
margin-left:7px;
text-transform:uppercase;
}
.hoover-card .profile-header-inner .profile-card-inner h2.username .follows-you {
background-color: rgba(0, 0, 0, 0.5);
bottom: -36px;
display: block;
font-size: 10px;
position: absolute;
right: -13px;
}
.profile-header-inner .profile-card-inner h2.username a {
color:#fff;
......@@ -3545,8 +3651,19 @@ div.nav-session {
font-size: 14px;
}
.profile-header-inner .profile-card-inner .bio-container p {
color: #FFFFFF;
margin:0;
color: #fff;
line-height: 18px;
margin: 0;
max-height: 54px;
overflow: hidden;
text-overflow: ellipsis;
}
.hoover-card .profile-header-inner .profile-card-inner .bio-container p {
font-size: 12px;
letter-spacing: 0.2px;
line-height: 15px;
height: 15px;
white-space: nowrap;
}
.profile-header-inner .profile-card-inner .location-and-url,
.profile-header-inner .profile-card-inner .location-and-url input {
......@@ -3555,6 +3672,22 @@ div.nav-session {
line-height: 18px;
margin:0;
}
.hoover-card .profile-header-inner .profile-card-inner .location-and-url,
.hoover-card .profile-header-inner .profile-card-inner .location-and-url input {
font-size: 12px;
letter-spacing: 0.2px;
line-height: 15px;
}
.profile-header-inner .profile-card-inner .location-and-url span {
vertical-align: top;
display:inline-block;
overflow: hidden;
max-width:46%;
white-space: nowrap;
text-overflow: ellipsis;
}
.profile-header-inner .profile-card-inner .location-and-url span.divider {
padding: 0 2px;
}
......@@ -3580,6 +3713,9 @@ div.nav-session {
min-height: 52px;
position: relative;
}
.hoover-card .profile-banner-footer {
min-height: 47px;
}
.profile-banner-footer ul.stats {
border-bottom: 0 none;
border-top: 0 none;
......@@ -3589,9 +3725,15 @@ div.nav-session {
.profile-banner-footer ul.stats li a {
padding: 0 15px 8px 12px;
}
.hoover-card .profile-banner-footer ul.stats li a {
padding-bottom: 5px;
}
.profile-banner-footer ul.stats li:first-child a {
padding-left: 12px;
}
.hoover-card .profile-banner-footer ul.stats li:first-child a {
padding-left: 6px;
}
.profile-banner-footer ul.stats li a strong {
}
......@@ -3600,6 +3742,10 @@ div.nav-session {
float: right;
margin: 10px;
}
.hoover-card .profile-card .user-actions {
margin-right: 5px;
margin-bottom: 5px;
}
div.clearfix {
clear:both;
height:0;
......
No preview for this file type
img/sprite-quitter.png

50.6 KB | W: | H:

img/sprite-quitter.png

51 KB | W: | H:

img/sprite-quitter.png
img/sprite-quitter.png
img/sprite-quitter.png
img/sprite-quitter.png
  • 2-up
  • Swipe
  • Onion skin
No preview for this file type
img/sprite.png

47.6 KB | W: | H:

img/sprite.png

48 KB | W: | H:

img/sprite.png
img/sprite.png
img/sprite.png
img/sprite.png
  • 2-up
  • Swipe
  • Onion skin
This diff is collapsed.
......@@ -383,6 +383,10 @@ function userArrayCacheStore(data) {
// store
if(typeof window.userArrayCache[key] == 'undefined') {
window.userArrayCache[key] = dataToStore;
// easy conversion between URI and statusnet_profile_url and the key we're using in window.userArrayCache
window.convertUriToUserArrayCacheKey[dataToStore.local.ostatus_uri] = key;
window.convertStatusnetProfileUrlToUserArrayCacheKey[dataToStore.local.statusnet_profile_url] = key;
}
else {
if(dataToStore.local) {
......
......@@ -189,7 +189,7 @@ $('body').on('mouseover',function (e) {
}
// see if we have it in cache, otherwise query server
getUserArrayData(hrefAttr,possibleNickname,function(userArray){
getUserArrayData(hrefAttr, possibleNickname, timeNow, function(userArray, timeOut){
// bad data
if(typeof userArray.local == 'undefined') {
......@@ -265,26 +265,63 @@ $('body').on('mouseover',function (e) {
hooverCardCaret.css('opacity','1');
}
}
},600);
},timeOut);
});
});
// get user array from cache (or from server – TODO!!)
function getUserArrayData(maybeProfileUrl,maybeNickname,callback) {
function getUserArrayData(maybeProfileUrl,maybeNickname,timeNow,callback) {
if(maybeProfileUrl && maybeNickname) {
userArray = userArrayCacheGetByProfileUrlAndNickname(maybeProfileUrl, maybeNickname);
// no cached user array found
// no cached user array found, query server if this seems to be a profile url
if(!userArray) {
// see if we have reason to believe that maybeProfileUrl really is a profile url
var routedUrl = URLtoStreamRouter(maybeProfileUrl);
// likely an uncached local profile
if(routedUrl && routedUrl.name == 'profile') {
// query server for that
var nicknameOrId = routedUrl.nickname;
if(!nicknameOrId) {
nicknameOrId = routedUrl.id;
}
// don't query too often for the same user
if(typeof window.userArrayLastRetrieved[nicknameOrId] == 'undefined' || (timeNow - window.userArrayLastRetrieved[nicknameOrId]) > 60000) {
window.userArrayLastRetrieved[nicknameOrId] = timeNow;
// query server and cache user data (done automatically in getFromAPI)
getFromAPI('users/show.json?id=' + nicknameOrId, function(data){
if(data) {
userArray = {local:data};
// we want hoover cards to appear _at least_ 600ms after hoover
// we could just set the timeout to 0 and let the card appear
// whenever it's loaded, but this will not feel good if we're
// on a crazy fast server. so we calculate the diff time and makes
// sure the total delay is at least 600ms
var timeAfterServerQuery = new Date().getTime();
var queryTime = timeAfterServerQuery-timeNow;
if(queryTime<600) {
var timeOut = 600-queryTime;
}
else {
var timeOut = 0;
}
// continue to display the hoover card
callback(userArray,timeOut);
}
});
}
}
}
// from cache
else {
callback(userArray);
// continue to display the hoover card
// 600ms before cards appear feels pretty good
// but this can be tweaked if cards appear to fast/slow
callback(userArray,600);
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment