wathiede/letterbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Releases Wiki Activity

Change up site CSS and inline messages' CSS

Browse Source
This commit is contained in:
Bill Thiede 2023-03-05 18:42:14 -08:00
parent 9e4b97e2e5
commit 6adb567cd6
2 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="modulepreload" href="/pkg/package.js" as="script" type="text/javascript"> <link rel="modulepreload" href="/pkg/package.js" as="script" type="text/javascript">
<link rel="preload" href="/pkg/package_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous"> <link rel="preload" href="/pkg/package_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> <link rel="stylesheet", href="https://jenil.github.io/bulmaswatch/cyborg/bulmaswatch.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style> <style>
.message { .message {
@ -64,6 +64,11 @@ iframe {
transform:rotate(360deg); transform:rotate(360deg);
} }
} }
@media (max-width: 768px) {
.section {
padding: 1.5em;
}
}
</style> </style>
</head> </head>

27
web/src/lib.rs
View File

@ -280,7 +280,11 @@ fn view_part(part: &Part) -> Node<Msg> {
"text/plain" => view_text_plain(&part.content), "text/plain" => view_text_plain(&part.content),
"text/html" => { "text/html" => {
if let Some(Content::String(html)) = &part.content { if let Some(Content::String(html)) = &part.content {
let inlined = css_inline::inline(html).expect("failed to inline CSS"); let inliner = css_inline::CSSInliner::options()
.load_remote_stylesheets(false)
.remove_style_tags(true)
.build();
let inlined = inliner.inline(html).expect("failed to inline CSS");
return div![C!["view-part-text-html"], div!["TEST"], raw![&inlined]]; return div![C!["view-part-text-html"], div!["TEST"], raw![&inlined]];
} else { } else {
@ -351,16 +355,17 @@ fn set_title(title: &str) {
seed::document().set_title(&format!("lb: {}", title)); seed::document().set_title(&format!("lb: {}", title));
} }
fn tags_chiclet(tags: &[String]) -> impl Iterator<Item = Node<Msg>> + '_ { fn tags_chiclet(tags: &[String], is_mobile: bool) -> impl Iterator<Item = Node<Msg>> + '_ {
tags.iter().map(|tag| { tags.iter().map(move |tag| {
let mut hasher = DefaultHasher::new(); let mut hasher = DefaultHasher::new();
tag.hash(&mut hasher); tag.hash(&mut hasher);
let hex = format!("#{:06x}", hasher.finish() % (1 << 24)); let hex = format!("#{:06x}", hasher.finish() % (1 << 24));
let style = style! {St::BackgroundColor=>hex}; let style = style! {St::BackgroundColor=>hex};
let classes = C!["tag", IF!(is_mobile => "is-small")];
match tag.as_str() { match tag.as_str() {
"attachment" => span![C!["tag"], style, "📎"], "attachment" => span![classes, style, "📎"],
"replied" => span![C!["tag"], style, i![C!["fa-solid", "fa-reply"]]], "replied" => span![classes, style, i![C!["fa-solid", "fa-reply"]]],
_ => span![C!["tag"], style, tag], _ => span![classes, style, tag],
} }
}) })
} }
@ -410,14 +415,16 @@ fn view_mobile_search_results(query: &str, search_results: &SearchSummary) -> No
ev(Ev::Click, move |_| Msg::ShowPrettyRequest(tid)), ev(Ev::Click, move |_| Msg::ShowPrettyRequest(tid)),
] ]
*/ */
let tid = r.thread.clone();
div![ div![
p![C!["subject"], &r.subject], div![C!["subject"], &r.subject],
div![ div![
span![C!["from"], pretty_authors(&r.authors)], span![C!["from"], pretty_authors(&r.authors)],
span![C!["tags"], tags_chiclet(&r.tags)], span![C!["tags"], tags_chiclet(&r.tags, true)],
], ],
span![C!["date"], &r.date_relative], span![C!["date"], &r.date_relative],
hr![], hr![],
ev(Ev::Click, move |_| Msg::ShowPrettyRequest(tid)),
] ]
}); });
div![h1!["Search results"], rows] div![h1!["Search results"], rows]
@ -437,7 +444,7 @@ fn view_search_results(query: &str, search_results: &SearchSummary) -> Node<Msg>
pretty_authors(&r.authors), pretty_authors(&r.authors),
IF!(r.total>1 => small![" ", r.total.to_string()]), IF!(r.total>1 => small![" ", r.total.to_string()]),
], ],
td![C!["subject"], tags_chiclet(&r.tags), " ", &r.subject], td![C!["subject"], tags_chiclet(&r.tags, false), " ", &r.subject],
td![C!["date"], &r.date_relative], td![C!["date"], &r.date_relative],
ev(Ev::Click, move |_| Msg::ShowPrettyRequest(tid)), ev(Ev::Click, move |_| Msg::ShowPrettyRequest(tid)),
] ]
@ -592,7 +599,7 @@ fn view_mobile(model: &Model) -> Node<Msg> {
}; };
div![ div![
view_header(&model.query, &model.refreshing_state), view_header(&model.query, &model.refreshing_state),
section![C!["section"], div![C!["container"], content],] section![C!["section"], div![C!["content"], content],]
] ]
} }