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)
|
||||
if file.endswith('.mp4'):
|
||||
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">
|
||||
<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)">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<use xlink:href="#icon-audio"></use>
|
||||
</svg>
|
||||
</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>
|
||||
"""
|
||||
if file.endswith('.webm'):
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@
|
|||
color: var(--light);
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
/* Removes default browser margin */
|
||||
}
|
||||
|
||||
img,
|
||||
|
|
@ -54,6 +53,7 @@
|
|||
max-height: 70vh;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -65,6 +65,42 @@
|
|||
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 {
|
||||
background-color: var(--dark);
|
||||
border: 2px solid var(--light);
|
||||
|
|
@ -73,22 +109,8 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
outline: 2px solid var(--light);
|
||||
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;
|
||||
div.post h3, h5 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* desktop */
|
||||
|
|
@ -115,8 +137,7 @@
|
|||
/* phone */
|
||||
@media (max-aspect-ratio: 1) {
|
||||
div.post {
|
||||
width: calc(100vw - 50px);
|
||||
margin-top: 10px;
|
||||
width: calc(100vw - 40px);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -130,8 +151,7 @@
|
|||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
align-items: center;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding: 5px, 0px;
|
||||
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 {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
|
|
@ -173,11 +179,10 @@
|
|||
display: flex;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.button-wrapper.gallery {
|
||||
gap: 5px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -197,13 +202,14 @@
|
|||
}
|
||||
|
||||
.controls {
|
||||
margin-top: -5.25em;
|
||||
margin-top: -70px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
flex: 0 0 3em;
|
||||
height: 3em;
|
||||
margin: 0.5em;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.controls input {
|
||||
|
|
@ -222,7 +228,7 @@
|
|||
button.gallery {
|
||||
padding: 5px;
|
||||
background-color: var(--darker);
|
||||
border-radius: 5px;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
cursor: none;
|
||||
}
|
||||
|
|
@ -234,7 +240,6 @@
|
|||
.text-content {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
/* Smooth transition */
|
||||
max-height: 20vh;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -271,19 +276,17 @@
|
|||
{% for post in posts %}
|
||||
<div class="post">
|
||||
<h3>{{ post.title }}</h3>
|
||||
<span>
|
||||
{% if post.subreddit %}
|
||||
<h5>
|
||||
<a href="/r/{{ post.subreddit }}" class="no-style-link">/r/{{ post.subreddit }}</a>
|
||||
{% if post.author %}
|
||||
— {{ post.author }}
|
||||
{% endif %}
|
||||
{% if post.age %}
|
||||
— {{ post.age }}
|
||||
{% endif %}
|
||||
</h5>
|
||||
{% if post.subreddit %}
|
||||
<h5>
|
||||
<a href="/r/{{ post.subreddit }}" class="no-style-link">/r/{{ post.subreddit }}</a>
|
||||
{% if post.author %}
|
||||
— {{ post.author }}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if post.age %}
|
||||
— {{ post.age }}
|
||||
{% endif %}
|
||||
</h5>
|
||||
{% endif %}
|
||||
{% if post.media_html|length > 0 %}
|
||||
<div class="media-div">
|
||||
{% for media in post.media_html %}
|
||||
|
|
@ -473,6 +476,10 @@
|
|||
|
||||
window.addEventListener('resize', (event) => {
|
||||
checkHeight()
|
||||
videos = document.querySelectorAll('video');
|
||||
videos.forEach(video => {
|
||||
setControlsWidth(video);
|
||||
});
|
||||
});
|
||||
|
||||
// audio/video code
|
||||
|
|
@ -501,10 +508,14 @@
|
|||
function setControlsWidth(video) {
|
||||
controls = findSibling(video, '.controls');
|
||||
controls.style.width = video.offsetWidth + 'px';
|
||||
}
|
||||
|
||||
function initializeControls(video) {
|
||||
scrub = findSibling(video, '[name="scrub"]');
|
||||
scrub.value = 0;
|
||||
audio = findSibling(video, 'audio');
|
||||
audio.volume = 0;
|
||||
setControlsWidth(video);
|
||||
}
|
||||
|
||||
function toggleContent(button) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue