dropdown menu for publication types, more coming soon

library/csvparser/csvparser.py

@@ -15,13 +15,26 @@ def getpublications():
     libcsv = open(os.path.join(script_dir, "varlib.csv"), "r")
     with libcsv:
         csv_as_dict = csv.DictReader(libcsv)
-        listofbooks = []
+        publications = {}
-        listofids = []
         for row in csv_as_dict:
-            book = "{} - {}".format(row["Author"], row["Publication"])
+            pubinfo = {"Title" : row["Publication"],
-            listofbooks.append(book)
+                        "Author" :  row["Author"],
-            listofids.append(row["Id"])
+                        "Type" :  row["Type"]}
-    return listofids, listofbooks
+            publications[row["Id"]] = pubinfo
+    return publications
 
+def gettypes():
+    libcsv = open(os.path.join(script_dir, "varlib.csv"), "r")
+    with libcsv:
+        csv_as_dict = csv.DictReader(libcsv)
+        listoftypes = []
+        for row in csv_as_dict:
+            lowertype = row["Type"].lower()
+            if lowertype not in listoftypes:
+                listoftypes.append(lowertype)
+        #listoftypes = [t.title() for t in listoftypes]
+    return listoftypes
 
-parsecsv()
+# test = getpublications()
+# for ids, pubinfo in test.items():
+#     print(pubinfo["Title"])

library/csvparser/varlib.csv

@@ -1,22 +1,62 @@
-Id,Publication,Author,Year,Custodian,Fields,Pubtype,Publishers,License,Highlights,Comments,"Borrowedby"
+Id,Publication,Author,Year,Custodian,Fields,Type,Publishers,License,Highlights,Comments,Currently borrowed by
-1,"The Economics of Anarchism",Anarcho,2012,Varia,"Economics, Anarchism",Zine,theanarchistlibrary.org,Anti-copyright,"""The labourer retains, even after  he has recieved his wages, a natural right in the thing he has produced""",,
+1,The Economics of Anarchism,Anarcho,2012,Varia,"Economics, Anarchism",Zine,theanarchistlibrary.org,Anti-copyright,"The labourer retains, even after  he has recieved his wages, a natural right in the thing he has produced",,
-2,"Identity Politics - An Anthology","The Anarchist Library",,Varia,"Identity politics",Zine,"Paper Jam Collective","No license mentioned",,"Skipping through, I'm not sure if this is in line with our own politics. (ccl)",
+2,Identity Politics - An Anthology,The Anarchist Library,,Varia,Identity politics,Zine,Paper Jam Collective,No license mentioned,,"Skipping through, I'm not sure if this is in line with our own politics. (ccl)",
-3,"The mythology of work",CrimeThinc.com,,Varia,"Work, Anticapitalism",Zine,CrimeThinc.com,"No license mentioned",,"A selection from 'Work', a 376-page analysis of contemporary capitalism",
+3,The mythology of work,CrimeThinc.com,,Varia,"Work, Anticapitalism",Zine,CrimeThinc.com,No license mentioned,,"A selection from 'Work', a 376-page analysis of contemporary capitalism",
-4,"Forget Shorter Showers - Why Personal Change Does Not Equal Political Change","Derrick Jensen",2009,Varia,"Environmental justice",Zine,,"No license mentioned","""Green consumerism isn't enough.""",,
+4,Forget Shorter Showers - Why Personal Change Does Not Equal Political Change,Derrick Jensen,2009,Varia,Environmental justice,Zine,,No license mentioned,Green consumerism isn't enough.,,
-5,Choreo-Graphic-Hypothesis,"<meta-author=""Joana Chicau"";>",2018,Varia,"Live Coding, Choreography",Paperback,"Self published: Joana Chicau","Free Art Liceense 1.3","""Theatrical actions are not necessary to the performance, Avoid if at all possible""",,
+5,Choreo-Graphic-Hypothesis,"<meta-author=""Joana Chicau"";>",2018,Varia,"Live Coding, Choreography",Paperback,Self published: Joana Chicau,Free Art Liceense 1.3,"Theatrical actions are not necessary to the performance, Avoid if at all possible",,
-6,"Point of no Return",,2013,Varia,"Anarchism in the West",Zine,,"No license mentioned",,"Stories about becoming an anarchist in the West in the 80s",
+6,Point of no Return,,2013,Varia,Anarchism in the West,Zine,,No license mentioned,,Stories about becoming an anarchist in the West in the 80s,
-7,"Waar slapen de kroegtijgers van Oud Charlois","Jacco Weener",,Varia,"Oud Charlois, Drawing",Paperback,Self-published,"No license mentioned",,,
+7,Waar slapen de kroegtijgers van Oud Charlois,Jacco Weener,,Varia,"Oud Charlois, Drawing",Paperback,Self-published,No license mentioned,,,
-8,"Dubbeldruk Play with me","Editorial team: Karin de Jong, Giulia de Giovanelli, Floor van Luijk",2019,Varia,"Copyright, Publishing, Printing",Parazine,Printroom,"Free art license",,"Confusing licenses mentioned in the about text on the back of the publication, FAL, Copy-left and copy right all mentioned",
+8,Dubbeldruk Play with me,"Editorial team: Karin de Jong, Giulia de Giovanelli, Floor van Luijk",2019,Varia,"Copyright, Publishing, Printing",Parazine,Printroom,Free art license,,"Confusing licenses mentioned in the about text on the back of the publication, FAL, Copy-left and copy right all mentioned",
-9,"To Boldly Go: a starters guide to hand made and diy films","Film Werkplaats Worm Rotterdam",2008,Varia,"Experimental film, Analog film, DIY, Hand-made",Paperback,"Knust (Nijmegen)","'No license mentioned",,,
+9,To Boldly Go: a starters guide to hand made and diy films,Film Werkplaats Worm Rotterdam,2008,Varia,"Experimental film, Analog film, DIY, Hand-made",Paperback,Knust (Nijmegen),'No license mentioned,,,
-10,"Anarchism: Basic concepts and ideas","Peter Storm",2018,Varia,"Anarchism, Dutch Theory",Zine,"Ravotr Editions in collaboration with Paper Jam","""Feel free to use and copy this text as you see fit. Mentioning source and author would be greatly appreciated.""",,"Revised text of a transcribed lecture Storm gave in Rotterdam.",
+10,Anarchism: Basic concepts and ideas,Peter Storm,2018,Varia,"Anarchism, Dutch Theory",Zine,Ravotr Editions in collaboration with Paper Jam,Feel free to use and copy this text as you see fit. Mentioning source and author would be greatly appreciated.,,Revised text of a transcribed lecture Storm gave in Rotterdam.,
-11,"Queering Anarchism","Deric Shannon, Abbey Willis",,Varia,"Anarchism, Queer Theory",Zine,"Paper Jam Collective","No license mentioned",,,
+11,Queering Anarchism,"Deric Shannon, Abbey Willis",,Varia,"Anarchism, Queer Theory",Zine,Paper Jam Collective,No license mentioned,,,
-12,"Abolish restaurants",Prole.info,2010,Varia,"Labour, Food industry",Paperback,"Pm Press","Copyright 2010","""Drawing on a range of anti-capitalist ideas as well as a heaping plate of personal experience""",,
+12,Abolish restaurants,Prole.info,2010,Varia,"Labour, Food industry",Paperback,Pm Press,Copyright 2010,Drawing on a range of anti-capitalist ideas as well as a heaping plate of personal experience,,
-13,"Elk Woord Een Vonk: Verboden Teksten, verwerpelijke vervolging: de zaak Joke Kaviaar","Steungroep 13 September",2014,"Varia (or Luke?)","Joke Kaviaar, Immigration, Activism, Forbidden Texts, Incarceration","Soft cover",Self-published,Copyleft,,https://13-september.nl,
+13,"Elk Woord Een Vonk: Verboden Teksten, verwerpelijke vervolging: de zaak Joke Kaviaar",Steungroep 13 September,2014,Varia (or Luke?),"Joke Kaviaar, Immigration, Activism, Forbidden Texts, Incarceration",Softcover,Self-published,Copyleft,,https://13-september.nl,
-14,"A NO BORDERS manifesto","Ill Will Editions",2015,Varia,"Migrant justice",Zine,Self-published,"No license mentioned",,,
+14,A NO BORDERS manifesto,Ill Will Editions,2015,Varia,Migrant justice,Zine,Self-published,No license mentioned,,,
-15,"Short Circuit: Towards an Arnarchist to Gentrification",,,Varia,"Gentrification, Anarchism",Zine,Self-published,"No license mentioned","""Anarchists understandably feel an intrinsic and visceral opposition to gentrification",,
+15,Short Circuit: Towards an Arnarchist to Gentrification,,,Varia,"Gentrification, Anarchism",Zine,Self-published,No license mentioned,"Anarchists understandably feel an intrinsic and visceral opposition to gentrification		
-16,"Futur Musique","De fanfare voor vooruit strevende volksmuziek",2018,Varia,"Musical Instruments, DIY",Zine,Self-published,"No license mentioned",,"Copied instructions on building one's own musical instruments",
+16	Futur Musique	De fanfare voor vooruit strevende volksmuziek	2018	Varia	Musical Instruments, DIY	Zine	Self-published	No license mentioned		Copied instructions on building one's own musical instruments	
-17,"Franchir le cap","Quentin Juhel",2019,Varia,"Convivial computation",Zine,Self-publsihed,"Creative commons CC-BY-SA",,,
+17	Franchir le cap	Quentin Juhel	2019	Varia	Convivial computation	Zine	Self-publsihed	Creative commons CC-BY-SA			
-18,"Consensus: Decision Making","Seeds For Change UK",2010,Varia,"Decision making, Consensus",Zine,Self-published,"No license mentioned",,"Short guide ",
+18	Consensus: Decision Making	Seeds For Change UK	2010	Varia	Decision making, Consensus	Zine	Self-published	No license mentioned		Short guide 	
-19,"Waar ook op gestemd wordt, wij laten ons niet regeren","Anarchistische Groep Nijmegen",2014,Varia,Democracy,Zine,Self-published,"No license mentioned",,,
+19	Waar ook op gestemd wordt, wij laten ons niet regeren	Anarchistische Groep Nijmegen	2014	Varia	Democracy	Zine	Self-published	No license mentioned			
-20,"The NGO sector: the trojan horse of capitalism","Crn Blok",,Varia,"Anti-capitalism, NGO",Zine,Self-published,Copyleft,,,
+20	The NGO sector: the trojan horse of capitalism	Crn Blok		Varia	Anti-capitalism, NGO	Zine	Self-published	Copyleft			
-21,"Messing Around With Packet Radio",,,,,,,,,,
+21	Messing Around With Packet Radio	Roel Roscam Abbing, Dennis De Bel		Varia	Packet radio, DIY	Zine	Self-published	Public domain			
+22	Organising Socially: affinity groups & decision making	Seeds for change		Varia	Consensus, Decision making, Affinity groups	Zine	Paper Jam Collective	No license mentioned			
+23	The Moral of the Xerox	Florian Cramer, Clara Lobregat Balaguer	2017	Varia	Piracy, Cultural Appropriation	Zine	Self-published	No license mentioned		Printed in diocese of Cologne, Germany on the joyous occasion of the Pluriversale VII: Stealing from the west for the critical parishioners of Akademie der Kunste der Welt	
+24	Non-Western Anarchisms	Jason Adams		Varia	Non-Western Anarchisms	Zine	Zaba Books	No license mentioned	The purpose of this paper is to help anarchist/anti-authoritarian movements active today to reconceptualise the history and theory of first-wave anarchism on the global level, and to reconsider its relevance to the continuing anarchist project.",,
+25,Build Those collectives,Moose and Inza,,Varia,"Collectivism,  Revolution",Zine,Paper Jam Collective,No License mentioned,,,
+26,Learning Good Consent,Riot Grrrr Press,,Varia,"Consent, Sex",Zine,Paper Jam Collective,No license mentioned,,,
+27,The Library is Open,Piet Zwart Institute,2019,Varia,Libraries,Paperback,Self-published,Copyleft,,https://issue.xpub.nl/09,
+28,Pretty Fly for a Wi-Fi,Roel Roscam Abbing,2017,Varia,"Wifi, DIY, Antennas",Paperback,Self-published in collaboration with Publication Studio Rotterdam,GNU Free Documenation License 1.3,,http://roelof.info,
+29,Superficial Intelligence,"Cybre Arts & Letters, Brendan Howell",2019,Varia,"AI, Crapularity",Paperback,Self-published,No license mentioned,,,
+30,Save and Forget,Thomas Walsklaar,2018,Varia,"Media, preservation, archiving, storage media",Paperback,Self-published (lulu.com),Creative commons BY-NC-ND,,,
+31,<nettime> interview ,Katharine Wimett,2018,Varia,"Preservation, Nettime, Net discourse",Paperback,Self-published,No license mentioned,,Interview by Katherine with Tilman Baumgaertel and Petra Heck,
+32,The immaterial labor union #6: Facebook Reactions,Lídia Pereira and Δεριζαματζορ Προμπλεμ ιναυστραλια,2016,Varia,"Labour, reactions, emotions, facebook, emojis",Zine,Self-published,"GNU General Public License, Peer Production License",,,
+33,The immaterial labor union #7: immersive advertisement,Lídia Pereira and Δεριζαματζορ Προμπλεμ ιναυστραλια,,Varia,"labour, Advertisement, immersion, social media",Zine,Self-published,Zine is published under Gnu free documentation license 1.3 unless otherwise specified ,,,
+34,The immateriality labor union #10: immateriality,Lídia Pereira and Δεριζαματζορ Προμπλεμ ιναυστραλια,2017,Varia,"Labour, Immateriality",Zine,Self-published,GNU Free Documentation License,,,
+35,The immaterial labor union. Special Issue #1: Homebrew Server Club,Homebrew Server Club,2017,Varia,"Self-Hosting, Servers, DIY",Zine,Self-published,CC-BY-SA,,,
+36,Pervasive labour union. Special issue #2: The Entreprecariat,Silvio Lorusso,2017,Varia,"Entreprecariat, Labour, Precarity",Zine,Self-published,,,Between April and May 2017 the Zine's name changed from Immaterial Labor Union to Pervasive Labour Union,
+37,'Pervasive labour union #13: Fed Up,Lídia Pereira,2019,Varia,"Labour, DIY, federation",Zine,Self-published,"GNU Free Documentation License 1.3, CC-0, Copyright (C) 2019, Julia Janssen, Peer Production License",,,
+38,Each Page a Function,Raphaël Bastide,2019,Varia,"Automation, Drawing, Web to Print",Paperback,LeMegot editions,No license mentioned,,,
+39,In Beweging: Magazine van de Anarchistische Groep Nijmegen,Anarchistische Groep Nijmegen ,2018,Varia,"Anarchism, 1st of May, Nijmegen",Zine,Self-published,No license mentioned,,Anarchistische Bieb de Zwarte Uil. library in Nijmegen open on saturday from 12:00 till 17:30,
+40,Deep pockets #2 Shadowbook: Writing throiugh the digital 2014-2018,Miriam Rasch,2018,Varia,"Language, digital, communication",Paperback,Institute of Network Cultures,CC BY-NC-SA 4.0,,,
+41,The Techno Galactic Software Observatory Reader,Constant,2018,Varia,"Software Studies, Software Curious People, Observation",Paperback,Self- published,No license mentioned,,Reader for Techno Galactic Software Observatory work session,
+42,Upsetting Settings,Piet Zwart Institute,2019,Varia,"Catalogue, Experimental publishing",Softcover,XPUB,Copyleft,,Dissertations from the Piet Zwart Institute 2017-2019,
+43,I Have Witnessed First Time Experiences ,Connie Butler,2016,Varia,Fine Art,Softcover,Piet Zwart institute MFA,Copyright 2016,,,
+44,The Age of Aquariums: old horoscopes for the new year,Brenda Bosma,2013,Varia,Horoscope,Paperback,Subbacultcha!,No license mentioned,,,
+45,The Internet Measurement Handbook,,2018,Varia,"Internet, blackout, cyber-security",Paperback,Netblocks,CC,,,
+46,Issue #4 2019,Design Department Sandberg,2019,Varia ,Design theory,Paperback,Drukkerij RaddraaierSSP,No license mentioned,,Dissertations from the Design Museum,
+47,O Bike and Friends,Dennis De Bel,,Varia,"Bike sharing, DIY",Zine,Self-published,No license mentioned,,,
+48,Algoliterary Encounters,Algolit,2017,Varia,"Natural text processing, machine learning, algorithms",Catalogue,Algolit,Free Art Licence,,,
+49,Der Fall von Afrin,Unknown,,Varia,Turkish politics,Zine,Unknown,No license mentioned,,,
+50,Andy de Fiets: Letter to Robin Kinross ,"Paul Haworth, Sam de Groot",2010,Varia,Typography,Paperback,TRUE TRUE TRUE Amsterdam,"Copyright 2009,2010",,,
+51,Ora Elastică,ODD,2018,Varia,"Art, Indonesia, Romania, non-western art theory",Softcover,frACTalia,No license mentioned,,,
+52,4 x Through The Labyrinth,"O. Nicolai & J. Wenzel, translated by Sadie Plant",2012,Joana Chicau,Labyrinths,Softcover,Rollo Press,Copyright,,,
+53,Towards an Immersive Intelligence,Joseph Nechvatal,2009,Joana Chicau?,"Virtual reality, Computer Art",Paperback,Edgewise,Copyright,,,
+54,Xavan et Jaluka - The Death of the Authors 1946,Peter Westenberg,2018,Varia,Public domain,Zine,Constant Verlag,Copyleft,,,
+55,Spreekt U Sint-Gillis? Parlez-vous Saint-Gillois?,,,Varia,"Bruxelles, Language, Sint-Gillis",Softcover,Constant Verlag,Copyleft,,,
+56,Mondothèque: a radiated book,"André Castro ,  Sînziana Păltineanu ,  Dennis Pohl ,  Dick Reckard ,  Natacha Roussel ,  Femke Snelting ,  Alexia de Visscher",2016,Varia,"Archive, Otlet, Library science, Mondaneum, Google, Mons",Softcover,Constant,Copyleft,,,
+ ,"The Death of the Authors: 'James Joyce, Rabindranath Tagore & Their Return to Life in Four Seasons",A Constant Remix,2013,Varia,"James Joyce, Ulysses",Softcover,Constant,Public domain,,'generated from Public domain sources,
+58,Verbindingen/Jonctions 10 : Tracks in electr(on)ic fields,Constant,2009,Varia,"Art, activism, technological culture",Softcover,Constant,Copyleft,,,
+59,Conversations,Constant,2014,Varia,"Software studies, Libre graphics",Softcover,Constant Verlag,Copyleft,,,
+60,Networks of one's own #1: Etherbox,"Michael Murtaugh, An Mertens, Roel Roscam Abbing, Femke Snelting",2018,Varia,"Networks, Digital Infrastructures, DIY, DIWO, Executable publication, Experimental Publishing",Paperback,Constant Verlag,Copyleft,,,
+61,Mots de la cage aux ours - woorden uit de berenkuil,Constant,2012,Varia,"words, language, Bruxelles",Softcover,Constant,Copyleft,,,

library/page.py

@@ -4,22 +4,23 @@
 import flask
 from flask import render_template
 
-from library.csvparser.csvparser import getpublications
+from csvparser.csvparser import getpublications, gettypes
 
 APP = flask.Flask(__name__, static_folder="static")
 
 
 @APP.route("/")
 def index():
-    """Main path"""
+    """Main route"""
     # parse csv, render template with a few elements from the csv
-    ids, titles = getpublications()
+    pubtypes = gettypes()
-    return render_template("index.html", publications=zip(ids, titles))
+    publicatons = getpublications()
+    return render_template("index.html", publications=publicatons, pubtypes=pubtypes)
 
 
-@APP.route("/<publication>")
+@APP.route("/<publicationID>")
-def show_book(publication):
+def show_book(publicationID):
-    """Path for a publication"""
+    """route for a publication"""
     # parse csv, render template with full list.
     return render_template("publication.html", publication=publication)
 
@@ -28,7 +29,7 @@ def show_book(publication):
 def upload_book(publication):
     """upload a new book"""
     #
-    return render_template("upload form")
+    return render_template("upload.html")
 
 
 if __name__ == "__main__":

library/static/css/dropdown.css

@@ -0,0 +1,47 @@
+/* Dropdown Button */
+/* for sorting on Year, Type, License
+.dropbtn {
+}
+
+/* The container <div> - needed to position the dropdown content */
+.filter {
+  display: none;
+}
+.show {
+  display: block;
+}
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 120px;
+  border: 3px solid black;
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content button {
+  color: black;
+  padding: 6px;
+  border: none;
+  min-width: inherit;
+  text-align: left;
+  text-decoration: none;
+  display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content button:hover {background-color: #62b264;}
+
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {display: block;}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {background-color: #3e8e41;}

library/static/css/style.css

@@ -1,5 +1,5 @@
-html, body { 
+html, body {
-  margin: 0; 
+  margin: 0;
 }
 
 body:after {
@@ -45,12 +45,15 @@ body:after {
   }
 }
 .container {
-  margin 0 auto;	
+  margin 0 auto;
 }
+
+
 button {
   z-index: 10;
-  border: 5px solid black;
+  border: 3px solid black;
+  padding: 6px;
   color: black;
   min-width: auto;
-  background-color: white;
+  background-color: #f1f1f1;
 }

library/static/js/script.js

@@ -1,10 +1,11 @@
+// Cloud section ===================== old school code divider =================
 function rn(from, to) {
   return ~~(Math.random() * (to - from + 1)) + from;
 }
 
 function rs() {
   return arguments[rn(1, arguments.length) - 1];
-} 
+}
 
 function boxShadows(max) {
   let ret = [];
@@ -19,8 +20,47 @@ function boxShadows(max) {
 
 const cloud = document.querySelector('#cloud');
 function update() {
-  cloud.style.boxShadow = boxShadows(120); 
+  cloud.style.boxShadow = boxShadows(120);
+}
+// Filter section ===================== old school code divider ================
+
+filterSelection("all")
+function filterSelection(c) {
+  var x, i;
+  allpublications = document.getElementsByClassName("filter");
+  if (c == "all") {
+    for (i = 0; i < allpublications.length; i++) {
+      addClass(allpublications[i], "show");
+    }
+  }
+  else {
+    for (i = 0; i < allpublications.length; i++) {
+      removeClass(allpublications[i], "show");
+      if (allpublications[i].className.indexOf(c) > -1) {
+        addClass(allpublications[i], "show");
+      }
+    }
+  }
 }
 
-window.addEventListener('load', update); 
+function addClass(element, name) {
-document.addEventListener('click', update); 
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
+  }
+}
+
+function removeClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    while (arr1.indexOf(arr2[i]) > -1) {
+      arr1.splice(arr1.indexOf(arr2[i]), 1);
+    }
+  }
+  element.className = arr1.join(" ");
+}
+window.addEventListener('load', update);

library/templates/base.html

@@ -4,25 +4,20 @@
 	<meta charset="utf-8" />
 	<title>varia library zone</title>
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css')}}">
+	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dropdown.css')}}">
 </head>
 <body>
-	  <div id="cloud"></div>    
+	  <div id="cloud"></div>
-    <svg width="0">    
+    <svg width="0">
-      <filter id="filter">    
+      <filter id="filter">
-          <feTurbulence type="fractalNoise"    
+          <feTurbulence type="fractalNoise"
-            baseFrequency=".001" numOctaves="7" />    
+            baseFrequency=".001" numOctaves="7" />
-          <feDisplacementMap in="SourceGraphic" scale="240" />    
+          <feDisplacementMap in="SourceGraphic" scale="240" />
-      </filter>    
+      </filter>
 		</svg>
-  <h1 id="varia">VARIA LIBRARY COLLECTION</h1>  
+  <h1 id="varia">VARIA LIBRARY COLLECTION</h1>
-	<div id="nav" class="container">
+	{% block main %}
-		<a href="/"><button>index</button></a>
+	{% endblock main %}
-		<a href="/upload"><button>upload</button></a>
-	</div>
-	<div id="main">
-		{% block main %}
-		{% endblock %}
-	</div>
 </body>
 	<script src="{{ url_for('static', filename='js/script.js')}}"></script>
 </html>

library/templates/index.html

@@ -1,9 +1,15 @@
 {% extends "base.html" %}
 
 {% block main %}
+<div id="nav" class="container">
+{% include 'menu.html' %}
+</div>
+<div id="main">
 <ul>
-{% for id, title in publications %}
+{% for id, pubinfo in publications.items() %}
-	<li><a href="{{ id }}">{{ title }}</a></li>
+	<li class='filter {{ pubinfo["Type"] }}'><a href='{{ id }}'>{{ pubinfo["Author"] }} - {{ pubinfo["Title"] }}</a></li>
 {% endfor%}
 </ul>
+</div>
+
 {% endblock %}

library/templates/menu.html

@@ -0,0 +1,12 @@
+{% block menu %}
+<a href="/"><button>All books</button></a>
+<a href="/upload"><button>Upload</button></a>
+<div class="dropdown">
+  <button class="dropbtn">Type</button>
+   <div class="dropdown-content">
+     {% for pubtype in pubtypes %}
+     	<button type="button" name="button" onclick="filterSelection('{{ pubtype.title() }}')" >{{ pubtype }}</button>
+     {% endfor %}
+   </div>
+ </div>
+{% endblock menu %}