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():

10
mirva/mirva.py
View File

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

207
mirva/resources/mirva.css
View File

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

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";
create_nav();
document.onkeydown = keyboard_entry;
scroll_by_url();
});
function create_nav() {
@@ -29,6 +30,12 @@ function create_nav() {
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) {
@@ -38,9 +45,7 @@ function create_button(direction, to, next) {
button.src = ".mirva/arrow_" + direction + ".png";
button.classList.add("navigation_button");
button.onclick = function() {
to.parentElement.scrollIntoView({
behavior: defaultScroll
});
scroll_to(to.parentElement);
current = next;
};
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) {
let kC = ev.keyCode;
let ctrlDown = ev.ctrlKey || ev.metaKey;
@@ -142,20 +194,5 @@ function keyboard_entry(ev) {
}
current = Math.max(0, current);
current = Math.min(posts.length - 1, current);
/* Scroll smooth, if no frequent keypress */
if (scrollTimer) {
posts[current].parentElement.scrollIntoView({
behavior: "auto"
});
clearTimeout(scrollTimer);
} else {
posts[current].parentElement.scrollIntoView({
behavior: defaultScroll
});
}
scrollTimer = setTimeout(function() {
scrollTimer = null;
},
1200
);
scroll_to(posts[current].parentElement)
}