jules
/
DAAP_interface
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

last version as of 18h10 by Ju

master
jules 4 years ago
parent
d19618a8e6
commit
a2f4888576
14 changed files with 908 additions and 238 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 277
      daapinterface.py
  2. 372
      static/css/style.css
  3. BIN
      static/imgs/Pages/Artwork page_mock up.png
  4. 50
      templates/artistsindex.html
  5. 19
      templates/artwork.html
  6. 10
      templates/browsebycategory.html
  7. 21
      templates/browsethearchive.html
  8. 69
      templates/home.html
  9. 68
      templates/layout.html
  10. 45
      templates/person-later.html
  11. 44
      templates/person.html
  12. 54
      templates/publishersindex.html
  13. 55
      templates/selfpublishedindex.html
  14. 54
      templates/zinesindex.html

277
daapinterface.py
View File

@ -46,21 +46,22 @@ def home():
''')
sparql.setReturnFormat(JSON)
results = sparql.query().convert()
return render_template('home.html')
return render_template('home.html', results=results)
@app.route("/browsethearchive")
def browsethearchive():
sparql.setQuery('''
SELECT ?work ?workLabel ?image ?date
WHERE {
SELECT ?work ?workLabel ?image ?date WHERE {
SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
?work wdt:P1 wd:Q1.
OPTIONAL { ?work wdt:P30 ?image. }
OPTIONAL { ?work p:P30 ?statement.
?statement ps:P30 ?image;
pq:P54 wd:Q90.}
OPTIONAL { ?work wdt:P13 ?date. }
FILTER(?work != wd:Q57)
}
ORDER BY (?workLabel)
}
ORDER BY (?workLabel)
''')
sparql.setReturnFormat(JSON)
results = sparql.query().convert()
@ -80,118 +81,202 @@ def browsebycategory():
return render_template('browsebycategory.html')
##########################
# CATEGORIES TO BE BROWSED
#########################
######################### ARTIST INDEX
@app.route("/artistsindex")
def artistsindex():
sparql.setQuery('''
SELECT ?creators ?creatorsLabel ?creatorsAltLabel ?creatorsDescription
WHERE {
SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
?work wdt:P1 wd:Q1.
?work wdt:P9 ?creators.
FILTER (?creators != wd:Q82)
{
SELECT ?creators (COUNT(DISTINCT ?a) AS ?count) WHERE {
?a ?prop ?creators .
?a wdt:P1 ?work .
BIND (wdt:P9 AS ?prop) .
BIND (wd:Q1 AS ?work) .
} GROUP BY ?creators
} .
SERVICE wikibase:label {
bd:serviceParam wikibase:language "en" .
}
FILTER (?creators !=wd:Q82)
}
ORDER BY DESC(?count) ?creatorsLabel
''')
sparql.setReturnFormat(JSON)
results = sparql.query().convert()
return render_template('artistsindex.html', results=results)
######################### PUBLISHERS INDEX
@app.route("/publishersindex")
def publishersindex():
sparql.setQuery('''
SELECT ?publishers ?publishersLabel ?publishersAltLabel ?publishersDescription WHERE {
{
SELECT ?publishers (COUNT(DISTINCT ?a) AS ?count) WHERE {
?a ?prop ?publishers .
?a wdt:P1 ?work .
BIND (wdt:P10 AS ?prop) .
BIND (wd:Q1 AS ?work) .
} GROUP BY ?publishers
} .
SERVICE wikibase:label {
bd:serviceParam wikibase:language "en" .
}
FILTER(?publishers != wd:Q83)
FILTER(?publishers != wd:Q71)
}
ORDER BY DESC(?count) ?publishersLabel
''')
sparql.setReturnFormat(JSON)
results = sparql.query().convert()
return render_template('publishersindex.html', results=results)
######################### SELF PUBLISHED INDEX
@app.route("/selfpublishedindex")
def selfpublishedindex():
sparql.setQuery('''
SELECT ?work ?workLabel ?workAltLabel ?workDescription
WHERE {
SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
?work wdt:P1 wd:Q1;
wdt:P10 wd:Q71.
FILTER(?work != wd:Q57)
}
''')
sparql.setReturnFormat(JSON)
results = sparql.query().convert()
return render_template('selfpublishedindex.html', results=results)
######################### ZINES INDEX
@app.route("/zinesindex")
def zinesindex():
sparql.setQuery('''
SELECT ?work ?workLabel ?workAltLabel ?workDescription
WHERE {
SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
?work wdt:P1 wd:Q1;
wdt:P16 wd:Q152.
FILTER(?work != wd:Q57)
}
''')
sparql.setReturnFormat(JSON)
results = sparql.query().convert()
return render_template('zinesindex.html', results=results)
##########################
# DETAILED INDIVIDUAL PAGES
#########################
######################### ARTWORK
@app.route("/artwork", methods=['GET'])
def artwork():
artwork_id = request.args.get('id')
# sparql.setQuery('''
# SELECT ?workLabel ?workDescription
# ?creators ?creatorsLabel ?creatorRoles ?creatorRolesLabel
# ?publishers ?publishersLabel ?publisherRoles ?publisherRolesLabel
# ?date ?dateType ?dateTypeLabel ?dateSource
# ?image ?depicts ?depictsLabel ?annotation ?license ?licenseLabel
# ?descriptionPage ?accessURLdescriptionPage ?authordescriptionPage ?authordescriptionPageLabel ?datedescriptionPage ?sourcedescriptionPage
# ?exhibitionHisPage ?accessURLexhibitionHisPage ?authorexhibitionHisPage ?authorexhibitionHisPageLabel ?dateexhibitionHisPage ?sourceexhibitionHisPage
# ?digitalFacsimile ?digitalFacsimileExternal
# ?digitalArtefact ?format ?formatLabel
# ?distributorLinks
# ?copiesCollections ?collections ?collectionsLabel ?imageCollections
# ?relatedWorks ?relatedWorksLabel ?daterelatedWorks
# WHERE {
# SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
# VALUES ?work {wd:'''+artwork_id+'''}
# OPTIONAL { ?work wdt:P9 ?creators. }
# OPTIONAL { ?work p:P9 ?statement0.
# ?statement0 ps:P9 ?creators;
# pq:P49 ?creatorRoles. }
# OPTIONAL { ?work wdt:P13 ?date. }
# OPTIONAL { ?work p:P13 ?statement1.
# ?statement1 ps:P13 ?date;
# pq:P51 ?dateType. }
# OPTIONAL { ?work p:P13 ?statement1.
# ?statement1 ps:P13 ?date;
# pq:P50 ?dateSource. }
# OPTIONAL { ?work wdt:P10 ?publishers. }
# OPTIONAL { ?work p:P10 ?statement2.
# ?statement2 ps:P10 ?publishers;
# pq:P49 ?publisherRoles. }
# OPTIONAL { ?work wdt:P30 ?image. }
# OPTIONAL { ?work p:P30 ?statement3.
# ?statement3 ps:P30 ?image;
# pq:P54 ?depicts.}
# OPTIONAL { ?work p:P30 ?statement3.
# ?statement3 ps:P30 ?image;
# pq:P55 ?annotation.}
# OPTIONAL { ?work p:P30 ?statement3.
# ?statement3 ps:P30 ?image;
# pq:P56 ?license.}
# OPTIONAL { ?work wdt:P65 ?descriptionPage. }
# OPTIONAL { ?description wdt:P4 ?accessURLdescriptionPage. }
# OPTIONAL { ?description wdt:P9 ?authordescriptionPage. }
# OPTIONAL { ?description wdt:P13 ?datedescriptionPage. }
# OPTIONAL { ?description wdt:P50 ?sourcedescriptionPage. }
# OPTIONAL { ?work wdt:P66 ?exhibitionHisPage. }
# OPTIONAL { ?exhibitionHisPage wdt:P4 ?accessURLexhibitionHisPage. }
# OPTIONAL { ?exhibitionHisPage wdt:P9 ?authorexhibitionHisPage. }
# OPTIONAL { ?exhibitionHisPage wdt:P13 ?dateexhibitionHisPage. }
# OPTIONAL { ?exhibitionHisPage wdt:P50 ?sourceexhibitionHisPage. }
# OPTIONAL { ?work wdt:P32 ?digitalFacsimile. }
# OPTIONAL { ?work wdt:P34 ?digitalFacsimileExternal. }
# OPTIONAL { ?work wdt:P35 ?digitalArtefact. }
# OPTIONAL { ?work p:P35 ?statement4.
# ?statement4 ps:P35 ?digitalArtefact;
# pq:P16 ?format.}
# OPTIONAL { ?work wdt:P37 ?distributorLinks. }
# OPTIONAL { ?work wdt:P43 ?copiesCollections. }
# OPTIONAL { ?copiesCollections wdt:P47 ?collections. }
# OPTIONAL { ?copiesCollections wdt:P30 ?imageCollections. }
# OPTIONAL { ?work wdt:P44 ?relatedWorks.}
# OPTIONAL { ?relatedWorks wdt:P13 ?daterelatedWorks. }
# }
# ''')
# sparql.setReturnFormat(JSON)
# artwork = sparql.query().convert()
sparql.setQuery('''
SELECT ?workLabel ?workDescription
?creators ?creatorsLabel ?creatorRoles ?creatorRolesLabel
?publishers ?publishersLabel ?publisherRoles ?publisherRolesLabel
?date ?dateType ?dateTypeLabel ?dateSource
?image ?depics ?depicsLabel ?annotation ?license ?licenseLabel
?descriptionQID ?accessURLdescrip ?authordescrip ?authordescripLabel ?datedescrip
?exhibitionHistoryQID ?accessURLexhibitionHis ?authorexhibitionHis ?authorexhibitionHisLabel ?dateexhibitionHis
?digitalFacsimile ?digitalFacsimileExternal
?digitalArtefact ?format ?formatLabel
?distributorLinks
?copiesCollections ?collections ?collectionsLabel ?imageCollections
?relatedWorks ?relatedWorksLabel ?dateRelatedWorks
WHERE {
SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
VALUES ?work {wd:'''+artwork_id+'''}
OPTIONAL { ?work wdt:P9 ?creators. }
OPTIONAL { ?work p:P9 ?statement0.
?statement0 ps:P9 ?creators;
pq:P49 ?creatorRoles. }
OPTIONAL { ?work wdt:P13 ?date. }
OPTIONAL { ?work p:P13 ?statement1.
?statement1 ps:P13 ?date;
pq:P51 ?dateType;
pq:P50 ?dateSource. }
OPTIONAL { ?work wdt:P10 ?publishers. }
OPTIONAL { ?work p:P10 ?statement2.
?statement2 ps:P10 ?publishers;
pq:P49 ?publisherRoles. }
OPTIONAL { ?work wdt:P30 ?image. }
OPTIONAL { ?work p:P30 ?statement3.
?statement3 ps:P30 ?image;
pq:P54 ?depics;
pq:P55 ?annotation;
pq:P56 ?license.}
OPTIONAL { ?work wdt:P65 ?descriptionQID. }
OPTIONAL { ?descriptionQID wdt:P4 ?accessURLdescrip;
wdt:P9 ?authordescrip;
wdt:P13 ?datedescrip;
wdt:P50 ?sourcedescrip. }
OPTIONAL { ?work wdt:P66 ?exhibitionHistoryQID. }
OPTIONAL { ?exhibitionHistoryQID wdt:P4 ?accessURLexhibitionHis;
wdt:P9 ?authorexhibitionHis;
wdt:P13 ?dateexhibitionHis;
wdt:P50 ?sourceexhibitionHis. }
OPTIONAL { ?work wdt:P32 ?digitalFacsimile. }
OPTIONAL { ?work wdt:P34 ?digitalFacsimileExternal. }
OPTIONAL { ?work wdt:P35 ?digitalArtefact. }
OPTIONAL { ?work p:P35 ?statement4.
?statement4 ps:P35 ?digitalArtefact;
pq:P16 ?format.}
OPTIONAL { ?work wdt:P37 ?distributorLinks. }
OPTIONAL { ?work wdt:P43 ?copiesCollections. }
OPTIONAL { ?copies_collections wdt:P47 ?collections;
wdt:P30 ?imageCollections. }
OPTIONAL { ?work wdt:P44 ?relatedWorks. }
OPTIONAL { ?relatedWorks wdt:P13 ?dateRelatedWorks. }
}
''')
sparql.setReturnFormat(JSON)
artwork = sparql.query().convert()
# print(artwork)
artwork_url = "https://daap.bannerrepeater.org/wiki/Item:Q92"
artwork_title = "the human printer"
artwork_description = "short description"
return render_template('artwork.html', artwork_title=artwork_title, artwork_description=artwork_description)
return render_template('artwork.html', artwork_title=artwork_title, artwork_description=artwork_description, artwork=artwork, artwork_id=artwork_id)
######################### PERSON
@app.route("/person", methods=['GET'])
def person():
person_id = request.args.get('id')
sparql.setQuery('''
SELECT ?person ?personLabel ?personDescription ?a ?aLabel ?propLabel ?b ?bLabel
WHERE {
VALUES ?person {wd:'''+person_id+'''}
?person ?a ?b.
SERVICE wikibase:label { bd:serviceParam wikibase:language "en". }
?prop wikibase:directClaim ?a .
}
''')
sparql.setReturnFormat(JSON)
person_details = sparql.query().convert()
print(person_details)
sparql2.setQuery('''
SELECT ?work ?workLabel ?image ?date
WHERE {
SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
@ -203,10 +288,10 @@ def person():
}
ORDER BY (?workLabel)
''')
sparql.setReturnFormat(JSON)
person_creatorof = sparql.query().convert()
sparql2.setReturnFormat(JSON)
person_creatorof = sparql2.query().convert()
sparql2.setQuery('''
sparql3.setQuery('''
SELECT ?work ?workLabel ?image ?date
WHERE {
SERVICE wikibase:label { bd:serviceParam wikibase:language "[AUTO_LANGUAGE],en". }
@ -218,13 +303,13 @@ def person():
}
ORDER BY (?workLabel)
''')
sparql2.setReturnFormat(JSON)
sparql3.setReturnFormat(JSON)
person_publisherof = sparql2.query().convert()
person_url = ""
person_name = "the name"
person_description = "short bio"
return render_template("person.html", person_id=person_id, person_creatorof=person_creatorof, person_publisherof=person_publisherof)
return render_template("person.html", person_id=person_id, person_creatorof=person_creatorof, person_publisherof=person_publisherof, person_details=person_details)
@ -260,6 +345,6 @@ def upload():
# ALL NAME SPACES
# ALL NAME
# https://daap.bannerrepeater.org/w/api.php?action=query&meta=siteinfo&siprop=namespaces|namespacealiases

372
static/css/style.css
View File

@ -16,79 +16,209 @@ font-style: normal;
}
/***************** EMERGENCY BUTTON****************/
div#backend-data-button{
background-color: #1B42D8;
width: 250px;
height: 55px;
border-radius: 6px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
div#backend-data-button span{
color: #FFFFFF;
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
}
div#container-backend-data-button{
height: 100px;
width: 100%;
border-bottom: 1px solid black;
height: 70px;
}
/************ LAYOUT ************/
html,body{
margin:0px;
padding:0px;
margin:0;
padding:0;
height: 100%;
font-family: 'Roboto Condensed', sans-serif;
}
/*Header*/
div#header{
width: 100%;
border:1px solid blue;
/*border:1px solid blue;*/
background-color: #FFFFFF;
height: 134px;
}
div#header-top{
display: grid;
grid-template-columns: 5% 67.5% 27.5%;
grid-template-rows: 100%;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
div#header-top div#header-title{
div#animatedlogo{
grid-area: 1 / 1 / 2 / 2;
}
div#animatedlogo img{
height: 43px;
}
div#header-title{
grid-area: 1 / 2 / 2 / 3;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
font-size: 18px;
}
div#header-top div#header-keyword-search{
/*float: right;*/
border: 1px solid lime;
div#header-title a:link, div#header-title a:visited {
text-decoration: none;
color: #000000;
}
div#header-keyword-search{
grid-area: 1 / 3 / 2 / 4;
}
div#header-top div#header-keyword-search input[type=text]{
background-color: #e9e9e9;
color: #7f7f7f;
font-size: 18px;
font-family: 'Roboto Condensed', sans-serif;
width: 257px;
height: 43px;
}
div#header-top, div#navigation{
border:red 1px solid;
width: 100%;
height: 67px;
}
div#header-top div, div#navigation div{
display: inline-block;
padding: 3px;
div#navigation{
border:red 1px solid;
display: grid;
grid-template-columns: 12.5% repeat(2, 10%) 1fr repeat(2, 10%) 12.5%;
grid-template-rows: 100%;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
div#navigation a{
font-family: 'Roboto Condensed', sans-serif;
text-decoration: none;
color: black;
font-size: 16px;
height: 67px;
}
div#navigation div#nav-right-side{
float: right;
div#nav-about {
grid-area: 1 / 1 / 2 / 2;
padding-left: 50%;
}
div#nav-browse-archive { grid-area: 1 / 2 / 2 / 3; }
div#nav-browse-category { grid-area: 1 / 3 / 2 / 4; }
div#nav-search { grid-area: 1 / 4 / 2 / 5; }
div#nav-tutorials { grid-area: 1 / 5 / 2 / 6; }
div#nav-upload { grid-area: 1 / 6 / 2 / 7; }
div#nav-login { grid-area: 1 / 7 / 2 / 8; }
/*Footer*/
div#footer{
padding-top: 20px;
height: 229px;
width: 100%;
border: blue 1px solid;
position: absolute;
bottom: 0;
background-color: black;
color:white;
display: none;
display: grid;
grid-template-columns: 20% 40% 15% 25%;
grid-template-rows: 20% 80%;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
div#footer div#footer-top,
div#footer div#footer-bottom{
border: red solid 1px;
width: 100%;
div#footer-title-br{
grid-area: 1 / 1 / 2 / 2;
padding-left: 30%;
}
div#footer-title-others{
grid-area: 1 / 2 / 2 / 3;
}
div#footer-title-socials{
grid-area: 1 / 3 / 2 / 4;
}
div#footer-title-subscribe{
grid-area: 1 / 4 / 2 / 5;
}
div#footer div #footertop{
/*position: absolute;*/
}
div#footer-title-br p, div#footer-title-others p, div#footer-title-subscribe p, div#footer-title-socials p{
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
color:#7f7f7f;
font-size: 16px;
}
div#footer-img-br{
grid-area: 2 / 1 / 3 / 2;
padding-left: 30%;
}
div#footer-img-br img{
width: 60px;
height: 60px;
}
div#footer-img-others{
display: flex;
grid-area: 2 / 2 / 3 / 3;
padding-top: 5%;
}
div#footer-img-lottery{
padding-left: 10%;
}
div#footer-img-lottery img{
width: 124px;
height: 81px;
}
div#footer-img-wiki img{
width: 56px;
height: 56px;
}
div#footer-socials-links{
grid-area: 2 / 3 / 3 / 4;
}
div#footer-socials-links a{
text-decoration: none;
color:#FFFFFF;
font-family: 'Roboto Condensed', sans-serif;
}
div#footer-subscribe{
grid-area: 2 / 4 / 3 / 5;
padding-top: 5%;
}
div#footer div#footer-top div#footer-top-left,
div#footer div#footer-top div#footer-top-right{
display: inline-flex;
border:lime 1px solid;
}
div#footer div#footer-top div#footer-top-left{
div#footer div#footer-left{
left: 0px;
width: 30%;
/*display: contents;*/
}
div#footer div#footer-top div#footer-top-right{
div#footer div#footer-right{
right: 0px;
width: 30%;
float: right;
@ -96,15 +226,13 @@ div#footer div#footer-top div#footer-top-right{
}
div#footer div#footer-top div#footer-top-left div,
div#footer div#footer-top div#footer-top-right div{
div#footer div#footer-left div,
div#footer div#footer-right div{
display: inline-block;
border:cyan 1px solid;
}
div#footer-bottom{
display: none;
}
input#newslettersubs{
background-color: #000000;
color:#FFFFFF;
@ -123,6 +251,12 @@ input.submitemail{
}
/*Titles all pages*/
div#home-recent-title, div#browsethearchive-title, div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex-title, div#zinesindex-title{
margin-top: 60px;
margin-bottom: 30px;
}
/******************************************************/
/************ BROWSING SEARCHING INDEXING ************/
@ -136,23 +270,146 @@ table, th, td {
padding: 10px 30px 10px 30px;
}
thead tr th{
text-transform: uppercase;
color:#7f7f7f;
font-size: 16px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: normal;
border-bottom: black 3px solid;
}
tbody tr th{
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: normal;
}
tbody tr th.label a{
font-weight: bold;
}
tbody tr th a{
text-decoration: none;
color: #000000;
}
tbody tr th.description{
font-size: 16px;
}
/* Titles */
div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex, div#zinesindex-title{
font-weight: bold;
font-size: 25px;
font-family: 'Roboto Condensed', sans-serif;
}
/************ RECENTLY ADDED + HOME ************/
/*Top div*/
div#home-top-div{
height: 661px;
border:blue solid 1px;
}
/*Recent stuff*/
div#home-recent-title{
font-size: 25px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
max-width: 90%;
margin: 0 auto;
padding-left: 20px;
}
img.home-recent-imgs{
/*max-height: 200px;*/
width: 200px;
}
div.home-recent-items{
display: inline-block;
padding:10px;
font-size: 16px;
font-family: 'Roboto Condensed', sans-serif;
color: #7f7f7f;
margin: 0 auto;
border:solid;
}
div.home-recent-items a{
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
color: #000000;
text-decoration: none;
}
div#home-recent-grid{
max-width: 90%;
margin: 0 auto;
display: grid;
grid-gap: 2rem;
/*border: 1px solid blue;*/
text-align: center;
}
div#show-button-wrapper{
width: 100%;
}
span.home-show{
background-color: #1b42d8;
border-radius: 6px;
color: #FFFFFF;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
font-weight: bold;
height: 48px;
width: 365px;
}
@media (min-width: 600px) {
#home-recent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
#home-recent-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
#home-recent-grid { grid-template-columns: repeat(6, 1fr); }
}
/************ BROWSE THE ARCHIVE ************/
img.browsethearchive-imgs{
max-height: 200px;
max-width: 200px;
width: 200px;
}
div#browsethearchive-title{
font-size: 25px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
}
div.browsethearchive-items{
display: inline-block;
width: 250px;
height: 250px;
padding:10px;
/*border: red 1px solid;*/
font-size: 16px;
font-family: 'Roboto Condensed', sans-serif;
color: #7f7f7f;
margin: 0 auto;
}
div.browsethearchive-items a{
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
text-decoration: none;
color: #000000
}
div#browsethearchive-grid{
max-width: 90%;
margin: 0 auto;
@ -163,11 +420,40 @@ div#browsethearchive-grid{
}
.current {
color: red;
background-color: #1b42d8;
}
#browsethearchive-pagin li.current a{
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;
}
#pagin li {
display: inline-block;
#browsethearchive-pagin li a{
color: #000000;
font-weight: bold;
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;
}
ul#browsethearchive-pagin{
display: inline-flex;
}
#browsethearchive-pagin li {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 6px;
}
div#browsethearchive-pagination{
width: 100%;
background-color: #e9e9e9;
border-top: black solid 3px;
height: 139px;
text-align: center;
}
@media (min-width: 600px) {
@ -181,8 +467,18 @@ div#browsethearchive-grid{
}
/************ BROWSE BY CATEGORY ************/
div#browsebycategory-listcategories{
}
div.browsebycategory-categories{
border: black 1px solid;
margin: 10px;
padding: 10px;
width: 20em;
}

BIN
static/imgs/Pages/Artwork page_mock up.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

50
templates/artistsindex.html
View File

@ -1,6 +1,7 @@
{% extends "layout.html" %}
{% block content %}
<div id="artistsindex-title">INDEX OF ARTIST</div>
<table id="artistsindex-table">
<thead>
@ -14,14 +15,14 @@
<tbody>
{% for x in results['results']['bindings']%}
<tr>
<th><a href="person?id={{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">#{{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}</a></th>
<th><a href="person?id={{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x["creatorsLabel"]['value'] }}</a></th>
<th><a href="person?id={{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}</a></th>
<th class="label"><a href="person?id={{ x['creators']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x["creatorsLabel"]['value'] }}</a></th>
<th>
{% if "creatorsAltLabel" in x %}
{{ x["creatorsAltLabel"]["value"] }}
{% endif %}
</th>
<th>
<th class="description">
{% if "creatorsDescription" in x %}
{{ x["creatorsDescription"]["value"] }}
{% endif %}
@ -32,37 +33,22 @@
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#data').after('<div id="nav"></div>');
var rowsShown = 20;
var rowsTotal = $('#artistsindex-table tbody tr').length;
var numPages = rowsTotal/rowsShown;
for(i = 0;i < numPages;i++) {
var pageNum = i + 1;
$('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
}
$('#artistsindex-table tbody tr').hide();
$('#artistsindex-table tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function(){
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#artistsindex-table tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
css('display','table-row').animate({opacity:1}, 300);
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
#artistsindex-table tr {
display: none;
}
</style>
<script>
$(document).ready(function(){
$('#artistsindex-table').dataTable({
ordering: false,
searching: false,
lengthChange: false,
pageLength:20,
info: false
});
});
</script>
{% endblock content %}

19
templates/artwork.html
View File

@ -1,10 +1,10 @@
{% extends "layout.html" %}
{% block content %}
<div id="artwork-description">
<!-- <div id="artwork-description">
<div id="artwork-page-title">ARTWORK</div>
<div id="artwork-title">{{ artwork_title }}</div>
<div id="artwork-short-description">{{ artwork_description }}</div>
<div id="artwork-title">WHATEVER</div>
<div id="artwork-short-description"></div>
</div>
<div id="artwork-content">
<div id="artwork-content-menu">
@ -17,6 +17,19 @@
</div>
</div>
-->
<div id="container-backend-data-button">
<a target="_blank" href="https://daap.bannerrepeater.org/wiki/Item:{{ artwork_id }}">
<div id="backend-data-button">
<span>Go to backend to see live data</span>
</div>
</a>
</div>
<img src="{{ url_for('static', filename='/imgs/Pages/Artwork page_mock up.png') }}">
{% endblock content %}

10
templates/browsebycategory.html
View File

@ -1,7 +1,13 @@
{% extends "layout.html" %}
{% block content %}
<div id="browsebycategory-listcategories">
<div class="browsebycategory-categories"><a href="{{ url_for('artistsindex') }}">BROWSE BY CREATOR/CONTRIBUTOR</a></div>
<div class="browsebycategory-categories"><a href="{{ url_for('publishersindex') }}">BROWSE BY PUBLISHER</a></div>
<div class="browsebycategory-categories"><a href="{{ url_for('selfpublishedindex') }}">BROWSE ALL SELF-PUBLISHED</a></div>
<div class="browsebycategory-categories"><a href="{{ url_for('zinesindex') }}">BROWSE ALL ZINES</a></div>
<div>More categories coming soon...</div>
</div>
{% endblock content %}

21
templates/browsethearchive.html
View File

@ -1,9 +1,10 @@
{% extends "layout.html" %}
{% block content %}
<div id="browsethearchive-grid">
<div id="browsethearchive-all">
<div id="browsethearchive-title">BROWSE THE ARCHIVE</div>
<div id="browsethearchive-grid">
{% for x in results['results']['bindings']%}
<div class="browsethearchive-items">
@ -26,9 +27,12 @@
</div>
{% endfor %}
<ul id="pagin">
</ul>
</div>
<div id="browsethearchive-pagination">
<ul id="browsethearchive-pagin">
</ul>
</div>
<script type="text/javascript">
//Pagination
@ -38,9 +42,9 @@
for(var i = 0 ; i<pageCount;i++){
$("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
$("#browsethearchive-pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
}
$("#pagin li").first().find("a").addClass("current")
$("#browsethearchive-pagin li").first().addClass("current")
showPage = function(page) {
$(".browsethearchive-items").hide();
$(".browsethearchive-items").each(function(n) {
@ -51,8 +55,8 @@
showPage(1);
$("#pagin li a").click(function() {
$("#pagin li a").removeClass("current");
$("#browsethearchive-pagin li").click(function() {
$("#browsethearchive-pagin li").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
@ -61,6 +65,7 @@
</div>
{% endblock content %}

69
templates/home.html
View File

@ -3,9 +3,74 @@
<div id="home-top-div"></div>
<div id="home-recently-added-works">
<div>RECENTLY ADDED WORKS</div>
<div></div>
<div id="home-recent-title">RECENTLY ADDED WORKS</div>
<div id="home-recent-grid">
{% for x in results['results']['bindings']%}
<div class="home-recent-items">
{% if "image" in x %}
<a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
<img class="home-recent-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
</a> <br>
{% else %}
<a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
<img class="home-recent-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}"><br>
</a>
{% endif %}
<a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
{{ x["workLabel"]["value"]}}
</a> <br>
{% if "date" in x %}
{{ x["date"]["value"] | replace("T00:00:00Z", "") }} <br>
{% endif %}
</div>
{% endfor %}
<span class="home-show"></span>
</div>
</div>
<!--
post_wrap =
home-recent-grid
pst =
home-recent-items
-->
<script type="text/javascript">
$ShowHideMore = $('#home-recent-grid');
$ShowHideMore.each(function() {
var $times = $(this).children('.home-recent-items');
if ($times.length > 9) {
$ShowHideMore.children(':nth-of-type(n+9)').addClass('moreShown').hide();
$(this).find('span.home-show').addClass('more-times').html('SHOW MORE');
}
});
$(document).on('click', '#home-recent-grid > span', function() {
var that = $(this);
var thisParent = that.closest('#home-recent-grid');
if (that.hasClass('more-times')) {
thisParent.find('.moreShown').show();
that.toggleClass('more-times', 'less-times').html('SHOW LESS');
} else {
thisParent.find('.moreShown').hide();
that.toggleClass('more-times', 'less-times').html('SHOW MORE');
}
});
</script>
{% endblock content %}

68
templates/layout.html
View File

@ -12,14 +12,30 @@
<body>
<div id="header">
<div id="header-top"><div><img src="{{ url_for('static', filename='/imgs/Logos/DAAP BR square logo -Animated Image (Small).gif') }}"></div><div id="header-title">DIGITAL ARCHIVE OF ARTISTS' PUBLISHING</div><div id="header-keyword-search"> <input type="text" id="fname" name="fname" value="KEYWORD SEARCH"></div></div>
<div id="header-top">
<div id="animatedlogo">
<img src="{{ url_for('static', filename='/imgs/Logos/DAAP BR square logo -Animated Image (Small).gif') }}">
</div>
<div id="header-title">
<a href="{{ url_for('home') }}">DIGITAL ARCHIVE OF ARTISTS' PUBLISHING</a>
</div>
<div id="header-keyword-search">
<input type="text" id="fname" name="fname" value="Keyword search">
</div>
</div>
<div id="navigation">
<div id="nav-left-side"><div><a href="{{ url_for('about') }}">About</a></div><div><a href="{{ url_for('browsethearchive') }}">Browse the archive</a></div><div><a href="{{ url_for('browsebycategory') }}">Browse by category</a></div><div><a href="{{ url_for('searchtools') }}">Search tools</a></div></div>
<div id="nav-right-side">
<div><a href="{{ url_for('tutorials') }}">Tutorials</a></div>
<div><a href="{{ url_for('upload') }}">Upload</a></div>
<div><a href="https://daap.bannerrepeater.org/w/index.php?title=Special:UserLogin&returnto=Main+Page">Log in</a></div></div>
<div id="nav-about"><a href="{{ url_for('about') }}">About</a></div>
<div id="nav-browse-archive"><a href="{{ url_for('browsethearchive') }}">Browse the archive</a></div>
<div id="nav-browse-category"><a href="{{ url_for('browsebycategory') }}">Browse by category</a></div>
<div id="nav-search"><a href="{{ url_for('searchtools') }}">Search tools</a></div>
<div id="nav-tutorials"><a href="{{ url_for('tutorials') }}">Tutorials</a></div>
<div id="nav-upload"><a href="{{ url_for('upload') }}">Upload</a></div>
<div id="nav-login"><a href="https://daap.bannerrepeater.org/w/index.php?title=Special:UserLogin&returnto=Main+Page">Log in</a></div>
</div>
</div>
@ -27,24 +43,36 @@
{% endblock content %}
<div id="footer">
<div id="footer-top">
<div id="footer-top-left">
<!-- <div id="footer-logo">ARCHIVE LOGO</div> -->
<div id="footer-br"><p>A project by:</p><p><img src="{{ url_for('static', filename='/imgs/Logos/Banner-Repeater-logo.png') }}"></p></div>
<div id="footer-support">
<div>With support from:</div>
<div><img src="{{ url_for('static', filename='/imgs/Logos/wikimedia_logo.png') }}"></div>
<div><img src="{{ url_for('static', filename='/imgs/Logos/Lottery-white on black.png') }}"></div>
</div>
</div>
<div id="footer-top-right">
<div id="footer-socials"><p>facebook</p><p>twitter</p><p>Instagram</p><p>email address</p></div>
<div id="footer-newsletter"><p>Subscribe to our newsletter</p><p><input type="text" id="newslettersubs" name="newslettersubs" value="Your email address"> <input class="submitemail" type="submit" value="OK"></p></div>
<!-- <div id="footer-br"> -->
<div id="footer-title-br"><p>A project by:</p></div>
<div id="footer-img-br"><img src="{{ url_for('static', filename='/imgs/Logos/Banner-Repeater-logo.png') }}"></div>
<!-- </div> -->
<!-- <div id="footer-others"> -->
<div id="footer-title-others"><p>With support from:</p></div>
<div id="footer-img-others">
<div id="footer-img-wiki"><img src="{{ url_for('static', filename='/imgs/Logos/wikimedia_logo.png') }}"></div>
<div id="footer-img-lottery"><img src="{{ url_for('static', filename='/imgs/Logos/Lottery-white on black.png') }}"></div>
</div>
<div id="footer-title-socials"><p>SOCIAL</p></div>
<div id="footer-socials-links">
<p><a target="_blank" href="https://www.facebook.com/BannerRepeater">Facebook</a></p>
<p><a target="_blank" href="https://twitter.com/BANNERREPEATER">Twitter</a></p>
<p><a target="_blank" href="https://www.instagram.com/bannerrepeater/">Instagram</a></p>
<p><a target="_blank" href="mailto:daap.signup@disroot.org">Email address</a></p>
</div>
<div id="footer-bottom"><p>Copyright Banner repeater 2019</p></div>
<div id="footer-title-subscribe"><p>Subscribe to our newsletter</p></div>
<div id="footer-subscribe"><input type="text" id="newslettersubs" name="newslettersubs" value="Your email address"> <input class="submitemail" type="submit" value="OK"></p></div>
</div>
</body>
</html>

45
templates/person-later.html
View File

@ -0,0 +1,45 @@
{% extends "layout.html" %}
{% block content %}
<div id="person-description">
<div id="person-page-title">PERSON</div>
{% if "personLabel" in person_details['results']['bindings']%}
<div id="person-name">{{ x["personLabel"]["value"]}}</div>
{% endif %}
{% if "personDescription" in x %}
<div id="person-short-description">{{ x["personDescription"]["value"] }}</div>
{% endif %}
</div>
<div id="person-content">
<div id="person-picture">
</div>
<div id="person_infos">
</div>
</div>
<div id="person_creatorof">
{% for x in person_creatorof['results']['bindings']%}
<div class="person_creatorof-item">
{% if "image" in x %}
<img class="person_creatorof-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'> <br>
{% else %}
<img class="person_creatorof-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}"><br>
{% endif %}
<span><a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>{{ x["workLabel"]["value"] }}</a></span>
</div>
{% endfor %}
</div>
<div id="person_publisherof">
{% for x in person_publisherof['results']['bindings']%}
<div class="person_creatorof-item">
{% if "image" in x %}
<img class="person_creatorof-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'> <br>
{% else %}
<img class="person_creatorof-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}"><br>
{% endif %}
<span><a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>{{ x["workLabel"]["value"] }}</a></span>
</div>
{% endfor %}
</div>
{% endblock content %}

44
templates/person.html
View File

@ -1,40 +1,18 @@
{% extends "layout.html" %}
{% block content %}
<div id="person-description">
<div id="person-page-title">PERSON</div>
<div id="person-name">{{ person_name }}</div>
<div id="person-short-description">{{ person_description }}</div>
</div>
<div id="person-content">
<div id="person-picture">
</div>
<div id="person_infos">
</div>
</div>
<div id="person_creatorof">
{% for x in person_creatorof['results']['bindings']%}
<div class="person_creatorof-item">
{% if "image" in x %}
<img class="person_creatorof-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'> <br>
{% else %}
<img class="person_creatorof-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}"><br>
{% endif %}
<span><a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>{{ x["workLabel"]["value"] }}</a></span>
</div>
{% endfor %}
<div id="container-backend-data-button">
<a target="_blank" href="https://daap.bannerrepeater.org/wiki/Item:{{ person_id }}">
<div id="backend-data-button">
<span>Go to backend to see live data</span>
</div>
<div id="person_publisherof">
{% for x in person_publisherof['results']['bindings']%}
<div class="person_creatorof-item">
{% if "image" in x %}
<img class="person_creatorof-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'> <br>
{% else %}
<img class="person_creatorof-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}"><br>
{% endif %}
<span><a href='/artwork?id={{ x["work"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>{{ x["workLabel"]["value"] }}</a></span>
</div>
{% endfor %}
</a>
</div>
<img src="{{ url_for('static', filename='/imgs/Pages/Artwork page_mock up.png') }}">
{% endblock content %}

54
templates/publishersindex.html
View File

@ -0,0 +1,54 @@
{% extends "layout.html" %}
{% block content %}
<div id="publishersindex-title">INDEX OF PUBLISHERS</div>
<table id="publishersindex-table">
<thead>
<tr>
<th>ID</th>
<th>Creator's Name</th>
<th>Alternative aliases</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{% for x in results['results']['bindings']%}
<tr>
<th><a href="person?id={{ x['publishers']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x['publishers']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}</a></th>
<th class="label"><a href="person?id={{ x['publishers']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x["publishersLabel"]['value'] }}</a></th>
<th>
{% if "publishersAltLabel" in x %}
{{ x["publishersAltLabel"]["value"] }}
{% endif %}
</th>
<th class="description">
{% if "publishersDescription" in x %}
{{ x["publishersDescription"]["value"] }}
{% endif %}
</th>
</tr>
{% endfor %}
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#publishersindex-table').dataTable({
ordering: false,
searching: false,
lengthChange: false,
pageLength:20,
info: false
});
});
</script>
{% endblock content %}

55
templates/selfpublishedindex.html
View File

@ -0,0 +1,55 @@
{% extends "layout.html" %}
{% block content %}
<div id="selfpublishedindex-title">INDEX OF PUBLISHERS</div>
<table id="selfpublishedindex-table">
<thead>
<tr>
<th>ID</th>
<th>Work</th>
<th>Alternative aliases</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{% for x in results['results']['bindings']%}
<tr>
<th><a href="artwork?id={{ x['work']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x['work']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}</a></th>
<th class="label"><a href="artwork?id={{ x['work']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x["workLabel"]['value'] }}</a></th>
<th>
{% if "workAltLabel" in x %}
{{ x["workAltLabel"]["value"] }}
{% endif %}
</th>
<th class="description">
{% if "workDescription" in x %}
{{ x["workDescription"]["value"] }}
{% endif %}
</th>
</tr>
{% endfor %}
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#selfpublishedindex-table').dataTable({
ordering: false,
searching: false,
lengthChange: false,
pageLength:20,
info: false
});
});
</script>
{% endblock content %}

54
templates/zinesindex.html
View File

@ -0,0 +1,54 @@
{% extends "layout.html" %}
{% block content %}
<div id="zinesindex-title">INDEX OF ZINES</div>
<table id="zinesindex-table">
<thead>
<tr>
<th>ID</th>
<th>Work</th>
<th>Alternative aliases</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{% for x in results['results']['bindings']%}
<tr>
<th><a href="artwork?id={{ x['work']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x['work']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}</a></th>
<th class="label"><a href="artwork?id={{ x['work']['value'] | replace('http://daap.bannerrepeater.org/entity/', '') }}">{{ x["workLabel"]['value'] }}</a></th>
<th>
{% if "workAltLabel" in x %}
{{ x["workAltLabel"]["value"] }}
{% endif %}
</th>
<th class="description">
{% if "workDescription" in x %}
{{ x["workDescription"]["value"] }}
{% endif %}
</th>
</tr>
{% endfor %}
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#zinesindex-table').dataTable({
ordering: false,
searching: false,
lengthChange: false,
pageLength:20,
info: false
});
});
</script>
{% endblock content %}
Write Preview
Loading…
Cancel
Save