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

23
web/index.html
View File

@ -6,7 +6,7 @@
<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="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" />
<style>
.message {
@ -56,14 +56,19 @@ iframe {
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@media (max-width: 768px) {
.section {
padding: 1.5em;
}
}
</style>
</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/html" => {
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]];
} else {
@ -351,16 +355,17 @@ fn set_title(title: &str) {
seed::document().set_title(&format!("lb: {}", title));
}
fn tags_chiclet(tags: &[String]) -> impl Iterator<Item = Node<Msg>> + '_ {
tags.iter().map(|tag| {
fn tags_chiclet(tags: &[String], is_mobile: bool) -> impl Iterator<Item = Node<Msg>> + '_ {
tags.iter().map(move |tag| {
let mut hasher = DefaultHasher::new();
tag.hash(&mut hasher);
let hex = format!("#{:06x}", hasher.finish() % (1 << 24));
let style = style! {St::BackgroundColor=>hex};
let classes = C!["tag", IF!(is_mobile => "is-small")];
match tag.as_str() {
"attachment" => span![C!["tag"], style, "📎"],
"replied" => span![C!["tag"], style, i![C!["fa-solid", "fa-reply"]]],
_ => span![C!["tag"], style, tag],
"attachment" => span![classes, style, "📎"],
"replied" => span![classes, style, i![C!["fa-solid", "fa-reply"]]],
_ => 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)),
]
*/
let tid = r.thread.clone();
div![
p![C!["subject"], &r.subject],
div![C!["subject"], &r.subject],
div![
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],
hr![],
ev(Ev::Click, move |_| Msg::ShowPrettyRequest(tid)),
]
});
div![h1!["Search results"], rows]
@ -437,7 +444,7 @@ fn view_search_results(query: &str, search_results: &SearchSummary) -> Node<Msg>
pretty_authors(&r.authors),
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],
ev(Ev::Click, move |_| Msg::ShowPrettyRequest(tid)),
]
@ -592,7 +599,7 @@ fn view_mobile(model: &Model) -> Node<Msg> {
};
div![
view_header(&model.query, &model.refreshing_state),
section![C!["section"], div![C!["container"], content],]
section![C!["section"], div![C!["content"], content],]
]
}