mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-11-29 13:01:08 +00:00
Switches to Bulma for layout
This commit is contained in:
Mouse Reeve
parent
a2b3a79181
commit
49e94f8e8e
11 changed files with 11745 additions and 870 deletions
11624
bookwyrm/static/css/bulma.css
vendored
Normal file
11624
bookwyrm/static/css/bulma.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
bookwyrm/static/css/bulma.css.map
Normal file
1
bookwyrm/static/css/bulma.css.map
Normal file
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
40
bookwyrm/static/css/format.css
Normal file
40
bookwyrm/static/css/format.css
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
/* --- ICONS --- */
|
||||||
|
.icon {
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
vertical-align: sub;
|
||||||
|
}
|
||||||
|
.hidden-text {
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.icon .bubble {
|
||||||
|
background-color: #FF1654;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
top: -0.65rem;
|
||||||
|
right: -0.5rem;
|
||||||
|
height: 1rem;
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* --- TOGGLES --- */
|
||||||
|
input.toggle-control {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-content.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.toggle-control:checked ~ .toggle-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
@ -1,822 +0,0 @@
|
||||||
/* some colors that are okay: #247BA0 #70C1B2 #B2DBBF #F3FFBD #FF1654 */
|
|
||||||
|
|
||||||
/* general override */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 1.3em;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
background-color: #FFF;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #247BA0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 1rem;
|
|
||||||
padding: 0.5rem 0.2rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
border-bottom: 3px solid #B2DBBF;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 .edit-link {
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 0.9em;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
h2 .edit-link .icon {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
h3 small {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* fixed display top bar */
|
|
||||||
body {
|
|
||||||
padding-top: 90px;
|
|
||||||
}
|
|
||||||
#top-bar {
|
|
||||||
overflow: visible;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-bottom: 3px solid #247BA0;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #FFF;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
height: 47px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- header bar content */
|
|
||||||
#branding {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
#menu {
|
|
||||||
list-style: none;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
flex-grow: 2;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
#menu li {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 0.5em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
#menu a {
|
|
||||||
color: #555;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#actions {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
#actions > * {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
#actions > *:last-child {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#notifications .icon {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
#notifications a {
|
|
||||||
color: black;
|
|
||||||
text-decoration: none;
|
|
||||||
position: relative;
|
|
||||||
top: 0.2rem;
|
|
||||||
}
|
|
||||||
#notifications .count {
|
|
||||||
background-color: #FF1654;
|
|
||||||
color: white;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
top: -0.65rem;
|
|
||||||
right: -0.5rem;
|
|
||||||
height: 1rem;
|
|
||||||
width: 1rem;
|
|
||||||
}
|
|
||||||
.notification {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
padding: 1em 0;
|
|
||||||
background-color: #EEE;
|
|
||||||
}
|
|
||||||
.notification.unread {
|
|
||||||
background-color: #DDD;
|
|
||||||
}
|
|
||||||
|
|
||||||
#search button {
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main, header {
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 55rem;
|
|
||||||
padding-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* pulldown */
|
|
||||||
.pulldown-container {
|
|
||||||
position: relative;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulldown {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
list-style: none;
|
|
||||||
background: white;
|
|
||||||
padding: 1em;
|
|
||||||
right: 0;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
|
|
||||||
width: max-content;
|
|
||||||
text-align: left;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulldown-container:hover .pulldown {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulldown li a {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0.3em 0.8em
|
|
||||||
}
|
|
||||||
|
|
||||||
div.pulldown-button {
|
|
||||||
background-color: #eee;
|
|
||||||
border-radius: 0.3em;
|
|
||||||
color: #247BA0;
|
|
||||||
width: max-content;
|
|
||||||
margin: 0 auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.post div.pulldown-button {
|
|
||||||
border: 2px solid #247BA0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulldown-button form {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.pulldown-button button {
|
|
||||||
display: inline;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: inherit;
|
|
||||||
color: #247BA0;
|
|
||||||
}
|
|
||||||
div.pulldown-button .pulldown-toggle {
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
position: relative;
|
|
||||||
left: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.pulldown button {
|
|
||||||
display: block;
|
|
||||||
text-align: left;
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: white;
|
|
||||||
color: #247BA0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulldown button[disabled] {
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulldown button[disabled]:hover {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulldown button:hover, .pulldown li:hover {
|
|
||||||
background-color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* content area */
|
|
||||||
.content-container {
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
|
||||||
.content-container > * {
|
|
||||||
padding-left: 1em;
|
|
||||||
padding-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#feed {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-top: 70px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
margin-top: -2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* row component */
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
.row > * {
|
|
||||||
flex-grow: 1;
|
|
||||||
width: min-content;
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
.row > *:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.row.shrink > * {
|
|
||||||
flex-grow: 0;
|
|
||||||
width: max-content;
|
|
||||||
}
|
|
||||||
.row.wrap {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.column > * {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* discover books page grid of covers */
|
|
||||||
.book-grid .book-cover {
|
|
||||||
height: 176px;
|
|
||||||
width: auto;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.book-grid .no-cover {
|
|
||||||
width: 115px;
|
|
||||||
}
|
|
||||||
.book-grid > * {
|
|
||||||
margin-bottom: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* special case forms */
|
|
||||||
.review-form label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.review-form textarea {
|
|
||||||
width: 30rem;
|
|
||||||
height: 10rem;
|
|
||||||
}
|
|
||||||
.review-form.quote-form textarea#id_content {
|
|
||||||
height: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.follow-requests .row {
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
.follow-requests .row > *:first-child {
|
|
||||||
width: 20em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.login form {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
.login form p {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
padding: 0.5em 0;
|
|
||||||
}
|
|
||||||
.login form label {
|
|
||||||
width: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.book-form textarea {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
.book-form label {
|
|
||||||
display: inline-block;
|
|
||||||
width: 8rem;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
.book-form .row label {
|
|
||||||
width: max-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* general form stuff */
|
|
||||||
input, button {
|
|
||||||
padding: 0.2em 0.5em;
|
|
||||||
}
|
|
||||||
button, input[type="submit"] {
|
|
||||||
cursor: pointer;
|
|
||||||
width: max-content;
|
|
||||||
}
|
|
||||||
.content-container button {
|
|
||||||
border: none;
|
|
||||||
background-color: #247BA0;
|
|
||||||
color: white;
|
|
||||||
padding: 0.3em 0.8em;
|
|
||||||
font-size: 0.9em;
|
|
||||||
border-radius: 0.3em;
|
|
||||||
}
|
|
||||||
button.secondary {
|
|
||||||
background-color: #EEE;
|
|
||||||
color: #247BA0;
|
|
||||||
}
|
|
||||||
.post button.secondary {
|
|
||||||
border: 2px solid #247BA0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.warning {
|
|
||||||
background-color: #FF1654;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
form div {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* icons */
|
|
||||||
a .icon {
|
|
||||||
color: black;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
button .icon {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
vertical-align: sub;
|
|
||||||
}
|
|
||||||
.hidden-text {
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
position: absolute;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* star ratings */
|
|
||||||
.stars {
|
|
||||||
letter-spacing: -0.15em;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.rate-stars .icon {
|
|
||||||
cursor: pointer;
|
|
||||||
color: goldenrod;
|
|
||||||
}
|
|
||||||
.rate-stars label.icon {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
.rate-stars form {
|
|
||||||
display: inline;
|
|
||||||
width: min-content;
|
|
||||||
}
|
|
||||||
.rate-stars button.icon {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
.cover-container .stars {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.rate-stars:hover .icon:before {
|
|
||||||
content: '\e9d9';
|
|
||||||
}
|
|
||||||
.rate-stars form:hover ~ form .icon:before{
|
|
||||||
content: '\e9d7';
|
|
||||||
}
|
|
||||||
|
|
||||||
.review-form .rate-stars:hover .icon:before {
|
|
||||||
content: '\e9d9';
|
|
||||||
}
|
|
||||||
.review-form .rate-stars label {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
.review-form .rate-stars input + .icon:before {
|
|
||||||
content: '\e9d9';
|
|
||||||
}
|
|
||||||
.review-form .rate-stars input:checked + .icon:before {
|
|
||||||
content: '\e9d9';
|
|
||||||
}
|
|
||||||
.review-form .rate-stars input:checked + * ~ .icon:before {
|
|
||||||
content: '\e9d7';
|
|
||||||
}
|
|
||||||
.review-form .rate-stars:hover label.icon:before {
|
|
||||||
content: '\e9d9';
|
|
||||||
}
|
|
||||||
.review-form .rate-stars label.icon:hover:before {
|
|
||||||
content: '\e9d9';
|
|
||||||
}
|
|
||||||
.review-form .rate-stars label.icon:hover ~ label.icon:before{
|
|
||||||
content: '\e9d7';
|
|
||||||
}
|
|
||||||
.review-form .rate-stars input[type="radio"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* re-usable tab styles */
|
|
||||||
.tabs {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border-bottom: 3px solid #FF1654;
|
|
||||||
padding-left: 1em;
|
|
||||||
}
|
|
||||||
.tabs.secondary {
|
|
||||||
border-bottom: 3px solid #247BA0;
|
|
||||||
}
|
|
||||||
.tab {
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
border-radius: 0.25em 0.25em 0 0;
|
|
||||||
}
|
|
||||||
.secondary .tab {
|
|
||||||
padding: 0.25em 0.5em;
|
|
||||||
}
|
|
||||||
.tabs .tab.active {
|
|
||||||
background-color: #FF1654;
|
|
||||||
}
|
|
||||||
.tabs.secondary .tab.active {
|
|
||||||
background-color: #247BA0;
|
|
||||||
}
|
|
||||||
.tab.active a {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.user-pic {
|
|
||||||
width: 2em;
|
|
||||||
height: 2em;
|
|
||||||
border-radius: 50%;
|
|
||||||
vertical-align: top;
|
|
||||||
position: relative;
|
|
||||||
bottom: 0.35em;
|
|
||||||
}
|
|
||||||
.user-pic.large {
|
|
||||||
width: 5em;
|
|
||||||
height: 5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.user-profile .row > * {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
.user-profile .row > *:last-child {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-left: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* general book display */
|
|
||||||
.book-preview {
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 1;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.book-preview.grid {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-container {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
.cover-container button {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.book-cover {
|
|
||||||
width: 180px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.book-cover.small {
|
|
||||||
width: 50px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-cover {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.no-cover div {
|
|
||||||
position: absolute;
|
|
||||||
padding: 1em;
|
|
||||||
color: white;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.no-cover .title {
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
dl {
|
|
||||||
font-size: 0.9em;
|
|
||||||
margin-top: 0.5em;
|
|
||||||
}
|
|
||||||
dt {
|
|
||||||
float: left;
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
dd {
|
|
||||||
margin-bottom: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.all-shelves {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-left: 0;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.all-shelves h2 {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.all-shelves > div {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
.all-shelves > div:last-child {
|
|
||||||
padding-right: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
.all-shelves > div > * {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.all-shelves > div:first-child > * {
|
|
||||||
padding-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.covers-shelf {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
.covers-shelf .cover-container {
|
|
||||||
margin-right: 1em;
|
|
||||||
font-size: 0.9em;
|
|
||||||
overflow: unset;
|
|
||||||
width: min-content;
|
|
||||||
}
|
|
||||||
.covers-shelf .cover-container:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.covers-shelf .book-cover:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: #F3FFBD 0em 0em 1em 1em;
|
|
||||||
}
|
|
||||||
.covers-shelf .book-cover {
|
|
||||||
height: 11rem;
|
|
||||||
width: auto;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
|
||||||
float: right;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.all-shelves input[type='radio'] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.compose-popout input[type="radio"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.compose-suggestion {
|
|
||||||
display: none;
|
|
||||||
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
|
|
||||||
padding-bottom: 1em;
|
|
||||||
margin-top: 2em;
|
|
||||||
}
|
|
||||||
input:checked ~ .compose-suggestion {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.compose .book-preview {
|
|
||||||
background-color: #EEE;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
.compose button {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.compose .stars {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.2em;
|
|
||||||
border-radius: 0.2em;
|
|
||||||
background-color: #EEE;
|
|
||||||
}
|
|
||||||
.tag form {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
.tag a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
blockquote .icon-quote-open, blockquote .icon-quote-close, .quote blockquote:before, .quote blockquote:after {
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
blockquote .icon-quote-open {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote {
|
|
||||||
margin-bottom: 2em;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.quote blockquote {
|
|
||||||
background-color: white;
|
|
||||||
margin: 1em;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
.quote blockquote:before, .quote blockquote:after {
|
|
||||||
font-family: 'icomoon';
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.quote blockquote:before {
|
|
||||||
content: "\e904";
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.quote blockquote:after {
|
|
||||||
content: "\e903";
|
|
||||||
bottom: 1em;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interaction {
|
|
||||||
background-color: #B2DBBF;
|
|
||||||
border-radius: 0 0 0.5em 0.5em;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
.interaction > * {
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
.interaction button:hover {
|
|
||||||
box-shadow: #247BA0 0em 0em 1em 0em;
|
|
||||||
color: #247BA0;
|
|
||||||
}
|
|
||||||
.interaction button {
|
|
||||||
background: white;
|
|
||||||
height: 2em;
|
|
||||||
min-width: 3em;
|
|
||||||
padding: 0;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
.interaction .active button .icon {
|
|
||||||
color: #FF1654;
|
|
||||||
}
|
|
||||||
.interaction textarea {
|
|
||||||
height: 2em;
|
|
||||||
width: 23em;
|
|
||||||
float: left;
|
|
||||||
padding: 0.25em;
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
.interaction textarea:valid, .interaction textarea:focus {
|
|
||||||
height: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin: 1em;
|
|
||||||
}
|
|
||||||
tr {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: #EEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
th, td {
|
|
||||||
padding: 1em;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.errorlist {
|
|
||||||
list-style: none;
|
|
||||||
font-size: 0.8em;
|
|
||||||
color: #FF1654;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* status css */
|
|
||||||
.time-ago {
|
|
||||||
float: right;
|
|
||||||
display: block;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.post {
|
|
||||||
background-color: #EFEFEF;
|
|
||||||
padding-top: 1em;
|
|
||||||
padding-bottom: 1em;
|
|
||||||
}
|
|
||||||
.post h2, .compose-suggestion h2 {
|
|
||||||
position: relative;
|
|
||||||
right: 2em;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.post .time-ago {
|
|
||||||
position: relative;
|
|
||||||
left: 2em;
|
|
||||||
}
|
|
||||||
.post .user-pic, .compose-suggestion .user-pic {
|
|
||||||
right: 0.25em;
|
|
||||||
}
|
|
||||||
.post h2 .subhead {
|
|
||||||
display: block;
|
|
||||||
margin-left: 2em;
|
|
||||||
}
|
|
||||||
.post .subhead .time-ago {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* status page with replies */
|
|
||||||
.comment-thread .reply h2 {
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
.comment-thread .post {
|
|
||||||
margin-left: 4em;
|
|
||||||
border-left: 2px solid #247BA0;
|
|
||||||
}
|
|
||||||
.comment-thread .post.depth-1 {
|
|
||||||
margin-left: 0;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.comment-thread .post.depth-2 {
|
|
||||||
margin-left: 1em;
|
|
||||||
}
|
|
||||||
.comment-thread .post.depth-3 {
|
|
||||||
margin-left: 2em;
|
|
||||||
}
|
|
||||||
.comment-thread .post.depth-4 {
|
|
||||||
margin-left: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* pagination */
|
|
||||||
.pagination a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.pagination .next {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* special one-off "delete all data" banner */
|
|
||||||
#warning {
|
|
||||||
background-color: #FF1654;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
@ -4,8 +4,9 @@
|
||||||
<head>
|
<head>
|
||||||
<title>BookWyrm</title>
|
<title>BookWyrm</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link type="text/css" rel="stylesheet" href="/static/format.css">
|
<link type="text/css" rel="stylesheet" href="/static/css/bulma.css">
|
||||||
<link type="text/css" rel="stylesheet" href="/static/icons.css">
|
<link type="text/css" rel="stylesheet" href="/static/css/format.css">
|
||||||
|
<link type="text/css" rel="stylesheet" href="/static/css/icons.css">
|
||||||
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.ico">
|
<link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.ico">
|
||||||
|
|
||||||
|
|
@ -16,61 +17,89 @@
|
||||||
<meta name="og:description" content="Federated Social Reading">
|
<meta name="og:description" content="Federated Social Reading">
|
||||||
<meta name="twitter:creator" content="@tripofmice">
|
<meta name="twitter:creator" content="@tripofmice">
|
||||||
<meta name="twitter:site" content="@tripofmice">
|
<meta name="twitter:site" content="@tripofmice">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="top-bar">
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||||
<header class="row">
|
<div class="navbar-brand">
|
||||||
<div id="branding">
|
<a class="navbar-item" href="/">
|
||||||
<a href="/">
|
<img src="/static/images/logo-small.png" alt="BookWyrm" width="112" height="28">
|
||||||
<img id="logo" src="/static/images/logo-small.png" alt="BookWyrm"></img>
|
</a>
|
||||||
|
<form class="navbar-item" action="/search/">
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<input class="input" type="text" name="q" placeholder="Search for a book or user">
|
||||||
|
<button class="button" type="submit">
|
||||||
|
<span class="icon icon-search">
|
||||||
|
<span class="hidden-text">search</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<label for="main-nav" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="mainNav">
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input class="toggle-control" type="checkbox" id="main-nav">
|
||||||
|
<div id="mainNav" class="navbar-menu toggle-content">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<a href="/#feed" class="navbar-item">
|
||||||
|
Feed
|
||||||
|
</a>
|
||||||
|
<a href="/user/{{request.user.localname}}/shelves" class="navbar-item">
|
||||||
|
Your Books
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul id="menu">
|
<div class="navbar-end">
|
||||||
{% if request.user.is_authenticated %}
|
{% if request.user.is_authenticated %}
|
||||||
<li><a href="/user/{{request.user.localname}}/shelves">Your shelves</a></li>
|
<div class="navbar-item has-dropdown is-hoverable">
|
||||||
{% endif %}
|
<div class="navbar-link">
|
||||||
<li><a href="/#feed">Updates</a></li>
|
{% include 'snippets/avatar.html' with user=user %}
|
||||||
<li><a href="/books">Discover Books</a></li>
|
{% include 'snippets/username.html' with user=request.user %}
|
||||||
</ul>
|
</div>
|
||||||
|
<div class="navbar-dropdown">
|
||||||
<div id="actions">
|
<a href="/user/{{request.user.localname}}" class="navbar-item">
|
||||||
<div id="search">
|
Profile
|
||||||
<form action="/search/">
|
</a>
|
||||||
<input type="text" name="q" placeholder="Search for a book or user">
|
<a class="navbar-item">
|
||||||
<button type="submit">
|
Import books
|
||||||
<span class="icon icon-search">
|
</a>
|
||||||
<span class="hidden-text">search</span>
|
<hr class="navbar-divider">
|
||||||
</span>
|
<a href="/logout" class="navbar-item">
|
||||||
</button>
|
Log out
|
||||||
</form>
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% if request.user.is_authenticated %}
|
<div class="navbar-item">
|
||||||
<div id="notifications">
|
<div class="buttons">
|
||||||
<a href="/notifications">
|
<a href="/notifications">
|
||||||
<span class="icon icon-bell">
|
<span class="icon icon-bell">
|
||||||
<span class="hidden-text">Notitications</span>
|
<span class="hidden-text">Notitications</span>
|
||||||
</span>
|
</span>
|
||||||
{% if request.user|notification_count %}<span class="count">{{ request.user | notification_count }}</span>{% endif %}
|
{% if request.user|notification_count %}<span class="count">{{ request.user | notification_count }}</span>{% endif %}
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pulldown-container">
|
{% else %}
|
||||||
{% include 'snippets/avatar.html' with user=request.user %}
|
<div class="navbar-item">
|
||||||
<ul class="pulldown">
|
<div class="buttons">
|
||||||
<li><a href="/user/{{ request.user }}">Your profile</a></li>
|
<a href="/register" class="button is-primary">
|
||||||
<li><a href="/user-edit/">Settings</a></li>
|
<strong>Sign up</strong>
|
||||||
<li><a href="/import">Import Books</a></li>
|
</a>
|
||||||
<li><a href="/manage_invites/">Invites</a></li>
|
<a href="/login" class="button is-light">
|
||||||
<li><a href="/logout/">Log out</a></li>
|
Log in
|
||||||
</ul>
|
</a>
|
||||||
</p>
|
</div>
|
||||||
{% endif %}
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<div id="main">
|
<div id="main">
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
|
||||||
3
fr-dev
3
fr-dev
|
|
@ -44,6 +44,9 @@ case "$1" in
|
||||||
test_report)
|
test_report)
|
||||||
docker-compose exec web coverage report
|
docker-compose exec web coverage report
|
||||||
;;
|
;;
|
||||||
|
collectstatic)
|
||||||
|
docker-compose exec web python manage.py collectstatic
|
||||||
|
;;
|
||||||
*)
|
*)
|
||||||
echo "Unrecognised command. Try: up, initdb, resetdb, makemigrations, migrate, shell, dbshell, restart_celery, test, test_report"
|
echo "Unrecognised command. Try: up, initdb, resetdb, makemigrations, migrate, shell, dbshell, restart_celery, test, test_report"
|
||||||
;;
|
;;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue