CSS tweaks
This commit is contained in:
parent
cdec18dc68
commit
d2b227035b
14
app/app.py
14
app/app.py
|
|
@ -355,19 +355,19 @@ def get_media_html(file, priority=False):
|
||||||
return '<audio src="/file/{0}" hidden></audio>'.format(file)
|
return '<audio src="/file/{0}" hidden></audio>'.format(file)
|
||||||
if file.endswith('.mp4'):
|
if file.endswith('.mp4'):
|
||||||
return f"""
|
return f"""
|
||||||
<video src="/file/{file}" type="video/mp4" onloadeddata="setControlsWidth(this)"></video>
|
<video src="/file/{file}" type="video/mp4" onloadeddata="initializeControls(this)"></video>
|
||||||
<span class="controls button-wrapper">
|
<span class="controls button-wrapper">
|
||||||
<button name="play" onclick="toggleContent(this)">
|
|
||||||
<svg viewBox="0 0 24 24">
|
|
||||||
<use xlink:href="#icon-play"></use>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<input name="scrub" type="range" value=0 oninput="seekContent(this)">
|
|
||||||
<button name="volume-button" onclick="toggleVolume(this)">
|
<button name="volume-button" onclick="toggleVolume(this)">
|
||||||
<svg viewBox="0 0 24 24">
|
<svg viewBox="0 0 24 24">
|
||||||
<use xlink:href="#icon-audio"></use>
|
<use xlink:href="#icon-audio"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
<input name="scrub" type="range" value=0 oninput="seekContent(this)">
|
||||||
|
<button name="play" onclick="toggleContent(this)">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<use xlink:href="#icon-play"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</span>
|
</span>
|
||||||
"""
|
"""
|
||||||
if file.endswith('.webm'):
|
if file.endswith('.webm'):
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,6 @@
|
||||||
color: var(--light);
|
color: var(--light);
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* Removes default browser margin */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img,
|
img,
|
||||||
|
|
@ -54,6 +53,7 @@
|
||||||
max-height: 70vh;
|
max-height: 70vh;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|
@ -65,6 +65,42 @@
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: var(--dark);
|
||||||
|
outline: 2px solid var(--light);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar a {
|
||||||
|
display: block;
|
||||||
|
color: var(--light);
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar a:hover {
|
||||||
|
background-color: var(--darker);
|
||||||
|
color: var(--light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-div, .text-content, .button-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
div.post {
|
div.post {
|
||||||
background-color: var(--dark);
|
background-color: var(--dark);
|
||||||
border: 2px solid var(--light);
|
border: 2px solid var(--light);
|
||||||
|
|
@ -73,22 +109,8 @@
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
div.post h3, h5 {
|
||||||
outline: 2px solid var(--light);
|
margin: 0;
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: var(--dark);
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 1;
|
|
||||||
/* Takes up remaining space */
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* desktop */
|
/* desktop */
|
||||||
|
|
@ -115,8 +137,7 @@
|
||||||
/* phone */
|
/* phone */
|
||||||
@media (max-aspect-ratio: 1) {
|
@media (max-aspect-ratio: 1) {
|
||||||
div.post {
|
div.post {
|
||||||
width: calc(100vw - 50px);
|
width: calc(100vw - 40px);
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
@ -130,8 +151,7 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 5px;
|
padding: 5px, 0px;
|
||||||
padding-bottom: 5px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -144,20 +164,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar a {
|
|
||||||
display: block;
|
|
||||||
color: var(--light);
|
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
margin: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar a:hover {
|
|
||||||
background-color: var(--darker);
|
|
||||||
color: var(--light);
|
|
||||||
}
|
|
||||||
|
|
||||||
a.no-style-link {
|
a.no-style-link {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: inherit;
|
text-decoration: inherit;
|
||||||
|
|
@ -173,11 +179,10 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-wrapper.gallery {
|
.button-wrapper.gallery {
|
||||||
gap: 5px;
|
gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
@ -197,13 +202,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
margin-top: -5.25em;
|
margin-top: -70px;
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls button {
|
.controls button {
|
||||||
flex: 0 0 3em;
|
flex: 0 0 3em;
|
||||||
height: 3em;
|
height: 3em;
|
||||||
margin: 0.5em;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls input {
|
.controls input {
|
||||||
|
|
@ -222,7 +228,7 @@
|
||||||
button.gallery {
|
button.gallery {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: var(--darker);
|
background-color: var(--darker);
|
||||||
border-radius: 5px;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: none;
|
cursor: none;
|
||||||
}
|
}
|
||||||
|
|
@ -234,7 +240,6 @@
|
||||||
.text-content {
|
.text-content {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: max-height 0.3s ease-out;
|
transition: max-height 0.3s ease-out;
|
||||||
/* Smooth transition */
|
|
||||||
max-height: 20vh;
|
max-height: 20vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -271,19 +276,17 @@
|
||||||
{% for post in posts %}
|
{% for post in posts %}
|
||||||
<div class="post">
|
<div class="post">
|
||||||
<h3>{{ post.title }}</h3>
|
<h3>{{ post.title }}</h3>
|
||||||
<span>
|
{% if post.subreddit %}
|
||||||
{% if post.subreddit %}
|
<h5>
|
||||||
<h5>
|
<a href="/r/{{ post.subreddit }}" class="no-style-link">/r/{{ post.subreddit }}</a>
|
||||||
<a href="/r/{{ post.subreddit }}" class="no-style-link">/r/{{ post.subreddit }}</a>
|
{% if post.author %}
|
||||||
{% if post.author %}
|
— {{ post.author }}
|
||||||
— {{ post.author }}
|
|
||||||
{% endif %}
|
|
||||||
{% if post.age %}
|
|
||||||
— {{ post.age }}
|
|
||||||
{% endif %}
|
|
||||||
</h5>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</span>
|
{% if post.age %}
|
||||||
|
— {{ post.age }}
|
||||||
|
{% endif %}
|
||||||
|
</h5>
|
||||||
|
{% endif %}
|
||||||
{% if post.media_html|length > 0 %}
|
{% if post.media_html|length > 0 %}
|
||||||
<div class="media-div">
|
<div class="media-div">
|
||||||
{% for media in post.media_html %}
|
{% for media in post.media_html %}
|
||||||
|
|
@ -473,6 +476,10 @@
|
||||||
|
|
||||||
window.addEventListener('resize', (event) => {
|
window.addEventListener('resize', (event) => {
|
||||||
checkHeight()
|
checkHeight()
|
||||||
|
videos = document.querySelectorAll('video');
|
||||||
|
videos.forEach(video => {
|
||||||
|
setControlsWidth(video);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// audio/video code
|
// audio/video code
|
||||||
|
|
@ -501,10 +508,14 @@
|
||||||
function setControlsWidth(video) {
|
function setControlsWidth(video) {
|
||||||
controls = findSibling(video, '.controls');
|
controls = findSibling(video, '.controls');
|
||||||
controls.style.width = video.offsetWidth + 'px';
|
controls.style.width = video.offsetWidth + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
function initializeControls(video) {
|
||||||
scrub = findSibling(video, '[name="scrub"]');
|
scrub = findSibling(video, '[name="scrub"]');
|
||||||
scrub.value = 0;
|
scrub.value = 0;
|
||||||
audio = findSibling(video, 'audio');
|
audio = findSibling(video, 'audio');
|
||||||
audio.volume = 0;
|
audio.volume = 0;
|
||||||
|
setControlsWidth(video);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleContent(button) {
|
function toggleContent(button) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue