From 3878736ec2ef58a1b771e7e236bee19f2a014c82 Mon Sep 17 00:00:00 2001 From: Sven Hoehn Date: Wed, 29 Nov 2017 10:47:27 +0100 Subject: [PATCH] fixed second navigation bug over main navigation add lightbox to the image galleries --- static/css/default-skin.png | Bin 0 -> 547 bytes static/css/default-skin.svg | 1 + static/css/style.css | 627 +++++++++++++++++- static/js/photoswipe-index.js | 205 ++++++ static/js/photoswipe-ui-default.min.js | 4 + static/js/photoswipe.min.js | 4 + static/scss/_nav.scss | 4 +- static/scss/photoswipe/_main-settings.scss | 9 + .../default-skin/default-skin-svg.sketch/Data | Bin 0 -> 57208 bytes .../default-skin-svg.sketch/metadata | 18 + .../default-skin-svg.sketch/version | 1 + .../photoswipe/default-skin/default-skin.png | Bin 0 -> 547 bytes .../photoswipe/default-skin/default-skin.psd | Bin 0 -> 73357 bytes .../photoswipe/default-skin/default-skin.scss | 588 ++++++++++++++++ .../photoswipe/default-skin/default-skin.svg | 1 + .../photoswipe/default-skin/preloader.gif | Bin 0 -> 866 bytes static/scss/photoswipe/main.scss | 210 ++++++ static/scss/style.scss | 3 + templates/static/features.html | 140 ++-- 19 files changed, 1770 insertions(+), 45 deletions(-) create mode 100755 static/css/default-skin.png create mode 100755 static/css/default-skin.svg create mode 100644 static/js/photoswipe-index.js create mode 100755 static/js/photoswipe-ui-default.min.js create mode 100755 static/js/photoswipe.min.js create mode 100755 static/scss/photoswipe/_main-settings.scss create mode 100755 static/scss/photoswipe/default-skin/default-skin-svg.sketch/Data create mode 100755 static/scss/photoswipe/default-skin/default-skin-svg.sketch/metadata create mode 100755 static/scss/photoswipe/default-skin/default-skin-svg.sketch/version create mode 100755 static/scss/photoswipe/default-skin/default-skin.png create mode 100755 static/scss/photoswipe/default-skin/default-skin.psd create mode 100755 static/scss/photoswipe/default-skin/default-skin.scss create mode 100755 static/scss/photoswipe/default-skin/default-skin.svg create mode 100755 static/scss/photoswipe/default-skin/preloader.gif create mode 100755 static/scss/photoswipe/main.scss diff --git a/static/css/default-skin.png b/static/css/default-skin.png new file mode 100755 index 0000000000000000000000000000000000000000..441c502c92fe66534f0ca07b1c639a02a9bfc6e8 GIT binary patch literal 547 zc-rd>@N?(olHy`uVBq!ia0y~yVB`R@BRE)q> zQzfg0DSPAQu=lA~!r-)AA>V`{IQs4>>BL>kcznXerunmlb=| zWcaU3Q?y({((8tixy!m+M^9AR2>U-@Q#M^%Df}$cvwDB2dmHkM!%s>?s`+*-6<*}b zC6z+Z%-w!koN!M(Vgcu$6vxWM6}@S%6da&YLklvPaws&rO=B5mA?S z`j1}n(OIHjt=UhUKbx#56!7%kz(zq9E@B|BnPL@ba26wZkNm^L2vi8t4Br zE+pkue>-h|;NHC}tBdX|>+%1fyqG)W=YA;${;9DGyyo(4uXK94bu)K}=jwUwHBY)8 zB(36hxbZTj;yC}m2d{QJyZ4X%JaGAkdefault-skin 2 \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 7b2145a..6b635f5 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -4434,6 +4434,625 @@ a.text-gray-dark:focus, a.text-gray-dark:hover { .hidden-print { display: none !important; } } +/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ +/* + Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) +*/ +/* pswp = photoswipe */ +.pswp { + display: none; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + overflow: hidden; + -ms-touch-action: none; + touch-action: none; + z-index: 1500; + -webkit-text-size-adjust: 100%; + /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ + -webkit-backface-visibility: hidden; + outline: none; } + .pswp * { + box-sizing: border-box; } + .pswp img { + max-width: none; } + +/* style is added when JS option showHideOpacity is set to true */ +.pswp--animate_opacity { + /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ + opacity: 0.001; + will-change: opacity; + /* for open/close transition */ + transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } + +.pswp--open { + display: block; } + +.pswp--zoom-allowed .pswp__img { + /* autoprefixer: off */ + cursor: -webkit-zoom-in; + cursor: -moz-zoom-in; + cursor: zoom-in; } + +.pswp--zoomed-in .pswp__img { + /* autoprefixer: off */ + cursor: -webkit-grab; + cursor: -moz-grab; + cursor: grab; } + +.pswp--dragging .pswp__img { + /* autoprefixer: off */ + cursor: -webkit-grabbing; + cursor: -moz-grabbing; + cursor: grabbing; } + +/* + Background is added as a separate element. + As animating opacity is much faster than animating rgba() background-color. +*/ +.pswp__bg { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #000; + opacity: 0; + transform: translateZ(0); + -webkit-backface-visibility: hidden; + will-change: opacity; } + +.pswp__scroll-wrap { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; } + +.pswp__container, +.pswp__zoom-wrap { + -ms-touch-action: none; + touch-action: none; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; } + +/* Prevent selection and tap highlights */ +.pswp__container, +.pswp__img { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; } + +.pswp__zoom-wrap { + position: absolute; + width: 100%; + -webkit-transform-origin: left top; + -moz-transform-origin: left top; + -ms-transform-origin: left top; + transform-origin: left top; + /* for open/close transition */ + transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } + +.pswp__bg { + will-change: opacity; + /* for open/close transition */ + transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } + +.pswp--animated-in .pswp__bg, +.pswp--animated-in .pswp__zoom-wrap { + -webkit-transition: none; + transition: none; } + +.pswp__container, +.pswp__zoom-wrap { + -webkit-backface-visibility: hidden; } + +.pswp__item { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + overflow: hidden; } + +.pswp__img { + position: absolute; + width: auto; + height: auto; + top: 0; + left: 0; } + +/* + stretched thumbnail or div placeholder element (see below) + style is added to avoid flickering in webkit/blink when layers overlap +*/ +.pswp__img--placeholder { + -webkit-backface-visibility: hidden; } + +/* + div element that matches size of large image + large image loads on top of it +*/ +.pswp__img--placeholder--blank { + background: #222; } + +.pswp--ie .pswp__img { + width: 100% !important; + height: auto !important; + left: 0; + top: 0; } + +/* + Error message appears when image is not loaded + (JS option errorMsg controls markup) +*/ +.pswp__error-msg { + position: absolute; + left: 0; + top: 50%; + width: 100%; + text-align: center; + font-size: 14px; + line-height: 16px; + margin-top: -8px; + color: #CCC; } + +.pswp__error-msg a { + color: #CCC; + text-decoration: underline; } + +/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ +/* + + Contents: + + 1. Buttons + 2. Share modal and links + 3. Index indicator ("1 of X" counter) + 4. Caption + 5. Loading indicator + 6. Additional styles (root element, top bar, idle state, hidden state, etc.) + +*/ +/* + + 1. Buttons + + */ +/* + + + + + + +
+
+
+
+
+
+
+ + + + + + + +
+
+
+ + + + + + +