moonq/mirva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

share specific images with url

Browse Source
This commit is contained in:
Q
2023-09-28 19:32:34 +03:00
parent 3f69c63638
commit 907fd1f03e
4 changed files with 171 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
mirva/__init__.py
View File

@@ -1,4 +1,4 @@
__version__ = "20230928.0" __version__ = "20230928.1"
def get_version(): def get_version():

10
mirva/mirva.py
View File

@@ -252,7 +252,7 @@ Released : 20110306
<div id="page-bgtop"> <div id="page-bgtop">
<div id="page-bgbtm"> <div id="page-bgbtm">
<div id="content"> <div id="content">
<div class="post"> <div class="post" id="post_intro">
<div class="entry intro"> <div class="entry intro">
{intro} {intro}
</div> </div>
@@ -281,14 +281,14 @@ Released : 20110306
image = urllib.parse.quote(image) image = urllib.parse.quote(image)
if self.video_match.match(image): if self.video_match.match(image):
return """ return """
<div class="post"> <div class="post" id="post_{image}">
<div class="navigation">&nbsp;</div> <div class="navigation">&nbsp;</div>
<div class="image_wrapper center"><a href="{image}"> <div class="image_wrapper center"><a href="{image}">
<video class=post_image controls preload="metadata"> <video class=post_image controls preload="metadata">
<source src="{image}" type="video/mp4" > <source src="{image}" type="video/mp4" >
</video> </video>
</a></div> </a></div>
<div class="meta"><div class="name">{title}</div></div> <div class="meta"><div class="post_title" id="title_{image}">{title}</div></div>
<div style="clear: both;">&nbsp;</div> <div style="clear: both;">&nbsp;</div>
<div class="entry">{content}</div> <div class="entry">{content}</div>
</div>""".format( </div>""".format(
@@ -296,12 +296,12 @@ Released : 20110306
) )
return """ return """
<div class="post"> <div class="post" id="post_{image}">
<div class="navigation">&nbsp;</div> <div class="navigation">&nbsp;</div>
<div class="image_wrapper center"><a href="{image}"> <div class="image_wrapper center"><a href="{image}">
<img loading=lazy class=post_image src="{med_dir}/{image}.jpg"> <img loading=lazy class=post_image src="{med_dir}/{image}.jpg">
</a></div> </a></div>
<div class="meta"><div class="name">{title}</div></div> <div class="meta"><div class="post_title" id="title_{image}">{title}</div></div>
<div style="clear: both;">&nbsp;</div> <div style="clear: both;">&nbsp;</div>
<div class="entry">{content}</div> <div class="entry">{content}</div>
</div>""".format( </div>""".format(

205
mirva/resources/mirva.css
View File

@@ -1,4 +1,3 @@
/* /*
Design by TEMPLATED Design by TEMPLATED
http://templated.co http://templated.co
@@ -11,7 +10,7 @@ Released for free under the Creative Commons Attribution License
--foreground: #d6d6d6; --foreground: #d6d6d6;
--headercolor: #ffffff; --headercolor: #ffffff;
--title-text: #000000; --title-text: #000000;
--title-background: rgba(255,255,255,0.7); --title-background: rgba(255, 255, 255, 0.7);
--links: #ff8300; --links: #ff8300;
--subtitle-text: #ffffff; --subtitle-text: #ffffff;
} }
@@ -30,118 +29,123 @@ Released for free under the Creative Commons Attribution License
*/ */
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: var(--background); background-color: var(--background);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
color: var(--foreground); color: var(--foreground);
overflow-x: hidden; overflow-x: hidden;
} }
h1, h2, h3 { h1,
margin: 0; h2,
padding: 0; h3 {
font-weight: normal; margin: 0;
color: var(--headercolor); padding: 0;
font-weight: normal;
color: var(--headercolor);
} }
h1 { h1 {
font-size: 2em; font-size: 2em;
} }
h2 { h2 {
font-size: 2.4em; font-size: 2.4em;
} }
h3 { h3 {
font-size: 1.6em; font-size: 1.6em;
} }
p, ul, ol { p,
margin-top: 0; ul,
line-height: 180%; ol {
margin-top: 0;
line-height: 180%;
} }
ul, ol { ul,
} ol {}
a { a {
text-decoration: none; text-decoration: none;
color: var(--links); color: var(--links);
} }
a:hover { a:hover {}
}
#wrapper { #wrapper {
width: 100vw; width: 100vw;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
} }
/* Header */ /* Header */
#header { #header {
clear: both; clear: both;
width: 100vw; width: 100vw;
height: 330px; height: 330px;
margin: 0 auto; margin: 0 auto;
padding: 0px; padding: 0px;
background: url(banner.jpg) no-repeat center center; background: url(banner.jpg) no-repeat center center;
background-size: cover; background-size: cover;
} }
/* Logo */ /* Logo */
#logo { #logo {
margin: 0; margin: 0;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
color: #000000; color: #000000;
} }
#logo h1, #logo p { #logo h1,
margin: 0; #logo p {
padding: 0; margin: 0;
color: var(--subtitle-text); padding: 0;
color: var(--subtitle-text);
} }
#logo #page_title { #logo #page_title {
padding-top: 160px; padding-top: 160px;
} }
#logo #page_title h1 { #logo #page_title h1 {
letter-spacing: -1px; letter-spacing: -1px;
font-size: 3.8em; font-size: 3.8em;
word-break: break-all; word-break: break-all;
text-align: center; text-align: center;
color: var(--title-text); color: var(--title-text);
background-color: var(--title-background); background-color: var(--title-background);
} }
#logo #page_title p { #logo #page_title p {
margin: 0; margin: 0;
padding: 0px 0 0 60px; padding: 0px 0 0 60px;
font: normal 14px Georgia, "Times New Roman", Times, serif; font: normal 14px Georgia, "Times New Roman", Times, serif;
font-style: italic; font-style: italic;
color: var(--subtitle-text); color: var(--subtitle-text);
} }
#logo a { #logo a {
border: none; border: none;
background: none; background: none;
text-decoration: none; text-decoration: none;
color: #FFFFFF; color: #FFFFFF;
} }
/* Page */ /* Page */
#page { #page {
width: calc(100vw - 128px); width: calc(100vw - 128px);
margin: 0 auto; margin: 0 auto;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
#page { #page {
width: 100vw; width: 100vw;
@@ -149,73 +153,76 @@ a:hover {
} }
#page-bgtop { #page-bgtop {
padding: 20px 0px; padding: 20px 0px;
} }
#page-bgbtm { #page-bgbtm {}
}
/* Content */ /* Content */
#content { #content {
width: 100%; width: 100%;
padding: 30px 0px 0px 0px; padding: 30px 0px 0px 0px;
} }
.post { .post {
margin-bottom: 15px; margin-bottom: 15px;
border-top: lightgray dashed 2px; border-top: lightgray dashed 2px;
padding-top: 2px; padding-top: 2px;
} }
.post-bgtop { .post-bgtop {}
}
.post-bgbtm { .post-bgbtm {}
}
.post .title { .post .title {
height: 38px; height: 38px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 12px 0 0 0px; padding: 12px 0 0 0px;
letter-spacing: -.5px; letter-spacing: -.5px;
color: #000000; color: #000000;
} }
.post .title a { .post .title a {
color: #000000; color: #000000;
border: none; border: none;
} }
.post .meta { .post .meta {
padding: 5px 0px 5px 0px; padding: 5px 0px 5px 0px;
text-align: center; text-align: center;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
} }
.post .meta .name { .post .meta .post_title {
display: inline; display: inline;
} }
.post .meta .posted { .post_title {
cursor: pointer;
} }
.post .meta a { .post_title:hover {
color: var(--links);
} }
.post .meta .posted {}
.post .meta a {}
.post .entry { .post .entry {
padding: 0px 5px 20px 5px; padding: 0px 5px 20px 5px;
text-align: justify; text-align: justify;
font-size: 14px; font-size: 14px;
font-style: italic; font-style: italic;
} }
.links { .links {
padding-top: 20px; padding-top: 20px;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
} }
.center { .center {
@@ -229,6 +236,7 @@ a:hover {
max-width: calc(100vw - 128px); max-width: calc(100vw - 128px);
display: inline; display: inline;
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
.post_image { .post_image {
max-height: calc(100vh - 2px); max-height: calc(100vh - 2px);
@@ -243,16 +251,19 @@ a:hover {
height: 27px; height: 27px;
float: right; float: right;
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
.navigation { .navigation {
display: none; display: none;
} }
} }
.navigation_button { .navigation_button {
cursor: pointer; cursor: pointer;
margin-left: 10px; margin-left: 10px;
box-shadow: 4px 4px 5px var(--button-shadow); box-shadow: 4px 4px 5px var(--button-shadow);
} }
.navigation_button:hover { .navigation_button:hover {
cursor: pointer; cursor: pointer;
box-shadow: 2px 2px 2px var(--button-shadow); box-shadow: 2px 2px 2px var(--button-shadow);

75
mirva/resources/mirva.js
View File

@@ -11,6 +11,7 @@ r(function() {
defaultScroll = typeof document.body.dataset.scroll === "string" ? document.body.dataset.scroll : "smooth"; defaultScroll = typeof document.body.dataset.scroll === "string" ? document.body.dataset.scroll : "smooth";
create_nav(); create_nav();
document.onkeydown = keyboard_entry; document.onkeydown = keyboard_entry;
scroll_by_url();
}); });
function create_nav() { function create_nav() {
@@ -29,6 +30,12 @@ function create_nav() {
navis[i].appendChild(create_button("down", navis[i + 1], i + 1)); navis[i].appendChild(create_button("down", navis[i + 1], i + 1));
} }
} }
let titles = document.getElementsByClassName("post_title");
for (let i = 0; i < navis.length; i++) {
titles[i].onclick = function() {
scroll_to(this.parentElement.parentElement);
}
}
} }
function create_button(direction, to, next) { function create_button(direction, to, next) {
@@ -38,9 +45,7 @@ function create_button(direction, to, next) {
button.src = ".mirva/arrow_" + direction + ".png"; button.src = ".mirva/arrow_" + direction + ".png";
button.classList.add("navigation_button"); button.classList.add("navigation_button");
button.onclick = function() { button.onclick = function() {
to.parentElement.scrollIntoView({ scroll_to(to.parentElement);
behavior: defaultScroll
});
current = next; current = next;
}; };
container.appendChild(button); container.appendChild(button);
@@ -111,6 +116,53 @@ function get_position() {
} }
} }
function scroll_to(element) {
/* Scroll smooth, if no frequent keypress */
if (scrollTimer) {
element.scrollIntoView({
behavior: "auto"
});
clearTimeout(scrollTimer);
} else {
element.scrollIntoView({
behavior: defaultScroll
});
}
scrollTimer = setTimeout(function() {
scrollTimer = null;
},
1200
);
if (element.id.substring(0, 5) == 'post_') {
set_url_arg(element.id.substring(5));
}
}
function set_url_arg(i) {
window.history.replaceState('', document.head.title, `?i=${i}`);
}
function get_url_arg() {
let url = new URL(window.location.href);
return url.searchParams.get('i');
}
function scroll_by_url() {
let name = get_url_arg();
if (name) {
let element = document.getElementById(`post_${name}`);
if (element) {
// Just to be sure..
setTimeout(function() {
scroll_to(element);
}, 1250);
setTimeout(function() {
scroll_to(element);
}, 10);
}
}
}
function keyboard_entry(ev) { function keyboard_entry(ev) {
let kC = ev.keyCode; let kC = ev.keyCode;
let ctrlDown = ev.ctrlKey || ev.metaKey; let ctrlDown = ev.ctrlKey || ev.metaKey;
@@ -142,20 +194,5 @@ function keyboard_entry(ev) {
} }
current = Math.max(0, current); current = Math.max(0, current);
current = Math.min(posts.length - 1, current); current = Math.min(posts.length - 1, current);
/* Scroll smooth, if no frequent keypress */ scroll_to(posts[current].parentElement)
if (scrollTimer) {
posts[current].parentElement.scrollIntoView({
behavior: "auto"
});
clearTimeout(scrollTimer);
} else {
posts[current].parentElement.scrollIntoView({
behavior: defaultScroll
});
}
scrollTimer = setTimeout(function() {
scrollTimer = null;
},
1200
);
} }