Permalink
Browse files

Bug 850205 - make submit button prominent

Made the button more visible on the home page, and also added a submit button to the social nav.
  • Loading branch information...
1 parent f403fb4 commit 3a3c63f7e16e0e572124eb667daca8f58fcd74d6 @craigcook craigcook committed Mar 18, 2013
@@ -60,9 +60,15 @@
}
.actions .submit-link a {
+ display: inline-block;
+ margin: .25em 0 0;
font-size: 18px;
- padding: 2px 20px;
- background: #fff none;
+ padding: 8px 20px 8px 50px;
+ color: #1677b9;
+ background: #fff url(/static/img/icn-arrow.png) 10px center no-repeat;
+ background: url(/static/img/icn-arrow.png) 10px center no-repeat, #fff -moz-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,.1));
+ background: url(/static/img/icn-arrow.png) 10px center no-repeat, #fff -webkit-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,.1));
+ background: url(/static/img/icn-arrow.png) 10px center no-repeat, #fff linear-gradient(rgba(255,255,255,0), rgba(0,0,0,.1));
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
@@ -76,6 +82,7 @@
.actions .submit-link a:hover,
.actions .submit-link a:focus,
.actions .submit-link a:active {
+ background-color: #f3f3f3;
background-color: rgba(255,255,255,.75);
border-color: #bbb;
color: #1287d7;
@@ -242,6 +249,35 @@
width: 760px;
}
+#flicks2013 .section-intro .go {
+ padding: 6px 20px;
+ margin: 0 0 .25em;
+ background: #fff none;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
+ -moz-transition: all .125s ease-out;
+ -ms-transition: all .125s ease-out;
+ -o-transition: all .125s ease-out;
+ -webkit-transition: all .125s ease-out;
+ transition: all .125s ease-out;
+}
+
+#flicks2013 .section-intro .go:hover,
+#flicks2013 .section-intro .go:focus,
+#flicks2013 .section-intro .go:active {
+ background-color: #f3f3f3;
+ background-color: rgba(255,255,255,.75);
+ border-color: #bbb;
+ color: #1287d7;
+ -moz-transition: all .125s ease-in;
+ -ms-transition: all .125s ease-in;
+ -o-transition: all .125s ease-in;
+ -webkit-transition: all .125s ease-in;
+ transition: all .125s ease-in;
+}
+
+
#flicks2013 .entry-list {
margin: 0 auto 20px;
}
@@ -488,7 +524,7 @@
font-size: 16px;
}
- #films .entry {
+ #flicks2013 .entry {
width: 205px;
}
@@ -530,7 +566,7 @@
#about .section-detail .video,
#about .actions,
#about .actions p,
- #films .section-intro,
+ #flicks2013 .section-intro,
#judges .section-intro,
#rules .section-intro,
#rules .rules {
@@ -616,7 +652,7 @@
margin: 0;
}
- #films .entry {
+ #flicks2013 .entry {
width: 260px;
float: none;
margin: 0 auto 1.5em;
@@ -693,17 +729,17 @@
height: 258px;
}
- #films .entry {
+ #flicks2013 .entry {
width: 200px;
float: left;
margin: 0 15px 1.5em;
}
- #films .entry:nth-child(3n+1) {
+ #flicks2013 .entry:nth-child(3n+1) {
clear: none;
}
- #films .entry:nth-child(2n+1) {
+ #flicks2013 .entry:nth-child(2n+1) {
clear: left;
}
@@ -430,7 +430,7 @@ a.dl {
/*** @Social links *********/
#nav-social-head {
- width: 300px;
+ width: 600px;
height: 30px;
position: absolute;
right: 10px;
@@ -442,17 +442,19 @@ a.dl {
list-style: none;
margin: 0;
text-align: right;
- font: 14px/34px 'Open Sans', sans-serif;
- text-transform: uppercase;
}
.nav-social li {
- display: inline;
+ display: inline-block;
+ height: 20px;
text-align: left;
- margin: 0 0 0 8px;
+ margin: 6px 0 0 8px;
}
-.nav-social a {
+.nav-social a {
+ position: relative;
+ top: -5px;
+ font: 14px 'Open Sans', sans-serif;
display: inline-block;
color: #8d9092;
width: 34px;
@@ -513,19 +515,25 @@ a.dl {
background-position: -150px -100px;
}
-.nav-social #nav-auth {
- margin-right: 15px;
+#nav-submit {
+ margin-right: 10px;
+ padding-right: 20px;
+ border-right: 1px solid #ccc;
}
-.nav-social #nav-auth a {
+#nav-submit a {
width: auto;
height: auto;
line-height: 1;
text-indent: 0;
text-transform: none;
- padding: 6px 20px;
+ padding: 6px 15px 6px 35px;
margin: 0 0 .25em;
- background: #fff none;
+ color: #1677b9;
+ background: #fff url(/static/img/icn-arrow-sm.png) 6px center no-repeat;
+ background: url(/static/img/icn-arrow-sm.png) 6px center no-repeat, #fff -moz-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,.1));
+ background: url(/static/img/icn-arrow-sm.png) 6px center no-repeat, #fff -webkit-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,.1));
+ background: url(/static/img/icn-arrow-sm.png) 6px center no-repeat, #fff linear-gradient(rgba(255,255,255,0), rgba(0,0,0,.1));
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
@@ -536,9 +544,10 @@ a.dl {
transition: all .125s ease-out;
}
-.nav-social #nav-auth a:hover,
-.nav-social #nav-auth a:focus,
-.nav-social #nav-auth a:active {
+#nav-submit a:hover,
+#nav-submit a:focus,
+#nav-submit a:active {
+ background-color: #f3f3f3;
background-color: rgba(255,255,255,.75);
border-color: #bbb;
color: #1287d7;
@@ -549,9 +558,21 @@ a.dl {
transition: all .125s ease-in;
}
-.nav-social #nav-auth a:after {
- content: " »";
- white-space: nowrap;
+
+#nav-submit.logged-in a {
+ padding: 6px 0;
+ margin: 0 0 .25em;
+ background: transparent none;
+ border: 0;
+ color: #8d9092;
+ box-shadow: none;
+}
+
+#nav-submit.logged-in a:hover,
+#nav-submit.logged-in a:focus,
+#nav-submit.logged-in a:active {
+ background-color: transparent;
+ color: #8d9092;
}
/* @Footer *********/
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -95,13 +95,12 @@ <h1 class="section-title">{{ _('You&#8217;re the director. Mobile is the star.')
{# Show a login button or submit button depending on if the user
is authenticated. #}
{% if user.is_authenticated() %}
- <a href="#" class="go">
+ <a href="#">
{{ _('Start here') }}
</a>
{% else %}
{% set form_extras = {'next': url('flicks.base.home')|urlparams(hash='submit')} %}
{{ flicks_browserid_button(sign_in=_('Start here'),
- link_class='go',
form_extras=form_extras) }}
{% endif %}
</div>
@@ -165,75 +164,50 @@ <h1 class="section-title">{{ _('2013 Flicks') }}</h1>
<ul class="entry-list">
<li class="entry">
- {# l10n: This is "watch" meaning to view a video, used in link labels. #}
- <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">
+ <a href="https://vimeo.com/59439701" class="video-play" data-vimeo-id="59439701">
+ <img src="{{ static('img/home/vidthumb-direct-falling.jpg') }}" alt="" class="thumbnail">
<hgroup>
- <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>
- </h3>
+ <h4 class="title">Lee Sang Woo, <cite>Falling in Love with Firefox</cite></h4>
</hgroup>
</a>
</li>
<li class="entry">
- <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">
+ <a href="https://vimeo.com/59440900" class="video-play" data-vimeo-id="59440900">
+ <img src="{{ static('img/home/vidthumb-direct-squares.jpg') }}" alt="" class="thumbnail">
<hgroup>
- <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>
- </h3>
+ <h4 class="title">Eric Perrella, <cite>Squares</cite></h4>
</hgroup>
</a>
</li>
<li class="entry">
- <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">
+ <a href="https://vimeo.com/59440608" class="video-play" data-vimeo-id="59440608">
+ <img src="{{ static('img/home/vidthumb-direct-weird.jpg') }}" alt="" class="thumbnail">
<hgroup>
- <h2 class="title">Squares</h2>
- <h3 class="vcard">
- <span class="fn">Eric Perrella</span>,
- <span class="country-name">{{ country_name('ca') }}</span>
- </h3>
+ <h4 class="title">Ferran Brooks, <cite>Where the Weird Things Are Not</cite></h4>
</hgroup>
</a>
</li>
<li class="entry">
- <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">
+ <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-trailer-ic.jpg') }}" alt="" class="thumbnail">
<hgroup>
- <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>
- </h3>
+ <h4 class="title">ic</h4>
</hgroup>
</a>
</li>
<li class="entry">
- <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">
+ <a href="https://vimeo.com/{{ settings.VIDEO_SLAPSTICK[request.locale] }}" class="video-play" data-vimeo-id="{{ settings.VIDEO_SLAPSTICK[request.locale] }}">
+ <img src="{{ static('img/home/vidthumb-trailer-slapstick.jpg') }}" alt="" class="thumbnail">
<hgroup>
- <h2 class="title">Paranoid</h2>
- <h3 class="vcard">
- <span class="fn">Sean O‘Riordan</span>,
- <span class="country-name">{{ country_name('gb') }}</span>
- </h3>
+ <h4 class="title">Slapstick</h4>
</hgroup>
</a>
</li>
<li class="entry">
- <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">
+ <a href="https://vimeo.com/{{ settings.VIDEO_ALLTHREE[request.locale] }}" class="video-play" data-vimeo-id="{{ settings.VIDEO_ALLTHREE[request.locale] }}">
+ <img src="{{ static('img/home/vidthumb-trailer-three.jpg') }}" alt="" class="thumbnail">
<hgroup>
- <h2 class="title">Fenwick & Candy</h2>
- <h3 class="vcard">
- <span class="fn">Gavin Fenwick Christensen</span>,
- <span class="country-name">{{ country_name('au') }}</span>
- </h3>
+ <h4 class="title">All Three</h4>
</hgroup>
</a>
</li>
@@ -26,10 +26,11 @@ <h3 class="toggle">{{ _('Menu') }}</h3>
<div class="wrap">
<nav id="nav-social-head" class="nav-social">
<ul>
- <li id="nav-auth">
- {{ flicks_browserid_button(sign_in=_('Sign in'), sign_out=_('Sign out'),
- request_args={'returnTo': request.path},
- form_extras={'next': request.path}) }}
+ <li id="nav-submit" {% if user.is_authenticated() %}class="logged-in"{% endif %}>
+ {% set form_extras = {'next': url('flicks.base.home')|urlparams(hash='submit')} %}
+ {{ flicks_browserid_button(sign_in=_('Submit your flick'),
+ sign_out=_('Sign out'),
+ form_extras=form_extras) }}
</li>
<li><a href="http://vimeo.com/firefoxflicks" title="Vimeo" class="vimeo" rel="external">Vimeo</a></li>
<li><a href="http://facebook.com/firefoxflicks" title="Facebook" class="facebook" rel="external">Facebook</a></li>

0 comments on commit 3a3c63f

Please sign in to comment.