Desktop frontage pretty much finished

tablet and small in-between sized screens to follow

Signed-off-by: Josh Angell <josh@supercooldesign.co.uk>

3 files changed, 172 insertions, 73 deletions

diff --git a/templates/web/fixmystreet/index.html b/templates/web/fixmystreet/index.html
index 41067b26b..a63324d60 100644
--- a/templates/web/fixmystreet/index.html
+++ b/templates/web/fixmystreet/index.html
@@ -27,89 +27,89 @@
     </div>
 </div>
 
+<div class="front-tablewrapper">
+    <div id="front-howto">
+        <h2>[% loc('How to report a problem') %]</h2>
+        
+        <ol class="big-numbers">
+            <li>[% question %]</li>
+            <li>[% loc('Locate the problem on a map of the area') %]</li>
+            <li>[% loc('Enter details of the problem') %]</li>
+            <li>[% loc('We send it to the council on your behalf') %]</li>
+        </ol>
+        
+        <section class="full-width">
+        [% INCLUDE "front/stats.html" %]
+        [% TRY %][% INCLUDE "front/tips.html" %][% CATCH file %][% END %]
+        </section>
+    </div>
 
-<div id="front-howto">
-    <h2>[% loc('How to report a problem') %]</h2>
-    
-    <ol class="big-numbers">
-        <li>[% question %]</li>
-        <li>[% loc('Locate the problem on a map of the area') %]</li>
-        <li>[% loc('Enter details of the problem') %]</li>
-        <li>[% loc('We send it to the council on your behalf') %]</li>
-    </ol>
-    
-    <section class="full-width">
-    [% INCLUDE "front/stats.html" %]
-    [% TRY %][% INCLUDE "front/tips.html" %][% CATCH file %][% END %]
-    </section>
-</div>
-
-
-
-[% 
-    recent_photos = c.cobrand.recent_photos(3);
-    probs         = c.cobrand.recent();
-%]
 
-[% IF probs.size || recent_photos.size %]
-<div id="front-recently">
-    <h2>[% loc('Recently reported problems') %]</h2>
-    [% IF recent_photos.size %]
-        <p id="front_photos">
-        [% FOREACH p IN recent_photos %]
-            <a href="/report/[% p.id %]"><img border="0" height="100"
-                src="/photo?tn=1;id=[% p.id %]" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
+    [% 
+        recent_photos = c.cobrand.recent_photos(3);
+        probs         = c.cobrand.recent();
+    %]
+
+    [% IF probs.size || recent_photos.size %]
+    <div id="front-recently">
+        <h2>[% loc('Recently reported problems') %]</h2>
+
+<!--         [% IF recent_photos.size %]
+            <p id="front_photos">
+            [% FOREACH p IN recent_photos %]
+                <a href="/report/[% p.id %]"><img border="0" height="100"
+                    src="/photo?tn=1;id=[% p.id %]" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
+            [% END %]
+            </p>
+        [% END %] -->
+
+        [% IF probs.size %]
+        <section class="full-width">
+            <ul class="issue-list-a">
+            [% FOREACH p IN probs %]
+                <li>
+                    <a href="/report/[% p.id %]">
+                        <div class="text">
+                            <h4>[% p.title | html %]</h4>
+                            <small>[% prettify_epoch( p.confirmed_local.epoch, 1 ) %]</small>
+                        </div>
+                    </a>
+                </li>    
+            [% END %]
+            </ul>
+        </section>
         [% END %]
-        </p>
-    [% END %]
-
-    [% IF probs.size %]
-    <section class="full-width">
-        <ul class="issue-list-a">
-        [% FOREACH p IN probs %]
-            <li>
-                <a href="/report/[% p.id %]">
-                    <div class="text">
-                        <h4>[% p.title | html %]</h4>
-                        <small>[% prettify_epoch( p.confirmed_local.epoch, 1 ) %]</small>
-                    </div>
-                </a>
-            </li>    
-        [% END %]
-        </ul>
-    </section>
+    </div>
     [% END %]
 </div>
-[% END %]
-
 
-<div id="front-mobileapps">
-    <h2>Mobile apps</h2>
+<div class="front-tablewrapper bordered">
+    <div id="front-mobileapps">
+        <h2>Mobile apps</h2>
 
-    <ul>
-        <li><a href="http://itunes.apple.com/gb/app/fixmystreet/id297456545">iPhone</a></li>
-        <li><a href="http://itunes.apple.com/gb/app/streetreport/id371891859">iPhone Street Report</a></li>
-        <li><a href="https://market.android.com/details?id=com.android.fixmystreet">Android</a></li>
-        <li><a href="http://store.ovi.com/content/107557">Nokia</a></li>
-    </ul>
-    
-</div>
+        <ul>
+            <li><a class="m-app-iphone" href="http://itunes.apple.com/gb/app/fixmystreet/id297456545">iPhone</a></li>
+            <li><a class="m-app-droid" href="https://market.android.com/details?id=com.android.fixmystreet">Android</a></li>
+            <li><a class="m-app-nokia" href="http://store.ovi.com/content/107557">Nokia</a></li>
+            <li><a class="m-app-iphone-streetreport" href="http://itunes.apple.com/gb/app/streetreport/id371891859">iPhone Street Report</a></li>
+        </ul>
+    </div>
 
-<div id="front-ads">
-    <ul>
-        <li>
-            <h4>[% loc('Are you a developer?') %]</h4>
-            <p>[% loc('Would you like to contribute to FixMyStreet? Our code is open source and <a href="http://github.com/mysociety/fixmystreet">available on GitHub</a>.') %]</p>
-        </li>
-        <li>
-            <h4>[% loc('Are you from a council?') %]</h4>
-            <p>[% loc('Would you like better integration with FixMyStreet? <a href="http://www.mysociety.org/fixmystreet-for-local-council-websites/">Find out about FixMyStreet for councils</a>.') %]</p>
-        </li>
-    </ul>
+    <div id="front-ads">
+        <ul>
+            <li>
+                <h4>[% loc('Are you a developer?') %]</h4>
+                <p>[% loc('Would you like to contribute to FixMyStreet? Our code is open source and <a href="http://github.com/mysociety/fixmystreet">available on GitHub</a>.') %]</p>
+            </li>
+            <li>
+                <h4>[% loc('Are you from a council?') %]</h4>
+                <p>[% loc('Would you like better integration with FixMyStreet? <a href="http://www.mysociety.org/fixmystreet-for-local-council-websites/">Find out about FixMyStreet for councils</a>.') %]</p>
+            </li>
+        </ul>
+    </div>
 </div>
 
 
-
 <!-- [% TRY %][% INCLUDE 'front/news.html' %][% CATCH file %][% END %] -->
 
 
diff --git a/web/cobrands/fixmystreet/images/sprite.png b/web/cobrands/fixmystreet/images/sprite.png
index 3c2ce9ee8..04044d1e9 100644
--- a/web/cobrands/fixmystreet/images/sprite.png
+++ b/web/cobrands/fixmystreet/images/sprite.png
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index e013130f5..f53141135 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -274,7 +274,7 @@ body.frontpage {
       position:static;
     }
     .content {
-      padding-top:15em;
+      padding-top:12em;
     }
   }
   .nav-wrapper-2{
@@ -342,6 +342,105 @@ body.frontpage {
   }
 }
 
+.front-tablewrapper {
+  display:table;
+  width:100%;
+  padding:1em 0;
+  >div {
+    display:table-cell;
+    width:50%;
+  }
+  #front-howto,
+  #front-mobileapps {
+    border-right:1em solid #fff;
+  }
+  #front-recently,
+  #front-ads {
+    border-left:1em solid #fff;
+  }
+  .full-width {
+    width:auto;
+    margin:0;
+  }
+}
+.bordered {
+  margin:0 -1em;
+  padding:0 1em;
+  width:auto;
+  border-top:0.25em solid $primary;
+}
+
+#front-howto {
+  #front_stats {
+    background:none;
+    border-top:0.25em solid $primary;
+    padding-top:1em;
+    div {
+      big {
+        color:$primary;
+        font-size:3.2308em;
+      }
+    }
+  }
+}
+
+#front-mobileapps {
+  background:none;
+  padding:0;
+  @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0);
+  h2 {
+    color:#222;
+    margin-top:0;
+  }
+  ul {
+    li {
+      border-bottom:none;
+      float:left;
+      margin:0 1em 1em 0;
+      a {
+        color:#222;
+        padding:0;
+        width: 96px;
+        height: 32px;
+        margin:0 auto;
+        text-indent: -999999px;
+        background: url(images/sprite.png) -12px -3610px no-repeat;
+        @include opacity(0.8);
+        &:hover {
+          @include opacity(1);
+        }
+        &.m-app-iphone {
+          background-position: -12px -3610px;
+        }
+        &.m-app-iphone-streetreport {
+          background-position: -12px -3678px;
+          height:50px;
+        }
+        &.m-app-droid {
+          background-position: -12px -3756px;
+        }
+        &.m-app-nokia {
+          background-position: -12px -3820px;
+          width:74px;
+        }
+      }
+    }
+  }
+}
+
+#front-ads {
+  ul {
+    display:table;
+    li {
+      display:table-cell;
+      border-bottom:none;
+      &:last-child {
+        border-left:1.25em solid #fff;
+      }
+    }
+  }
+}
+