Commit 3052e7f3 authored by Christian's avatar Christian
Browse files

Mostly style changes

parent 9a0c5458
(function() {
//var baseUserURL = 'https://reddmeet.com/u/';
var baseUserURL = 'http://redddate.com/u/';
var baseUserURL = 'https://reddmeet.com/u/';
//var baseUserURL = 'http://redddate.com/u/';
var elHtml = document.getElementsByTagName('html')[0];
var elHead = document.getElementsByTagName('head')[0];
......@@ -97,18 +97,44 @@
function addStyle() {
var s = '' +
'.reddmeet-link { ' +
' display: inline-block; height: 24px; line-height: 23px; ' +
' border: 0; outline: 0; margin: 0; padding: 0 4px 0 0; ' +
' border-radius: 2px; background-color: #005280; color: #FFFFFF; ' +
' overflow: hidden; vertical-align: middle; ' +
'} ' +
'.reddmeet-link a.author { color: inherit; border: 0; }' +
' background-color: #005280; '+
' border: 0; outline: 0; ' +
' border-radius: 2px; ' +
' box-sizing: padding-box; ' +
' color: #FFFFFF; ' +
' display: inline-block; height: 24px; ' +
' line-height: 23px; ' +
' margin: 0; padding: 0; ' +
' overflow: hidden; ' +
' vertical-align: middle; ' +
'} ' +
' ' +
'.reddmeet-link a.author { ' +
' color: inherit; border: 0; '+
'} ' +
' ' +
'.reddmeet-icon { ' +
' display: inline-block; width: 32px; height: 24px; ' +
' background: #005280 url(http://redddate.com/static/icon32.png) center center no-repeat; ' +
' background-size: cover; border: 0; border-right: 8px solid transparent; ' +
' outline: 0; margin: 0; padding: 0; vertical-align: middle; ' +
'}';
' background-size: cover; ' +
' border: 0; border-right: 8px solid transparent; ' +
' margin: 0; padding: 0; ' +
' outline: 0; ' +
' vertical-align: middle; ' +
'} ' +
' ' +
'.reddmeet-reddit-icon { ' +
' background: #E0E0E0 url(https://www.redditstatic.com/icon.png) center center no-repeat; ' +
' background-size: cover; ' +
' border: 2px solid transparent; ' +
' display: inline-block; width: 20px; height: 20px; ' +
' line-height: inherit; ' +
' margin: 0 0 0 8px; padding: 0; ' +
' outline: 0; ' +
' overflow: hidden; ' +
' vertical-align: middle; ' +
'} ' +
' ';
//document.getElementsByTagName('style')[0].innerText += s;
if ( ! document.getElementById('reddmeet-style')) {
......@@ -124,7 +150,10 @@
if (qr && qr.length > 0) { // was there at least one element for this username?
for (var j=0; j<qr.length; j++) { // loop all the occurences of this username on the page.
if ( ! qr[j].parentNode.classList.contains('reddmeet-link')) { // only if its not already wrapped.
qr[j].outerHTML = '<span class="reddmeet-link"><a class="reddmeet-icon" href="' + baseUserURL + userlist[i]['name'] + '" style="background-image:url(' + (userlist[i]['pic']||iconPng) + ')"></a>' + qr[j].outerHTML + '</span>';
var url = baseUserURL + userlist[i]['name'];
var redditLink = '<a class="reddmeet-reddit-icon" href="' + qr[j].href + '"></a>'
qr[j].href = url;
qr[j].outerHTML = '<span class="reddmeet-link"><a class="reddmeet-icon" href="' + url + '" style="background-image:url(' + (userlist[i]['pic']||iconPng) + ')"></a>' + qr[j].outerHTML + redditLink + '</span>';
}
}
}
......
icon.png

765 Bytes

icon12.png

765 Bytes

loading.gif

4.08 KB

......@@ -4,10 +4,11 @@
<title>Getting Started Extension's Popup</title>
<style>
body {
background-color: #005280;
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
width: 400px;
min-height: 300px;
min-height: 200px;
max-height: 80vh;
margin: 0; padding: 0;
}
......@@ -22,50 +23,68 @@
#loading {
display: block;
overflow: hidden;
height: 300px;
height: 200px;
background: #FFFFFF url(loading.gif) center center no-repeat;
}
#userlist {
list-style: none; margin: 0; padding: 0;
}
#userlist li {
margin: 0; padding: 0;
margin: 8px; padding: 0;
}
#userlist li a {
border: 1px solid transparent;
background-color: rgba(255,255,255,1);
border: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.56);
color: black;
display: block;
margin: 0; padding: 8px;
margin: 0; padding: 0;
overflow: hidden;
text-decoration: none;
}
#userlist li a:hover {
background-color: #F3F3F3;
border-color: gray;
}
#userlist li a span.infoline1 {
display: block;
font-size: 20px;
line-height: 28px;
margin: 0; padding: 4px 0 0 0;
overflow: hidden;
}
#userlist li a span.infoline2 {
display: block;
font-size: 16px;
line-height: 20px;
overflow: hidden;
}
#userlist li a span.infoline3 {
color: gray;
display: block;
font-size: 14px;
line-height: 20px;
overflow: hidden;
}
#userlist li a img {
#userlist li a .pic {
background-position: center center;
background-repeat: no-repeat;
background-color: white;
background-size: cover;
background-image: url(icon.png);
border: 0; outline: 0;
display: block; float: left;
margin: 0 8px 0 0; padding: 0;
vertical-align: middle;
width: 48px; height: 48px;
width: 80px; height: 80px;
}
#userlist li a img[src$="icon.png"] {
border: 24px solid transparent;
width: 32px; height: 32px;
}
#userlist-empty {
color: gray;
color: rgba(255,255,255,0.82);
display: block;
font-size: 1.25rem;
line-height: 200px;
margin: 0; padding: 100px 0 0 0;
text-align: center;
}
......
......@@ -21,10 +21,14 @@
var DEBUG = true;
//var baseUserURL = 'https://reddmeet.com/u/';
//var baseApiUrl = 'https://reddmeet.com/api/v1/';
var baseUserURL = 'http://redddate.com/u/';
var baseApiUrl = 'http://redddate.com/api/v1/';
//var baseUrl = 'http://localhost:8000';
//var baseUrl = 'http://redddate.com';
var baseUrl = 'https://reddmeet.com';
var baseUserURL = baseUrl + '/u/';
var baseApiUrl = baseUrl + '/api/v1/';
var userCacheHandle = 'reddmeetUsers';
var iconPng = 'icon.png';
var loadingGif = 'loading.gif';
......@@ -114,11 +118,12 @@
for (var i=0; i<userlist.length; i++) {
var ahref = '<a target="_blank" href="' + baseUserURL + userlist[i]['name'] + '">';
var pic = '<img src="' + (userlist[i]['pic']||iconPng) + '" alt="">';
var pic = '<span class="pic" style="background-image: url(' + (userlist[i]['pic']||iconPng) + ')"></span>';
var infoLine1 = '<span class="infoline1">' + userlist[i]['name'] + '</span>';
var infoLine2 = '<span class="infoline2">' + userlist[i]['age'] + ', ' + userlist[i]['sex'] + '</span>';
var infoLine3 = '<span class="infoline3">' + ( userlist[i]['dist'] ? userlist[i]['dist'] + ' away' : 'Login to see distance...' ) + '</span>';
html += '<li>' + ahref + pic + infoLine1 + infoLine2 + '</a></li>';
html += '<li>' + ahref + pic + infoLine1 + infoLine2 + infoLine3 + '</a></li>';
}
replaceStatus('<ul id="userlist">' + html + '</ul>');
isBusy = false;
......@@ -144,18 +149,20 @@
function queryReddmeetUsernames(userlist) {
// For a list of usernames, query the reddmeet API if they have an account.
// The API returns a list of usernames that do have a reddmeet profile.
// ::: TODO :::
//
// Uses sessionCache to avoid fetching the same usernames twice.
//
return new Promise(function(resolve, reject) {
// Try to fetch users from sessionStorage.
// Try to fetch users from localStorage.
var cache = JSON.parse(sessionStorage.getItem('reddmeetUsers'));
var cache = JSON.parse(localStorage.getItem(userCacheHandle)) || [];
var userlistComplete = []; // collect here all items wuth full data from cache.
var usernamesTodo = []; // collect here all items that are sent to reddmeet server.
for (var j=0; j<userlist.length; j++) {
var isCached = false;
if (cache && cache.length > 0){
if (cache.length > 0){
for (var i=0; i<cache.length; i++) {
if (cache[i]['name'] == userlist[j]) {
userlistComplete.push(cache[i]); // Found one!
......@@ -174,18 +181,24 @@
resolve(userlistComplete); // nothing to send to server?
}
// Only get fresh data for those users not found in sessionStorage.
// Only get fresh data for those users not found in localStorage.
var apiUrl = baseApiUrl + 'filter-members.json?userlist=' + encodeURIComponent(usernamesTodo.join(' '));
var xhr = new XMLHttpRequest();
xhr.open("GET", apiUrl, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == xhr.DONE) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText); // TODO: add this userlist to cache, avoiding dupes.
var userlist = data['userlist'].concat(userlistComplete); // join the resulting userlist with the userlist from cache
var data = JSON.parse(xhr.responseText);
// These users are not yet in the cache, add them. Do that inline and
// re-use the "cache" variable, so we don't need to fetch the localStorage
// again, just to append these values.
localStorage.setItem(userCacheHandle, JSON.stringify(cache.concat(data)));
// Now merge them with the users we previously found in the cache.
var userlist = data['userlist'].concat(userlistComplete);
resolve(userlist);
} else
if (xhr.status == 404) {
// In DEBUG mode, marks all users as members, otherwise no user.
resolve(mockUserlist(usernamesTodo));
}
}
......
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