Gallery page updates, et. al.

* Revised layout, moved trailers to sidebar * Added promo trailers * Moved locale-sensitive links to settings/locale.py * Moved main submit button to far right position * Fix bug 841494 - alt attributes for image links
mozilla · Feb 22, 2013 · bbde918 · bbde918
1 parent 8686eb4
commit bbde918
Show file tree

Hide file tree

Showing 13 changed files with 279 additions and 150 deletions.
diff --git a/flicks/base/static/css/home.css b/flicks/base/static/css/home.css
@@ -244,6 +244,16 @@
   width: 620px;
 }
 
+#winners2012 .entry-list {
+  margin: 0 auto;
+}
+
+#winners2012 .entry {
+  width: 282px;
+  float: left;
+  margin: 0 15px 2em;
+}
+
 /* @Judges *********/
 #judges {
   background: url(/static/img/spot-1.png) 170% 10px no-repeat, url(/static/img/spot-2.png) -20% 200% no-repeat, url(/static/img/spot-3.png) 5% -320px no-repeat;
@@ -464,6 +474,10 @@
     font-size: 16px;
   }
 
+  #winners2012 .entry {
+    width: 205px;
+  }
+
   .judges {
     width: 480px;
     margin: 0 auto 2em;
@@ -620,6 +634,12 @@
     padding: 0;
   }
 
+  #winners2012 .entry {
+    width: 260px;
+    float: none;
+    margin: 0 auto 1.5em;
+  }
+
   .prizes {
     margin: 0;
   }
@@ -691,6 +711,20 @@
     height: 258px;
   }
 
+  #winners2012 .entry {
+    width: 200px;
+    float: left;
+    margin: 0 15px 1.5em;
+  }
+
+  #winners2012 .entry:nth-child(3n+1) {
+    clear: none;
+  }
+
+  #winners2012 .entry:nth-child(2n+1) {
+    clear: left;
+  }
+
   #about {
     background-position: 420px 55%, -320px -160px, -200px 170%;
   }

diff --git a/flicks/base/static/css/main.css b/flicks/base/static/css/main.css
@@ -285,6 +285,14 @@ a.dl {
   margin: 0 auto;
 }
 
+.wrap:after {
+  content: "";
+  display: block;
+  clear: both;
+  height: 0;
+  visibility: hidden;
+}
+
 .wrap.info {
   width: 780px;
   padding: 0 80px;
@@ -308,6 +316,16 @@ a.dl {
   max-width: 100%;
 }
 
+.main {
+  width: 700px;
+  float: left;
+}
+
+.aside {
+  width: 220px;
+  float: right;
+}
+
 /* @Header *********/
 #masthead {
   position: relative;
@@ -505,6 +523,7 @@ a.dl {
 
 /* @Footer *********/
 #footer {
+  clear: both;
   background: #2d3438;
   background: rgba(27,34,38,.9);
   color: #b7bcc0;
@@ -673,7 +692,7 @@ a.dl {
 }
 
 .entry-list .entry {
-  width: 300px;
+  width: 215px;
   float: left;
   margin: 0 10px 2em;
 }
@@ -688,12 +707,12 @@ a.dl {
   margin: 0 0 .25em -5px;
 }
 
-.entry h2 {
+.entry .title {
   font-size: 16px;
   font-weight: normal;
 }
 
-.entry h3 {
+.entry .vcard {
   font-size: 14px;
   font-weight: normal;
   font-style: italic;
@@ -908,6 +927,12 @@ body.noscroll .fixed #head-inner {
     width: 720px;
   }
 
+  .main,
+  .aside {
+    width: auto;
+    float: none;
+  }
+
   .wrap.info {
     width: 460px;
     padding: 0 120px;
@@ -927,18 +952,11 @@ body.noscroll .fixed #head-inner {
   }
 
   .entry-list {
-    width: 640px;
+    width: 710px;
+    padding-left: 10px;
     margin: 0 auto 1em;
   }
 
-  .entry-list .entry:nth-child(3n+1) {
-    clear: none;
-  }
-
-  .entry-list .entry:nth-child(2n+1) {
-    clear: left;
-  }
-
   #footer .sponsors {
     width: 480px;
   }
@@ -956,6 +974,12 @@ body.noscroll .fixed #head-inner {
     width: 300px;
   }
 
+  .main,
+  .aside {
+    width: auto;
+    float: none;
+  }
+
   .wrap.info {
     width: 290px;
     padding: 0 10px;
@@ -1067,7 +1091,6 @@ body.noscroll .fixed #head-inner {
 
   .entry-list {
     width: auto;
-    margin: 0;
   }
 
   .entry-list .entry {

diff --git a/flicks/base/static/img/home/vidthumb-trailer-ic.jpg b/flicks/base/static/img/home/vidthumb-trailer-ic.jpg
diff --git a/flicks/base/static/img/home/vidthumb-trailer-slapstick.jpg b/flicks/base/static/img/home/vidthumb-trailer-slapstick.jpg
diff --git a/flicks/base/static/img/home/vidthumb-trailer-three.jpg b/flicks/base/static/img/home/vidthumb-trailer-three.jpg
diff --git a/flicks/base/static/js/home.js b/flicks/base/static/js/home.js
@@ -108,7 +108,7 @@
         }
 
         // Launch video submission modal when the submit link is clicked.
-        $('#submit-button').click(function(e) {
+        $('#submit-button, #rules a.submit').click(function(e) {
             e.preventDefault();
             showSubmit();
         });

diff --git a/flicks/base/templates/faq.html b/flicks/base/templates/faq.html
@@ -37,7 +37,7 @@ <h2 id="q1">{{ _('What is Firefox Flicks?') }}</h2>
     </p>
 
     <p>
-    {% trans link_brief=link_brief %}
+    {% trans link_brief=settings.LINK_BRIEF[request.locale] %}
       With that in mind, the 2013 Firefox Flicks theme is "Get Mobilized."
       That's where you come in: help us inspire people to get mobilized for
       individual and collective progress. <a href="{{ link_brief }}">Read the creative brief</a>.
@@ -46,7 +46,7 @@ <h2 id="q1">{{ _('What is Firefox Flicks?') }}</h2>
 
     <h2 id="q2">{{ _('Where can I find out more about this year\'s theme and requirements?') }}</h2>
     <p>
-    {% trans link_brief=link_brief %}
+    {% trans link_brief=settings.LINK_BRIEF[request.locale] %}
       Everything you need to know about creating a flick for the contest
       can be found in the filmmakers' <a href="{{ link_brief }}">creative brief</a>.
     {% endtrans %}
@@ -73,7 +73,7 @@ <h2 id="q4">{{ _('When can I submit my flick to Firefox Flicks?') }}</h2>
 
     <h2 id="q5">{{ _('How do I submit my flick to Firefox Flicks and enter the contest?') }}</h2>
     <p>
-    {% trans link_submit='TBD' %}
+    {% trans link_submit=url('flicks.base.home')+'#submit' %}
       Fill out your filmmaker profile and submit your video <a href="{{ link_submit }}">here.</a>
       All flicks will be posted to the Firefox Flicks website using the Vimeo API.
       You'll need to provide your contact information, including your email, title your flick and select
@@ -122,7 +122,7 @@ <h2 id="q8">{{ _('Are there any requirements?') }}</h2>
       {% endtrans %}
       </li>
       <li>
-      {% trans %}
+      {% trans link_cclicense=settings.LINK_CCLICENSE[request.locale] %}
         Your flick must be submitted under a <a href="{{ link_cclicense }}" rel="external">Creative Commons - NonCommercial-ShareAlike license</a>
       {% endtrans %}
       </li>
@@ -376,7 +376,7 @@ <h2 id="q20">{{ _('How do I get high resolution Firefox name and logo artwork?')
     <h2 id="q21">{{ _('Where can I find music or other materials to include in my flick?') }}</h2>
     <p>
     {% trans link_ccommons='http://search.creativecommons.org',
-             link_pdwiki=link_pdwiki %}
+             link_pdwiki=settings.LINK_PDWIKI[request.locale] %}
       If you're looking for additional materials - whether music, video footage,
       artwork or graphics - we suggest you investigate public domain media.
       <a href="{{ link_ccommons }}" rel="external">Creative Commons</a> has a nice search

diff --git a/flicks/base/templates/home.html b/flicks/base/templates/home.html
@@ -40,8 +40,8 @@ <h2>{{ _('Now playing') }}: <br>{{ _('Flicks trailers') }}</h2>
               Get inspired and learn more about making your winning flick.
             {% endtrans %}
             </p>
-            <a href="https://vimeo.com/{{ video_ic }}" class="video-play" data-vimeo-id="{{ video_ic }}">
-              <img src="{{ static('img/home/vidthumb-promo-heroic.jpg') }}" alt="" class="thumbnail">
+            <a href="https://vimeo.com/{{ settings.VIDEO_IC[request.locale] }}" class="video-play" data-vimeo-id="{{ settings.VIDEO_IC[request.locale] }}">
+              <img src="{{ static('img/home/vidthumb-promo-heroic.jpg') }}" alt="{{ _('Flicks trailers') }}" class="thumbnail">
             </a>
           </div>
         </div>
@@ -57,7 +57,7 @@ <h2>{{ _('Enter by April 3') }}</h2>
               the Grand Prize.
             {% endtrans %}
             </p>
-            <p class="act"><a href="{{ link_brief }}" class="go" rel="external">{{ _('Get the creative brief') }}</a></p>
+            <p class="act"><a href="{{ settings.LINK_BRIEF[request.locale] }}" class="go" rel="external">{{ _('Get the creative brief') }}</a></p>
           </div>
         </div>
 
@@ -71,7 +71,7 @@ <h2>{{ _('Now playing') }}: <br>{{ _('Directors&#8217; cuts') }}</h2>
             {% endtrans %}
             </p>
             <a href="https://vimeo.com/59439701" class="video-play" data-vimeo-id="59439701">
-              <img src="{{ static('img/home/vidthumb-promo-falling.jpg') }}" alt="" class="thumbnail">
+              <img src="{{ static('img/home/vidthumb-promo-falling.jpg') }}" alt="{{ _('Directors&#8217; cuts') }}" class="thumbnail">
             </a>
           </div>
         </div>
@@ -84,6 +84,10 @@ <h2>{{ _('Now playing') }}: <br>{{ _('Directors&#8217; cuts') }}</h2>
             <h3>{{ _('Get seen by celebrity judges') }}</h3>
             <p><a href="#judges" class="go scroll">{{ _('Meet our all-star cast') }}</a></p>
           </li>
+          <li>
+            <h3>{{ _('Start thinking about your flick') }}</h3>
+            <p><a href="{{ settings.LINK_BRIEF[request.locale] }}" class="go" rel="external">{{ _('Read the creative brief') }}</a></p>
+          </li>
           <li class="{{ user.is_authenticated()|ifeq(True, 'submit') }}">
             <h3>{{ _('Submit your flick today') }}</h3>
             <div>
@@ -102,10 +106,6 @@ <h3>{{ _('Submit your flick today') }}</h3>
               {% endif %}
             </div>
           </li>
-          <li>
-            <h3>{{ _('Start thinking about your flick') }}</h3>
-            <p><a href="{{ link_brief }}" class="go" rel="external">{{ _('Read the creative brief') }}</a></p>
-          </li>
         </ul>
       </div>
     </div>
@@ -142,7 +142,7 @@ <h1 class="section-title">{{ _('What is Firefox Flicks?') }}</h1>
         </p>
         <ul class="info">
           <li><a href="{{ url('flicks.base.faq') }}" class="go">{{ _('See the FAQ') }}</a></li>
-          <li><a href="{{ link_brief }}" class="dl" rel="external">{{ _('Read the creative brief') }}</a></li>
+          <li><a href="{{ settings.LINK_BRIEF[request.locale] }}" class="dl" rel="external">{{ _('Read the creative brief') }}</a></li>
           <li><a href="http://mzl.la/XootKF" class="dl" rel="external">{{ _('Download the creative assets') }}</a></li>
         </ul>
       </div>
@@ -153,9 +153,21 @@ <h1 class="section-title">{{ _('What is Firefox Flicks?') }}</h1>
         </div>
 
         <ul class="videos-list">
-          <li><a href="https://vimeo.com/59439701" data-vimeo-id="59439701"><img src="{{ static('img/home/vidthumb-direct-falling.jpg') }}" alt="" class="thumbnail"></a></li>
-          <li><a href="https://vimeo.com/59440900" data-vimeo-id="59440900"><img src="{{ static('img/home/vidthumb-direct-squares.jpg') }}" alt="" class="thumbnail"></a></li>
-          <li><a href="https://vimeo.com/59440608" data-vimeo-id="59440608"><img src="{{ static('img/home/vidthumb-direct-weird.jpg') }}" alt="" class="thumbnail"></a></li>
+          <li>
+            <a href="https://vimeo.com/59439701" data-vimeo-id="59439701">
+              <img src="{{ static('img/home/vidthumb-direct-falling.jpg') }}" alt="Lee Sang Woo" class="thumbnail">
+            </a>
+          </li>
+          <li>
+            <a href="https://vimeo.com/59440900" data-vimeo-id="59440900">
+              <img src="{{ static('img/home/vidthumb-direct-squares.jpg') }}" alt="Eric Perrella" class="thumbnail">
+            </a>
+          </li>
+          <li>
+            <a href="https://vimeo.com/59440608" data-vimeo-id="59440608">
+              <img src="{{ static('img/home/vidthumb-direct-weird.jpg') }}" alt="Ferran Brooks" class="thumbnail">
+            </a>
+          </li>
         </ul>
       </div>
 
@@ -180,7 +192,7 @@ <h1 class="section-title">{{ _('Views from Cannes') }}</h1>
           <a href="https://vimeo.com/57627458" class="video-play" title='{% trans title='Falling in Love with Firefox' %}Watch "{{ title }}"{% endtrans %}' data-vimeo-id="57627458">
             <img src="{{ static('img/home/vidthumb-falling.jpg') }}" alt="" class="thumbnail">
             <hgroup>
-              <h2>Falling in Love with Firefox</h2>
+              <h2 class="title">Falling in Love with Firefox</h2>
               <h3 class="vcard">
                 <span class="fn">Lee Sang Woo</span>,
                 <span class="country-name">{{ country_name('kr') }}</span>
@@ -192,7 +204,7 @@ <h3 class="vcard">
           <a href="https://vimeo.com/57627456" class="video-play" title='{% trans title='Be a Hero' %}Watch "{{ title }}"{% endtrans %}' data-vimeo-id="57627456">
             <img src="{{ static('img/home/vidthumb-hero.jpg') }}" alt="" class="thumbnail">
             <hgroup>
-              <h2>Be a Hero</h2>
+              <h2 class="title">Be a Hero</h2>
               <h3 class="vcard">
                 <span class="fn">Andres Felipe Mesa</span>,
                 <span class="country-name">{{ country_name('co') }}</span>
@@ -204,7 +216,7 @@ <h3 class="vcard">
           <a href="https://vimeo.com/57627464" class="video-play" title='{% trans title='Squares' %}Watch "{{ title }}"{% endtrans %}' data-vimeo-id="57627464">
             <img src="{{ static('img/home/vidthumb-squares.jpg') }}" alt="" class="thumbnail">
             <hgroup>
-              <h2>Squares</h2>
+              <h2 class="title">Squares</h2>
               <h3 class="vcard">
                 <span class="fn">Eric Perrella</span>,
                 <span class="country-name">{{ country_name('ca') }}</span>
@@ -216,7 +228,7 @@ <h3 class="vcard">
           <a href="https://vimeo.com/57627933" class="video-play" title='{% trans title='Where the Weird Things Are Not' %}Watch "{{ title }}"{% endtrans %}' data-vimeo-id="57627933">
             <img src="{{ static('img/home/vidthumb-weird.jpg') }}" alt="" class="thumbnail">
             <hgroup>
-              <h2>Where the Weird Things Are Not</h2>
+              <h2 class="title">Where the Weird Things Are Not</h2>
               <h3 class="vcard">
                 <span class="fn">Ferran Brooks</span>,
                 <span class="country-name">{{ country_name('es') }}</span>
@@ -228,7 +240,7 @@ <h3 class="vcard">
           <a href="https://vimeo.com/57627455" class="video-play" title='{% trans title='Paranoid' %}Watch "{{ title }}"{% endtrans %}' data-vimeo-id="57627455">
             <img src="{{ static('img/home/vidthumb-paranoid.jpg') }}" alt="" class="thumbnail">
             <hgroup>
-              <h2>Paranoid</h2>
+              <h2 class="title">Paranoid</h2>
               <h3 class="vcard">
                 <span class="fn">Sean O‘Riordan</span>,
                 <span class="country-name">{{ country_name('gb') }}</span>
@@ -240,7 +252,7 @@ <h3 class="vcard">
           <a href="https://vimeo.com/57627454" class="video-play" title='{% trans title='Fenwick & Candy' %}Watch "{{ title }}"{% endtrans %}' data-vimeo-id="57627454">
             <img src="{{ static('img/home/vidthumb-fenwick.jpg') }}" alt="" class="thumbnail">
             <hgroup>
-              <h2>Fenwick & Candy</h2>
+              <h2 class="title">Fenwick & Candy</h2>
               <h3 class="vcard">
                 <span class="fn">Gavin Fenwick Christensen</span>,
                 <span class="country-name">{{ country_name('au') }}</span>
@@ -499,7 +511,7 @@ <h2>{{ _('Privacy') }}</h2>
 
         <h2>{{ _('How to enter') }}</h2>
         <p>
-        {% trans rules_link=url('flicks.base.rules') %}
+        {% trans %}
           Nice work! You made it all the way to the end. When you're ready,
           <a href="#" class="submit">start here to submit your flick.</a>
         {% endtrans %}