100 lines
3.3 KiB
Diff
100 lines
3.3 KiB
Diff
|
From 00fb74aa84160ac0b484b7db4050b3e20b76b781 Mon Sep 17 00:00:00 2001
|
||
|
|
From: ilja <git@ilja.space>
|
||
|
|
Date: Wed, 21 Aug 2024 17:57:40 +0200
|
||
|
|
Subject: [PATCH] commit 1 ======== Improve style for quoted text in
|
||
|
|
RichContent
|
||
|
|
|
||
|
|
Previously quoted text (e.g. in Markdown `> Some text`) was italic
|
||
|
|
When two different quotes were made, there was no destinction between the two, making it look like one quote
|
||
|
|
This is confusing
|
||
|
|
|
||
|
|
Now we have a vertical line in front of the quote
|
||
|
|
When two different pieces of text are quoted, it is now clear because the lines are separated
|
||
|
|
This vertical line is a typical way of visualising quoted text, so it should be easy to understand what it is
|
||
|
|
|
||
|
|
commit 2
|
||
|
|
========
|
||
|
|
Make text faint for blockquotes
|
||
|
|
|
||
|
|
In code review it was decided that faint text for blockquotes should be used.
|
||
|
|
I copied how it was done in other places to faint text.
|
||
|
|
|
||
|
|
When making a theme for *oma-fe, there's a check for how readable things remain.
|
||
|
|
I'm unsure how that exactly works, but timestamps for a status is also faint,
|
||
|
|
so by using the same way of doing this, this should also be taken into account
|
||
|
|
for the theming engine.
|
||
|
|
|
||
|
|
commit 3
|
||
|
|
========
|
||
|
|
Fix spacing between paragraph and blockquote
|
||
|
|
|
||
|
|
Blockquotes are blocks, so not wrapped in an extra p-tag.
|
||
|
|
|
||
|
|
In statusses this gave an unfortunate result that the margins were different.
|
||
|
|
A p-tag has a bottom margin of 1em. Blockquotes had 0.2em top and bottom.
|
||
|
|
|
||
|
|
So under a paragraph there was 1em space, but under the blockquote, there was only 0.2em space.
|
||
|
|
|
||
|
|
The last p-tag has 0 margin at the bottom.
|
||
|
|
|
||
|
|
This commit basically does the same thing for blockquotes now, making it more consistent.
|
||
|
|
|
||
|
|
One difference is that the blockquote has a left margin of 0.2em because a little "jump"
|
||
|
|
in makes it look a bit better imo.
|
||
|
|
|
||
|
|
commit 4
|
||
|
|
========
|
||
|
|
Remove pre-wrap from status_body
|
||
|
|
|
||
|
|
For some strange reason, after a mention a quote would be double as high as it should.
|
||
|
|
|
||
|
|
Removing this "pre-wrap" seems to fix this. I'm not sure what it was exactly for, but I don't see anything break.
|
||
|
|
|
||
|
|
The code blocks now don't wrap any more, but show a scroll bar, which imo is better for a code block.
|
||
|
|
---
|
||
|
|
src/components/rich_content/rich_content.scss | 14 ++++++++++++--
|
||
|
|
src/components/status_body/status_body.scss | 3 ---
|
||
|
|
2 files changed, 12 insertions(+), 5 deletions(-)
|
||
|
|
|
||
|
|
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
|
||
|
|
index 63df7d74..f9c019c3 100644
|
||
|
|
--- a/src/components/rich_content/rich_content.scss
|
||
|
|
+++ b/src/components/rich_content/rich_content.scss
|
||
|
|
@@ -1,7 +1,17 @@
|
||
|
|
+@import './../../_variables.scss';
|
||
|
|
+
|
||
|
|
.RichContent {
|
||
|
|
blockquote {
|
||
|
|
- margin: 0.2em 0 0.2em 2em;
|
||
|
|
- font-style: italic;
|
||
|
|
+ margin: 0 0 1em 0.2em;
|
||
|
|
+ padding: 0 0 0 1em;
|
||
|
|
+ border-width: 0 0 0 0.3em;
|
||
|
|
+ border-style: solid;
|
||
|
|
+ color: $fallback--faint;
|
||
|
|
+ color: var(--faint, $fallback--faint);
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ blockquote:last-child {
|
||
|
|
+ margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre {
|
||
|
|
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
|
||
|
|
index 434cb482..236d8ee1 100644
|
||
|
|
--- a/src/components/status_body/status_body.scss
|
||
|
|
+++ b/src/components/status_body/status_body.scss
|
||
|
|
@@ -61,9 +61,6 @@
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
- & > * {
|
||
|
|
- white-space: pre-wrap;
|
||
|
|
- }
|
||
|
|
&.-single-line {
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
--
|
||
|
|
2.39.5
|
||
|
|
|