[#1265] Make donate button visible on all viewport sizes

akvo · Mar 6, 2015 · 3183d30 · 3183d30
1 parent 9449e72
commit 3183d30
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 18 deletions.
diff --git a/akvo/rsr/static/rsr/v3/css/src/main.css b/akvo/rsr/static/rsr/v3/css/src/main.css
diff --git a/akvo/rsr/static/rsr/v3/css/src/main.scss b/akvo/rsr/static/rsr/v3/css/src/main.scss
@@ -1016,6 +1016,17 @@ h4.detailedInfo {
                     background: darken(rgba($rsrBlue, 0.1), 0%);
                     border: thin solid rgba($rsrBlue, 0.3);
                 }
+                .donateButton {
+                    text-align: left;
+                    a {
+                        @include responsive(medium-max-screens) {
+                            margin-top: 0.6em;
+                        }
+                        @include responsive(small-max-screens) {
+                            margin-top: 1em;
+                        }
+                    } 
+                }
             }
         }
     }

diff --git a/akvo/templates/partials/project_budget.html b/akvo/templates/partials/project_budget.html
@@ -15,7 +15,7 @@
 	<dt>Total Budget:</dt><dd>{{project.get_currency_display}}{{project.budget|floatformat|intcomma}}</dd>
 </dl>
 {% if project.accepts_donations %}
-<div class="text-center ">
+<div class="text-center donateButton">
 	<a href="{% url 'project-donate' project.id %}" class="btn btn-primary">{% trans "Donate" %}</a>
 </div>
 {% endif %}
diff --git a/akvo/templates/project_directory.html b/akvo/templates/project_directory.html
@@ -107,6 +107,12 @@ <h1><a href="{% url 'project-main' p.id %}"><i class="fa fa-folder-o"></i> {{p.t
               <span class="detailedInfo">{% trans "Status" %}</span> {{p.get_status_display}}<br>
               <span class="detailedInfo">{% trans "Finance" %}</span>
               {% widthratio p.funds p.budget 100 %}% {% trans "of" %} {{p.get_currency_display}}{{p.budget|floatformat|intcomma}}
+              {% if p.accepts_donations %}
+              <br>
+              <span class="donateButton">
+                <a href="{% url 'project-donate' p.id %}" class="btn btn-primary">{% trans "Donate" %}</a>
+              </span>
+              {% endif %}
               </p>
             </div>
           </div>
@@ -118,6 +124,12 @@ <h1><a href="{% url 'project-main' p.id %}"><i class="fa fa-folder-o"></i> {{p.t
               <span class="detailedInfo">{% trans "Status" %}</span> {{p.get_status_display}}<br>
               <span class="detailedInfo">{% trans "Finance" %}</span>
               {% widthratio p.funds p.budget 100 %}% {% trans "of" %} {{p.get_currency_display}}{{p.budget|floatformat|intcomma}}
+              {% if p.accepts_donations %}
+              <br>
+              <span class="donateButton">
+                <a href="{% url 'project-donate' p.id %}" class="btn btn-primary">{% trans "Donate" %}</a>
+              </span>
+              {% endif %}
             </p>
           </div>
           <div class="col-sm-3 hidden-xs hidden-sm">