diff --git a/xppl/getannot.py b/xppl/getannot.py index df72051..0f0ccf1 100644 --- a/xppl/getannot.py +++ b/xppl/getannot.py @@ -6,7 +6,7 @@ from flask import request def get_annotations(): # TODO(decentral1se): remove this from the source - KEY = "6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik" + KEY = "6879-H5GbA2KyFIeEUM1BubjVTLP8yM3GMyHgOAjjNe_GBxY" # a dictionary containing necessary http headers headers = { @@ -15,7 +15,7 @@ def get_annotations(): "Authorization": "Bearer %s" % KEY } - base_url = "https://hypothes.is/api/search?user=xpub@hypothes.is" + base_url = "https://hypothes.is/api/search?user=varia_annotator@hypothes.is" search_url = "".join([base_url]) diff --git a/xppl/static/css/style.css b/xppl/static/css/style.css index 9f3d6a0..bfba43a 100755 --- a/xppl/static/css/style.css +++ b/xppl/static/css/style.css @@ -1,27 +1,24 @@ @import url("../fonts/fonts_style.css"); -*{ -font-family: "Archivo Narrow"; +* { + font-family: "Archivo Narrow"; } -p{ +p { font-size: 20px; - - } -a{ - +a { text-decoration: underline; color: black; } -a:hover{ +a:hover { text-decoration: underline; color: #0000FF; } -.navigation ul{ +.navigation ul { list-style-type: none; margin: 0; margin-top: 40px; @@ -29,10 +26,10 @@ a:hover{ } .navigation ul li { -float: left; + float: left; } -.navigation ul li a{ +.navigation ul li a { display: block; color: black; text-align: center; @@ -41,79 +38,78 @@ float: left; text-decoration: none; } -.navigation ul li:active a{ -font-style: italic; - +.navigation ul li:active a { + font-style: italic; } .clearfix::after { - content: ""; - clear: both; - display: table; + content: ""; + clear: both; + display: table; } -.container{ -padding: 0px 10px; - - +.container { + padding: 0px 10px; } -#fileformat{ +#fileformat { text-align: center; } -.lead{ +.lead { font-size: 18px; - } -.about{ -font-size: 18px; +.about { + font-size: 18px; +} +.library_table { + /* Removes the cell spacing via CSS */ + border-spacing: 0; } -.library_table{ -border-spacing:0; /* Removes the cell spacing via CSS */ -} -.library_table a{ + +.library_table a { text-decoration: none; color: black; } -.library_table th{ -font-size: 20px; -cursor: pointer; -} -.library_table td{ -padding: 5px; +.library_table th { + font-size: 20px; + cursor: pointer; } -th.headerSortUp{ -background-color: #E8E8E8!important; -} -th.headerSortDown{ -background-color: #E8E8E8!important; +.library_table td { + padding: 5px; } -.library_table tbody tr:hover{ - background-color: #E8E8E8!important; +th.headerSortUp { + background-color: #E8E8E8 !important; } +th.headerSortDown { + background-color: #E8E8E8 !important; +} -.library_table .title_col{ +.library_table tbody tr:hover { + background-color: #E8E8E8 !important; +} + +.library_table .title_col { font-size: 20px; padding-left: 90px; padding-right: 20px; } -.library_table .author_col{ +.library_table .author_col { font-size: 18px; } -.library_table li{ -list-style-type:none; -text-align: center; -padding-right: 5px; -display: inline-block; +.library_table li { + list-style-type: none; + text-align: center; + padding-right: 5px; + display: inline-block; } #plus { @@ -125,95 +121,94 @@ display: inline-block; text-align: center; } - -.library_table tr:nth-child(even){ -background-color: #fafafa; +.library_table tr:nth-child(even) { + background-color: #fafafa; } -#title_xppl{ -font-size: 46px; -cursor: pointer; +#title_xppl { + font-size: 46px; + cursor: pointer; } -.header input{ -height:40px; -width: 500px; -font-size: 24px; -font-weight: bold; +.header input { + height: 40px; + width: 500px; + font-size: 24px; + font-weight: bold; } -.author input{ -height:20px; -width: 500px; -font-size: 18px; +.author input { + height: 20px; + width: 500px; + font-size: 18px; } -.search input{ -margin: 0; -float: left; -width: 320px; -height: 36px; -font-size: 18px; -font-weight: regular; -padding: 2px; -background:rgb(240, 240, 240); -border:0px; -box-shadow: inset 0 0 5px rgba(000,000,000, 0.2); +.search input { + margin: 0; + float: left; + width: 320px; + height: 36px; + font-size: 18px; + font-weight: regular; + padding: 2px; + background: rgb(240, 240, 240); + border: 0px; + box-shadow: inset 0 0 5px rgba(000, 000, 000, 0.2); } .button { -height:40px; -font-size: 18px; -padding:6px 15px; -left:0px; -border:0px solid #dbdbdb; -background-color: #686d72; -color:#fafafa; + height: 40px; + font-size: 18px; + padding: 6px 15px; + left: 0px; + border: 0px solid #dbdbdb; + background-color: #686d72; + color: #fafafa; } -.button:hover { -background-color:red; -color: #fafafa; +.button:hover { + background-color: red; + color: #fafafa; } .ui-autocomplete { -position: absolute; -top: 100%; -left: 0; -z-index: 1000; -float: left; -display: none; -min-width: 160px; -padding: 4px 0; -margin: 0 0 10px 25px; -list-style: none; -background-color: #ffffff; -border-color: #ccc; -border-color: rgba(0, 0, 0, 0.2); -border-style: solid; -border-width: 1px; --webkit-border-radius: 5px; --moz-border-radius: 5px; -border-radius: 5px; --webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); --moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); --webkit-background-clip: padding-box; --moz-background-clip: padding; -background-clip: padding-box; -*border-right-width: 2px; -*border-bottom-width: 2px; + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + float: left; + display: none; + min-width: 160px; + padding: 4px 0; + margin: 0 0 10px 25px; + list-style: none; + background-color: #ffffff; + border-color: #ccc; + border-color: rgba(0, 0, 0, 0.2); + border-style: solid; + border-width: 1px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + *border-right-width: 2px; + *border-bottom-width: 2px; } -.ui-menu-item > a.ui-corner-all { -display: block; -padding: 3px 15px; -clear: both; -font-weight: normal; -line-height: 18px; -color: #555555; -white-space: nowrap; -text-decoration: none; +.ui-menu-item>a.ui-corner-all { + display: block; + padding: 3px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: #555555; + white-space: nowrap; + text-decoration: none; } .ui-menu-item { @@ -221,80 +216,142 @@ text-decoration: none; } .ui-state-hover, .ui-state-active { -color: #ffffff; -text-decoration: none; -background-color: #0088cc; -border-radius: 0px; --webkit-border-radius: 0px; --moz-border-radius: 0px; -background-image: none; + color: #ffffff; + text-decoration: none; + background-color: #0088cc; + border-radius: 0px; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + background-image: none; } .ui-helper-hidden-accessible { - display: none; + display: none; } - - -.footer{ +.footer { width: 100%; - font-family:'Courier New'; - font-weight:100; - font-size:12px; + font-family: 'Courier New'; + font-weight: 100; + font-size: 12px; margin-top: 200px; } -.footer pre{ +.footer pre { width: 60px; - margin:0 auto; -font-family:'Courier New'; - + margin: 0 auto; + font-family: 'Courier New'; } -.footer p{ + +.footer p { width: 30%; - margin:0 auto; - text-align: center; -font-family:'Courier New'; -font-size: 12px; + margin: 0 auto; + text-align: center; + font-family: 'Courier New'; + font-size: 12px; } -.ui-tabs-vertical { width: 100em; border-top: 0;} -<<<<<<< HEAD -<<<<<<< HEAD -.ui-tabs-vertical .ui-tabs-nav { padding: .2em .2em .2em .2em; float: left; width: 15em; } -.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 0 !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } -======= -.ui-tabs-vertical a { text-decoration: none; color: black;} -.ui-tabs-vertical .ui-tabs-nav { padding: .2em .2em .2em .2em; float: left; width: 15em; -webkit-appearance: none;} -.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 0 !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; list-style-type: none; } ->>>>>>> stack_stuff -======= -.ui-tabs-vertical a { text-decoration: none; color: black;} -.ui-tabs-vertical .ui-tabs-nav { padding: .2em .2em .2em .2em; float: left; width: 15em; -webkit-appearance: none;} -.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 0 !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; list-style-type: none; } ->>>>>>> master -.ui-tabs-vertical .ui-tabs-nav li a { display:block; } -.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 0; background-color: yellow !important; list-style-type: none;} -.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: left; width: 50em; font-size: 12px; list-style-type: none;} +.ui-tabs-vertical { + width: 100em; + border-top: 0; +} -#creator{ +/* HEAD */ +.ui-tabs-vertical .ui-tabs-nav { + padding: .2em .2em .2em .2em; + float: left; + width: 15em; +} + +.ui-tabs-vertical .ui-tabs-nav li { + clear: left; + width: 100%; + border-bottom-width: 0 !important; + border-right-width: 0 !important; + margin: 0 -1px .2em 0; +} + +.ui-tabs-vertical a { + text-decoration: none; + color: black; +} + +.ui-tabs-vertical .ui-tabs-nav { + padding: .2em .2em .2em .2em; + float: left; + width: 15em; + -webkit-appearance: none; +} + +.ui-tabs-vertical .ui-tabs-nav li { + clear: left; + width: 100%; + border-bottom-width: 0 !important; + border-right-width: 0 !important; + margin: 0 -1px .2em 0; + list-style-type: none; +} + +/* Stack_Stuff */ +.ui-tabs-vertical a { + text-decoration: none; + color: black; +} + +.ui-tabs-vertical .ui-tabs-nav { + padding: .2em .2em .2em .2em; + float: left; + width: 15em; + -webkit-appearance: none; +} + +.ui-tabs-vertical .ui-tabs-nav li { + clear: left; + width: 100%; + border-bottom-width: 0 !important; + border-right-width: 0 !important; + margin: 0 -1px .2em 0; + list-style-type: none; +} + +/* Master */ +.ui-tabs-vertical .ui-tabs-nav li a { + display: block; +} + +.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { + padding-bottom: 0; + padding-right: .1em; + border-right-width: 0; + background-color: yellow !important; + list-style-type: none; +} + +.ui-tabs-vertical .ui-tabs-panel { + padding: 1em; + float: left; + width: 50em; + font-size: 12px; + list-style-type: none; +} + +#creator { font-size: 12px; color: grey; - } -#newstext{ +#newstext { width: 100%; margin: 0; padding: 3px; - top:0; - left:0; + top: 0; + left: 0; position: fixed; font-size: 18px; background-color: yellow; } -#annotindication{ +#annotindication { width: 30%; margin: 0; padding: 3px; @@ -303,22 +360,22 @@ font-size: 12px; } div.marquee { - white-space:no-wrap; - overflow:hidden; -} -div.marquee > div.marquee-text { - font-style: italic; - white-space:nowrap; - display:inline; - width:auto; + white-space: no-wrap; + overflow: hidden; } -#home_content{ +div.marquee>div.marquee-text { + font-style: italic; + white-space: nowrap; + display: inline; + width: auto; +} + +#home_content { width: 70%; - } -#app{ +#app { position: fixed; bottom: 0; right: 0; @@ -326,121 +383,126 @@ div.marquee > div.marquee-text { height: 100%; } -.messages{ +.messages { position: absolute; bottom: 40px; display: block; - width:100%; + width: 100%; padding: 10px; margin: 0px; height: 100%; - /*background-color: #b4b9be;*/ overflow-y: scroll; overflow-x: hidden; color: white; - word-wrap:break-word; + word-wrap: break-word; box-sizing: border-box; --webkit-box-sizing: border-box; --moz-box-sizing: border-box; -z-index: -100000; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + z-index: -100000; } -.messageback1{ +.messageback1 { + position: absolute; + bottom: 40px; + display: block; + width: 100%; + padding: 0px; + margin: 0px; + height: 100%; + background-color: #b4b9be; + overflow-y: scroll; + overflow-x: hidden; + color: white; + word-wrap: break-word; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + z-index: -100000; +} -position: absolute; -bottom: 40px; -display: block; -width:100%; -padding: 0px; -margin: 0px; -height: 100%; -background-color: #b4b9be; -overflow-y: scroll; -overflow-x: hidden; -color: white; -word-wrap:break-word; -box-sizing: border-box; --webkit-box-sizing: border-box; --moz-box-sizing: border-box; -z-index: -100000;} - -.messageback2{ -position: absolute; -bottom: 40px; -display: block; -width:100%; -padding: 0px; -margin: 0px; -height: 100%; -background-color: #b4b9be; -overflow-y: scroll; -overflow-x: hidden; -color: white; -word-wrap:break-word; -box-sizing: border-box; --webkit-box-sizing: border-box; --moz-box-sizing: border-box; -z-index: -100000;} +.messageback2 { + position: absolute; + bottom: 40px; + display: block; + width: 100%; + padding: 0px; + margin: 0px; + height: 100%; + background-color: #b4b9be; + overflow-y: scroll; + overflow-x: hidden; + color: white; + word-wrap: break-word; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + z-index: -100000; +} .new-message { position: absolute; bottom: 0; display: block; -width:100%; -margin:0; -padding:0; -z-index: 100000; -opacity: 1!important; + width: 100%; + margin: 0; + padding: 0; + z-index: 100000; + opacity: 1 !important; } -.control{ - display: block; - margin:0!important; - padding:0!important; -} -.field{ +.control { display: block; - margin:0!important; - padding:0!important; + margin: 0 !important; + padding: 0 !important; } -.new-message input{ + +.field { + display: block; + margin: 0 !important; + padding: 0 !important; +} + +.new-message input { width: 80%; display: block; - margin:0px!important; - padding:0px!important; + margin: 0px !important; + padding: 0px !important; height: 40px; font-size: 16px; word-wrap: break-word; word-break: break-all; float: left; box-sizing: border-box; --webkit-box-sizing: border-box; --moz-box-sizing: border-box; -} -.new-message button{ - display: block; - width: 20%; -float: right; -margin:0px!important; -padding:0px!important; -box-sizing: border-box; --webkit-box-sizing: border-box; --moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; } -.messages .user{ +.new-message button { + display: block; + width: 20%; + float: right; + margin: 0px !important; + padding: 0px !important; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; +} + +.messages .user { font-size: 16px; margin-bottom: -15px; margin-top: 20px; } -.messages .msg{ + +.messages .msg { font-size: 24px; margin: 0px; margin-top: -15px; margin-bottom: 10px; padding: 0; } -.messages .time{ + +.messages .time { font-size: 16px; font-style: italic; } @@ -453,11 +515,9 @@ box-sizing: border-box; display: inline-block; position: relative; left: 400px; - } .widget iframe { - width: 100%; height: 100%; border: none; @@ -472,23 +532,23 @@ box-sizing: border-box; } @media screen and (max-width: 1000px) { -.grid{ - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-gap: 2px; - align-items: top; - justify-items: center; -} + .grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-gap: 2px; + align-items: top; + justify-items: center; + } } @media screen and (max-width: 600px) { -.grid{ - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 2px; - align-items: top; - justify-items: center; -} + .grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 2px; + align-items: top; + justify-items: center; + } } .gridbox { @@ -498,62 +558,82 @@ box-sizing: border-box; justify-items: center; } -.gridbox:hover{ +.gridbox:hover { opacity: 0.5; } /* The Modal (background) */ .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.5); /* Black w/ opacity */ + /* Hidden by default */ + display: none; + /* Stay in place */ + position: fixed; + /* Sit on top */ + z-index: 1; + left: 0; + top: 0; + /* Full width */ + width: 100%; + /* Full height */ + height: 100%; + /* Enable scroll if needed */ + overflow: auto; + /* Fallback color */ + background-color: rgb(0, 0, 0); + /* Black w/ opacity */ + background-color: rgba(0, 0, 0, 0.5); } /* Modal Content/Box */ .modal-content { - background-color: yellow; - margin: 15% auto; /* 15% from the top and centered */ - padding: 15px; - border: 1px solid #888; - width: 40%; /* Could be more or less, depending on screen size */ + background-color: yellow; + /* 15% from the top and centered */ + margin: 15% auto; + padding: 15px; + border: 1px solid #888; + /* Could be more or less, depending on screen size */ + width: 40%; } /* The Close Button */ .close { - color: grey; - float: right; - font-size: 28px; - font-weight: bold; + color: grey; + float: right; + font-size: 28px; + font-weight: bold; } .close:hover, .close:focus { - color: red; - text-decoration: none; - cursor: pointer; + color: red; + text-decoration: none; + cursor: pointer; } +body { + font-family: "Archivo Narrow" +} -body { font-family: "Archivo Narrow"} -nav { font-size: .7em } +nav { + font-size: .7em +} + +@page { + size: A5; + margin: 1cm +} -@page { size: A5; margin: 1cm } @media print { - nav { display: none } + nav { + display: none + } } - -#interface_links{ +#interface_links { font-size: 32px; margin-top: 40px; } -#interface_links a{ - margin-right:10px; + +#interface_links a { + margin-right: 10px; }