mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 11:36:16 +00:00
Remove fullscreen in favour of hiding info panel
This commit is contained in:
parent
4622cc29c5
commit
823d0877d0
7 changed files with 143 additions and 166 deletions
|
|
@ -64,11 +64,6 @@
|
|||
|
||||
color: RGB($primary)
|
||||
|
||||
.tool-tip
|
||||
opacity: 1
|
||||
top: -2.3rem
|
||||
transform: translateX(calc(-50% + 1.25rem ))
|
||||
|
||||
.pill__critical
|
||||
color: RGB($critical)
|
||||
|
||||
|
|
@ -91,47 +86,6 @@
|
|||
&:hover
|
||||
color: RGB($fg-white)
|
||||
|
||||
.tool-tip
|
||||
margin: 0
|
||||
padding: 0.35rem 0.7rem
|
||||
|
||||
width: auto
|
||||
|
||||
display: block
|
||||
|
||||
position: absolute
|
||||
top: -1.7rem
|
||||
left: 0
|
||||
transform: translateX(calc(-50% + 1.25rem ))
|
||||
|
||||
font-size: 0.9rem
|
||||
font-weight: 700
|
||||
|
||||
background-color: #000000
|
||||
color: RGB($fg-white)
|
||||
opacity: 0
|
||||
border-radius: $rad-inner
|
||||
|
||||
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), top 0.2s cubic-bezier(.76,0,.17,1)
|
||||
|
||||
pointer-events: none
|
||||
|
||||
svg
|
||||
margin: 0
|
||||
font-size: 1rem
|
||||
|
||||
width: 0.75rem
|
||||
height: 0.75rem
|
||||
|
||||
display: block
|
||||
|
||||
position: absolute
|
||||
left: 50%
|
||||
bottom: -0.46rem
|
||||
transform: translateX(-50%)
|
||||
|
||||
color: #000000
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
.tool-tip
|
||||
display: none
|
||||
|
|
@ -57,9 +57,9 @@
|
|||
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: -400px
|
||||
left: -25rem
|
||||
|
||||
width: 400px
|
||||
width: 25rem
|
||||
height: 100%
|
||||
|
||||
display: flex
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
.info-container
|
||||
width: 25rem
|
||||
height: 100%
|
||||
height: 100vh
|
||||
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
|
@ -9,10 +13,11 @@
|
|||
background-color: RGB($bg-200)
|
||||
|
||||
overflow-y: auto
|
||||
transition: transform 0.3s cubic-bezier(.79, .14, .15, .86)
|
||||
z-index: +4
|
||||
transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1)
|
||||
|
||||
&.collapsed
|
||||
transform: translateX(-25rem)
|
||||
left: -25rem
|
||||
|
||||
.info-tab
|
||||
width: 100%
|
||||
|
|
@ -38,6 +43,9 @@
|
|||
opacity: 0
|
||||
|
||||
.collapse-indicator
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 1.25rem
|
||||
height: 1.25rem
|
||||
|
||||
|
|
@ -45,12 +53,14 @@
|
|||
top: 0.6rem
|
||||
right: 0.6rem
|
||||
|
||||
background-color: transparent
|
||||
color: RGB($primary)
|
||||
border: none
|
||||
|
||||
z-index: +2
|
||||
|
||||
transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
|
||||
user-select: none
|
||||
cursor: pointer
|
||||
|
||||
.info-header
|
||||
margin: 0
|
||||
|
|
@ -209,4 +219,14 @@
|
|||
|
||||
@media (max-width: 1100px)
|
||||
.info-container
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
position: relative
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
&.collapsed
|
||||
left: unset
|
||||
|
|
|
|||
|
|
@ -12,47 +12,63 @@
|
|||
|
||||
position: relative
|
||||
|
||||
display: grid
|
||||
grid-template-areas: 'info image' 'info tools'
|
||||
grid-template-columns: 25rem 1fr
|
||||
grid-template-rows: 1fr auto
|
||||
gap: 0
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
z-index: 3
|
||||
|
||||
&.collapse
|
||||
grid-template-columns: 0rem 1fr
|
||||
.image-block
|
||||
margin: 0 0 0 25rem
|
||||
padding: 0
|
||||
|
||||
#image-info
|
||||
grid-area: info
|
||||
#image-tools
|
||||
grid-area: tools
|
||||
padding: 0 0 0.5rem 0
|
||||
#image-container
|
||||
grid-area: image
|
||||
width: calc(100% - 25rem)
|
||||
height: 100vh
|
||||
|
||||
position: relative
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0
|
||||
|
||||
z-index: 3
|
||||
transition: margin 0.3s cubic-bezier(0.76, 0, 0.17, 1), width 0.3s cubic-bezier(0.76, 0, 0.17, 1)
|
||||
|
||||
.pill-row
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
&.collapsed
|
||||
.image-block
|
||||
margin: 0
|
||||
width: 100%
|
||||
|
||||
|
||||
@media (max-width: 1100px)
|
||||
.image-grid
|
||||
padding: 0.5rem
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
height: auto
|
||||
|
||||
.image-container
|
||||
margin: 0 auto
|
||||
padding: 0
|
||||
.image-block
|
||||
margin: 0
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
max-height: 69vh
|
||||
gap: 0.5rem
|
||||
|
||||
img
|
||||
max-height: 69vh
|
||||
transition: margin 0s, width 0s
|
||||
|
||||
#image-tools
|
||||
padding: 0
|
||||
.image-container
|
||||
margin: 0 auto
|
||||
padding: 0
|
||||
max-height: 69vh
|
||||
|
||||
img
|
||||
max-height: 69vh
|
||||
|
||||
.pill-row
|
||||
margin-bottom: 0
|
||||
|
||||
#fullscreenImage
|
||||
display: none
|
||||
|
||||
.info-container
|
||||
background: transparent
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@
|
|||
box-sizing: border-box
|
||||
font-family: $font
|
||||
|
||||
scrollbar-color: RGB($primary) transparent
|
||||
|
||||
::-webkit-scrollbar
|
||||
width: 0.5rem
|
||||
::-webkit-scrollbar-track
|
||||
|
|
|
|||
|
|
@ -6,25 +6,6 @@
|
|||
<meta name="theme-color" content="rgb({{ image.colours.0.0 }}{{ image.colours.0.1 }}{{ image.colours.0.2 }})"/>
|
||||
|
||||
<script type="text/javascript">
|
||||
function imageFullscreenOff() {
|
||||
document.querySelector("html").style.overflow = "auto";
|
||||
let fullscreen = document.querySelector('.image-fullscreen')
|
||||
|
||||
fullscreen.classList.remove('active');
|
||||
|
||||
setTimeout(function() {
|
||||
fullscreen.style.display = 'none';
|
||||
}, 200);
|
||||
}
|
||||
function imageFullscreenOn() {
|
||||
let fullscreen = document.querySelector('.image-fullscreen')
|
||||
|
||||
fullscreen.querySelector('img').src = '{{ url_for('api.file', file_name=image.filename) }}';
|
||||
|
||||
document.querySelector("html").style.overflow = "hidden";
|
||||
fullscreen.style.display = 'flex';
|
||||
setTimeout(function() { fullscreen.classList.add('active'); }, 5);
|
||||
}
|
||||
function imageShare() {
|
||||
try {
|
||||
navigator.clipboard.writeText(window.location.href)
|
||||
|
|
@ -33,18 +14,16 @@
|
|||
addNotification("Failed to copy link! Are you on HTTP?", 2);
|
||||
}
|
||||
}
|
||||
function infoCollapse() {
|
||||
function fullscreen() {
|
||||
let info = document.querySelector('.info-container');
|
||||
let wrapper = document.querySelector('.image-grid');
|
||||
|
||||
if (info.classList.contains('collapsed')) {
|
||||
info.classList.remove('collapsed');
|
||||
wrapper.classList.remove('collapsed');
|
||||
btn.innerHTML = 'Collapse';
|
||||
} else {
|
||||
info.classList.add('collapsed');
|
||||
wrapper.classList.add('collapsed');
|
||||
btn.innerHTML = 'Expand';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +61,7 @@
|
|||
if (response.ok) {
|
||||
window.location.href = '/';
|
||||
} else {
|
||||
addNotification(`Image *clings*: ${response}`, 2);
|
||||
addNotification(`Image *clings*`, 2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -111,70 +90,71 @@
|
|||
</div>
|
||||
|
||||
<div class="image-grid">
|
||||
<div class="image-container" id="image-container">
|
||||
<img
|
||||
src="{{ url_for('api.file', file_name=image.filename) }}?r=prev"
|
||||
alt="{{ image.alt }}"
|
||||
onload="imgFade(this)"
|
||||
style="opacity: 0;"
|
||||
onerror="this.src='{{ url_for('static', filename='error.png')}}'"
|
||||
{% if "File" in image.exif %}
|
||||
width="{{ image.exif.File.Width.raw }}"
|
||||
height="{{ image.exif.File.Height.raw }}"
|
||||
{% endif %}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pill-row" id="image-tools">
|
||||
{% if next_url %}
|
||||
<div>
|
||||
<a class="pill-item" href="{{ next_url }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
<button class="pill-item" onclick="imageFullscreenOn()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48V96a8,8,0,0,1-16,0V67.31l-50.34,50.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM106.34,138.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l50.35-50.34a8,8,0,0,0-11.32-11.32Z"></path></svg>
|
||||
</button>
|
||||
<button class="pill-item" onclick="imageShare()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"></path></svg>
|
||||
</button>
|
||||
<button class="pill-item" onclick="infoCollapse()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
||||
</button>
|
||||
<a class="pill-item" href="/api/file/{{ image.filename }}" download onclick="addNotification('Download started!', 4)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-61.66a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L120,164.69V120a8,8,0,0,1,16,0v44.69l10.34-10.35A8,8,0,0,1,157.66,154.34Z"></path></svg>
|
||||
</a>
|
||||
<div class="image-block">
|
||||
<div class="image-container">
|
||||
<img
|
||||
src="{{ url_for('api.file', file_name=image.filename) }}?r=prev"
|
||||
alt="{{ image.alt }}"
|
||||
onload="imgFade(this)"
|
||||
style="opacity: 0;"
|
||||
onerror="this.src='{{ url_for('static', filename='error.png')}}'"
|
||||
{% if "File" in image.exif %}
|
||||
width="{{ image.exif.File.Width.raw }}"
|
||||
height="{{ image.exif.File.Height.raw }}"
|
||||
{% endif %}
|
||||
/>
|
||||
</div>
|
||||
{% if current_user.id == image.author_id %}
|
||||
|
||||
<div class="pill-row">
|
||||
{% if next_url %}
|
||||
<div>
|
||||
<a class="pill-item" href="{{ next_url }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
<button class="pill-item pill__critical" onclick="imageDelete()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
|
||||
<button class="pill-item" onclick="fullscreen()" id="fullscreenImage">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48V96a8,8,0,0,1-16,0V67.31l-50.34,50.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM106.34,138.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l50.35-50.34a8,8,0,0,0-11.32-11.32Z"></path></svg>
|
||||
</button>
|
||||
<button class="pill-item pill__critical" onclick="imageEdit()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"></path></svg>
|
||||
<button class="pill-item" onclick="imageShare()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if prev_url %}
|
||||
<div>
|
||||
<a class="pill-item" href="{{ prev_url }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
|
||||
<a class="pill-item" href="/api/file/{{ image.filename }}" download onclick="addNotification('Download started!', 4)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-61.66a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L120,164.69V120a8,8,0,0,1,16,0v44.69l10.34-10.35A8,8,0,0,1,157.66,154.34Z"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_user.id == image.author_id %}
|
||||
<div>
|
||||
<button class="pill-item pill__critical" onclick="imageDelete()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
|
||||
</button>
|
||||
<button class="pill-item pill__critical" onclick="imageEdit()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if prev_url %}
|
||||
<div>
|
||||
<a class="pill-item" href="{{ prev_url }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-container" id="image-info">
|
||||
<div class="info-container">
|
||||
{% if image.post_description %}
|
||||
<div class="info-tab">
|
||||
<div class="info-header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM184,96a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,96Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,128Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,160Z"></path></svg>
|
||||
<h2>Description</h2>
|
||||
<svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
||||
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
||||
</svg>
|
||||
<button class="collapse-indicator">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
||||
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="info-table">
|
||||
<p>{{ image.post_description }}</p>
|
||||
|
|
@ -185,9 +165,11 @@
|
|||
<div class="info-header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
||||
<h2>Info</h2>
|
||||
<svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
||||
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
||||
</svg>
|
||||
<button class="collapse-indicator">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
||||
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="info-table">
|
||||
<table>
|
||||
|
|
@ -236,9 +218,11 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M110.66,147.56a8,8,0,0,0-13.32,0L76.49,178.85l-9.76-15.18a8,8,0,0,0-13.46,0l-36,56A8,8,0,0,0,24,232H152a8,8,0,0,0,6.66-12.44ZM38.65,216,60,182.79l9.63,15a8,8,0,0,0,13.39.11l21-31.47L137.05,216Zm175-133.66-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v96a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48V216h-8a8,8,0,0,0,0,16h8a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160Z"></path></svg>
|
||||
<h2>{{ tag }}</h2>
|
||||
{% endif %}
|
||||
<svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
||||
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
||||
</svg>
|
||||
<button class="collapse-indicator">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
||||
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="info-table">
|
||||
<table>
|
||||
|
|
@ -269,9 +253,10 @@
|
|||
{% block script %}
|
||||
<script type="text/javascript">
|
||||
let infoTab = document.querySelectorAll('.info-tab');
|
||||
|
||||
for (let i = 0; i < infoTab.length; i++) {
|
||||
infoTab[i].querySelector('.info-header').addEventListener('click', function() {
|
||||
this.parentNode.classList.toggle('collapsed');
|
||||
infoTab[i].querySelector('.collapse-indicator').addEventListener('click', function() {
|
||||
infoTab[i].classList.toggle('collapsed');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -30,12 +30,12 @@
|
|||
type="image/svg+xml"
|
||||
media="(prefers-color-scheme: dark)"/>
|
||||
|
||||
{% assets "js_pre" %}
|
||||
{% assets "lib" %}
|
||||
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
|
||||
{% endassets %}
|
||||
|
||||
{% assets "js_post" %}
|
||||
<script type="text/javascript" src="{{ ASSET_URL }}" defer></script>
|
||||
|
||||
{% assets "js" %}
|
||||
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
|
||||
{% endassets %}
|
||||
|
||||
{% assets "styles" %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue