Plume/assets/themes/default/_global.scss
fdb-hiroshima 006b44f580 Add support for generic timeline (#525)
* Begin adding support for timeline

* fix some bugs with parser

* fmt

* add error reporting for parser

* add tests for timeline query parser

* add rejection tests for parse

* begin adding support for lists

also run migration before compiling, so schema.rs is up to date

* add sqlite migration

* end adding lists

still miss tests and query integration

* cargo fmt

* try to add some tests

* Add some constraint to db, and fix list test

and refactor other tests to use begin_transaction

* add more tests for lists

* add support for lists in query executor

* add keywords for including/excluding boosts and likes

* cargo fmt

* add function to list lists used by query

will make it easier to warn users when creating timeline with unknown lists

* add lang support

* add timeline creation error message when using unexisting lists

* Update .po files

* WIP: interface for timelines

* don't use diesel for migrations

not sure how it passed the ci on the other branch

* add some tests for timeline

add an int representing the order of timelines (first one will be on
top, second just under...)
use first() instead of limit(1).get().into_iter().nth(0)
remove migrations from build artifacts as they are now compiled in

* cargo fmt

* remove timeline order

* fix tests

* add tests for timeline creation failure

* cargo fmt

* add tests for timelines

* add test for matching direct lists and keywords

* add test for language filtering

* Add a more complex test for Timeline::matches, and fix TQ::matches for TQ::Or

* Make the main crate compile + FMT

* Use the new timeline system

- Replace the old "feed" system with timelines
- Display all timelines someone can access on their home page (either their personal ones, or instance timelines)
- Remove functions that were used to get user/local/federated feed
- Add new posts to timelines
- Create a default timeline called "My feed" for everyone, and "Local feed"/"Federated feed" with timelines

@fdb-hiroshima I don't know if that's how you pictured it? If you imagined it differently I can of course make changes.

I hope I didn't forgot anything…

* Cargo fmt

* Try to fix the migration

* Fix tests

* Fix the test (for real this time ?)

* Fix the tests ? + fmt

* Use Kind::Like and Kind::Reshare when needed

* Forgot to run cargo fmt once again

* revert translations

* fix reviewed stuff

* reduce code duplication by macros

* cargo fmt
2019-10-07 19:08:20 +02:00

626 lines
9.0 KiB
SCSS

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
margin: 0;
padding: 0;
background: $background;
color: $text-color;
font-family: $route159;
::selection {
background: transparentize($primary, 0.7);
}
::-moz-selection {
background: transparentize($primary, 0.7);
}
}
a, a:visited {
color: $primary;
text-decoration: none;
}
a::selection {
color: $background;
}
a::-moz-selection {
color: $background;
}
small {
margin-left: 1em;
color: transparentize($text-color, 0.6);
font-size: 0.75em;
word-wrap: break-word;
word-break: break-all;
}
.center {
text-align: center;
font-weight: bold;
opacity: 0.6;
padding: 5em;
}
.right {
text-align: right;
display: flex;
justify-content: end;
align-items: center;
}
.spaced {
margin: 4rem 0;
}
.banner {
background: $gray;
padding-top: 2em;
padding-bottom: 1em;
margin: 3em 0px;
}
.hidden {
display: none;
appearance: none;
}
/// Main
body > main > *, .h-feed > * {
margin: 1em $horizontal-margin;
}
body > main > .h-entry, .h-feed {
margin: 0;
}
body > main {
min-height: 70vh;
}
main {
h1, h2, h3, h4, h5, h6 {
font-family: $route159;
line-height: 1.15;
font-weight: 300;
&.article {
max-width: $article-width;
}
}
h1 {
font-size: 2.5em;
font-weight: 300;
margin-top: 1em;
&.article {
margin: 1em auto 0.5em;
font-family: $playfair;
font-size: 2.5em;
font-weight: normal;
}
}
h2 {
font-size: 1.75em;
font-weight: 300;
&.article {
font-size: 1.25em;
margin-bottom: 0.5em;
}
}
h3, h4, h5, h6 {
font-size: 1.5em;
font-weight: 300;
&.article {
margin: auto;
font-size: 1.1em;
margin-bottom: 0.5em;
}
}
.cover {
padding: 0px;
margin: 0px;
width: auto;
min-height: 50vh;
background-position: center;
background-size: cover;
overflow: hidden;
}
}
/// Errors
p.error {
color: $red;
font-weight: bold;
}
/// User page
.user h1 {
display: flex;
flex-direction: row;
align-items: center;
margin: 0px;
}
.user .avatar.medium {
margin-left: 0px;
}
.badge {
margin-right: 1em;
padding: 0.35em 1em;
background: $background;
color: $primary;
border: 1px solid $primary;
font-size: 1rem;
}
.user-summary {
margin: 2em 0px;
}
/// Cards
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0 5%;
margin: 1rem 0 5rem;
}
.card {
flex: 1;
display: flex;
flex-direction: column;
min-width: 20em;
min-height: 20em;
margin: 1em;
box-sizing: border-box;
background: $gray;
text-overflow: ellipsis;
> * {
margin: 20px;
}
.cover {
min-height: 10em;
background-position: center;
background-size: cover;
margin: 0px;
}
h3 {
margin: 0.75em 20px;
font-family: $playfair;
font-size: 1.75em;
font-weight: normal;
a {
transition: color 0.1s ease-in;
color: $text-color;
&:hover { color: $primary; }
}
}
main {
flex: 1;
font-family: $lora;
font-size: 1em;
line-height: 1.25;
text-align: left;
overflow: hidden;
}
}
.list > .card {
background: transparent;
margin: 2em 0;
min-height: 3em;
padding: 1em;
transition: background 0.1s ease-in;
&:hover {
background-color: $gray;
}
&.compact {
margin: 0;
padding: 0 1em;
}
h3 {
margin: 0;
}
}
/// Instance presentation
.presentation {
max-width: none;
& > h2, & > a {
text-align: center;
}
& > a {
font-size: 1.2em;
margin: 1em;
}
}
// Stats
.stats {
display: flex;
justify-content: space-around;
margin: 2em;
> div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p {
text-align: center;
}
em {
font-weight: bold;
display: block;
margin: 1em 0;
}
}
/// Pagination
.pagination {
display: flex;
justify-content: space-evenly;
> * {
padding: 2em;
}
}
/// Flex boxes
.flex {
display: flex;
flex-direction: row;
align-items: center;
&.vertical {
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
small {
margin: initial;
}
}
.grow {
flex: 1;
margin: 0 1em;
}
.grow:first-child {
margin: 1em 0;
}
}
.left-icon {
align-self: center;
padding: 1em;
background: $gray;
border-radius: 50px;
margin: 1em;
margin-right: 2em;
}
/// Footer
body > footer {
display: flex;
align-content: center;
justify-content: space-around;
background: $primary;
color: $primary-text-color;
margin-top: 5em;
* {
margin: 0;
}
hr {
transform: skew(-15deg);
background: $primary-text-color;
border: none;
width: .2em;
}
a, a:visited {
color: $primary-text-color;
}
div {
display: flex;
flex-direction: column;
flex-basis: 20%;
margin: 2em 0;
transition: all 0.1s ease-in;
& > * {
display: block;
margin: 1em 0;
}
}
}
/// Media
figure {
text-align: center;
margin: 2em;
max-width: 100%;
width: auto;
height: auto;
> * {
max-width: 100%;
}
figcaption {
padding: 1em;
}
audio, video {
width: 100%;
}
}
.preview {
display: block;
max-width: 100px;
max-height: 100px;
width: auto;
height: auto;
margin-right: 20px;
}
.media-preview {
min-height: 8em;
&:not(.image) {
background-color: #7765E3;
background-repeat: no-repeat;
background-position: center;
background-size: 4em;
}
&.unknown {
background-image: url('/static/images/unknown-file.svg');
display: block;
}
&.audio {
background-image: url('/static/images/audio-file.svg');
}
&.video {
background-image: url('/static/images/video-file.svg');
}
}
/// Avatars
.avatar {
background-position: center;
background-size: cover;
border-radius: 100%;
&.small {
width: 50px;
height: 50px;
}
&.medium {
width: 100px;
height: 100px;
margin: 20px;
}
&.padded {
margin-right: 2rem;
}
}
/// Tabs
.tabs {
border-bottom: 1px solid $gray;
padding: 0px;
margin: auto $horizontal-margin 2em;
overflow: auto;
display: flex;
a {
display: inline-block;
color: $text-color;
padding: 1em;
&.selected {
color: $primary;
border-bottom: 1px solid $primary;
}
}
}
/// Small screens
@media screen and (max-width: 600px) {
@keyframes menuOpening {
from {
transform: scaleX(0);
transform-origin: left;
opacity: 0;
}
to {
transform: scaleX(1);
transform-origin: left;
opacity: 1;
}
}
body > header {
flex-direction: column;
nav#menu {
display: inline-flex;
z-index: 21;
}
#content {
display: none;
appearance: none;
text-align: center;
z-index: 20;
}
}
body > header:focus-within #content, #content.show {
position: fixed;
display: flex;
flex-direction: column;
justify-content: flex-start;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
animation: 0.2s menuOpening;
&::before {
content: "";
position: absolute;
transform: skewX(-10deg);
top: 0;
left: -20%;
width: 100%;
height: 100%;
z-index: -10;
background: $primary;
}
> nav {
flex-direction: column;
align-items: flex-start;
a {
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
padding: 1rem 1.5rem;
color: $background;
font-size: 1.4em;
font-weight: 300;
&.title { font-size: 1.8em; }
> *:first-child { width: 3rem; }
> img:first-child { height: 3rem; }
> *:last-child { margin-left: 1rem; }
> nav hr {
display: block;
margin: 0;
width: 100%;
border: solid $background 0.1rem;
}
.mobile-label { display: initial; }
}
}
}
main .article-meta {
> *, .comments {
margin: 0 5%;
}
> p {
margin: 2em 5%;
font-size: 0.9em;
}
.comments > * { margin: auto 5%; }
.comments .comment { padding: 2em 0px; }
}
main .article-info, main article, main h1.article, main h2.article {
max-width: 90vw;
}
.card {
min-width: 80%;
min-height: 80%;
}
.tabs {
margin: auto 0px 2em;
}
.stats { flex-direction: column; }
body > footer {
flex-direction: column;
align-items: center;
}
body > footer * {
margin: 1em auto;
text-align: center;
}
.flex.wrap { flex-direction: column; }
.cards, .list {
margin: 1rem 0 5rem;
}
.split {
flex-direction: column;
margin: 0;
& > * {
max-width: 100%;
}
}
.bottom-bar {
flex-direction: column;
align-items: center;
& > div {
margin: 0;
}
}
main .article-meta .comments .comment {
header {
flex-direction: column;
}
.content {
margin-top: 0.5em;
}
}
}