Skip to content

Commit

Permalink
Markup changes to PS widget
Browse files Browse the repository at this point in the history 
. #182
  • Loading branch information
@kardan
kardan committed Apr 18, 2013
1 parent 038c134 commit 6637908
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 34 deletions.
74 changes: 64 additions & 10 deletions akvo/mediaroot/ps_widgets/cobranded_banner/rsrWidgets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ a img { border: none; }
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 */
overflow:hidden;
}
#container.lightBG {
-moz-box-sizing: content-box;
Expand All @@ -175,11 +176,17 @@ a img { border: none; }
-moz-box-shadow: 0 0 1px rgb(174,174,174);
-o-box-shadow: 0 0 1px rgb(174,174,174);
box-shadow: 0 0 1px rgb(174,174,174);
overflow:hidden;
}
.w468px {
width: 468px;
height: 234px;
}
.w170px {
width: 170px;
height: 840px;
}

/*************************** Widget Header ***********************/
#container header {
height: 30px;
Expand All @@ -192,7 +199,7 @@ a img { border: none; }
float: left;
margin: 2px 0 0 1%;
}
#container header h2 {
#container header a {
display: block;
font-size: 1.2em;
float: right;
Expand All @@ -217,10 +224,10 @@ a img { border: none; }
visibility: visible;
}
#container.darkBG header h1 { color: rgb(74,179,227); }
#container.darkBG header h2 { background: url(logoDark.png) center center no-repeat; }
#container.darkBG header a { background: url(logoDark.png) center center no-repeat; }
#container.lightBG header { color: rgb(32,32,36); }
#container.lightBG header:after {
border-bottom: 1px solid rgb(203,203,203);
border-bottom: 1px solid rgb(223, 223, 223);
border-top: 1px solid rgb(245,245,245);
content: "";
display: block;
Expand All @@ -229,17 +236,18 @@ a img { border: none; }
visibility: visible;
}
#container.lightBG header h1 { color: rgb(44,42,116); }
#container.lightBG header h2 { background: url(logoLight.png) center center no-repeat; }
#container.lightBG header a { background: url(logoLight.png) center center no-repeat; }
/*************************** Widget div ***********************/
#content { position: relative; }
.projectDescr {
/*************************** Project panel ***********************/
.w468px .projectDescr {
position: relative;
overflow: auto;
float: left;
width: 325px;
margin: 0 0 0 5px;
}
/*************************** Project panel ***********************/

ul.basicInfo {
font-family: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: block;
Expand All @@ -250,11 +258,15 @@ ul.basicInfo {
background: rgba(255,255,255,0.1);
clear: both;
}
.w170px ul.basicInfo {
padding:0.5em 1.5%;
}
#container.lightBG ul.basicInfo {
background: rgb(235,235,235);
background: rgba(0,0,0,0.1);
}
ul.basicInfo li { display: inline; }
.w468px ul.basicInfo li { display: inline; }
.w170px ul.basicInfo li { margin:0 auto 0.25em auto; display:table; }
ul.basicInfo li .projectStatus {
display: inline-block;
padding: 0.15em 0.5em;
Expand All @@ -263,6 +275,11 @@ ul.basicInfo li .projectStatus {
border-radius: 0.15em;
color: rgb(255,255,255);
}
.w170px ul.basicInfo li .projectStatus {
text-align:center;
margin:0.25em auto;
}

.projectStatus.notComplete { background: rgb(217,104,0); }
.projectStatus.complete { background: rgb(140,198,63); }
ul.basicInfo li .projectLocation {
Expand All @@ -286,6 +303,15 @@ ul.basicInfo li .projectLocation {
margin: 0.75em 0 0.75em 5px;
color: rgb(255,255,255);
}
.w170px #project_title {
width: 98%;
display: block;
font-size: 1em;
text-transform: uppercase;
margin: 0.75em 0 0.25em 5px;
color: rgb(255,255,255);
}

#project_title a { color: rgb(255,255,255); }
#container.lightBG #project_title a { color: rgb(32,32,36); }
.photo_frame {
Expand All @@ -297,6 +323,10 @@ ul.basicInfo li .projectLocation {
height: 90px;
margin: 0 1px 0 1px;
}
.w170px .photo_frame {
float: none;
margin: 0 25px;
}
.photo_frame img {
padding: 0;
margin: 0;
Expand All @@ -306,14 +336,19 @@ ul.basicInfo li .projectLocation {
}
#project_subtitle {
font-family: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(102,102,102);
color: rgb(152,152,152);
float: right;
padding: 0;
margin: 0 0 0 10px;
width: 190px;
max-height: 190px;
overflow: hidden;
}
.w170px #project_subtitle {
width:165px;
margin: 5px 5px 10px 5px;
float:none;
}
/*************************** Budget panel ***********************/
.projectBudget {
position: relative;
Expand All @@ -327,6 +362,20 @@ ul.basicInfo li .projectLocation {
max-height: 204px;
overflow: hidden;
}
.w170px .projectBudget {
position: relative;
float: none;
width: 160px;
margin:0 5px 0 0;
max-height: none;
padding:15px 4px;
}
#project_plan_summary {
font-family: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin:10px 5px;
color:rgb(235,235,235);
width:160px;
}
#container.lightBG div.projectBudget {
background: rgb(235,235,235);
background: rgba(123,123,123,0.1);
Expand Down Expand Up @@ -414,6 +463,11 @@ li.neededBudget {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efaa00', endColorstr='#cf4f00', GradientType=0 ); /* IE6-8 */
border: 2px solid rgb(217,104,0);
}

.w170px .orangeAction {
margin: 15px auto;

}
.orangeAction:hover {
background: rgb(164,179,87); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
Expand Down Expand Up @@ -441,7 +495,7 @@ li.neededBudget {
border: 3px solid rgb(52,52,52);
}
.html5-progress-bar progress::-webkit-progress-bar {
background-color: rgb(217,104,0);
background-color: rgb(225,225,225);
border-radius: 9px;
}
.html5-progress-bar progress::-webkit-progress-value {
Expand Down Expand Up @@ -493,7 +547,7 @@ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIH
-o-border-radius: 0.15em;
border-radius: 0.15em;
color: rgb(255, 255, 255);
font-size: 7.8em;
font-size: 2.8em;
text-transform:uppercase;
padding: 0.5em 1.75em;
background: rgb(0,136,204); /* Old browsers */
Expand Down
49 changes: 25 additions & 24 deletions akvo/templates/partner_sites/widgets/cobranded_banner.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,11 @@
<body>
<section id="container" class="w468px {{style}} rsrWidget floats-in">
<header class="floats-in">
<hgroup>
<h1>{% trans "Project" %}</h1>
<a href="{{domain_url}}">
<h2>akvo.org</h2>
</a>
<span>{% trans "powered by" %}</span> </hgroup>
<hgroup>
<h1>{% trans "Project" %}</h1>
<a href="{{domain_url}}">akvo.org</a>
<span>{% trans "powered by" %}</span>
</hgroup>
</header>
<div id="content" class="floats-in">
<div class="projectDescr">
Expand Down Expand Up @@ -47,7 +46,6 @@ <h2>akvo.org</h2>
{% trans "None" %}
</span>
{% endif %}
</span>
</li>
{% if project.primary_location.country %}
<li>
Expand All @@ -57,7 +55,7 @@ <h2>akvo.org</h2>
{% endif %}
{{project.primary_location.country}}
</span>
</li>
</li>
{% endif %}
</ul>
<h2 id="project_title"><a href="{{app_url}}{{project.get_absolute_url}}">{{project.title|smart_truncate:60}}</a></h2>
Expand All @@ -71,22 +69,25 @@ <h2 id="project_title"><a href="{{app_url}}{{project.get_absolute_url}}">{{proje
<div class="progress-bar-wrapper">
<progress id="progressbar" value="{{project.funds}}" max="{{project.budget}}" class="pbar"></progress>
</div>
<ul class="fundingwrap">
<li class="totalBudget">
<h4>{% trans "Budget" %}:</h4>
<span>{{project.get_currency_display|safe}} {{project.budget|round|intcomma}}</span></li>
<li class="raisedBudget">
<h4>{% trans "Raised" %}:</h4>
<span>{{project.get_currency_display|safe}} {{project.funds|round|intcomma}}</span></li>
<li class="neededBudget">
<h4>{% trans "Needed" %}:</h4>
<span>{{project.get_currency_display|safe}} {{project.funds_needed|round|intcomma}}</span></li>
</ul>
{% if project.funds_needed|round != 0 and project.status != 'L' and project.status != 'R' %}
<a href="{{domain_url}}/rsr/project/{{project.id}}/donate/" class="orangeAction">{% trans "Donate" %}</a>
{% endif %}
</div>
</div>
</div>
<ul class="fundingwrap">
<li class="totalBudget">
<h4>{% trans "Budget" %}:</h4>
<span>{{project.get_currency_display|safe}} {{project.budget|round|intcomma}}</span>
</li>
<li class="raisedBudget">
<h4>{% trans "Raised" %}:</h4>
<span>{{project.get_currency_display|safe}} {{project.funds|round|intcomma}}</span>
</li>
<li class="neededBudget">
<h4>{% trans "Needed" %}:</h4>
<span>{{project.get_currency_display|safe}} {{project.funds_needed|round|intcomma}}</span>
</li>
</ul>
{% if project.funds_needed|round != 0 and project.status != 'L' and project.status != 'R' %}
<a href="{{domain_url}}/rsr/project/{{project.id}}/donate/" class="orangeAction">{% trans "Donate" %}</a>
{% endif %}
</div>
</div>
</section>
</body>
Expand Down

0 comments on commit 6637908

Please sign in to comment.