website Changeset - 3be224c69a81 · Conservancy Kallithea

Changeset - 3be224c69a81

Parent rev.

Child rev.

[Not reviewed]

0 2 0

Bradley Kuhn (bkuhn) - 9 years ago 2015-03-09 06:48:57
bkuhn@ebb.org

Diff CSS for fundraiser-percentage w/ progressbar.

If Javascript is present to generate the pogressbar, then the CSS really
should be radically different.

Graceful degradation.

2 files changed with 8 insertions and 6 deletions:

www/conservancy/static/conservancy.css

www/conservancy/static/supporter-page.js

0 comments (0 inline, 0 general)

www/conservancy/static/conservancy.css

➞

Show inline comments

@@ ... / @@ -105,54 +105,49 @@ h3 { margin-top: .6em; margin-bottom: .4em; } @@
   margin-right: 3px;
   border: 1px solid #808080;
   font-size: .8em;
   background: #fff url(/img/nav-bg.png) bottom repeat-x;
   border-color: #ffffff;
+}
 #navbar li:hover a { background: #577632; color: #fff; }
 #navbar li.supporter:hover a { background: #577632; color: #CE1F1F; }
 #navbar li { float: left; display: inline; margin-bottom: 3px; }
 #mainContent {
     margin-left: 50px;
     margin-right: 50px;
+}
 #progressbar {
     height: 30px;
+}
 #progressbar .ui-widget-header {
     background: rgb(206, 31, 31);
+}
 #fundraiser-percentage {
     float: right;
     align: center;
     margin-right: 40%;
     margin-top: 2.5%;
     font-style: bold;
     color: green;
     text-align: center;
+}
 .content-with-donate-sidebar {
     align: left;
     width: 80%;
+}
 #container {
     width: 100%;
     overflow: hidden;
+}
 #container #mainContent {
     background: #fffff;
     margin-left: 210px;
     margin-right: 50px;
+}
 #container #sidebar {
     width: 200px;
     float: left;
     background-color: #ccd4a3;
+}
 #container #sidebar li {
     text-align: center;

www/conservancy/static/supporter-page.js

➞

Show inline comments

 /* Copyright (C) 2012-2013 Denver Gingerich,
 ** Copyright (C) 2013-2014 Bradley M. Kuhn.
 ** License: GPLv3-or-later
 **  Find a copy of GPL at https://sfconservancy.org/GPLv3
 */
 $(document).ready(function() {
     var goal  = $('span#fundraiser-goal').text();
     var soFar = $('span#fundraiser-so-far').text();
     var noCommaGoal = goal.replace(/,/g, "");
     var noCommaSoFar = soFar.replace(/,/g, "");
     var percentage = (parseFloat(noCommaSoFar) / parseFloat(noCommaGoal)) * 100;
     $('span#fundraiser-percentage').text(percentage.toFixed(2) + "%");
     $('span#fundraiser-percentage').css({ 'color'        : 'green',
                                           'font-weight'  : 'bold',
                                           'float'        : 'right',
                                           'margin-right' : '40%',
                                           'margin-top'   : '2.5%',
                                           'text-align'   : 'right'});
     $("#progressbar").progressbar({ value:  percentage });
     $('.toggle-content').hide();
     $('.toggle-control')
      .addClass('clickable')
      .bind('click', function() {
         var $control = $(this);
         var $parent = $control.parents('.toggle-unit');
         $parent.toggleClass('expanded');
         $parent.find('.toggle-content').slideToggle();
         // if control has HTML5 data attributes, use to update text
         if ($parent.hasClass('expanded')) {
             $control.html($control.attr('data-expanded-text'));
         } else {
             $control.html($control.attr('data-text'));
+        }
     });
     $('a.donate-now')
       .addClass('clickable')
       .bind('click', function() {
         var $control = $('#donate-box');

0 comments (0 inline, 0 general)