XPUB
/
special-issue-11-wiki2html
24
1
Fork 1
Code Issues Pull Requests Releases Wiki Activity

query and css changes

Browse Source
itempage
Slayr 4 years ago
parent 36642f6e14
commit 201b11de4d
4 changed files with 263 additions and 23 deletions
Show Stats Download Patch File Download Diff File

9
query2html.py
Unescape Escape View File

@ -102,13 +102,20 @@ for answer in site.ask(query):
# organize doc_imgs into a matrix (list of lists)
# each sublist containing 4 items [[0,1,2,3][4,5,6,7],[8,9]]
# for template
doc_imgs_matrix = [doc_imgs[i:i+4] for i in range(0, len(doc_imgs), 4)]
doc_imgs_matrix = [doc_imgs[i:i+100] for i in range(0, len(doc_imgs), 100)]
# RENDER DOCUMENT
# by passing all_document_parts html to document_template content
document_html = document_template.render(
title=printout_dict.get('Title'),
date=printout_dict.get('Date'),
organization=printout_dict.get('Organization'),
creator=printout_dict.get('Creator'),
format=printout_dict.get('Format'),
topic=printout_dict.get('Topic'),
imgsmatrix=doc_imgs_matrix,
content=all_document_parts) # render document template
# print(document_html)

191
static/style.css
Unescape Escape View File

@ -1,11 +1,196 @@
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #aaa4a0;
}
div.row {display: inline; }
/*div.row {display: inline; }
div.column { display: inline; }
div.column img{ width:24%; }
div.column img{ width:24%; }*/
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
position: absolute;
top: 60%;
width: 96%;
height: auto;
left:2%;
/*background-color: blue;*/
text-align: : center;
z-index: 5;
}
.grid-container > div {
position: relative;
/*background-color: green;*/
text-align: center;
/*padding-bottom: 1%;*/
z-index: 5;
}
img {
position: relative;
max-width: 100%;
max-height: 100%;
/*align-content: center;*/
}
/*links*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: blue;
}
a:hover {
text-decoration: none;
color: blue;
}
h1 {
position: fixed;
right:0%;
top:3%;
text-align: right;
background-color: grey;
padding: 3px 30px 3px 10px;
z-index: 10;
color: black;
font-size: 28px;
}
h2{
position: fixed;
right: 0%;
top: 15%;
text-align: left;
background-color: grey;
color: black;
padding: 3px 3px 3px 30px;
z-index: 10;
font-size: 20px;
}
.indexlist {
position: absolute;
top:20%;
}
/* Grid buttons */
.header {
position: absolute;
text-align: center;
padding: 32px;
top: 30%;
right: 0%;
z-index: 9;
width: auto;
height: auto;
}
p {
display: inline-block;
position: relative;
}
.btn {
border: none;
outline: none;
width: 110px;
text-align: center;
padding: 12px 0px;
background-color: grey;
cursor: pointer;
font-size: 18px;
margin-right: 5px;
z-index: 9;
}
.btn:hover {
background-color: black;
color: blue;
}
.btn:active {
background-color: black;
color: white;
}
.metadata{
position: fixed;
top:5%;
left:0%;
background-color: ;
width: 40%;
z-index: 10;
opacity: 0.7;
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 10%;
height: auto;
border: none;
text-align: right;
outline: none;
font-size: 15px;
z-index: 10;
margin-top: 10px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
position: relative;
padding: 0px 18px;
max-height: 0;
overflow: hidden;
width: 90%;
transition: max-height 0.2s ease-out;
background-color: grey;
color: white;
z-index: 10;
text-align: right;
}
.metadata_links {
display: block;
width: 100%;
position: relative;
right: 0%;
padding: 10px;
text-align: left;
/*background-color: blue;*/
font-size: 18px;
}
.metadata_organization {
font-size: 14px;
}
.fbtn {
font-style: italic;
}

85
templates/document.html
Unescape Escape View File

@ -3,15 +3,62 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/style.css" />
<script type="text/javascript" src="../static/script.js"></script>
<title>{{ title[0] }}</title>
</head>
<body>
<h1>{{ title[0] }}</h1>
<p><time datetime="{{date}}">{{ date.year }}.{{ date.month }}.{{ date.day }}</time></p>
<h1>{{ title[0] }} &#8629;</h1>
<h2><time datetime="{{date}}">{{ date.year }}.{{ date.month }}.{{ date.day }}</time></h2>
<div class="metadata">
<button class="collapsible cbtn">C</button>
<div class="content">
<!-- metadata creator / format / topic -->
<div class="metadata_creator">{{ creator }}</div>
<a class="metadata_links" href="allcreators.html">All Creators</a>
</div>
<button class="collapsible fbtn">f</button>
<div class="content">
<div class="metadata_format">{{ format }}</div>
<a class="metadata_links" href="allformats.html">All Formats</a>
</div>
<button class="collapsible orgbtn">Org</button>
<div class="content">
<div class="metadata_organization">{{ organization }}</div>
<a class="metadata_links" href="allorganizations.html">All Organizations</a>
</div>
<button class="collapsible tbtn">T</button>
<div class="content">
<div class="metadata_topic">{{ topic }}</div>
<a class="metadata_links" href="alltopics.html">All Topics</a>
</div>
</div>
<!-- nav -->
<!-- <div id="rightnav" class="rightnav">
<a href="index.html" id="titlenav">Title</a>
</div>
<div id="leftnav" class="leftnav">
<a href="timeline.html" id="datenav">Date</a>
</div> -->
<!-- square -->
<!-- <div class="square"></div> -->
<!-- 2 btn grid switch for images -->
<div class="header" id="myHeader">
<p><button class="btn" onclick="myFunction()">100%</button></p>
<p><button class="btn" onclick="myFunction2()">overview</button></p>
</div>
<!-- images -->
{% for row in imgsmatrix %}
<div class="row">
<div class="grid-container" id="myDIV">
{% for img in row %}
<div class="column">
<img src="{{ img }}">
@ -20,21 +67,21 @@
</div>
{% endfor %}
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
{#
<div class="row">
<div class="column">
<img src="./images/VF383Hamok00.jpg" style="width:100%">
</div>
<div class="column">
<img src="./images/VF383Hamok01.jpg" style="width:100%">
</div>
<div class="column">
<img src="./images/VF383Hamok02.jpg" style="width:100%">
</div>
<div class="column">
<img src="./images/VF383Hamok03.jpg" style="width:100%">
</div>
</div>
#}

1
templates/index.html
Unescape Escape View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="../static/style.css" />
</head>
<body>
<h3>Resultsss from query:<br/><code>{{query}}</code></h3>

Write Preview
Loading…
Cancel
Save