Skip to content

Commit

Permalink
Merge branch '444-person-header-fixes'
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacksonj04
jacksonj04 committed Jul 2, 2014
2 parents 4b291e9 + a77f5b1 commit ac517ce
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 109 deletions.
11 changes: 4 additions & 7 deletions www/docs/style/sass/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,14 +135,11 @@ a:focus {
text-decoration: none;
}
img {
position: relative;
margin-right: 0.25em;
bottom: 0.1em;
}
&.alert {
img {
bottom: 0.2em;
}
// this is really hard to get right,
// because of the variable line-height
// for .button elements!!
vertical-align: -0.4em;
}
}

Expand Down
5 changes: 4 additions & 1 deletion www/docs/style/sass/layout/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,6 @@
background-color: white;
border: none;
margin-bottom: 0px;
padding-top: 2px;
padding-bottom: 12px;
border-radius: 3px 3px 0px 0px;
transition: none;
Expand Down Expand Up @@ -270,6 +269,9 @@
content: url('../img/user-white.png');
}
}
img {
vertical-align: -0.2em // slightly less than normal for a .button>img
}
}
}
.nav-menu {
Expand Down Expand Up @@ -354,6 +356,7 @@
img {
width: 24px;
height: 24px;
vertical-align: -5px;
}
}
}
Expand Down
187 changes: 107 additions & 80 deletions www/docs/style/sass/pages/_mp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,57 +4,83 @@
padding-top: 32px;
}
@media (min-width: $large-screen) {
height: 285px;
padding-top: 150px;
padding-top: 64px;
}

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(28,28,28,1) 89%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(89%,rgba(28,28,28,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(28,28,28,1) 89%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(28,28,28,1) 89%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(28,28,28,1) 89%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(28,28,28,1) 89%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */

.person-header__content {
color: white;
margin-left: 1.5%;
margin-right: 1.5%;

@media (min-width: $medium-screen) {
margin-left: -1.5%;
margin-right: -1.5%;
position: relative; // for search and button positioning
padding-bottom: 3em; // space for the search and buttons to absolutely position over
}

@media (min-width: $large-screen) {
padding-bottom: 5em; // give buttons and search more vertical space
}

.person-name {
h1 {
.mp-image {
img {
width: 48px;
}
@media (min-width: $medium-screen) {
display: inline-block;
float: none;
position: relative;
width: 48px;
img {
bottom: 0px;
position: absolute;
vertical-align: bottom;
}
}
display: table; // this won't work in IE7

@media (min-width: $large-screen) {
width: 60%; // leave room for .person-constituency to absolutely position to the right
}

.mp-image {
display: table-cell; // this won't work in IE7
vertical-align: top;
width: 48px;

*float: left; // fallback for IE7 and below
*margin-right: 10px; // fallback for IE7 and below

@media (min-width: $medium-screen) {
width: 60px; // bit bigger, since h1 now has larger font-size
}

img {
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
}

h1 {
color: white;
margin: 0px;
padding: 0px;
line-height: 1em;

display: table-cell; // this won't work in IE7
vertical-align: bottom;
padding-left: 10px;
}
@include grid-column(12);
}

.person-search {
@media (min-width: $medium-screen) {
@include grid-column(6);
position: absolute;
bottom: 0;
right: 0;
}
}
.person-search{
@include grid-column(12);

@media (min-width: $large-screen) {
bottom: 1em;
}

form {
padding-bottom: 1em;

input {
-webkit-appearance: none;
padding: em-calc(8);
Expand All @@ -63,7 +89,8 @@
border: 1px solid $borders;
border-right: 0px;
border-radius: 3px 0px 0px 3px;
width: 85%;
width: 16em;

&.submit {
background: transparent url('/images/search.png') no-repeat scroll center center;
background-color: white;
Expand All @@ -75,61 +102,67 @@
}
}
}
@media (min-width: $medium-screen) {
@include grid-column(6);
text-align: right;
clear: both;
position: relative;
left: 50%;
right: auto;
}
}

.person-buttons {
@include grid-column(12);
@media (max-width: $medium-screen) {
.button {
padding-left: 0.85em;
padding-right: 0.85em;

img {
display: none;
}
}

@media (min-width: $medium-screen) {
position: absolute;
bottom: 0;
left: 0;

.button {
padding-left: 0.85em;
padding-right: 0.85em;
padding: 0.4em 0.9em;
margin-right: 0.5em;

img {
display: none;
display: inline-block;
}
}
}
@media (min-width: $medium-screen) {
@include grid-column(6);
position: relative;
right: 50%;
left: auto;

@media (min-width: $large-screen) {
bottom: 1em;
}
}

.person-constituency {
@include grid-column(12);
padding-bottom: em-calc(8);
@media (min-width: $medium-screen) {
@include grid-column(6);
padding-top: em-calc(12);
}
margin-bottom: 1em;
margin-top: 0.5em;

@media (min-width: $large-screen) {
padding-top: em-calc(24);
height: $h1-font-size;
text-align: right;
position: absolute;
bottom: 5em; // to match padding-bottom on .person-header__content
right: 0;
margin-bottom: 5px; // match bottom padding on h1 (because of line-height, not really padding)
margin-top: 0;
}

span {
display: block;
@media (min-width: $large-screen) {
@media (min-width: $medium-screen) {
display: inline;
}
}

.constituency {
@media (min-width: $large-screen) {
margin-right: 1em;
}
margin-right: 1em;

&:before {
position: relative;
content: url('../img/location-pin.png');
bottom: -0.3em;
}
}

.party {
&:before {
font-size: em-calc(12);
Expand Down Expand Up @@ -172,24 +205,18 @@
}
}
}
&.royal,
&.peer {
.person-name {
@media (min-width: $medium-screen) {
@include grid-column(11);
}
}
.person-constituency {
@media (min-width: $medium-screen) {
@include grid-column(1);
padding-left: 0px;
}
}
}

&.royal {
.person-name {
// Special case for the Queen, bless her.
h1 {
font-size: 1.5em;
}
@media (min-width: $large-screen) {
h1 {
font-size: 1em !important; // XXX
font-size: 2em;
}
.person-header__content .person-name {
width: auto; // the Queen has no party/constituency, so no need for the 60% width
}
}
}
Expand Down
26 changes: 15 additions & 11 deletions www/includes/easyparliament/templates/html/mp/profile.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,22 @@
<div class=" full-page__row">
<div class="person-header__content page-content__row">
<div class="person-name">
<h1>
<?php if ( $image ) { ?>
<span class="mp-image">
<?php if ( $image ) { ?>
<span class="mp-image">
<img src="<?= $image ?>" height="48">
</span>
<?php } ?>
</span>
<?php } ?>
<h1>
<?= $full_name ?>
</h1>
</div>
<div class="person-constituency">
<?php if ( $constituency && $this_page != 'peer' && $this_page != 'royal' ) { ?><span class="constituency"><?= $constituency ?></span> <?php } ?>
<?php if ( $party ) { ?><span class="party <?= $party_short ?>"><?= $party ?></span><?php } ?>
<?php if ( $constituency && $this_page != 'peer' && $this_page != 'royal' ) { ?>
<span class="constituency"><?= $constituency ?></span>
<?php } ?>
<?php if ( $party ) { ?>
<span class="party <?= $party_short ?>"><?= $party ?></span>
<?php } ?>
</div>
<div class="person-search">
<form action="<?= $search_url ?>" method="get" onsubmit="trackFormSubmit(this, 'Search', 'Submit', 'Person'); return false;">
Expand All @@ -23,7 +27,7 @@
</form>
</div>
<div class="person-buttons">
<?php if ($current_member_anywhere && $this_page != 'royal'): ?>
<?php if ($current_member_anywhere && $this_page != 'royal') { ?>
<a href="https://www.writetothem.com/<?php
if ($current_member[HOUSE_TYPE_LORDS]) {
echo "?person=uk.org.publicwhip/person/$person_id";
Expand All @@ -33,10 +37,10 @@
}
?>" class="button wtt" onclick="trackLinkClick(this, 'Links', 'WriteToThem', 'Person'); return false;"><img src="/style/img/envelope.png">Send a message</a>

<?php endif; ?>
<?php if ($has_email_alerts): ?>
<?php } ?>
<?php if ($has_email_alerts) { ?>
<a href="<?= WEBPATH ?>alert/?pid=<?= $person_id ?>#" class="button alert" onclick="trackLinkClick(this, 'Alert', 'Search', 'Person'); return false;"><img src="/style/img/plus-circle.png">Get email updates</a>
<?php endif; ?>
<?php } ?>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit ac517ce

Please sign in to comment.