[chore/frontend] Refactor status templates slightly, put polls behind CWs if present (#2419)

* [chore/frontend] Reorder templates, allow polls to be inside content warnings

* show when multiple-choice
This commit is contained in:
tobi
2023-12-05 12:43:07 +01:00
committed by GitHub
parent 18d850ebae
commit dacfd413dc
6 changed files with 245 additions and 180 deletions

View File

@@ -113,10 +113,17 @@ main {
gap: 0.5rem;
}
details > summary {
.text-spoiler > summary, .text {
position: relative;
z-index: 2;
}
.text-spoiler > summary {
display: inline-block;
list-style: none;
padding-bottom: 0.5rem;
&::-webkit-details-marker {
display: none; /* Safari */
}
@@ -124,6 +131,8 @@ main {
.button {
white-space: nowrap;
cursor: pointer;
padding: 0.2rem 0.3rem;
font-size: 1rem;
}
}
@@ -132,20 +141,12 @@ main {
grid-row: span 1;
grid-column: 1 / span 3;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
details > summary {
padding-bottom: 0.5rem;
.button {
padding: 0.2rem 0.3rem;
font-size: 1rem;
}
}
a {
color: $link-fg;
text-decoration: underline;
@@ -239,6 +240,64 @@ main {
border: $boxshadow-border;
border-radius: $br-inner;
}
.poll {
background-color: $gray2;
z-index: 2;
display: flex;
flex-direction: column;
border-radius: $br;
padding: 0.5rem;
margin: 0;
gap: 1rem;
.poll-options {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
.poll-option {
display: flex;
flex-direction: column;
gap: 0.1rem;
label {
cursor: default;
}
meter {
width: 100%;
}
.poll-vote-summary {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
white-space: nowrap;
}
}
}
.poll-info {
background-color: $gray4;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: $br-inner;
padding: 0.25rem;
gap: 0.25rem;
span {
justify-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.media {
@@ -391,64 +450,6 @@ main {
}
}
.poll {
background-color: $gray2;
z-index: 2;
display: flex;
flex-direction: column;
border-radius: $br;
padding: 0.5rem;
margin: 0;
gap: 1rem;
.poll-options {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
.poll-option {
display: flex;
flex-direction: column;
gap: 0.1rem;
label {
cursor: default;
}
meter {
width: 100%;
}
.poll-vote-summary {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
white-space: nowrap;
}
}
}
.poll-info {
background-color: $gray4;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: $br-inner;
padding: 0.25rem;
gap: 0.25rem;
span {
justify-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.info {
display: flex;
background: $toot-info-bg;