You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@community.apache.org by hu...@apache.org on 2016/02/20 11:12:16 UTC
svn commit: r1731360 - in /comdev/helpwanted.apache.org/site:
css/hwsplash.css images/everything_large.png index.html js/hw.js
Author: humbedooh
Date: Sat Feb 20 10:12:15 2016
New Revision: 1731360
URL: http://svn.apache.org/viewvc?rev=1731360&view=rev
Log:
Snazzify the UI, use absolute URLs so offline tests work, refactor CSS
Added:
comdev/helpwanted.apache.org/site/images/everything_large.png (with props)
Modified:
comdev/helpwanted.apache.org/site/css/hwsplash.css
comdev/helpwanted.apache.org/site/index.html
comdev/helpwanted.apache.org/site/js/hw.js
Modified: comdev/helpwanted.apache.org/site/css/hwsplash.css
URL: http://svn.apache.org/viewvc/comdev/helpwanted.apache.org/site/css/hwsplash.css?rev=1731360&r1=1731359&r2=1731360&view=diff
==============================================================================
--- comdev/helpwanted.apache.org/site/css/hwsplash.css (original)
+++ comdev/helpwanted.apache.org/site/css/hwsplash.css Sat Feb 20 10:12:15 2016
@@ -3,100 +3,77 @@ html {
min-height: 100%;
color: #FFF;
}
-
+body p {
+ margin: 2px;
+ padding: 0px;
+}
body a {
color: #FFF;
}
.option {
width: 640px !important;
- margin: 12px auto;
-}
-
-.option_a {
- width: 440px;
- height: 48px;
+ margin: 6px auto;
+ min-height: 48px;
border: 1px solid #EEE;
line-height: 48px;
font-weight: bold;
- color: #333;
- background: rgba(255,255,210,1);
+ color: #222;
border-radius: 12px;
+ opacity: 1;
+ animation: fadein 0.65s;
+ text-align: left;
+ font-family: sans-serif;
+ font-size: 12pt;
}
-.option_a:hover {
- background: rgba(255,255,180,1);
- cursor: pointer;
-}
-
-
-.option_b {
- width: 440px;
- height: 48px;
+.optiontwo {
+ width: 640px !important;
+ margin: 6px auto;
+ padding: 6px;
+ min-height: 48px;
border: 1px solid #EEE;
line-height: 48px;
- font-weight: bold;
- color: #333;
- background: rgba(220,255,220,0.85);
+ font-weight: normal;
+ color: #222;
border-radius: 12px;
+ opacity: 1;
+ animation: fadein 0.65s;
+ text-align: left;
+ font-family: sans-serif;
}
-.option_b:hover {
- background: rgba(220,255,220,1);
- cursor: pointer;
+@keyframes fadein {
+ from { transform: scale(0.5); opacity: 0; }
+ to { transform: scale(1); opacity: 1;}
}
-
-.option_c {
- width: 440px;
- height: 48px;
- border: 1px solid #EEE;
- line-height: 48px;
- font-weight: bold;
- color: #333;
- background: rgba(255,220,220,0.85);
- border-radius: 12px;
-}
-
-.option_c:hover {
- background: rgba(255,220,220,1);
+.option:hover {
+ opacity: 1;
+ transform: scale(1.05);
cursor: pointer;
}
+.optiontwo label {
+ font-size: 10pt;
+
+}
.option div:before {
- content: 'ⶠ'
+ content: 'ⶠ';
+ color: #FFF;
}
+
.option:hover div {
opacity: 1;
}
-.option_a div {
- margin-top: 6px;
- margin-left: 6px;
- margin-right: 6px;
- line-height: 24px;
- color: #FFF;
- opacity: 0.9;
- background: #F9DB16;
- width: 32px;
- height: 32px;
- border-radius: 8px;
- padding-left: 6px;
- padding-right: -3px;
- padding-top: 3px;
- padding-bottom: 3px;
- font-size: 24px;
- float: left;
-}
-
-.option_b div {
+.option div {
margin-top: 6px;
margin-left: 6px;
margin-right: 6px;
line-height: 24px;
color: #FFF;
- opacity: 0.9;
- background: #5BB85D;
+ opacity: 0.8;
width: 32px;
height: 32px;
border-radius: 8px;
@@ -109,25 +86,6 @@ body a {
}
-.option_c div {
- margin-top: 6px;
- margin-left: 6px;
- margin-right: 6px;
- line-height: 24px;
- color: #FFF;
- opacity: 0.9;
- background: #D9544F;
- width: 32px;
- height: 32px;
- border-radius: 8px;
- padding-left: 6px;
- padding-right: -3px;
- padding-top: 3px;
- padding-bottom: 3px;
- font-size: 24px;
- float: left;
-}
-
pre {
background: #EFE !important;
max-width: 940px;
Added: comdev/helpwanted.apache.org/site/images/everything_large.png
URL: http://svn.apache.org/viewvc/comdev/helpwanted.apache.org/site/images/everything_large.png?rev=1731360&view=auto
==============================================================================
Binary file - no diff available.
Propchange: comdev/helpwanted.apache.org/site/images/everything_large.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Modified: comdev/helpwanted.apache.org/site/index.html
URL: http://svn.apache.org/viewvc/comdev/helpwanted.apache.org/site/index.html?rev=1731360&r1=1731359&r2=1731360&view=diff
==============================================================================
--- comdev/helpwanted.apache.org/site/index.html (original)
+++ comdev/helpwanted.apache.org/site/index.html Sat Feb 20 10:12:15 2016
@@ -11,33 +11,24 @@
<title>Help Wanted!</title>
</head>
-<body>
+<body onload="showSplash();">
<div style="text-align: center;">
<p style="text-align: center;">
- <a href='./'><img src='images/logo.png' title="Help Wanted!" style='padding-top: 5px;'/></a>
+ <a href='?'><img src='images/logo.png' title="Help Wanted!" style='padding-top: 5px;'/></a>
</p>
-
+ <p>Here you can find tasks that the Apache projects would like someone to get started with.<br/>Simply pick a category and (optionally) select which skills you have, and we'll try to find something for you to do.</p>
</div>
<div id="splash" style="text-align: center; font-family: sans-serif;">
- <span style='font-size: 20pt; font-family: sans-serif; color: #333;'>What would you like to do today?</span>
- <div class="option option_a" onclick="document.getElementById('splash').style.display='none';wizard(1);">
- <div></div>I want to help out!
- </div>
- <div class="option option_b" onclick="location.href='./admin/'">
- <div></div>I am an Apache committer and wish to add or edit tasks.
- </div>
- <div class="option option_c" onclick="location.href='./wtest.html'">
- <div></div>I want to help spread the word about <q>Help Wanted</q>!
- </div>
</div>
+<div id="wizard_step1" style="color: #FFF; display: none; margin: 0 auto; width: 800px; font-size: 10pt; text-align: center;">
+ <div id="wizard_step1_contents"></div>
+</div>
-
-<div id="pickerparent" style="display: none; font-family: sans-serif; font-size: 10pt; text-align: center;">
- <h3>Great, let's find you something to do!</h3>
- <p>Here you can find tasks that the Apache projects would like someone to get started with.<br/>Pick a category and (optionally) select which skills you have, and we'll try to find something for you to do.</p>
+<div id="pickerparent" style="background: none; border: none; display: none; font-family: sans-serif; font-size: 10pt; text-align: center;">
+
<div id="innerpicker"></div>
</div>
<div id="hwitems" class="hwitems" style="margin: 0 auto; width: 950px;">
Modified: comdev/helpwanted.apache.org/site/js/hw.js
URL: http://svn.apache.org/viewvc/comdev/helpwanted.apache.org/site/js/hw.js?rev=1731360&r1=1731359&r2=1731360&view=diff
==============================================================================
--- comdev/helpwanted.apache.org/site/js/hw.js (original)
+++ comdev/helpwanted.apache.org/site/js/hw.js Sat Feb 20 10:12:15 2016
@@ -55,6 +55,61 @@ var hw_weburl = new RegExp(
, "mig"
);
+
+function hw_hsl2rgb (h,s,l)
+{
+ var min, sv, switcher, fract, vsf;
+ h = h % 1;
+ if (s > 1) s = 1;
+ if (l > 1) l = 1;
+ var v = (l <= 0.5) ? (l * (1 + s)) : (l + s - l * s);
+ if (v === 0)
+ return { r: 0, g: 0, b: 0 };
+
+ min = 2 * l - v;
+ sv = (v - min) / v;
+ var sh = (6 * h) % 6;
+ switcher = Math.floor(sh);
+ fract = sh - switcher;
+ vsf = v * sv * fract;
+
+ switch (switcher)
+ {
+ case 0: return { r: v, g: min + vsf, b: min };
+ case 1: return { r: v - vsf, g: v, b: min };
+ case 2: return { r: min, g: v, b: min + vsf };
+ case 3: return { r: min, g: v - vsf, b: v };
+ case 4: return { r: min + vsf, g: min, b: v };
+ case 5: return { r: v, g: min, b: v - vsf };
+ }
+ return {r:0, g:0, b: 0};
+}
+
+function genColors(numColors, saturation, lightness) {
+ var cls = []
+ var baseHue = 1.32;
+ for (var i = 0; i < numColors; i++) {
+
+ var c = hw_hsl2rgb(baseHue, saturation, lightness)
+ cls.push({r:parseInt(c.r*255), g:parseInt(c.g*255), b:parseInt(c.b*255)})
+ baseHue -= 0.175
+ if (baseHue < 0) {
+ baseHue += 1
+ }
+ }
+ return cls
+}
+
+var pastels = genColors(16, 0.9, 0.85)
+var brights = genColors(16, 0.8, 0.675)
+
+var splashOptions = {
+ 'I want to help out!': 'this.parentNode.style.display="none"; wizard(1);',
+ 'I am an Apache committer and wish to add or edit tasks.': 'location.href="/admin/";',
+ 'I want to help spread the word about <q>Help Wanted</q>!': 'location.href="wtest.html";',
+}
+
+
var diff = ['Beginner', 'Journeyman', 'Intermediate', 'Advanced', 'Expert']
var langs = ['c','xml','c++','c-sharp','java','javascript','css','html','perl','ruby','lua','python','go','rust', 'erlang', 'swift', 'groovy', 'haskell']
var types = ['programming', 'web design', 'marketing', 'documentation', 'community', 'translation']
@@ -100,23 +155,49 @@ function getAsyncJSON(theUrl, xstate, ca
if (xmlHttp.status == 404) {
callback({}, xstate);
} else {
- window.setTimeout(callback, 0.05, JSON.parse(xmlHttp.responseText), xstate);
+ callback(JSON.parse(xmlHttp.responseText), xstate);
}
}
}
}
}
+function showSplash(args) {
+ var i = 0;
+ var obj = document.getElementById('splash')
+ document.getElementById('pickerparent').style.display = "none"
+ document.getElementById('wizard_step1').style.display = "none"
+ obj.style.display = "block"
+ obj.innerHTML = "<span style='font-size: 20pt; font-family: sans-serif; color: #FFF;'>What would you like to do today?</span>"
+ for (var title in splashOptions) {
+ var p = pastels[i]
+ var b = brights[i]
+ var d = document.createElement('div')
+ d.setAttribute("class", "option")
+ d.setAttribute("onclick", splashOptions[title])
+ d.style.background = "rgba(" + p.r + "," + p.g + "," + p.b + ", 0.85)"
+ var btn = document.createElement('div')
+ btn.style.background = "rgba(" + b.r + "," + b.g + "," + b.b + ", 1)"
+ d.appendChild(btn)
+ d.innerHTML += title; //appendChild(document.createTextNode(title))
+ obj.appendChild(d)
+ i++
+ }
+}
+
var wstate = {}
function wizard(step, arg) {
var obj = document.getElementById('innerpicker')
var pobj = document.getElementById('pickerparent')
var sobj = document.getElementById('splash')
+ var wobj = document.getElementById('wizard_step1')
if (step == 0) {
pobj.style.display = "none"
+ wobj.style.display = "none"
sobj.style.display = "block"
- } else {
+
+ } else if (step > 1) {
pobj.style.display = "block"
}
document.getElementById('hwitems').innerHTML = ""
@@ -125,20 +206,64 @@ function wizard(step, arg) {
}
if (step == 1) {
wstate = {}
- obj.innerHTML = "<div style='text-align: center;'><big >What sort of work would you like to do?</big></div>"
+ wobj.style.display = "block"
+ var wcobj = document.getElementById('wizard_step1_contents')
+ wcobj.innerHTML = "<span style='font-size: 20pt; font-family: sans-serif; color: #FFF;'>What kind of tasks would you like to help with?</span>"
for (var i in types) {
- obj.innerHTML += "<div onclick='wizard(2, \"" + types[i] + "\");' class=\"wizitem\" style=\"float: left; width: 248px; height: 250px;\"><img style='height: 96px; padding: 8px; vertical-align: middle;' src='images/" + types[i].replace(/\s+/g, "") + "_large.png'/><br/><b style='font-size:11pt;'>" + types_long[types[i]] + "</b></div>"
+ var p = pastels[i]
+ var b = brights[i]
+ var d = document.createElement('div')
+ d.setAttribute("class", "option")
+ d.setAttribute("onclick", "wizard(2, '" + types[i] + "');")
+ d.style.background = "rgba(" + p.r + "," + p.g + "," + p.b + ", 0.85)"
+ var btn = document.createElement('img')
+ btn.setAttribute("src", "images/" + types[i].replace(/\s+/g, "") + "_large.png")
+ btn.setAttribute("style", "width: 36px; heigh: 36px; vertical-align: middle; padding: 4px; padding-right: 12px;")
+ d.appendChild(btn)
+ d.appendChild(document.createTextNode(types_long[types[i]]))
+ wcobj.appendChild(d)
}
- obj.innerHTML += "<div style='text-align: center;'><a href='javascript:void(0);' onclick='fetchItems();'><big>...Just show me everything</big></a></div>"
+
+ // show me everything
+ var i = types.length
+ var p = pastels[i]
+ var b = brights[i]
+ var d = document.createElement('div')
+ d.setAttribute("class", "option")
+ d.setAttribute("onclick", "fetchItems();")
+ d.style.background = "rgba(" + p.r + "," + p.g + "," + p.b + ", 0.85)"
+ var btn = document.createElement('img')
+ btn.setAttribute("src", "images/everything_large.png")
+ btn.setAttribute("style", "width: 36px; heigh: 36px; vertical-align: middle; padding: 4px; padding-right: 12px;")
+ d.appendChild(btn)
+ d.appendChild(document.createTextNode("Just show me everything..."))
+ wcobj.appendChild(d)
+
}
if (step == 2 && arg) {
wstate = {
type: arg
}
var tl = types_long[arg]
- obj.innerHTML = "<h1 style='text-align: center;'>" + tl + ":</h1>"
+ var wcobj = document.getElementById('wizard_step1_contents')
+ wcobj.innerHTML = "<span style='font-size: 20pt; font-family: sans-serif; color: #FFF;'>" + tl + "</span>"
+ var obj = document.createElement('div')
+ obj.setAttribute("class", "optiontwo")
+ wcobj.appendChild(obj)
+ var i = 0;
+ for (var k in types) {
+ if (types[k] == arg) {
+ i = k;
+ break
+ }
+ }
+ var p = pastels[i]
+ var b = brights[i]
+ obj.style.background = "rgba(" + p.r + "," + p.g + "," + p.b + ", 0.95)"
+ obj.style.color = "#333 !important"
+
obj.innerHTML += "<h2 style='text-align: center;'>Which languages are you proficient in?</h2>"
- obj.innerHTML += "<small>You don't need to pick a language, but it will help narrow down the tasks available for you.</small><br/>"
+ obj.innerHTML += "You don't need to pick a language, but it will help narrow down the tasks available for you.<br/>"
if (arg == 'programming' || arg == 'documentation') {
for (var i in langs) {
@@ -192,8 +317,8 @@ function wizard(step, arg) {
}
obj.appendChild(document.createElement('br'))
}
- obj.innerHTML += '<br/><div style="width: 100%; margin-top: 40px;"><input type="button" class="finishbutton" onclick="doForm()" value="Find me something to do!"/>' +
- '<a onclick="wizard(1)" href="javascript:void(0);"><img src="images/back.png" style="margin-left: 20px;"></a></div>'
+ obj.innerHTML += '<br/><div style="width: 100%; margin-top: 40px;"><input type="button" class="finishbutton" onclick="doForm(this.parentNode.parentNode)" value="Find me something to do!"/>' +
+ '<span style="font-size: 14pt; color: #333;">â <a style="color: #333;" onclick="wizard(1)" href="javascript:void(0);">Back to start</a></span></div>'
}
}
@@ -243,7 +368,7 @@ function populateForm() {
f.appendChild(document.createTextNode('All projects'))
}
-function doForm() {
+function doForm(par) {
var l = []
var t = []
var p = []
@@ -263,7 +388,7 @@ function doForm() {
if (wstate.projects) {
p = wstate.projects
}
- fetchItems(l, t, p)
+ fetchItems(l, t, p, null, par)
}
function sw(id) {
@@ -336,7 +461,12 @@ function displayItems(json, state) {
}
numItems++
}
-
+ if (numItems == 0 && state && state.parentObject) {
+ state.parentObject.style.display = 'none'
+ window.setTimeout(function() { state.parentObject.style.display = 'block' }, 50)
+ state.parentObject.innerHTML ="<div style='line-height: 12pt; text-align: center;'><h2>Dang it!</h2><p>Sorry, we couldn't find any open tasks matching your criteria.<br/>You could try expanding your search or picking a different category.<br/><br/></p><p><span style='font-size: 14pt; color: #333;'>â <a style='color: #333;' onclick='wizard(1)' href='javascript:void(0);'>Back to start</a></span></p></div>"
+ return
+ }
if (state && typeof(state) === "string") {
if (hw_oldstate == state) {
json.sort(function(a,b) { return a[state] < b[state] })
@@ -356,6 +486,8 @@ function displayItems(json, state) {
}
obj.innerHTML = "<p id='hwrtable'>Found " + numItems + " item" + (numItems != 1 ? "s" : "") + " you might be interested in:</p>"
+ var colors = genColors(numItems+2)
+
var tbl = "<table style='text-align: left; width: 100%;'>" +
"<tr style='cursor: pointer' title='Click on a column to sort'><th> </th><th onclick='displayItems(null, \"project\");'>Project</th>" +
"<th onclick='displayItems(null, \"title\");'>Title</th>" +
@@ -382,10 +514,10 @@ function displayItems(json, state) {
add = " <a href='/admin/close.lua?id=" + item.request_id + "'>Mark as done</a>"
}
item.description = item.description.replace(/\n/g, "<br/>").replace(hw_weburl, function(a) { return "<a href='"+a+"'>"+a+"</a>"})
- tbl += "<tr style='cursor: pointer;' onclick=\"sw('details_" + i + "');\"><td width='68'><div class='itemNumber-yellow'>" + z + "</div><img title='" + item.type + "' style='float: left; width: 24px; height: 24px;' src='/images/icon_" + ptype + ".png'/></td>" +
+ tbl += "<tr style='cursor: pointer;' onclick=\"sw('details_" + i + "');\"><td width='68'><div class='itemNumber-yellow'>" + z + "</div><img title='" + item.type + "' style='float: left; width: 24px; height: 24px;' src='images/icon_" + ptype + ".png'/></td>" +
"<td>" + item.project + "</td>"+
"<td style='text-align: left;'>" + item.title + "</td>" +
- "<td>" + lingos + "</td><td title='" + diff_explanation[parseInt(item.difficulty)] + "' style='text-align: left;'><img style='width: 20px; height: 20px; vertical-align: middle;' src='/images/level_" + (parseInt(item.difficulty)+1) + ".png'/> " + diff[item.difficulty] + add + "</td><td>" + cdate + "</td></tr>"
+ "<td>" + lingos + "</td><td title='" + diff_explanation[parseInt(item.difficulty)] + "' style='text-align: left;'><img style='width: 20px; height: 20px; vertical-align: middle;' src='images/level_" + (parseInt(item.difficulty)+1) + ".png'/> " + diff[item.difficulty] + add + "</td><td>" + cdate + "</td></tr>"
tbl += "<tr style='display:none;' id='details_" + i + "'><td colspan='6'><b>Project:</b> " + item.project + "<br/><b>Requested by:</b> " + item.author + "@apache.org<br/><b>Created:</b> " + cdate + "<br/><b>Description:</b> <blockquote>" + item.description + "</blockquote><b>Further information: </b> <a href='" + item.url + "'>" + item.url + "</a><br/><input type='button' onclick='location.href=\"https://helpwanted.apache.org/task.html?" + item.request_id +"\";' value='I am interested in this'/></td></tr>"
@@ -398,22 +530,23 @@ function displayItems(json, state) {
}
-function fetchItems(languages, types, projects, sortBy) {
+function fetchItems(languages, types, projects, sortBy, par) {
if (!languages) languages = []
if (!types) types = []
if (!projects) projects = []
- getAsyncJSON("/listitems.lua?lang=" + languages.join(",") + "&type=" + types.join(",") +"&project=" + projects.join(","),
+ getAsyncJSON("https://helpwanted.apache.org/listitems.lua?lang=" + languages.join(",") + "&type=" + types.join(",") +"&project=" + projects.join(","),
{
languages: languages,
types: types,
projects: projects,
- sortBy: sortBy
+ sortBy: sortBy,
+ parentObject: par
}, displayItems)
}
function fetchItemsAdmin() {
- getAsyncJSON("/listitems.lua", {admin: true}, displayItems)
+ getAsyncJSON("https://helpwanted.apache.org/listitems.lua", {admin: true}, displayItems)
}
function renderItem(json, state) {
@@ -448,5 +581,5 @@ function renderItem(json, state) {
}
function displayItem(id) {
- getAsyncJSON("/listitems.lua?id=" + id, id, renderItem)
+ getAsyncJSON("https://helpwanted.apache.org/listitems.lua?id=" + id, id, renderItem)
}
\ No newline at end of file