Merge pull request #348 from nickwynja/sticky
Text-based browser spacing issues and sticky headers enhancement
This commit is contained in:
commit
e1288c8a08
|
@ -109,6 +109,7 @@ h6 {
|
|||
ul,
|
||||
ol {
|
||||
padding-left: var(--whole);
|
||||
margin-left: var(--nano);
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -124,13 +125,22 @@ button {
|
|||
border-radius: var(--common-radius);
|
||||
}
|
||||
|
||||
section > footer > a,
|
||||
section > footer > form > button {
|
||||
section header a {
|
||||
display: flex;
|
||||
color: var(--fg-status);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
margin-right: var(--micro);
|
||||
margin-left: var(--micro);
|
||||
}
|
||||
|
||||
section > footer > div > a,
|
||||
section > footer > div > form > button {
|
||||
color: var(--fg-status);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
section > footer > form > button {
|
||||
section > footer > div > form > button {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
@ -240,6 +250,11 @@ section video {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
section > h1 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.profile > img,
|
||||
.profile > h1 {
|
||||
display: inline-block;
|
||||
|
@ -278,11 +293,6 @@ section audio {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
section > :first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.content > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
@ -305,15 +315,6 @@ nav {
|
|||
margin: var(--whole) 0;
|
||||
}
|
||||
|
||||
section header a {
|
||||
display: flex;
|
||||
color: var(--fg-status);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
margin-right: var(--micro);
|
||||
margin-left: var(--micro);
|
||||
}
|
||||
|
||||
nav > ul > li > a {
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
|
@ -335,11 +336,20 @@ section {
|
|||
}
|
||||
|
||||
section > header {
|
||||
height: var(--line);
|
||||
display: flex;
|
||||
margin-bottom: var(--whole);
|
||||
justify-content: space-between;
|
||||
background: var(--bg);
|
||||
color: var(--fg-status);
|
||||
height: var(--line);
|
||||
margin-bottom: -10px;
|
||||
margin-top: -10px;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
section > header > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
section header a > .avatar {
|
||||
|
@ -349,10 +359,9 @@ section header a > .avatar {
|
|||
margin-right: var(--micro);
|
||||
}
|
||||
|
||||
section header span {
|
||||
display: flex;
|
||||
section header .author {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
section header .author > a:first-child {
|
||||
margin-left: 0;
|
||||
color: var(--fg-light);
|
||||
|
@ -384,17 +393,24 @@ section > .centered-footer {
|
|||
}
|
||||
|
||||
section > footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--whole);
|
||||
color: var(--fg-status);
|
||||
}
|
||||
|
||||
section > footer > * {
|
||||
section > footer br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
section > footer > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
section > footer > div > * {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
section > footer > form > button.liked {
|
||||
section > footer > div > form > button.liked {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
|
@ -417,7 +433,6 @@ nav > ul > li {
|
|||
}
|
||||
|
||||
.profile {
|
||||
margin-top: var(--whole);
|
||||
display: flex;
|
||||
margin-bottom: var(--whole);
|
||||
}
|
||||
|
@ -437,7 +452,7 @@ progress {
|
|||
/* content warning! */
|
||||
summary {
|
||||
padding: var(--milli);
|
||||
margin: 0;
|
||||
margin-top: var(--whole);
|
||||
cursor: pointer;
|
||||
border: var(--pico) solid var(--bg-selection);
|
||||
}
|
||||
|
|
|
@ -151,11 +151,11 @@ module.exports = {
|
|||
searchLabel: "Add word(s) to look for in downloaded messages.",
|
||||
// posts and comments
|
||||
commentDescription: ({ parentUrl }) => [
|
||||
"commented on ",
|
||||
" commented on ",
|
||||
a({ href: parentUrl }, " thread"),
|
||||
],
|
||||
replyDescription: ({ parentUrl }) => [
|
||||
"replied to ",
|
||||
" replied to ",
|
||||
a({ href: parentUrl }, " message"),
|
||||
],
|
||||
mysteryDescription: "posted a mysterious message",
|
||||
|
@ -322,11 +322,11 @@ module.exports = {
|
|||
"Buscá las siguientes palabras por los mensajes que tenés descargados.",
|
||||
// posts and comments
|
||||
commentDescription: ({ parentUrl }) => [
|
||||
"comentado en el hilo ",
|
||||
" comentado en el hilo ",
|
||||
a({ href: parentUrl }, ""),
|
||||
],
|
||||
replyDescription: ({ parentUrl }) => [
|
||||
"respondido al mensaje ",
|
||||
" respondido al mensaje ",
|
||||
a({ href: parentUrl }, ""),
|
||||
],
|
||||
mysteryDescription: "publicó un mensaje misterioso",
|
||||
|
@ -490,11 +490,11 @@ module.exports = {
|
|||
"Füge Wörte hinzu nach denen in heruntergeladenen Nachrichten gesucht werden soll.",
|
||||
// posts and comments
|
||||
commentDescription: ({ parentUrl }) => [
|
||||
"kommentierte auf ",
|
||||
" kommentierte auf ",
|
||||
a({ href: parentUrl }, " Thread"),
|
||||
],
|
||||
replyDescription: ({ parentUrl }) => [
|
||||
"antwortete auf ",
|
||||
" antwortete auf ",
|
||||
a({ href: parentUrl }, " Nachricht"),
|
||||
],
|
||||
mysteryDescription: "veröffentlichte eine mysteriöse Nachricht",
|
||||
|
|
|
@ -8,6 +8,7 @@ const MarkdownIt = require("markdown-it");
|
|||
const {
|
||||
a,
|
||||
article,
|
||||
br,
|
||||
body,
|
||||
button,
|
||||
details,
|
||||
|
@ -220,38 +221,45 @@ const postInAside = (msg) => {
|
|||
class: messageClasses.join(" "),
|
||||
},
|
||||
header(
|
||||
span(
|
||||
{ class: "author" },
|
||||
a(
|
||||
{ href: url.author },
|
||||
img({ class: "avatar", src: url.avatar, alt: "" }),
|
||||
msg.value.meta.author.name
|
||||
div(
|
||||
span(
|
||||
{ class: "author" },
|
||||
a(
|
||||
{ href: url.author },
|
||||
img({ class: "avatar", src: url.avatar, alt: "" }),
|
||||
msg.value.meta.author.name
|
||||
),
|
||||
postOptions[msg.value.meta.postType]
|
||||
),
|
||||
postOptions[msg.value.meta.postType]
|
||||
),
|
||||
span(
|
||||
{ class: "time" },
|
||||
isPrivate ? "🔒" : null,
|
||||
a({ href: url.link }, timeAgo)
|
||||
span(
|
||||
{ class: "time" },
|
||||
isPrivate ? "🔒" : null,
|
||||
a({ href: url.link }, nbsp, timeAgo)
|
||||
)
|
||||
)
|
||||
),
|
||||
articleContent,
|
||||
footer(
|
||||
form(
|
||||
{ action: url.likeForm, method: "post" },
|
||||
button(
|
||||
{
|
||||
name: "voteValue",
|
||||
type: "submit",
|
||||
value: likeButton.value,
|
||||
class: likeButton.class,
|
||||
},
|
||||
`❤ ${likeCount}`
|
||||
)
|
||||
div(
|
||||
form(
|
||||
{ action: url.likeForm, method: "post" },
|
||||
button(
|
||||
{
|
||||
name: "voteValue",
|
||||
type: "submit",
|
||||
value: likeButton.value,
|
||||
class: likeButton.class,
|
||||
},
|
||||
`❤ ${likeCount}`
|
||||
)
|
||||
),
|
||||
a({ href: url.comment }, i18n.comment),
|
||||
isPrivate || isRoot || isFork
|
||||
? null
|
||||
: a({ href: url.reply }, nbsp, i18n.reply),
|
||||
a({ href: url.json }, nbsp, i18n.json)
|
||||
),
|
||||
a({ href: url.comment }, i18n.comment),
|
||||
isPrivate || isRoot || isFork ? null : a({ href: url.reply }, i18n.reply),
|
||||
a({ href: url.json }, i18n.json)
|
||||
br()
|
||||
)
|
||||
);
|
||||
};
|
||||
|
@ -418,19 +426,21 @@ const post = ({ msg, aside = false }) => {
|
|||
style: `margin-left: ${depth}rem;`,
|
||||
},
|
||||
header(
|
||||
span(
|
||||
{ class: "author" },
|
||||
a(
|
||||
{ href: url.author },
|
||||
img({ class: "avatar", src: url.avatar, alt: "" }),
|
||||
name
|
||||
div(
|
||||
span(
|
||||
{ class: "author" },
|
||||
a(
|
||||
{ href: url.author },
|
||||
img({ class: "avatar", src: url.avatar, alt: "" }),
|
||||
name
|
||||
),
|
||||
postOptions[msg.value.meta.postType]
|
||||
),
|
||||
postOptions[msg.value.meta.postType]
|
||||
),
|
||||
span(
|
||||
{ class: "time" },
|
||||
isPrivate ? "🔒" : null,
|
||||
a({ href: url.link }, timeAgo)
|
||||
span(
|
||||
{ class: "time" },
|
||||
isPrivate ? "🔒" : null,
|
||||
a({ href: url.link }, nbsp, timeAgo)
|
||||
)
|
||||
)
|
||||
),
|
||||
articleContent,
|
||||
|
@ -447,21 +457,26 @@ const post = ({ msg, aside = false }) => {
|
|||
div({ id: `centered-footer-${encoded.key}`, class: "centered-footer" }),
|
||||
|
||||
footer(
|
||||
form(
|
||||
{ action: url.likeForm, method: "post" },
|
||||
button(
|
||||
{
|
||||
name: "voteValue",
|
||||
type: "submit",
|
||||
value: likeButton.value,
|
||||
class: likeButton.class,
|
||||
},
|
||||
`❤ ${likeCount}`
|
||||
)
|
||||
div(
|
||||
form(
|
||||
{ action: url.likeForm, method: "post" },
|
||||
button(
|
||||
{
|
||||
name: "voteValue",
|
||||
type: "submit",
|
||||
value: likeButton.value,
|
||||
class: likeButton.class,
|
||||
},
|
||||
`❤ ${likeCount}`
|
||||
)
|
||||
),
|
||||
a({ href: url.comment }, i18n.comment),
|
||||
isPrivate || isRoot || isFork
|
||||
? null
|
||||
: a({ href: url.reply }, nbsp, i18n.reply),
|
||||
a({ href: url.json }, nbsp, i18n.json)
|
||||
),
|
||||
a({ href: url.comment }, i18n.comment),
|
||||
isPrivate || isRoot || isFork ? null : a({ href: url.reply }, i18n.reply),
|
||||
a({ href: url.json }, i18n.json)
|
||||
br()
|
||||
)
|
||||
);
|
||||
|
||||
|
@ -572,7 +587,7 @@ exports.authorView = ({
|
|||
|
||||
const prefix = section(
|
||||
{ class: "message" },
|
||||
header(
|
||||
div(
|
||||
{ class: "profile" },
|
||||
img({ class: "avatar", src: avatarUrl }),
|
||||
h1(name)
|
||||
|
@ -583,12 +598,15 @@ exports.authorView = ({
|
|||
}),
|
||||
description !== "" ? article({ innerHTML: markdown(description) }) : null,
|
||||
footer(
|
||||
a({ href: `/likes/${encodeURIComponent(feedId)}` }, i18n.viewLikes),
|
||||
span(relationshipText),
|
||||
contactForm,
|
||||
relationship === null
|
||||
? a({ href: `/profile/edit` }, i18n.editProfile)
|
||||
: null
|
||||
div(
|
||||
a({ href: `/likes/${encodeURIComponent(feedId)}` }, i18n.viewLikes),
|
||||
span(nbsp, relationshipText),
|
||||
contactForm,
|
||||
relationship === null
|
||||
? a({ href: `/profile/edit` }, nbsp, i18n.editProfile)
|
||||
: null
|
||||
),
|
||||
br()
|
||||
)
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in New Issue