diff --git a/app/static/css/themes/FK_dark_theme.css b/app/static/css/themes/FK_dark_theme.css index 1b56d85..2a8ae11 100644 --- a/app/static/css/themes/FK_dark_theme.css +++ b/app/static/css/themes/FK_dark_theme.css @@ -143,3 +143,8 @@ div.editor-toolbar, div.CodeMirror { --meta: rgba(255, 255, 255, .15); --meta-text: #ffffff; } + +.gallery, .gallery-js { + --border: rgba(255, 255, 255, 0.8); + --selected: rgba(255, 0, 0, 1.0); +} diff --git a/app/static/css/themes/default_theme.css b/app/static/css/themes/default_theme.css index c287756..b87e4f8 100644 --- a/app/static/css/themes/default_theme.css +++ b/app/static/css/themes/default_theme.css @@ -133,6 +133,11 @@ div.editor-toolbar, div.CodeMirror { --meta-text: #000000; } +.gallery, .gallery-js { + --border: rgba(0, 0, 0, 0.5); + --selected: rgba(0, 0, 0, 0.75); +} + /* Extra style on top of the Pygments style */ table.codehilitetable td.linenos { color: #808080; diff --git a/app/static/css/widgets.css b/app/static/css/widgets.css index 316ac9d..a7bb6eb 100644 --- a/app/static/css/widgets.css +++ b/app/static/css/widgets.css @@ -128,55 +128,6 @@ hr.signature { .trophy span { font-size: 80%; } - -hr.signature { - opacity: 0.2; -} -.gallery { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin: auto; -} -.gallery * { - margin: 3px; - border: 1px solid var(--border); -} -.gallery-js { - --border: rgba(0,0,0,0.5); - --selected: rgba(255,0,0,0.9); - display: flex; - overflow-x: auto; - margin: auto; - padding: 15px; - height: 180px; -} -.gallery-js img, -.gallery-js video { - height: 100%; - border: 1px solid var(--border); - cursor: pointer; -} -.gallery-js img:not(:first-child), -.gallery-js video:not(:first-child) { - margin-left: 15px; -} -.gallery-js img.selected, -.gallery-js video.selected { - box-shadow: 0 0 7.5px var(--selected); -} -@media screen and (max-width:1199px) { - .gallery-js { - height: 180px; - } -} -@media screen and (max-width:499px) { - .gallery-js { - height: 180px; - } -} -.gallery-spot { - margin: 10px auto; .dl-button { display: inline-flex; flex-direction: row; @@ -208,3 +159,52 @@ hr.signature { color: var(--meta-text); font-size: 90%; } +.gallery { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: auto; +} +.gallery * { + margin: 3px; + border: 1px solid var(--border); +} +.gallery-js { + display: flex; + overflow-x: auto; + overflow-y: hidden; + margin: auto; + padding: 15px; + height: 180px; +} +.gallery-js img, +.gallery-js video { + height: 100%; + border: 1px solid var(--border); + cursor: pointer; +} +.gallery-js img:not(:first-child), +.gallery-js video:not(:first-child) { + margin-left: 15px; +} +.gallery-js img.selected, +.gallery-js video.selected { + box-shadow: 0 0 7.5px var(--selected); +} +@media screen and (max-width:1199px) { + .gallery-js { + height: 150px; + } +} +@media screen and (max-width:499px) { + .gallery-js { + height: 130px; + } +} +.gallery-spot { + justify-content: center; + margin: 10px auto; +} +.gallery-spot * { + cursor: pointer; +} \ No newline at end of file diff --git a/app/static/less/widgets.less b/app/static/less/widgets.less index d2f6315..c86f2e0 100644 --- a/app/static/less/widgets.less +++ b/app/static/less/widgets.less @@ -204,25 +204,22 @@ hr.signature { /* Gallery with Javascript */ .gallery-js { - --border: rgba(0, 0, 0, 0.5); - --selected: rgba(255, 0, 0, 0.9); - @padding: 15px; - display: flex; overflow-x: auto; + display: flex; overflow-x: auto; overflow-y: hidden; margin: auto; padding: @padding; height: 150px + 2 * @padding; @media screen and (max-width: @small) { - height: 150px + 2 * @padding; + height: 120px + 2 * @padding; } @media screen and (max-width: @micro) { - height: 150px + 2 * @padding; + height: 100px + 2 * @padding; } img, video { height: 100%; border: 1px solid var(--border); - cursor: pointer; + cursor: pointer; //box-sizing: content-box; &:not(:first-child) { margin-left: @padding; @@ -235,5 +232,10 @@ hr.signature { } .gallery-spot { + justify-content: center; margin: 10px auto; + + * { + cursor: pointer; + } } diff --git a/app/static/scripts/gallery.js b/app/static/scripts/gallery.js index 9cfb99c..f6ba5b6 100644 --- a/app/static/scripts/gallery.js +++ b/app/static/scripts/gallery.js @@ -40,9 +40,14 @@ document.querySelectorAll(".gallery-js > *").forEach(item => { // Change content of spotlight let spot = e.target.parentElement.nextElementSibling; spot.replaceChild(e.target.cloneNode(true), spot.firstElementChild); + // Open spotlight media in a new tab + spot.firstElementChild.addEventListener("click", function(e) { + window.open(spot.firstElementChild.src, "_blank"); + }); + // Display the spotlight if(e.target.classList.contains('selected')) { - spot.style.display = "block"; + spot.style.display = "flex"; } else { spot.style.display = "none"; } diff --git a/app/utils/markdown_extensions/gallery.py b/app/utils/markdown_extensions/gallery.py index 55e7c7f..ec3ac04 100644 --- a/app/utils/markdown_extensions/gallery.py +++ b/app/utils/markdown_extensions/gallery.py @@ -21,13 +21,14 @@ class GalleryTreeprocessor(Treeprocessor): ul[-1][-1].tail = ul[-1][-1].tail[:-9] if has_gallery: - # TODO: Manipulate the output tree el = etree.Element("div") - p = etree.Element("p") - p.text = "" + el.set('class', 'gallery') parent.remove(ul) - el.append(p) - el.append(ul) + for li in ul: + # Filter out items that are not single medias + if len(li) == 1 and li[0].tag in ["img", "video"]: + el.append(li[0]) + parent.insert(idx, el) class GalleryExtension(Extension): diff --git a/app/utils/render.py b/app/utils/render.py index 73ae1af..766e3f7 100644 --- a/app/utils/render.py +++ b/app/utils/render.py @@ -24,7 +24,8 @@ def render(*args, styles=[], scripts=[], **kwargs): 'scripts/pc-utils.js', 'scripts/smartphone_patch.js', 'scripts/simplemde.min.js', - 'scripts/filter.js' + 'scripts/gallery.js', + 'scripts/filter.js', ] # Apply theme from user settings