Browse Source

last edits before 25-dec

master
Cristina Cochior 5 years ago
parent
commit
f0d6eef509
  1. 6
      library.py
  2. 18
      static/css/main.css
  3. 13
      templates/exchange.html
  4. 4
      templates/home.html
  5. 40
      templates/layout.html
  6. 26
      templates/layout2.html
  7. 106
      templates/main.css

6
library.py

@ -17,7 +17,7 @@ path = "/static/files/"
librarians = []
files_without_folders = []
with open('mergedjson.json', 'r', encoding='utf8') as filesandnames:
with open('static/js/mergedjson.json', 'r', encoding='utf8') as filesandnames:
filetoname_dict = json.load(filesandnames)
#get full list librarians from json (printed later through global variable)
@ -59,3 +59,7 @@ def home():
@app.route('/about/')
def about():
return render_template('about.html')
@app.route('/exchange')
def exchange():
return render_template('exchange.html')

18
static/css/main.css

@ -91,12 +91,16 @@ span.librarian-names:hover, span.file-names:hover {
transform: rotate(-90deg) translate(-0%, 0%);
transform-origin: top left;
border:blue 1px solid;
height: 47em;
width: 30em;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
left: 0%;
top:100%;
height: 50vw;
width: 50vw;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
left: 0%;
top: calc(100% - 1.5em);
}
img.listed-images {
width: 2rem;
}

13
templates/exchange.html

@ -0,0 +1,13 @@
{% extends "layout2.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
{% endblock %}

4
templates/home.html

@ -0,0 +1,4 @@
{% extends "layout.html" %}
{% block content %}
{% endblock content %}

40
templates/layout.html

@ -29,16 +29,16 @@
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'></li>");
}
else if (extension=="pdf") {
$(".name-elements").append("<li><iframe src='"+ledocument+"'></iframe></li>");
$(".name-elements").append("<li><embed class='listed-pdf' src='files/"+ledocument+"'/></li>");
}
else if (extension=="epub") {
$(".name-elements").append("<li>"+ledocument+"</li>");
}
else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
$(".name-elements").append("<li><audio controls><source src='"+ledocument+"'></audio></li>");
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio></li>");
}
else if ((extension=="mov") || (extension=="mp4")) {
$(".name-elements").append("<li><video controls><source='"+ledocument+"'></video></li>");
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video></li>");
}
else if ((extension=="odt") || (extension=="docx")) {
// something for odt and docx
@ -61,8 +61,28 @@
var item = test[i];
if(item.debrisname.includes(thefile)){
ledocument = item.debrispath;
// allpeeps.push(ledocument);
var extension = ledocument.replace(/^.*\./, '');
console.log(ledocument);
if ((extension=="jpg") || (extension=="jpeg") || (extension=="png") || (extension=="gif") || (extension=="tiff")) {
$(".name-elements").append("<li><img class='listed-images' src='/files/"+ledocument+"'></li>");
}
else if (extension=="pdf") {
$(".name-elements").append("<li><object class='listed-pdf' data='files/"+ledocument+"'/></li>");
}
else if (extension=="epub") {
$(".name-elements").append("<li>"+ledocument+"</li>");
allpeeps.push(ledocument);
}
else if ((extension=="mp3") || (extension=="wav") || (extension=="m4a")) {
$(".name-elements").append("<li><audio class='listed-audio' controls><source src='files/"+ledocument+"'></audio></li>");
}
else if ((extension=="mov") || (extension=="mp4")) {
$(".name-elements").append("<li><video class='listed-videos' controls><source src='files/"+ledocument+"'></video></li>");
}
else if ((extension=="odt") || (extension=="docx")) {
// something for odt and docx
$(".name-elements").append("<li>"+ledocument+"</li>");
};
};
category = item.method;
};
@ -77,9 +97,9 @@
<body>
<div class="nav-top">
<ul>
<li><a class="nav-button" style="text-align: left;">BOUGHT</a></li>
<li><a class="nav-button" style="text-align: center;">STOLEN</a>
<li><a class="nav-button" style="text-align: right;">REPURPOSED</a>
<li><a class="nav-button" style="text-align: left;" href="bought">BOUGHT</a></li>
<li><a class="nav-button" style="text-align: center;" href="stolen">STOLEN</a>
<li><a class="nav-button" style="text-align: right;" href="repurposed">REPURPOSED</a>
</ul>
</div>
<div class="main">
@ -112,9 +132,9 @@
</div>
<div class="nav-bottom">
<ul>
<li><a class="nav-button" style="text-align: left;">COPIED</a></li>
<li><a class="nav-button" style="text-align: center;">FOUND</a></li>
<li><a class="nav-button" style="text-align: right;">GIFT</a></li>
<li><a class="nav-button" style="text-align: left;" href="copied">COPIED</a></li>
<li><a class="nav-button" style="text-align: center;" href="found">FOUND</a></li>
<li><a class="nav-button" style="text-align: right;" href="gift">GIFT</a></li>
</ul>
</div>

26
templates/layout2.html

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Library</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
<div class="nav-top">
<ul>
<li><a class="nav-button" style="text-align: left;" href="bought">BOUGHT</a></li>
<li><a class="nav-button" style="text-align: center;" href="stolen">STOLEN</a>
<li><a class="nav-button" style="text-align: right;" href="repurposed">REPURPOSED</a>
</ul>
</div>
<div class="nav-bottom">
<ul>
<li><a class="nav-button" style="text-align: left;" href="copied">COPIED</a></li>
<li><a class="nav-button" style="text-align: center;" href="found">FOUND</a></li>
<li><a class="nav-button" style="text-align: right;" href="gift">GIFT</a></li>
</ul>
</div>
</body>
</html>

106
templates/main.css

@ -0,0 +1,106 @@
* {
box-sizing: border-box;
}
body{
margin: 0;
height: 100vh;
}
.main-column-left {
padding: 1.7em 0em;
float: left;
width: 50%;
background: red;
overflow-y: scroll;
height: 100vh;
}
.main-column-right {
padding: 2em 1em;
float: right;
width: 50%;
background: purple;
overflow-y: scroll;
height: 100vh;
}
.main:after {
content: "";
display: table;
clear: both;
}
div.nav-bottom ul, div.nav-top ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a.nav-button {
display: block;
text-decoration: none;
padding: 0.25em;
font-family: sans-serif;
float: left;
width: 33.33%;
}
.nav-top {
height: 1.5em;
background: white;
width: 100%;
position: fixed;
}
.nav-bottom{
height: 1.5em;
background: white;
width: 100%;
bottom: 0;
position: fixed;
z-index: 10000;
}
span.librarian-names, span.file-names {
text-decoration: none;
padding: 0.3em;
color: black;
}
span.librarian-names:hover, span.file-names:hover {
color: white;
cursor: pointer;
}
#listofpeople{
border: lime 1px solid;
position: fixed;
width: 50%;
padding: 0em;
}
.file-names-container {
/* IE 9 */
-ms-transform: rotate(-90deg) translate(-78%, 0%);
/* Safari */
-webkit-transform: rotate(-90deg) translate(-78%, 0%);
/* Standard syntax */
transform: rotate(-90deg) translate(-0%, 0%);
transform-origin: top left;
border:blue 1px solid;
height: 47em;
width: 30em;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
left: 0%;
top:100%;
}
img.listed-images {
width: 2rem;
}
Loading…
Cancel
Save