diff options
| -rw-r--r-- | design/sass/_photos.scss | 506 | ||||
| -rw-r--r-- | design/sass/screenv9.scss | 1 | ||||
| -rw-r--r-- | design/templates/details/entry.html | 50 |
3 files changed, 535 insertions, 22 deletions
diff --git a/design/sass/_photos.scss b/design/sass/_photos.scss new file mode 100644 index 0000000..d152bf4 --- /dev/null +++ b/design/sass/_photos.scss @@ -0,0 +1,506 @@ +// ############################################## +// Photo Gallery pages +// ############################################## + +// Add padding and create grid layout at various widths: +.image-gallery--list { + @include constrain_wide; + margin-top: 3em; + li { + display: inline-block; + margin-bottom: 10px; + } +} +@include breakpoint(alpha) { + .first, .third { + padding-right: 10px; + } +} +@include breakpoint(gamma) { + .first, .third { + padding-right: 0; + } + .one { + padding-right: 6px; + } + .two { + padding-left: 6px; + padding-right: 6px; + } + .three { + padding-left: 6px; + } +} +@include breakpoint(delta) { + .one, .two, .three { + padding: 0; + } + .first { + padding-right: 6px; + } + .second, .third { + padding-left: 6px; + padding-right: 6px; + } + .fourth { + padding-left: 6px; + } +} + +//########### GALLERY FIGURES AND CAPTIONS ################ +.image-gallery--figure { + position: relative; + margin: 0; + width: 280px; + .image-gallery--legend { + display: block; + @include transparent_class; + position: absolute; + left: 0; + bottom: 8px; + width: 100%; + background: $brown; + color: #999999; + } + h1 { + @include smcaps; + @include fontsize(13); + margin: 8px 0 4px 8px; + text-align: left; + color: white; + } + p { + @include fontsize(12); + margin: 8px 0 4px 8px; + padding-bottom: 6px; + } +} + +.image-gallery--wrapper { + @include constrain_wide; + .figcaption { + background: lighten(#000, 12); + margin: -6px 0 0 0; + padding: 1em 1em .5em 1em; + border-radius: 0 0 0.5em 0.5em; + &:after { + content: " "; + display: table; + clear: both; + } + } + h6 a { + color: darken($body_font_light, 20); + text-decoration: none; + font-family: sans-serif; + } + img { background: none; max-width: 100%; padding: 0;} +} +.directions { + color: darken($body_font_light, 35); + text-align: center; + @include fontsize(13); + margin-top: 3em; + display: none; +} +.caption { + float: left; + font-family: sans-serif; + min-height: 32px; + padding-right: 1.5em; + @include breakpoint(beta) { + width: 50%; + border-right: darken($body_font_light, 45) 1px solid; + min-height: 55px; + } + @include breakpoint(gamma) { + width: 65%; + padding-right: 2.5em; + } + @include breakpoint(delta) { + width: 70%; + } +} +.figcaption--title, .figcaption--date { + float: left; + font-weight: normal; + line-height: 24px; + vertical-align: bottom; + margin: 0; + display: block; +} +.figcaption--title { + margin-right: 1em; +} +.figcaption--date { + margin-top: 2px; +} +.caption .map-link { + @include smcaps; + @include fontsize(13); + float: right; + text-decoration: none; + padding: 7px 14px 5px; + background: lighten(#000, 18); + color: $body_font_light; + border-radius: 25px; + &:hover { + background: $orange; + } +} +.figcaption--desc { + @include fontsize(13); + padding-top: .5em; + margin-bottom: 0; + clear: left; + margin-left: 0; + text-align: left; +} +.photo-options { + float: right; + font-family: sans-serif; + p{ + @include fontsize(13); + margin-top: 12px; + margin-bottom: 2px; + color: darken($body_font_light, 35); + &:first-of-type { + margin-top: 4px; + } + } + a { color: darken($body_font_light, 35);} +} +.photo-options, .caption .map-link { + display: none; +} +@include breakpoint(beta) { + .photo-options, .caption .map-link, .directions { + display: block; + } +} +.fig { position: relative;} +.image-gallery--wrapper .map-container { + left: -3%; + background: url("/media/img/mapbg-black.png") no-repeat top left !important; + @include breakpoint(beta) { + left: 4%; + } + @include breakpoint(gamma) { + left: 22%; + } + @include breakpoint(delta) { + left: 34%; + } +} + +.map-wrapper { + width: 400px; + height: 328px; + position: absolute; + bottom: 27px; + margin: 0px 0 0 44px; +} + +//.figcaption { +// clear: both; +// background: #1a1713; +// -moz-border-radius: 0 0 0.5em 0.5em; +// -webkit-border-radius: 0 0 0.5em 0.5em; +// border-radius: 0 0 0.5em 0.5em; +// color: white; +// margin: -0.25em 0 0 0; +// padding: 1em 0 1em 0; +// z-index: 100; +//} +// +//.caption { +// width: 100%; +// float: none; +// p { +// font: normal 0.75em Helvetica, Verdana, sans-serif; +// margin: 0.5em 0 0 0.75em; +// padding-bottom: 0.25em; +// } +//} + +//lightbox stuff from https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/css/lightbox.scss + +/** +* VARS +**/ + +// font-sizes +$font-size-huge: 2.8em; +$font-size-big: 2em; +$font-size-medium: 1.4em; + +$def-color-1: #FFFFFF; +$def-color-2: #B9CED2; + +$border-color-1: #9C9FA5; + +$def-font-color: #6c7176; +$font-color-highlight: #A99929; +$font-color-hover-1: #C3B919; + +$darkblue: #3F658B; +@mixin prefixr($var, $val) { + -webkit-#{$var}: $val; + -moz-#{$var}: $val; + -o-#{$var}: $val; + -ms-#{$var}: $val; + $var: $val; +} + +/* IE8 Stuff */ +.jslghtbx-ie8.jslghtbx { + background-image: url('../img/trans-bck.png'); + display: none; + &.jslghtbx-active { + display: block; + } + .jslghtbx-contentwrapper > img { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + display: block; + } + .jslghtbx-contentwrapper.jslghtbx-wrapper-active > img { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + } +} + +/* Main wrapper */ +.jslghtbx { + font-family: sans-serif; + overflow: auto; + visibility: hidden; + position: fixed; + z-index: 2; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); + &.jslghtbx-active { + visibility: visible; + background-color: rgba(0, 0, 0, 0.85); + } +} + +/* loading-animation */ +.jslghtbx-loading-animation { + margin-top: -60px; + margin-left: -60px; + width: 120px; + height: 120px; + top: 50%; + left: 50%; + display: none; + position: absolute; + z-index: -1; + & > span { + display: inline-block; + width: 20px; + height: 20px; + border-radius: 20px; + margin: 5px; + background-color: #fff; + @include prefixr(transition, all .3s ease-in-out); + &.jslghtbx-active { + margin-bottom: 60px; + } + } +} + +.jslghtbx.jslghtbx-loading .jslghtbx-loading-animation { + display: block; +} + +.jslghtbx-nooverflow { + overflow: hidden !important; // prevent showing of scrollbars on prev/next +} + +.jslghtbx-contentwrapper { + margin: auto; + visibility: hidden; + & > img { + background: #fff; + padding: .5em; + display: none; + height: auto; + margin-left: auto; + margin-right: auto; + opacity: 0; + } +} + +.jslghtbx-contentwrapper.jslghtbx-wrapper-active { + visibility: visible; + & > img { + display: block; + opacity: 1; + } +} + +/* Caption */ +.jslghtbx-caption { + display: none; + margin-left: auto; + margin-right: auto; + margin-top: 5px; + margin-bottom: 5px; + max-width: 450px; + color: #fff; + text-align: center; + font-size: .9em; +} + +.jslghtbx-active .jslghtbx-caption { + display: inline; + margin-right: 1em; +} + +/* Animation Stuff */ +.jslghtbx-contentwrapper.jslghtbx-animate > img { + opacity: 0; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-transition { + @include prefixr(transition, opacity .2s ease-in-out); +} + +.jslghtbx-contentwrapper > img.jslghtbx-animating-next { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animating-prev { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-init { + opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; +} + +.jslghtbx-contentwrapper > img.jslghtbx-animate-transition { + cursor: pointer; +} + +/* Controls */ +.jslghtbx-close { + position: fixed; + right: 23px; + top: 23px; + margin-top: -4px; + font-size: 2em; + color: $def-color-1; + cursor: pointer; + @include prefixr(transition, all .3s ease-in-out); + &:hover { + text-shadow: 0 0 10px #fff; + } + @media screen and(max-width: 1060px) { + font-size: 1.5em; + } +} + +.jslghtbx-next, +.jslghtbx-prev { + display: none; + position: fixed; + top: 50%; + max-width: 6%; + max-height: 250px; + cursor: pointer; + @include prefixr(transition, all .2s ease-in-out); + &.jslghtbx-active { + display: block; + } + & > img { + width: 100%; + } + +} + +.jslghtbx-next { + right: .6em; + &.jslghtbx-no-img:hover { + border-left-color: #787878; + } + @media screen and(min-width: 451px) { + right: .6em; + &.jslghtbx-no-img { + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + border-left: 20px solid #FFF; + } + } + @media screen and(max-width: 600px) { + &.jslghtbx-no-img { + right: 5px; + padding-left: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-left: 15px solid #FFF; + } + } + @media screen and(max-width: 450px) { + right: .2em; + padding-left: 20px; + } +} + +.jslghtbx-prev { + left: .6em; + &.jslghtbx-no-img:hover { + border-right-color: #787878; + } + @media screen and(min-width: 451px) { + left: .6em; + &.jslghtbx-no-img { + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + border-right: 20px solid #FFF; + } + } + @media screen and(max-width: 600px) { + &.jslghtbx-no-img { + left: 5px; + padding-right: 0; + border-top: 60px solid transparent; + border-bottom: 60px solid transparent; + border-right: 15px solid #FFF; + } + } + @media screen and(max-width: 450px) { + left: .2em; + padding-right: 20px; + } +} + +.jslghtbx-thmb { + @media screen and(min-width: 451px) { + margin: 1em; + } + @media screen and(max-width: 450px) { + margin: 1em 0; + } + padding: 2px; + max-width: 100%; + max-height: 140px; + cursor: pointer; + box-shadow: 0px 0px 3px 0px #000; + @include prefixr(transition, all .3s ease-in-out); + &:hover { + box-shadow: 0px 0px 14px 0px #000; + } +} + +.p-link { + color: white !important; + @include fontsize(14); + &:after { + content: "\2197"; + } +} diff --git a/design/sass/screenv9.scss b/design/sass/screenv9.scss index d2adb37..7144000 100644 --- a/design/sass/screenv9.scss +++ b/design/sass/screenv9.scss @@ -13,3 +13,4 @@ @import "_map.scss"; @import "_src.scss"; @import "_resume.scss"; +@import "_photos.scss"; diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html index eb9d83c..0cc550e 100644 --- a/design/templates/details/entry.html +++ b/design/templates/details/entry.html @@ -112,28 +112,38 @@ document.addEventListener("DOMContentLoaded", function(event) { var leaflet = document.createElement('script'); leaflet.src = "/media/js/leaflet-master/leaflet-mod.js"; document.body.appendChild(leaflet); - var detail = document.createElement('script'); - detail.src = "/media/js/detail.min.js"; - document.body.appendChild(detail); var lightbox = document.createElement('script'); lightbox.src = "/media/js/lightbox.js"; document.body.appendChild(lightbox); - - var opts= { - //nextOnClick: false, - captions: true, - onload: function(){ - var im = document.getElementById("jslghtbx-contentwrapper"); - var link = im.appendChild(document.createElement('a')) - link.href = im.firstChild.src; - link.innerHTML= "open "; - link.target = "_blank"; - link.setAttribute('class', 'p-link'); - im.appendChild(link); + leaflet.onload = function(){ + var detail = document.createElement('script'); + detail.src = "/media/js/detail.min.js"; + document.body.appendChild(detail); + {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %} + detail.onload = function(){ + createMap(); + var open = false; } - }; - var lightbox = new Lightbox(); - lightbox.load(opts); + {%endif%}{%endwith%} + } + + lightbox.onload = function() { + var opts= { + //nextOnClick: false, + captions: true, + onload: function(){ + var im = document.getElementById("jslghtbx-contentwrapper"); + var link = im.appendChild(document.createElement('a')) + link.href = im.firstChild.src; + link.innerHTML= "open "; + link.target = "_blank"; + link.setAttribute('class', 'p-link'); + im.appendChild(link); + } + }; + var lightbox = new Lightbox(); + lightbox.load(opts); + } {% if object.enable_comments %} {% get_comment_count for object as comment_count %} {%if comment_count > 0 %} @@ -148,10 +158,6 @@ document.addEventListener("DOMContentLoaded", function(event) { } {%endif%} {%endif%} - {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %} - createMap(); - var open = false; - {%endif%}{%endwith%} {% if object.has_video %} var tester = document.getElementsByClassName("vidauto"); var wrapper = document.getElementById('wrapper'); |