Skip to content

Commit

Permalink
Partner sites widgets available
Browse files Browse the repository at this point in the history 
- First batch of widgets crafted for partner sites
- Old map widget updated to match new widgets
- Get a widget pages updated to support the light/dark style
- Fixed faulty link causing donation flow to break.
- Fixed issue when accessing the thank you page without proper
  queryparameter (now render a 404 instead of 500 error)

. #193 #185 #182 #182 #154
  • Loading branch information
@kardan
kardan committed May 13, 2013
1 parent dd50c91 commit b1cec00
Show file tree
Hide file tree
Showing 37 changed files with 1,527 additions and 322 deletions.
61 changes: 61 additions & 0 deletions akvo/mediaroot/ps_widgets/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>rsr Widget</title>
<link rel="stylesheet" href="rsrWidgets.css" type="text/css" media="screen" title="main">
<link rel="stylesheet" href="w468px.css" type="text/css" media="screen" title="main">
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js.js"></script>
</head>

<body>
<button class="chooseColor bigBTN">Switch Color</button>
<button class="changeStatus bigBTN">Change Status</button>
<h1 class="seperator">Cobranded banner widget (468 pixels wide by 234 pixels high)</h1>
<section id="container" class="w468px darkBG rsrWidget floats-in">
<header class="floats-in">
<hgroup>
<h1>Project</h1>
<a href="http://akvo.org">akvo.org</a> <span>powered by</span> </hgroup>
</header>
<div id="content" class="floats-in">
<div class="projectDescr">
<ul class="basicInfo">
<li><span class="projectStatus notComplete shown">Needs Funding</span><span class="projectStatus complete hidden">complete</span></li>
<li><span class="projectLocation" id="project_location">Africa - Kolle, Mali</span></li>
</ul>
<h2 id="project_title"><a href="">Ensure access to safe water and sanitation</a></h2>
<a href="" class="photo_frame"> <img src="img.png" alt="This is the alt text" /> </a>
<p id="project_subtitle">Sustainable effort to ensure access to safe water and sanitation. </p>
</div>
<div class="projectBudget">
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="35" max="100" class="pbar shown"></progress>
<progress id="progressbar" value="100" max="100" class="pbar hidden"></progress>
</div>
</div>
<ul class="fundingwrap">
<li class="totalBudget">
<h4>Budget:</h4>
<span>$ 16,000</span></li>
<li class="raisedBudget">
<h4>Raised:</h4>
<span>$ 8,700</span></li>
<li class="neededBudget">
<h4>Needed:</h4>
<span>$ 7,300</span></li>
</ul>
<a href="" class="orangeAction">Donate</a> </div>
</div>
</section>
<h1 class="seperator">Project widget with Donation link (170 pixels wide by 840 pixels high)</h1>
<a href="index_w170px.html" class="bigBTN">go see it</a>
<h1 class="seperator">Project widget with Donation link (202 pixels wide by 840 pixels high)</h1>
<a href="index_w202px.html" class="bigBTN">go see it</a>
<h1 class="seperator">Small project (170 pixels wide by 312 pixels high)</h1>
<a href="index_w170pxSmall.html" class="bigBTN">go see it</a>
</body>
</html>
58 changes: 58 additions & 0 deletions akvo/mediaroot/ps_widgets/index_w170px.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>rsr Widget</title>
<link rel="stylesheet" href="rsrWidgets.css" type="text/css" media="screen" title="main">
<link rel="stylesheet" href="w170px.css" type="text/css" media="screen" title="main">
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js.js"></script>
</head>

<body>
<button class="chooseColor bigBTN">Switch Color</button>
<button class="changeStatus bigBTN">Change Status</button>
<p class="seperator">Project widget with Donation link (170 pixels wide by 840 pixels high)</p>
<div style="width:170px; height:840px;">
<section id="container" class="w170px darkBG rsrWidget floats-in">
<header class="floats-in">
<hgroup>
<h1>Project</h1>
<a>akvo.org</a> <span>powered by</span> </hgroup>
</header>
<div id="content" class="floats-in">
<div class="projectDescr">
<ul class="basicInfo">
<li><span class="projectStatus notComplete shown">Needs Funding</span><span class="projectStatus complete hidden">complete</span></li>
<li><span class="projectLocation" id="project_location">Africa - Kolle, Mali</span></li>
</ul>
<h2 id="project_title"><a href="">Ensure access to safe water and sanitation</a></h2>
<p id="project_subtitle">Sustainable effort to ensure access to safe water and sanitation. </p>
<a href="" class="photo_frame"> <img src="img.png" alt="This is the alt text" /> </a>
<p id="project_plan_summary"> Salinity, arsenics, lack of proper IWRM, incidence of natural disasters in the three districts in... <a href="/rsr/project/476/">More &#8250;</a> </p>
</div>
<div class="projectBudget">
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="35" max="100" class="pbar shown"></progress>
<progress id="progressbar" value="100" max="100" class="pbar hidden"></progress>
</div>
</div>
<ul class="fundingwrap">
<li class="totalBudget">
<h4>Budget:</h4>
<span>$ 16,000</span></li>
<li class="raisedBudget">
<h4>Raised:</h4>
<span>$ 8,700</span></li>
<li class="neededBudget">
<h4>Needed:</h4>
<span>$ 7,300</span></li>
</ul>
<a href="" class="orangeAction">Donate</a> </div>
</div>
</section>
</div>
</body>
</html>
34 changes: 34 additions & 0 deletions akvo/mediaroot/ps_widgets/index_w170pxSmall.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>rsr Widget</title>
<link rel="stylesheet" href="rsrWidgets.css" type="text/css" media="screen" title="main">
<link rel="stylesheet" href="w170pxSmall.css" type="text/css" media="screen" title="main">
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js.js"></script>
</head>

<body>
<button class="chooseColor bigBTN">Switch Color</button>
<button class="changeStatus bigBTN">Change Status</button>
<p class="seperator">Project widget with Donation link (170 pixels wide by 840 pixels high)</p>
<section id="container" class="w170pxSmall darkBG rsrWidget floats-in">
<header class="floats-in">
<hgroup>
<h1>Project</h1>
<a>akvo.org</a> <span>powered by</span> </hgroup>
</header>
<div id="content" class="floats-in">
<div class="projectDescr">
<ul class="basicInfo">
<li><span class="projectLocation" id="project_location">Africa - Kolle, Mali</span></li>
</ul>
<h2 id="project_title"><a href="">Ensure access to safe water and sanitation</a></h2>
<a href="" class="photo_frame"> <img src="img.png" alt="This is the alt text" /> </a>
</div>
</div>
</section>
</body>
</html>
56 changes: 56 additions & 0 deletions akvo/mediaroot/ps_widgets/index_w202px.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>rsr Widget</title>
<link rel="stylesheet" href="rsrWidgets.css" type="text/css" media="screen" title="main">
<link rel="stylesheet" href="w202px.css" type="text/css" media="screen" title="main">
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js.js"></script>
</head>

<body>
<button class="chooseColor bigBTN">Switch Color</button>
<button class="changeStatus bigBTN">Change Status</button>
<p class="seperator">Project widget with Donation link (170 pixels wide by 840 pixels high)</p>
<section id="container" class="w202px darkBG rsrWidget floats-in">
<header class="floats-in">
<hgroup>
<h1>Project</h1>
<a>akvo.org</a> <span>powered by</span> </hgroup>
</header>
<div id="content" class="floats-in">
<div class="projectDescr">
<ul class="basicInfo">
<li><span class="projectStatus notComplete shown">Needs Funding</span><span class="projectStatus complete hidden">complete</span></li>
<li><span class="projectLocation" id="project_location">Africa - Kolle, Mali</span></li>
</ul>
<h2 id="project_title"><a href="">Ensure access to safe water and sanitation</a></h2>
<p id="project_subtitle">Sustainable effort to ensure access to safe water and sanitation. </p>
<a href="" class="photo_frame"> <img src="img.png" alt="This is the alt text" /> </a>
<p id="project_plan_summary"> Salinity, arsenics, lack of proper IWRM, incidence of natural disasters in the three districts in... <a href="/rsr/project/476/">More &#8250;</a> </p>
</div>
<div class="projectBudget">
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="35" max="100" class="pbar shown"></progress>
<progress id="progressbar" value="100" max="100" class="pbar hidden"></progress>
</div>
</div>
<ul class="fundingwrap">
<li class="totalBudget">
<h4>Budget:</h4>
<span>$ 16,000</span></li>
<li class="raisedBudget">
<h4>Raised:</h4>
<span>$ 8,700</span></li>
<li class="neededBudget">
<h4>Needed:</h4>
<span>$ 7,300</span></li>
</ul>
<a href="" class="orangeAction">Donate</a> </div>
</div>
</section>
</body>
</html>
10 changes: 10 additions & 0 deletions akvo/mediaroot/ps_widgets/js.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
$("document").ready(function () {
$("button.chooseColor").click(function(){
$("#container").toggleClass("darkBG lightBG");
return false;
});
$("button.changeStatus").click(function(){
$(".projectStatus, .pbar").toggleClass("shown hidden");

})
})
46 changes: 24 additions & 22 deletions akvo/mediaroot/ps_widgets/rsrWidgets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,14 @@ body {
background: rgb(255,255,255);
padding: 0.5em;
}
iframe {
overflow:hidden;
}
iframe html, iframe body {
padding:0;
margin:0;
}

/*--------------------------------------------------------------
Headings
-------------------------------------------------------------- */
Expand Down Expand Up @@ -156,15 +164,14 @@ a img { border: none; }
padding: 0;
background: rgb(64,64,64); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTExMTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgb(64,64,64) 0%, rgb(17,17,17) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(64,64,64)), color-stop(100%, rgb(17,17,17))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(64,64,64) 0%, rgb(17,17,17) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(64,64,64) 0%, rgb(17,17,17) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(64,64,64) 0%, rgb(17,17,17) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgb(64,64,64) 0%, rgb(17,17,17) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#111111', GradientType=0 ); /* IE6-8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#111111', GradientType=0 ); /* IE6-8 */
overflow: hidden;
}
#container.lightBG {
Expand All @@ -183,11 +190,11 @@ a img { border: none; }
overflow: hidden;
}

/*************************** Widget Header ***********************/
/*************************** Widget Header **********************/
#container header {
height: 30px;
display: block;
overflow: auto;
width:100%;
display: inline-block;
overflow: hidden;
}
#container header h1 {
display: block;
Expand All @@ -199,23 +206,23 @@ a img { border: none; }
display: block;
font-size: 1.2em;
float: right;
margin: 6px 1% 0 2.5%;
margin: 6px 1% 0 1%;
text-indent: -9999px;
width: 60px;
height: 14px;
}
#container header span {
font-size: 0.5em;
font-size: 0.4em;
float: right;
margin-top: 2px;
margin-top: 3px;
}
#container.darkBG header { color: rgb(255,255,255); }
#container.darkBG header:after {
border-bottom: 1px solid rgb(86, 86, 86);
border-top: 1px solid rgb(0, 0, 0);
content: "";
display: block;
margin: 25px auto 0 auto;
margin: 0 auto 0 auto;
width: 98%;
visibility: visible;
}
Expand Down Expand Up @@ -288,24 +295,20 @@ ul.basicInfo li .projectLocation {
display: inline;
border: 1px solid rgb(0,0,0);
padding: 0;
width: 120px;
height: 90px;
margin: 0 1px 0 1px;
width: 37%;
margin: 0 2% 0 1px;
position:relative;
}
.photo_frame img {
padding: 0;
margin: 0;
width: 120px;
height: 90px;
width: 100%;
vertical-align: sub;
}
#project_subtitle {
font-family: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(152,152,152);
float: right;
padding: 0;
margin: 0 0 0 10px;
width: 190px;
max-height: 190px;
overflow: hidden;
}
Expand All @@ -314,12 +317,11 @@ ul.basicInfo li .projectLocation {
position: relative;
overflow: auto;
float: right;
width: 131px;
width: 26%;
border: 1px solid rgba(17,17,17,0.3);
background: rgb(59,59,59);
background: rgba(0,0,0,0.2);
margin: 0 5px 0 0;
max-height: 204px;
margin: 0 0.5% 0 0;
overflow: hidden;
}
#container.lightBG div.projectBudget {
Expand All @@ -333,7 +335,7 @@ ul.basicInfo li .projectLocation {
color: rgb(235,235,235);
}
#container.lightBG #project_plan_summary { color: rgb(32,32,36); }
ul.fundingwrap { margin: 5px 0 0 0; }
ul.fundingwrap {}
ul.fundingwrap li {
padding: 5px 0;
margin: 3px 0;
Expand Down
4 changes: 2 additions & 2 deletions akvo/mediaroot/ps_widgets/w170px.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.w170px {
width: 170px;
height: 840px;
width: 100%;
height: 100%;
}
.w170px ul.basicInfo { padding: 0.5em 1.5%; }
.w170px ul.basicInfo li {
Expand Down
6 changes: 5 additions & 1 deletion akvo/mediaroot/ps_widgets/w170pxSmall.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.w170pxSmall {
width: 170px;
width: 100%;
/*height: 100%;*/
height: 312px;
}
.w170pxSmall ul.basicInfo { padding: 0.5em 1.5%; }
Expand All @@ -24,3 +25,6 @@
height: auto;
}

.w170pxSmall header span {
display:none;
}
4 changes: 2 additions & 2 deletions akvo/mediaroot/ps_widgets/w202px.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.w202px {
width: 202px;
height: 840px;
width: 100%;
height: 100%;
}
.w202px ul.basicInfo { padding: 0.5em 1.5%; }
.w202px ul.basicInfo li {
Expand Down
Loading

0 comments on commit b1cec00

Please sign in to comment.