Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Style edits to make the ban map look perty again #43

Merged
merged 14 commits into from
Feb 9, 2017
Merged

Style edits to make the ban map look perty again #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
17e48d8
added interactive muslim ban senate map
Shaderboy Feb 5, 2017
401c694
code climate cleanup
Shaderboy Feb 5, 2017
3134f2f
redid indentations to use spaces according to style rules
Shaderboy Feb 5, 2017
cea70e0
fixed image paths
Shaderboy Feb 6, 2017
c73b140
merged upstream
Shaderboy Feb 6, 2017
9290a02
reworked image paths again to use wp pathing
Shaderboy Feb 6, 2017
8528a07
Merge remote-tracking branch 'upstream/master'
Shaderboy Feb 7, 2017
3691c77
Merge remote-tracking branch 'upstream/master'
Shaderboy Feb 8, 2017
d21d2f5
Merge remote-tracking branch 'upstream/master'
Shaderboy Feb 8, 2017
db65493
made css and some js compatible
Shaderboy Feb 9, 2017
ce24aa5
merged with upstream
Shaderboy Feb 9, 2017
a65e7ce
more merging
Shaderboy Feb 9, 2017
3298b74
STYLES FOR DAYS. pretty sure this is done. tested on firefox, chrome,…
Shaderboy Feb 9, 2017
bd54950
removed template-banmap to reflect upstream repo
Shaderboy Feb 9, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions web/app/themes/thepoliticalsage/assets/scripts/banmap/map.js
View file
Open in desktop
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
Open in desktop

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
Open in desktop
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
Open in desktop
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>