Fixes #30 - [Mobile] Minor details | In Sponsors, the 'Since' date ap…

…pears shrinked in three lines
crystal-lang · Mar 23, 2017 · 6165a6a · 6165a6a
1 parent 03a6dd7
commit 6165a6a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/_assets/css/_sponsors.scss b/_assets/css/_sponsors.scss
@@ -1,5 +1,6 @@
 table {
   border-color: $light-gray;
+  min-width: 280px;
   th {
     color: $black;
   }
@@ -9,6 +10,7 @@ table {
         border-radius: 50%;
         width: 40px;
         height: 40px;
+        min-width: 40px;
         @include grayscale(100%);
         @include opacity(60);
         object-fit: contain;
@@ -44,4 +46,13 @@ table {
       right: -4px;
     }
   }
+  .sponsor-mobile {
+    padding: .6rem .3rem;
+    .logo-container {
+      min-width: 30px;
+    }
+    .row {
+      margin-bottom: 0;
+    }
+  }
 }
diff --git a/sponsors/index.html b/sponsors/index.html
@@ -9,7 +9,7 @@
   <div class="row">
     <div class="col s12 m8">
       <table class="bordered">
-        <thead>
+        <thead class="hide-on-small-only">
           <th></th>
           <th>Supporter</th>
           <th>This month</th>
@@ -19,7 +19,7 @@
         <tbody>
           {% for sp in site.data.sponsors %}
             {% capture sponsor_class %}level-{{sp.level}} sponsor{% endcapture %}
-            <tr class="{{sponsor_class}}">
+            <tr class="{{sponsor_class}} hide-on-small-only">
               <td class="col-logo">
                 {% if sp.logo %}
                   <div class="logo">
@@ -54,6 +54,43 @@
                 {{sp.since}}
               </td>
             </tr>
+            <tr class="{{sponsor_class}} hide-on-med-and-up">
+              <td class="sponsor-mobile">
+                <div class="row">
+                  <div class="col s2 logo-container">
+                    {% if sp.logo %}
+                      <div class="logo">
+                        {% if sp.url %}
+                          <a href="{{sp.url}}" target="_blank">
+                            {% img '{{ assets[sp.logo].filename }}' %}
+                          </a>
+                        {% else %}
+                          {% img '{{ assets[sp.logo].filename }}' %}
+                        {% endif %}
+                      </div>
+                    {% else %}
+                      &nbsp;
+                    {% endif %}
+                  </div>
+                  <div class="col s6">
+                    {% if sp.url %}
+                      <a href="{{sp.url}}" target="_blank">
+                        {{sp.name}}
+                      </a>
+                    {% else %}
+                      {{sp.name}}
+                    {% endif %}
+                    <div>
+                      {{sp.since}}
+                     </div>
+                  </div>
+                  <div class="col s4 right-align">
+                    <div>${{sp.this_month}}</div>
+                    <div>${{sp.all_time}}</div>
+                  </div>
+                </div>
+              </td>
+            </tr>
           {% endfor %}
         </tbody>
       </table>