diff options
| -rw-r--r-- | templates/web/fixmystreet/header.html | 21 | ||||
| -rw-r--r-- | templates/web/fixmystreet/index.html | 3 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/base.scss | 22 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/layout.scss | 47 |
4 files changed, 51 insertions, 42 deletions
diff --git a/templates/web/fixmystreet/header.html b/templates/web/fixmystreet/header.html index e5a7ee7c2..8ee70bd36 100644 --- a/templates/web/fixmystreet/header.html +++ b/templates/web/fixmystreet/header.html @@ -38,17 +38,18 @@ </div> </header> + <div id="user-meta"> + <p> + [% IF c.user_exists %] + [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] | + <a href="/auth/sign_out">[% loc('sign out') %]</a> + [% ELSE %] + <a href="/auth">[% loc('Sign in') %]</a> + [% END %] + </p> + </div> + <div class="container"> <div class="content [% "$mainclass" | html IF mainclass %]" role="main"> - <div id="user-meta"> - <ul> - [% IF c.user_exists %] - <li>[% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] - <li class="last"><a href="/auth/sign_out">[% loc('Sign out') %]</a></li> - [% ELSE %] - <li><a href="/auth">[% loc('Sign in') %]</a></li> - [% END %] - </ul> - </div> <!-- [% INCLUDE 'debug_header.html' %] --> diff --git a/templates/web/fixmystreet/index.html b/templates/web/fixmystreet/index.html index a63324d60..1099b6182 100644 --- a/templates/web/fixmystreet/index.html +++ b/templates/web/fixmystreet/index.html @@ -73,6 +73,9 @@ <h4>[% p.title | html %]</h4> <small>[% prettify_epoch( p.confirmed_local.epoch, 1 ) %]</small> </div> + <div class="img"> + <img alt="" height="60px" width="90px" src="/photo?id=[%p.id%]"> + </div> </a> </li> [% END %] diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index 32b52e30e..02cfb4638 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -443,6 +443,20 @@ label{ } } +// this is the user's logged in details or the login link etc +.wrapper { + display:table; + caption-side:bottom; +} +#user-meta { + display:table-caption; + p { + background:$primary; + padding:1em; + } +} + + // #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic .shadow-wrap { @@ -670,14 +684,6 @@ a:hover.button-left { } -// this is the user's logged in details or the login link etc -#user-meta { - ul { - @include list-reset-soft; - } -} - - // only on mobile, this is a sidebar on desk (#report-a-poblem-sidebar) a.rap-notes-trigger, a:hover.rap-notes-trigger { diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss index f53141135..068f6a378 100644 --- a/web/cobrands/fixmystreet/layout.scss +++ b/web/cobrands/fixmystreet/layout.scss @@ -153,20 +153,18 @@ body { } #user-meta{ - position: absolute; - top: -2em; - background:#fff; - height:3em; - z-index: -1; - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); - ul { - display:block; + display:block; + position: relative; + max-width: 57em; + margin:0 auto; + p { + @include inline-block; + position:absolute; + top:1em; height:2em; - padding:0 0.5em; - li { - float:left; - padding:0.25em 0.25em; - } + background:#fff; + padding:0.25em 0.5em; + @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); } } @@ -271,10 +269,11 @@ body.frontpage { background:#1a1a1a; .wrapper { >.container { - position:static; + width:100%; } .content { - padding-top:12em; + padding-top:13em; + margin:0 auto; } } .nav-wrapper-2{ @@ -282,6 +281,7 @@ body.frontpage { height:6em; } #header{ + height:10em; #site-logo{ margin-top:2em; width: 300px; @@ -290,7 +290,10 @@ body.frontpage { } } #user-meta { - display:none; + top:-3em; + p { + right:0; + } } } @@ -299,7 +302,7 @@ body.frontpage { position:absolute; width:100%; left:0; - top:8em; + top:1em; #front-main-container { width: 57em; margin:0 auto; @@ -310,16 +313,13 @@ body.frontpage { color:#222; } #postcodeForm { - float:right; overflow:hidden; - width:47em; margin-right:0.5em; label { - float:left; - margin-top:0.25em; + margin:0.5em 0; } div { - float:right; + margin:0 auto; width:20em; input#pc { padding:0.25em 0.5em; @@ -333,8 +333,7 @@ body.frontpage { a#geolocate_link { background:none; color:#222; - float:right; - margin:-1em 7.5em 0.5em 0; + margin:-1em 0 0.5em 0; &:hover { text-decoration:underline; background:none; |