Better funding tables styling.
authorRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Wed, 26 Jun 2013 12:48:16 +0000 (14:48 +0200)
committerRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Wed, 26 Jun 2013 12:48:16 +0000 (14:48 +0200)
apps/funding/static/funding/funding.css
apps/funding/static/funding/funding.scss
apps/funding/templates/funding/offer_detail.html
apps/funding/templates/funding/wlfund.html

index 486f01f..89dd7aa 100755 (executable)
@@ -1 +1 @@
-.funding,.funding-top-header{background:orange;margin:auto;padding:5px 0;position:relative}.funding a.call,.funding-top-header a.call{height:1.2em;width:9em;padding:.35em .5em;margin:.5em;display:inline-block;vertical-align:top;text-align:center;background:rgb(.465%, 59.936%, 63.653%)}.funding .description,.funding-top-header .description{display:inline-block;padding-left:.6em}.funding .description a,.funding-top-header .description a{display:block;color:#000;padding:0 3px}.funding strong,.funding-top-header strong{font-size:1.5em;padding:.2em 0 0}.funding .progress,.funding-top-header .progress{width:95.7em;margin:.3em 0 .4em;border-radius:2em;background-image:url(/static/img/progress-pixel.png);background-repeat:repeat-y;background-color:rgba(236, 109, 0, .5);box-shadow:.1em .1em .1em #888}.funding .progress .piece,.funding-top-header .progress .piece{font-size:1.3em;padding:.3em .5em}.funding .with-button .progress,.funding-top-header .with-button .progress{width:78em}.funding .funding .funding-title-strong,.funding .funding-title,.funding-top-header .funding-title,.funding-top-header .funding-top-header .funding-title-strong{font-size:1.1em}.funding .funding-title-strong,.funding-top-header .funding-title-strong{font-weight:bold;font-size:1.5em}.funding .close,.funding-top-header .close{position:absolute;top:0;right:5px}.funding-top-header{width:97.5em}.wlfund{width:100%;border-collapse:collapse}.wlfund td{padding:0 0 1em 0;text-align:center}.wlfund td:last-child{text-align:right}.wlfund td div{padding:1em;box-shadow:0 2px 0 #DDD}.wlfund .funding-plus td div{background:rgba(13, 126, 133, .2)}.wlfund .funding-minus td div{background:#fff}.honking{background:#018189;font-size:1.5em;padding:.5em;color:#fff;border:0;box-shadow:.2em .2em .3em #888;position:relative}.honking:hover{box-shadow:none;top:.1em;left:.1em}.share a{margin-right:1.5em}.share a img{vertical-align:middle}.funding-handle{position:absolute;top:0;right:0;z-index:2;background:orange;cursor:pointer;padding:.2em 1em;border-radius:0 0 0 1em;font-size:13px}.funding-cover{float:left;margin-right:10px}.funding-details-intro{padding-top:1em}.funding-details-intro h3:first-of-type{margin-top:0}
\ No newline at end of file
+.funding,.funding-top-header{background:orange;margin:auto;padding:5px 0;position:relative}.funding a.call,.funding-top-header a.call{height:1.2em;width:9em;padding:.35em .5em;margin:.5em;display:inline-block;vertical-align:top;text-align:center;background:rgb(.465%, 59.936%, 63.653%)}.funding .description,.funding-top-header .description{display:inline-block;padding-left:.6em}.funding .description a,.funding-top-header .description a{display:block;color:#000;padding:0 3px}.funding strong,.funding-top-header strong{font-size:1.5em;padding:.2em 0 0}.funding .progress,.funding-top-header .progress{width:95.7em;margin:.3em 0 .4em;border-radius:2em;background-image:url(/static/img/progress-pixel.png);background-repeat:repeat-y;background-color:#f68900;box-shadow:.1em .1em .1em #888}.funding .progress .piece,.funding-top-header .progress .piece{font-size:1.3em;padding:.3em .5em}.funding .with-button .progress,.funding-top-header .with-button .progress{width:78em}.funding .funding .funding-title-strong,.funding .funding-title,.funding-top-header .funding-title,.funding-top-header .funding-top-header .funding-title-strong{font-size:1.1em}.funding .funding-title-strong,.funding-top-header .funding-title-strong{font-weight:bold;font-size:1.5em}.funding .close,.funding-top-header .close{position:absolute;top:0;right:5px}.funding-top-header{width:97.5em}.wlfund{width:100%;border-spacing:0}.wlfund td{padding:1em .5em 1em;text-align:center;border-top:1em solid rgba(255, 255, 255, 0);border-bottom:2px solid #DDD;background-clip:padding-box;-moz-background-clip:padding;-webkit-background-clip:padding}.wlfund td.oneline{white-space:nowrap}.wlfund td:last-child{text-align:right}.wlfund .funding-plus td{background-color:#cfe5e7}.wlfund .funding-minus td{background-color:#fff}.honking{background:#018189;font-size:1.5em;padding:.5em;color:#fff;border:0;box-shadow:.2em .2em .3em #888;position:relative}.honking:hover{box-shadow:none;top:.1em;left:.1em}.share a{margin-right:1.5em}.share a img{vertical-align:middle}.funding-handle{position:absolute;top:0;right:0;z-index:2;background:orange;cursor:pointer;padding:.2em 1em;border-radius:0 0 0 1em;font-size:13px}.funding-cover{float:left;margin-right:10px}.funding-details-intro{padding-top:1em}.funding-details-intro h3:first-of-type{margin-top:0}
\ No newline at end of file
index f26046b..13c6ce0 100755 (executable)
@@ -38,7 +38,7 @@
         border-radius: 2em;
         background-image: url(/static/img/progress-pixel.png);
         background-repeat: repeat-y;
         border-radius: 2em;
         background-image: url(/static/img/progress-pixel.png);
         background-repeat: repeat-y;
-        background-color: fade-out(#ec6d00, .5);
+        background-color: mix(#ec6d00, orange, .5);
         box-shadow: .1em .1em .1em #888;
     }
     .with-button .progress {
         box-shadow: .1em .1em .1em #888;
     }
     .with-button .progress {
 
 .wlfund {
     width: 100%;
 
 .wlfund {
     width: 100%;
-    border-collapse: collapse;
+    border-spacing:0;
 
     td {
 
     td {
-        padding: 0 0 1em 0;
+        padding: 1em .5em 1em;
         text-align: center;
         text-align: center;
+        border-top: 1em solid rgba(255, 255, 255, 0);
+        border-bottom: 2px solid #DDDDDD;
+
+        background-clip: padding-box;
+        -moz-background-clip: padding;
+        -webkit-background-clip: padding;
+    }
+    td.oneline {
+        white-space: nowrap;
     }
 
     td:last-child {
         text-align: right;
     }
 
     }
 
     td:last-child {
         text-align: right;
     }
 
-    td div {
-        padding: 1em;
-        box-shadow: 0 2px 0 #DDDDDD;
+    .funding-plus td {
+        background-color: mix(#0D7E85, white, .2);
     }
 
     }
 
-    .funding-plus td div {
-        background: fade-out(#0D7E85, .8);
-    }
-
-    .funding-minus td div {
-        background: white;
+    .funding-minus td {
+        background-color: white;
     }
 }
 
     }
 }
 
     h3:first-of-type {
         margin-top: 0;
     }
     h3:first-of-type {
         margin-top: 0;
     }
-}
\ No newline at end of file
+}
index 905e03b..5cd3e09 100755 (executable)
     {% autopaginate fundings 10 %}
     {% for funding in fundings %}
         <tr class="funding-plus">
     {% autopaginate fundings 10 %}
     {% for funding in fundings %}
         <tr class="funding-plus">
-            <td><div>{{ funding.payed_at.date }}</div></td>
-            <td><div>
+            <td class="oneline">{{ funding.payed_at.date }}</td>
+            <td>
                 {% if funding.name %}
                     {{ funding.name }}
                 {% else %}
                     <em>{% trans "Anonymous" %}</em>
                 {% endif %}
                 {% if funding.name %}
                     {{ funding.name }}
                 {% else %}
                     <em>{% trans "Anonymous" %}</em>
                 {% endif %}
-            </div></td>
-            <td><div>{{ funding.amount }} zł</div></td>
-            <td><div>
+            </td>
+            <td>{{ funding.amount }}&nbsp;zł</td>
+            <td>
                 {% for perk in funding.perks.all %}
                     {{ perk.name }}{% if not forloop.last %},{% endif %}
                 {% endfor %}&nbsp;
                 {% for perk in funding.perks.all %}
                     {{ perk.name }}{% if not forloop.last %},{% endif %}
                 {% endfor %}&nbsp;
-            </div></td>
+            </td>
     {% endfor %}
     </table>
     
     {% endfor %}
     </table>
     
index 54416fa..adffe7b 100755 (executable)
@@ -19,38 +19,36 @@ from successful fundraisers.{% endblocktrans %}
 <p>{% trans "Spending these remaining funds is recorded in this table." %}</p>
 </div>
 
 <p>{% trans "Spending these remaining funds is recorded in this table." %}</p>
 </div>
 
-
 <table class="normal-text wlfund">
 
     <tr>
 <table class="normal-text wlfund">
 
     <tr>
-        <td><div>{% trans "Date" %}:</div></td>
-        <td><div>{% trans "Operation" %}:</div></td>
-        <td><div>{% trans "Amount" %}:</div></td>
-        <td><div>{% trans "Balance" %}:</div></td>
+        <td>{% trans "Date" %}:</td>
+        <td>{% trans "Operation" %}:</td>
+        <td>{% trans "Amount" %}:</td>
+        <td>{% trans "Balance" %}:</td>
     </tr>
 
     {% for tag, entry in log %}
     {% if tag == 'spent' %}
         <tr class="funding-minus">
     </tr>
 
     {% for tag, entry in log %}
     {% if tag == 'spent' %}
         <tr class="funding-minus">
-            <td><div>{{ entry.timestamp }}</div></td>
-            <td><div>{% trans "Money spent on publishing the book" %}:
+            <td class="oneline">{{ entry.timestamp }}</td>
+            <td>{% trans "Money spent on publishing the book" %}:
                 <a href="{{ entry.book.get_absolute_url }}">
                 <a href="{{ entry.book.get_absolute_url }}">
-                {{ entry.book }}</a></div></td>
-            <td><div>-{{ entry.amount }} zł</div></td>
-            <td><div>{{ entry.total }} zł</div></td>
+                {{ entry.book }}</a></td>
+            <td>-{{ entry.amount }}&nbsp;zł</td>
+            <td>{{ entry.total }}&nbsp;zł</td>
         </tr>
     {% else %}
         <tr class="funding-plus">
         </tr>
     {% else %}
         <tr class="funding-plus">
-            <td><div>{{ entry.end }}</div></td>
-            <td><div>{% trans "Money remaining from the fundraiser for" %}:
+            <td class="oneline">{{ entry.end }}</td>
+            <td>{% trans "Money remaining from the fundraiser for" %}:
                 <a href="{{ entry.get_absolute_url }}">
                 <a href="{{ entry.get_absolute_url }}">
-                {{ entry }}</a></div></td>
-            <td><div>+{{ entry.wlfund }} zł</div></td>
-            <td><div>{{ entry.total }} zł</div></td>
+                {{ entry }}</a></td>
+            <td>+{{ entry.wlfund }}&nbsp;zł</td>
+            <td>{{ entry.total }}&nbsp;zł</td>
         </tr>
     {% endif %}
     {% endfor %}
 </table>
 
         </tr>
     {% endif %}
     {% endfor %}
 </table>
 
-
 {% endblock %}
 {% endblock %}