Skip to content

Commit

Permalink
Merge pull request #43 from Shaderboy/master
Browse files Browse the repository at this point in the history 
Style edits to make the ban map look perty again
  • Loading branch information
@Shaderboy
Shaderboy committed Feb 9, 2017
2 parents f5c455a + bd54950 commit bf7f555
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 52 deletions.
7 changes: 4 additions & 3 deletions web/app/themes/thepoliticalsage/assets/scripts/banmap/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ var uStates = require('./uStates');

module.exports = function($) {
function senatorHtml(d){
var senBody = "<div class='col-xs-6' id='tooltip-body-col'><div class='row'><h6>"+(d["First Name"] + " " + d["Last Name"])+"</h6></div><div class='row'><p>"+(d["Stance"])+"</p></div><div class='row'><p>";
var senBody = "<div class='col-xs-6 tooltip-body-col'><div class='row'><h6>"+(d["First Name"] + " " + d["Last Name"])+"</h6></div><div class='row'><p>"+(d["Stance"])+"</p></div><div class='row'><p>";
senBody += d["Statement"];
senBody += "</p></div><div class='row'><a href = '"+ (d["Statement Link"]) + "'><p>"+(d["Statement Link"])+"</a></p></div><div class='row'><p>"+(d["Local Office Number"])+"</p></div></div>";
return senBody;
}

function tooltipHtml(n, d){
return "<h4>"+n+"</h4><div class='row'>" + senatorHtml(d[0]) + senatorHtml(d[1]) +"</div></div>";
var html = "<h4>"+n+"</h4><div class='row'>" + senatorHtml(d[0]) + senatorHtml(d[1]) +"</div></div>";
return html;
}

d3.select("div#map-container")
Expand All @@ -28,4 +29,4 @@ module.exports = function($) {
.classed("svg-content-responsive", true);

uStates.draw("#statesvg", senators, tooltipHtml, $);
};
};
31 changes: 2 additions & 29 deletions web/app/themes/thepoliticalsage/assets/scripts/banmap/uStates.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

75 changes: 65 additions & 10 deletions web/app/themes/thepoliticalsage/assets/styles/layout/_map.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,48 @@

#header-col{
padding: 0;
width: 100%;
}

body.banmap {
.map-wrapper {
height: 100vh;
padding: 0;
}
.header {
.map-header {
background-color: #04243e;
padding-top: .5vw;
padding-bottom: 1.0vw;
margin-top: 2vw;
margin-bottom: 1vw;
}
.row{
margin: 0;
}

.row > *{
padding-left: 0;
padding-right: 0x;
}
}

@media screen and (max-width: 1159px) {
body.banmap {
.map-wrapper {
height: 70vh;
}
}
}

@media screen and (max-width: 991px) {
body.banmap {
.map-wrapper {
height: 90vh;
}
}
}

.header h1{
.map-header h1{
color: #cccccc;
font-family: "Work Sans";
font-size: 1.9vw;
Expand Down Expand Up @@ -57,7 +83,7 @@ body.banmap {
text-align: center;
color: #cccccc;

z-index: 2000;
z-index: 4096 !important;
opacity: 0;
}

Expand All @@ -73,19 +99,22 @@ body.banmap {
font-weight: 700;
color: #bababa;
padding-bottom: 5%;
width: 100%;
}

#tooltip h6{
font-size: .9vw;
font-weight: 600;
padding-bottom: 3%;
width: 100%;
}

#tooltip p{
font-size: .8vw;
font-weight: 400;
padding-left: 3%;
padding-right: 3%;
width: 100%;
}

#tooltip-container{
Expand All @@ -96,6 +125,15 @@ body.banmap {
padding-top: 1%;
}

.tooltip-body-col{
width: 50%;
}

#map-col{
transform: translate(-50%, 0%);
left: 50%;
}

.svg-content-responsive {
display: inline-block;
position: absolute;
Expand All @@ -113,14 +151,14 @@ body.banmap {

.svg-content-responsive {
width: 100%;
transform: translate(0%, 0%);
left: auto;
}

#statesvg{
position: fixed;
transform: translate(0%, -50%);
top: 40%;
top: 20vh;
}

#tooltip{
margin: 0;
}

#tooltip h4{
Expand All @@ -141,6 +179,14 @@ body.banmap {

}

@media screen and (max-width: 767px) {
.svg-content-responsive {
width: 80%;
transform: translate(-50%, -50%);
left: 50%;
}
}

#legend{
position: fixed;
transform: translate(0%, -50%);
Expand All @@ -152,8 +198,8 @@ body.banmap {

width: 18%;

padding-left: 2vw;
padding-right: 2vw;
padding-left: 1.6vw;
padding-right: 1.6vw;
padding-bottom: 3%;
z-index: 2000;
}
Expand All @@ -171,6 +217,12 @@ body.banmap {
font-weight: 600;
font-family: "Work Sans";
font-size: .7vw;
margin-top: 1.0vw;
margin-bottom: 0;
}

.legend-icon{
width: 3vw;
}

@media screen and (min-width: 992px) and (max-width: 1159px) {
Expand All @@ -191,13 +243,15 @@ body.banmap {

@media screen and (max-width: 991px) {
#legend{
position: absolute;
transform: translate(-50%, 0%);

background: none;
top: auto;
bottom: 5%;
left: 50%;
width: 100%;
z-index: 0;
}

#big-screen-legend{
Expand All @@ -217,6 +271,7 @@ body.banmap {
font-size: 2.5vw;
padding-left: 0;
text-align: center;
width: 100%;
}

.legend-icon{
Expand Down
19 changes: 9 additions & 10 deletions web/app/themes/thepoliticalsage/page-banmap.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div class="container-fluid map-wrapper" style="background-image: url(<?= get_template_directory_uri(); ?>/assets/images/banmap/background.png">
<div class="row">
<div id="header-col" class="col-xs-12">
<div class="header">
<div class="map-header">
<h1>The Muslim Ban According to The Senate</h1>
</div>
</div>
Expand All @@ -15,31 +15,31 @@
<div class="col-xs-2 col-lg-0">
<div id="legend">
<div id="big-screen-legend">
<div class="row legend-row"><img id="oppose-icon" src="<?= get_template_directory_uri(); ?>/assets/images/banmap/teal_icon.png">
<div class="row legend-row"><img id="oppose-icon" src="<?= get_template_directory_uri(); ?>/assets/images/banmap/teal_icon.png" class="legend-icon">
<p>Fully Opposed</p>
</div>
<div class="row legend-row"><img id="half-icon" src="<?= get_template_directory_uri(); ?>/assets/images/banmap/blue_icon.png">
<div class="row legend-row"><img id="half-icon" src="<?= get_template_directory_uri(); ?>/assets/images/banmap/blue_icon.png" class="legend-icon">
<p>Split</p>
</div>
<div class="row legend-row"><img id="support-icon" src="<?= get_template_directory_uri(); ?>/assets/images/banmap/black_icon.png">
<div class="row legend-row"><img id="support-icon" src="<?= get_template_directory_uri(); ?>/assets/images/banmap/black_icon.png" class="legend-icon">
<p>Fully Supportive</p>
</div>
</div>
<div id="small-screen-legend" class="legend-row">
<div class="row">
<div class="col-xs-4">
<div class="col-4">
<div class="row"><img id="oppose-icon" src="<?= get_template_directory_uri(); ?>/assets/images/banmap/teal_icon.png" class="legend-icon"></div>
<div class="row">
<p>Fully Opposed</p>
</div>
</div>
<div class="col-xs-4">
<div class="col-4">
<div class="row"><img id="half-icon" src="<?= get_template_directory_uri(); ?>/assets/images/banmap/blue_icon.png" class="legend-icon"></div>
<div class="row">
<p>Split</p>
</div>
</div>
<div class="col-xs-4">
<div class="col-4">
<div class="row"><img id="support-icon" src="<?= get_template_directory_uri(); ?>/assets/images/banmap/black_icon.png" class="legend-icon"></div>
<div class="row">
<p>Fully Supportive</p>
Expand All @@ -49,13 +49,12 @@
</div>
</div>
</div>
<div class="col-xs-12 col-md-8 col-lg-8">
<div class="col-12 col-md-8" id="map-col">
<div id="tooltip">
<div class="container"><img id="close-tooltip" src="<?= get_template_directory_uri(); ?>/assets/images/banmap/close.png" style="cursor: pointer"></div>
<div id="body"></div>
<div id="tooltip-body"></div>
</div>
<div id="map-container"></div>
<!--svg#statesvg(width="960" height="600")-->
</div>
</div>
</div>

0 comments on commit bf7f555

Please sign in to comment.