Remove larger image view as it's broken on some browsers

alternate-navbar
Maik de Kruif 3 years ago
parent 9ab6b65570
commit c306300f2c
Signed by: maik
GPG Key ID: 44A55AD1F0673FA6
  1. 20
      themes/maik-blog/assets/js/image_enlargement.js
  2. 67
      themes/maik-blog/assets/scss/_main.scss
  3. 37
      themes/maik-blog/layouts/partials/image.html
  4. 3
      themes/maik-blog/layouts/partials/javascript.html
  5. 2
      themes/maik-blog/layouts/shortcodes/figure.html

@ -1,20 +0,0 @@
window.addEventListener("load", () => {
document.querySelectorAll("figure.enlargable").forEach(node => {
node.addEventListener("click", () => {
console.log("Hey");
node.classList.toggle("enlarged")
})
})
const keyDown = (e) => {
if (e.keyCode !== 27) {
return
}
document.querySelectorAll("figure.enlarged").forEach(node => {
node.classList.remove("enlarged")
})
}
document.addEventListener('keydown', keyDown)
})

@ -209,73 +209,6 @@ figure {
&.inline { &.inline {
display: inline-table; display: inline-table;
} }
&.enlargable {
cursor: pointer;
}
.enlarged_image {
display: none;
}
&.enlarged .enlarged_image {
cursor: initial;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
left: 0;
top: 0;
min-width: 100vw;
max-width: 100vw;
width: 100vw;
min-height: 100vh;
max-height: 100vh;
height: 100vh;
margin: 0;
padding: 0;
z-index: 10000;
background: #2c2c2cdd;
&::after {
content: "×";
display: block;
height: 2rem;
width: 2rem;
line-height: 2rem;
text-align: center;
position: absolute;
top: 1rem;
right: 1rem;
color: $dark-color;
font-size: 3rem;
cursor: pointer;
}
picture {
max-width: 80%;
width: 80%;
height: 80%;
object-fit: contain;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.caption {
background: #c2c2c2;
padding: 1rem 2rem;
border-radius: 8px;
}
}
} }
code { code {

@ -1,34 +1,9 @@
{{- $orignal := resources.Get .path }} {{- $orignal := resources.Get .path }}
{{- $png := $orignal.Resize (printf "%dx%d png q50" $orignal.Width $orignal.Height) }} {{- $png := $orignal.Resize (printf "%dx%d png q75" $orignal.Width $orignal.Height) }}
{{- $webp := $orignal.Resize (printf "%dx%d webp q50" $orignal.Width $orignal.Height) }} {{- $webp := $orignal.Resize (printf "%dx%d webp q75" $orignal.Width $orignal.Height) }}
{{- $pngFull := $orignal.Resize (printf "%dx%d webp q100" $orignal.Width $orignal.Height) }}
{{- $webpFull := $orignal.Resize (printf "%dx%d webp q100" $orignal.Width $orignal.Height) }}
<picture> <picture>
<source type="image/webp" srcset="{{ $webp.Permalink }}"> <source type="image/webp" srcset="{{ $webp.Permalink }}">
<img <img src="{{ $png.Permalink }}" alt="{{ .alt | default "" }}" title="{{ .alt }}"
src="{{ $png.Permalink }}" width="{{ .width | default $png.Width }}" height="{{ .height | default $png.Height }}"
alt="{{ .alt | default "" }}" {{- if .class}}class="{{ .class }}" {{end}} {{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
title="{{ .alt }}" </picture>
width="{{ .width | default $png.Width }}"
height="{{ .height | default $png.Height }}"
{{- if .class}}class="{{ .class }}" {{end}}
{{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
</picture>
<div class="enlarged_image">
<picture>
<source type="image/webp" srcset="{{ $webpFull.Permalink }}">
<img
src="{{ $pngFull.Permalink }}"
alt="{{ .alt | default "" }}"
loading="lazy"
title="{{ .alt }}"
width="{{ .width | default $pngFull.Width }}"
height="{{ .height | default $pngFull.Height }}"
{{- if .class}}class="{{ .class }}" {{end}}
{{- if .style}}style="{{ .style | safeCSS }}" {{end}} />
</picture>
{{- with .alt }}
<p class="caption">{{ . }}</p>
{{- end }}
</div>

@ -2,8 +2,7 @@
{{- $menu := resources.Get "js/menu.js" }} {{- $menu := resources.Get "js/menu.js" }}
{{- $theme := resources.Get "js/theme.js" }} {{- $theme := resources.Get "js/theme.js" }}
{{- $nav := resources.Get "js/nav.js" }} {{- $nav := resources.Get "js/nav.js" }}
{{- $image_enlargement := resources.Get "js/image_enlargement.js" }} {{- $secureJS := slice $main $menu $theme $nav | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
{{- $secureJS := slice $main $menu $theme $nav $image_enlargement | resources.Concat "bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script> <script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
{{- if .Site.GoogleAnalytics }} {{- if .Site.GoogleAnalytics }}

@ -1,4 +1,4 @@
<figure class="enlargable {{- with .Get "class" }} {{ . }}{{ end }}" {{ with .Get "id" }} id="{{ . }}" {{ end }}> <figure {{- with .Get "class" }} class="{{ . }}" {{ end }}{{ with .Get "id" }} id="{{ . }}" {{ end }}>
{{- if .Get "link" -}} {{- if .Get "link" -}}
<a href="{{ .Get "link" }}" {{ with .Get "target" }} target="{{ . }}" {{ end }}{{ with .Get "rel" }} rel="{{ . }}" <a href="{{ .Get "link" }}" {{ with .Get "target" }} target="{{ . }}" {{ end }}{{ with .Get "rel" }} rel="{{ . }}"
{{ end }}> {{ end }}>

Loading…
Cancel
Save