Skip to content

Commit

Permalink
Full screen mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndrewIOM
AndrewIOM committed Aug 5, 2018
1 parent 68b3f8f commit 711d00a
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 38 deletions.
46 changes: 35 additions & 11 deletions _layouts/map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ <h3>{{ page.name }}</h3>
<div class="right">
<!-- Logos -->
<div class="logo-container" data-bind="foreach: logos">
<img data-bind="attr: { src: '{{ site.baseurl }}/images/logos/' + $data + '.png' }" />
<img data-bind="attr: { src: '{{ site.baseurl }}/images/logos/' + $data.File + '.png' }" />
</div>
</div>
</div>
Expand All @@ -60,13 +60,39 @@ <h3>{{ page.name }}</h3>
<div class="map-container">
<svg id="map" />

<div class="map-legend expand-panel" data-bind="visible: displayMode() == 2">
<div class="expand-panel-title button">Symbology and Options</div>
<div class="expand-panel-contents">
{% include legend.html %}
<!-- Full-Screen Panels -->
<div class="map-panels-left">
<div class="expand-panel" data-bind="visible: displayMode() == 2">
<div class="expand-panel-title button" data-bind="click: toggleLegendDisplay">Legend</div>
<div class="expand-panel-contents" data-bind="visible: !hiddenLegend()">
{% include legend.html %}
</div>
</div>
</div>

<div class="map-panels-right">
<div class="expand-panel" data-bind="visible: displayMode() == 2 && selectedPoints().length > 0">
<div class="expand-panel-title button" data-bind="click: toggleDetailDisplay">
<span data-bind="text: selectedPoints().length"></span> Points Selected
</div>
<div class="expand-panel-contents" data-bind="visible: !hiddenDetail()">
{% include selected-points.html %}
</div>
</div>
<div class="expand-panel" data-bind="visible: displayMode() == 2">
<div class="expand-panel-title button" data-bind="click: toggleFilterDisplay">Filter</div>
<div class="expand-panel-contents" data-bind="visible: !hiddenFilter()">
{% include filter.html %}
</div>
</div>
</div>
<div class="map-panels-right-bottom">
<div class="expand-panel" data-bind="visible: displayMode() == 2 && (stashedFilters().length > 0 || stashedSlices().length > 0)">
<div class="expand-panel-contents">
{% include applied-filters-and-slices.html %}
</div>
</div>
</div>

<div class="map-controls">
<div class="zoom-buttons">
<a data-bind="click: zoomIn" class="button">
Expand All @@ -78,13 +104,11 @@ <h3>{{ page.name }}</h3>
<a data-bind="click: toggleFullScreen, visible: displayMode() == 1" class="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
<a data-bind="click: toggleFullScreen, visible: displayMode() == 2" class="button">
<i class="fas fa-window-close"></i>
</a>
</div>
</div>
<div class="fullscreen-button">
<a data-bind="click: toggleFullScreen, visible: displayMode() == 2">
<i class="fas fa-window-close"></i>
</a>
</div>
</div>
<div data-bind="visible: displayMode() == 1">
{% include slicer.html %} {% include selected-points.html %}
Expand Down
2 changes: 0 additions & 2 deletions _sass/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,6 @@ body {
height: 100%;
}

.filter-panel {}

.float-right {
position: absolute;
top: 2em;
Expand Down
18 changes: 10 additions & 8 deletions _sass/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ body.fullscreen {
}
.fullscreen-content {
min-height: 100%;
padding: 4em 0 0;
position: absolute;
top: 0;
bottom: 0;
Expand All @@ -24,28 +23,31 @@ body.fullscreen {
.map-container {
height: 100%;
width: 100%;
margin-top: 4em;
#map {
margin-top: -4em;
height: 99vh;
}
}
}
.fullscreen-header {
margin-top: -4em;
position: absolute;
width: 100%;
height: 4em;
padding: 0.4em;
background-size: 1000px;
background-repeat: no-repeat;
background-position: right;
background-color: #fff;
border-bottom: 1px solid lightgrey;
font-size: 14px; // position: fixed;
// width: 100%;
z-index: 99; // font-size: 1.2em;
// padding: 1em;
// background-color: darkgrey;
font-size: 14px;
z-index: 99;
.left {
float: left;
margin-top: 0.5em;
margin-left: 0.25em;
h3 {
font-size: 1.6em !important;
line-height: 2em;
margin-bottom: 0;
}
}
Expand Down
44 changes: 28 additions & 16 deletions _sass/_map.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,6 @@
.button {
background-color: rgba(255, 255, 255, 0.5);
}
.fullscreen-button {
position: absolute;
top: 0.25em;
right: 0.25em;
a {
padding: 0px 0.5em;
font-size: 2.5em;
color: red;
cursor: pointer;
}
}
.buttons-left {
position: absolute;
top: 0.25em;
Expand All @@ -35,10 +24,24 @@
}
}
}
.map-legend {
.map-panels-left {
position: absolute;
top: 0.25em;
left: 0.25em;
max-width: 20vw;
}

.map-panels-right {
width: 30vw;
position: absolute;
top: 0.25em;
right: 0.25em;
}
.map-panels-right-bottom {
width: 30vw;
position: absolute;
bottom: 0.25em;
right: 0.25em;
}
}

Expand All @@ -54,16 +57,25 @@ body.fullscreen {

// Expand panels
.expand-panel {
width: 100%;
margin-bottom: 0.5em;
.expand-panel-title {
background-color: darkslateblue;
color: white;
background-color: rgba(255, 255, 255, 0.80);
padding: 0.1em 1em;
display: block;
margin-bottom: 0;
line-height: 3em;
height: 3em;
}
.expand-panel-title:hover {
color: white;
background-color: rgba(175, 174, 174, 0.80);
}
.expand-panel-contents {
display: none;
max-height: 33vh;
overflow: scroll;
background-color: rgba(255, 255, 255, 0.788);
border: 0.5px solid lightgrey;
padding:1em;
}
}

0 comments on commit 711d00a

Please sign in to comment.