varia
/
xppl
13
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Compare commits

base: varia:0c35a4a008db709c23b2ebf9b1947a3c7eb03ae1
Branches Tags
varia:add-change-log
varia:ansible-setup-and-deploy
varia:master
...
compare: varia:5bef479381b6b1c934ff7915c7131f1b6cf574fb
Branches Tags
varia:add-change-log
varia:ansible-setup-and-deploy
varia:master

2 Commits
0c35a4a008 ... 5bef479381

Author SHA1 Message Date
suroh 5bef479381 Fixed #newstext header to display above all body content.
6 years ago
suroh 81bb4479ce Cleaned up CSS, removed bad commenting and obsolete styles. Updated API username and key for annotations.
6 years ago
2 changed files with 384 additions and 303 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 4
      xppl/getannot.py
  2. 683
      xppl/static/css/style.css

4
xppl/getannot.py
View File

@ -6,7 +6,7 @@ from flask import request
def get_annotations(): def get_annotations():
# TODO(decentral1se): remove this from the source # TODO(decentral1se): remove this from the source
KEY = "6879-n8AksBoSB7kYoQ3eEwzpEr3nFQEmSp3XN-0PcKL_Sik" KEY = "6879-H5GbA2KyFIeEUM1BubjVTLP8yM3GMyHgOAjjNe_GBxY"
# a dictionary containing necessary http headers # a dictionary containing necessary http headers
headers = { headers = {
@ -15,7 +15,7 @@ def get_annotations():
"Authorization": "Bearer %s" % KEY "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]) search_url = "".join([base_url])

683
xppl/static/css/style.css
View File

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

Write Preview
Loading…
Cancel
Save