mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-11-25 19:11:09 +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>
|
||||
<title>BookWyrm</title>
|
||||
<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/icons.css">
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/bulma.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">
|
||||
|
||||
|
|
@ -16,40 +17,65 @@
|
|||
<meta name="og:description" content="Federated Social Reading">
|
||||
<meta name="twitter:creator" content="@tripofmice">
|
||||
<meta name="twitter:site" content="@tripofmice">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="top-bar">
|
||||
<header class="row">
|
||||
<div id="branding">
|
||||
<a href="/">
|
||||
<img id="logo" src="/static/images/logo-small.png" alt="BookWyrm"></img>
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
<img src="/static/images/logo-small.png" alt="BookWyrm" width="112" height="28">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul id="menu">
|
||||
{% if request.user.is_authenticated %}
|
||||
<li><a href="/user/{{request.user.localname}}/shelves">Your shelves</a></li>
|
||||
{% endif %}
|
||||
<li><a href="/#feed">Updates</a></li>
|
||||
<li><a href="/books">Discover Books</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="actions">
|
||||
<div id="search">
|
||||
<form action="/search/">
|
||||
<input type="text" name="q" placeholder="Search for a book or user">
|
||||
<button type="submit">
|
||||
<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>
|
||||
</form>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
{% if request.user.is_authenticated %}
|
||||
<div id="notifications">
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
{% include 'snippets/avatar.html' with user=user %}
|
||||
{% include 'snippets/username.html' with user=request.user %}
|
||||
</div>
|
||||
<div class="navbar-dropdown">
|
||||
<a href="/user/{{request.user.localname}}" class="navbar-item">
|
||||
Profile
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Import books
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a href="/logout" class="navbar-item">
|
||||
Log out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a href="/notifications">
|
||||
<span class="icon icon-bell">
|
||||
<span class="hidden-text">Notitications</span>
|
||||
|
|
@ -57,20 +83,23 @@
|
|||
{% if request.user|notification_count %}<span class="count">{{ request.user | notification_count }}</span>{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="pulldown-container">
|
||||
{% include 'snippets/avatar.html' with user=request.user %}
|
||||
<ul class="pulldown">
|
||||
<li><a href="/user/{{ request.user }}">Your profile</a></li>
|
||||
<li><a href="/user-edit/">Settings</a></li>
|
||||
<li><a href="/import">Import Books</a></li>
|
||||
<li><a href="/manage_invites/">Invites</a></li>
|
||||
<li><a href="/logout/">Log out</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a href="/register" class="button is-primary">
|
||||
<strong>Sign up</strong>
|
||||
</a>
|
||||
<a href="/login" class="button is-light">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div id="main">
|
||||
{% block content %}
|
||||
|
|
|
|||
3
fr-dev
3
fr-dev
|
|
@ -44,6 +44,9 @@ case "$1" in
|
|||
test_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"
|
||||
;;
|
||||
|
|
|
|||
Loading…
Reference in a new issue