diff --git a/web/index.html b/web/index.html index a90ddb7..156d34d 100644 --- a/web/index.html +++ b/web/index.html @@ -4,21 +4,15 @@ - - - - - - + diff --git a/web/src/view/desktop.rs b/web/src/view/desktop.rs index d3ee029..cb53d82 100644 --- a/web/src/view/desktop.rs +++ b/web/src/view/desktop.rs @@ -37,7 +37,7 @@ pub(super) fn view(model: &Model) -> Node { ), }; div![ - C!["main-content"], + C!["flex"], reading_progress(model.read_completion_ratio), div![view::tags(model), view::versions(&model.versions)], div![ diff --git a/web/src/view/mobile.rs b/web/src/view/mobile.rs index e8f5bd0..34c0c3e 100644 --- a/web/src/view/mobile.rs +++ b/web/src/view/mobile.rs @@ -71,14 +71,14 @@ fn search_results( tags.remove(idx); }; div![ - C!["row"], + C!["NOTPORTED", "row"], label![ - C!["b-checkbox", "checkbox", "is-large"], + C!["NOTPORTED", "b-checkbox", "checkbox", "is-large"], input![attrs! { At::Type=>"checkbox", At::Checked=>selected_threads.contains(&tid).as_at_value(), }], - span![C!["check"]], + span![C!["NOTPORTED", "check"]], ev(Ev::Input, move |e| { if let Some(input) = e .target() @@ -97,25 +97,31 @@ fn search_results( }), ], a![ - C!["has-text-light", "summary"], - IF!(unread_idx.is_some() => C!["unread"]), + C!["NOTPORTED", "has-text-light", "summary"], + IF!(unread_idx.is_some() => C!["NOTPORTED","unread"]), attrs! { At::Href => urls::thread(&tid) }, - div![C!["subject"], &r.subject], - span![C!["from", "is-size-7"], pretty_authors(&r.authors)], + div![C!["NOTPORTED", "subject"], &r.subject], + span![ + C!["NOTPORTED", "from", "is-size-7"], + pretty_authors(&r.authors) + ], div![ - span![C!["is-size-7"], tags_chiclet(&tags, true)], - span![C!["is-size-7", "float-right", "date"], datetime] + span![C!["NOTPORTED", "is-size-7"], tags_chiclet(&tags, true)], + span![ + C!["NOTPORTED", "is-size-7", "float-right", "date"], + datetime + ] ] ] ] }); let show_bulk_edit = !selected_threads.is_empty(); div![ - C!["search-results"], + C!["NOTPORTED", "search-results"], search_toolbar(count, pager, show_bulk_edit, show_icon_text), - div![C!["index"], rows], + div![C!["NOTPORTED", "index"], rows], search_toolbar(count, pager, show_bulk_edit, show_icon_text), ] } diff --git a/web/src/view/mod.rs b/web/src/view/mod.rs index 2384270..bbe9c41 100644 --- a/web/src/view/mod.rs +++ b/web/src/view/mod.rs @@ -31,11 +31,11 @@ fn tags_chiclet(tags: &[String], is_mobile: bool) -> impl Iteratorhex}; - let classes = C!["tag", IF!(is_mobile => "is-small")]; + let classes = C!["NOTPORTED", "tag", IF!(is_mobile => "is-small")]; let tag = tag.clone(); a![match tag.as_str() { "attachment" => span![classes, style, "📎"], - "replied" => span![classes, style, i![C!["fa-solid", "fa-reply"]]], + "replied" => span![classes, style, i![C!["NOTPORTED", "fa-solid", "fa-reply"]]], _ => span![classes, style, &tag], },] }) @@ -57,23 +57,23 @@ fn removable_tags_chiclet<'a>( let thread_id = thread_id.to_string(); let hex = compute_color(tag); let style = style! {St::BackgroundColor=>hex}; - let classes = C!["tag", IF!(is_mobile => "is-small")]; + let classes = C!["NOTPORTED", "tag", IF!(is_mobile => "is-small")]; let attrs = attrs! { At::Href => urls::search(&format!("tag:{tag}"), 0) }; let tag = tag.clone(); let rm_tag = tag.clone(); div![ - C!["control"], + C!["NOTPORTED", "control"], div![ - C!["tags", "has-addons"], + C!["NOTPORTED", "tags", "has-addons"], a![ classes, attrs, style, match tag.as_str() { "attachment" => span!["📎"], - "replied" => span![i![C!["fa-solid", "fa-reply"]]], + "replied" => span![i![C!["NOTPORTED", "fa-solid", "fa-reply"]]], _ => span![&tag], }, ev(Ev::Click, move |_| Msg::FrontPageRequest { @@ -85,7 +85,7 @@ fn removable_tags_chiclet<'a>( }) ], a![ - C!["tag", "is-delete"], + C!["NOTPORTED", "tag", "is-delete"], ev(Ev::Click, move |_| Msg::RemoveTag(thread_id, rm_tag)) ] ] @@ -177,14 +177,14 @@ fn view_search_results( &r.subject }; tr![ - IF!(unread_idx.is_some() => C!["unread"]), + IF!(unread_idx.is_some() => C!["NOTPORTED","unread"]), td![label![ - C!["b-checkbox", "checkbox"], + C!["NOTPORTED", "b-checkbox", "checkbox"], input![attrs! { At::Type=>"checkbox", At::Checked=>selected_threads.contains(&tid).as_at_value(), }], - span![C!["check"]], + span![C!["NOTPORTED", "check"]], ev(Ev::Input, move |e| { if let Some(input) = e .target() @@ -203,9 +203,9 @@ fn view_search_results( }), ]], td![ - C!["from", format!("corpus-{:?} ", r.corpus)], + C!["NOTPORTED", "from", format!("corpus-{:?} ", r.corpus)], a![ - C!["has-text-light", "text"], + C!["NOTPORTED", "has-text-light", "text"], attrs! { At::Href => urls::thread(&tid) }, @@ -214,11 +214,11 @@ fn view_search_results( ] ], td![ - C!["subject"], + C!["NOTPORTED", "subject"], a![ tags_chiclet(&tags, false), " ", - C!["has-text-light", "text", "subject-link"], + C!["NOTPORTED", "has-text-light", "text", "subject-link"], attrs! { At::Href => urls::thread(&tid) }, @@ -226,9 +226,9 @@ fn view_search_results( ] ], td![ - C!["date"], + C!["NOTPORTED", "date"], a![ - C!["has-text-light", "text"], + C!["NOTPORTED", "has-text-light", "text"], attrs! { At::Href => urls::thread(&tid) }, @@ -239,7 +239,7 @@ fn view_search_results( }); div![ - C!["search-results"], + C!["NOTPORTED", "search-results"], search_toolbar(count, pager, show_bulk_edit, show_icon_text), table![ C![ @@ -252,17 +252,17 @@ fn view_search_results( ], thead![tr![ th![ - C!["edit"], + C!["NOTPORTED", "edit"], label![ - C!["b-checkbox", "checkbox"], + C!["NOTPORTED", "b-checkbox", "checkbox"], input![ - IF!(partially_checked => C!["is-indeterminate"]), + IF!(partially_checked => C!["NOTPORTED","is-indeterminate"]), attrs! { At::Type=>"checkbox", At::Checked=>all_checked.as_at_value(), } ], - span![C!["check"]], + span![C!["NOTPORTED", "check"]], ev(Ev::Click, move |_| if all_checked { Msg::SelectionSetNone } else { @@ -270,9 +270,9 @@ fn view_search_results( }) ] ], - th![C!["from"], "From"], - th![C!["subject"], "Subject"], - th![C!["date"], "Date"] + th![C!["NOTPORTED", "from"], "From"], + th![C!["NOTPORTED", "subject"], "Subject"], + th![C!["NOTPORTED", "date"], "Date"] ]], tbody![rows] ], @@ -287,24 +287,24 @@ fn search_toolbar( show_icon_text: bool, ) -> Node { nav![ - C!["level", "is-mobile"], + C!["NOTPORTED", "level", "is-mobile"], div![ - C!["level-left"], + C!["NOTPORTED", "level-left"], IF!(show_bulk_edit => div![ - C!["level-item"], - div![C!["buttons", "has-addons"], + C!["NOTPORTED","level-item"], + div![C!["NOTPORTED","buttons", "has-addons"], button![ - C!["button", "mark-read"], + C!["NOTPORTED","button", "mark-read"], attrs!{At::Title => "Mark as read"}, - span![C!["icon", "is-small"], i![C!["far", "fa-envelope-open"]]], + span![C!["NOTPORTED","icon", "is-small"], i![C!["NOTPORTED","far", "fa-envelope-open"]]], IF!(show_icon_text=>span!["Read"]), ev(Ev::Click, |_| Msg::SelectionMarkAsRead) ], button![ - C!["button", "mark-unread"], + C!["NOTPORTED","button", "mark-unread"], attrs!{At::Title => "Mark as unread"}, - span![C!["icon", "is-small"], i![C!["far", "fa-envelope"]]], + span![C!["NOTPORTED","icon", "is-small"], i![C!["NOTPORTED","far", "fa-envelope"]]], IF!(show_icon_text=>span!["Unread"]), ev(Ev::Click, |_| Msg::SelectionMarkAsUnread) ] @@ -312,12 +312,12 @@ fn search_toolbar( ]), IF!(show_bulk_edit => div![ - C!["level-item"], - div![C!["buttons", "has-addons"], + C!["NOTPORTED","level-item"], + div![C!["NOTPORTED","buttons", "has-addons"], button![ - C!["button", "spam"], + C!["NOTPORTED","button", "spam"], attrs!{At::Title => "Mark as spam"}, - span![C!["icon", "is-small"], i![C!["far", "fa-hand"]]], + span![C!["NOTPORTED","icon", "is-small"], i![C!["NOTPORTED","far", "fa-hand"]]], IF!(show_icon_text=>span!["Spam"]), ev(Ev::Click, |_| Msg::MultiMsg(vec![ @@ -330,9 +330,9 @@ fn search_toolbar( ]) ], div![ - C!["level-right"], + C!["NOTPORTED", "level-right"], nav![ - C!["level-item", "pagination"], + C!["NOTPORTED", "level-item", "pagination"], a![ C![ "pagination-previous", @@ -353,7 +353,10 @@ fn search_toolbar( ">", IF!(pager.has_next_page => ev(Ev::Click, |_| Msg::NextPage)) ], - ul![C!["pagination-list"], li![format!("{count} results")],], + ul![ + C!["NOTPORTED", "pagination-list"], + li![format!("{count} results")], + ], ] ] ] @@ -368,7 +371,11 @@ fn raw_text_message(contents: &str) -> Node { } else { (contents, None) }; - div![C!["view-part-text-plain"], contents, truncated_msg,] + div![ + C!["NOTPORTED", "view-part-text-plain"], + contents, + truncated_msg, + ] } fn has_unread(tags: &[String]) -> bool { @@ -418,7 +425,7 @@ fn render_avatar(photo_url: Option, from: &str, big: bool) -> Node fn copy_text_widget(text: &str) -> Node { let text = text.to_string(); span![ - i![C!["far", "fa-clone"]], + i![C!["NOTPORTED", "far", "fa-clone"]], ev(Ev::Click, move |e| { e.stop_propagation(); Msg::CopyToClipboard(text) @@ -616,9 +623,9 @@ fn render_closed_header(msg: &ShowThreadQueryThreadOnEmailThreadMessages) -> Nod fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) -> Node { let expand_id = msg.id.clone(); div![ - C!["message", "bg-grey-900"], + C!["NOTPORTED", "message", "bg-grey-900"], div![ - C!["header"], + C!["NOTPORTED", "header"], if open { render_open_header(&msg) } else { @@ -635,13 +642,13 @@ fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) ], IF!(open => div![ - C!["body", "mail"], + C!["NOTPORTED","body", "mail"], match &msg.body { ShowThreadQueryThreadOnEmailThreadMessagesBody::UnhandledContentType( ShowThreadQueryThreadOnEmailThreadMessagesBodyOnUnhandledContentType { contents ,content_tree}, ) => div![ raw_text_message(&contents), - div![C!["error"], + div![C!["NOTPORTED","error"], view_content_tree(&content_tree), ] ], @@ -660,14 +667,14 @@ fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) content_tree, }, ) => div![ - C!["view-part-text-html"], + C!["NOTPORTED","view-part-text-html"], raw![contents], IF!(!msg.attachments.is_empty() => div![ - C!["attachments"], + C!["NOTPORTED","attachments"], hr![], - h2!["Attachments"], - div![C!["grid","is-col-min-6"], + h2!["NOTPORTED","Attachments"], + div![C!["NOTPORTED","grid","is-col-min-6"], msg.attachments .iter() .map(|a| { @@ -680,12 +687,12 @@ fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) fmtr.with_scales(Scales::Binary()); div![ - C!["attachment", "card"], + C!["NOTPORTED","attachment", "card"], a.content_type.as_ref().map(|content_type| IF!(content_type.starts_with("image/") => - div![C!["card-image","is-1by1"], + div![C!["NOTPORTED","card-image","is-1by1"], div![ - C!["image","is-1by1"], + C!["NOTPORTED","image","is-1by1"], style!{ St::BackgroundImage=>format!(r#"url("{url}");"#), St::BackgroundSize=>"cover", @@ -694,15 +701,15 @@ fn message_render(msg: &ShowThreadQueryThreadOnEmailThreadMessages, open: bool) ] ] )), - div![C!["card-content"], - div![C!["content"], + div![C!["NOTPORTED","card-content"], + div![C!["NOTPORTED","content"], &a.filename, br![], small![ fmtr.format(a.size as f64),"B"] ] ], footer![ - C!["card-footer"], - a![C!["card-footer-item"],span![C!["icon"], i![C!["fas", "fa-download"]]], + C!["NOTPORTED","card-footer"], + a![C!["NOTPORTED","card-footer-item"],span![C!["NOTPORTED","icon"], i![C!["NOTPORTED","fas", "fa-download"]]], ev(Ev::Click, move |_| { seed::window().location().set_href(&url ).expect("failed to set URL"); @@ -753,22 +760,25 @@ fn thread( let spam_add_thread_id = thread.thread_id.clone(); let spam_unread_thread_id = thread.thread_id.clone(); div![ - C!["thread"], - h3![C!["is-size-5"], subject], + C!["NOTPORTED", "thread"], + h3![C!["NOTPORTED", "is-size-5"], subject], span![ - C!["tags"], + C!["NOTPORTED", "tags"], removable_tags_chiclet(&thread.thread_id, &tags, false) ], div![ - C!["level", "is-mobile"], + C!["NOTPORTED", "level", "is-mobile"], div![ - C!["level-item"], + C!["NOTPORTED", "level-item"], div![ - C!["buttons", "has-addons"], + C!["NOTPORTED", "buttons", "has-addons"], button![ - C!["button", "mark-read"], + C!["NOTPORTED", "button", "mark-read"], attrs! {At::Title => "Mark as read"}, - span![C!["icon", "is-small"], i![C!["far", "fa-envelope-open"]]], + span![ + C!["NOTPORTED", "icon", "is-small"], + i![C!["NOTPORTED", "far", "fa-envelope-open"]] + ], IF!(show_icon_text=>span!["Read"]), ev(Ev::Click, move |_| Msg::MultiMsg(vec![ Msg::SetUnread(read_thread_id, false), @@ -776,9 +786,12 @@ fn thread( ])), ], button![ - C!["button", "mark-unread"], + C!["NOTPORTED", "button", "mark-unread"], attrs! {At::Title => "Mark as unread"}, - span![C!["icon", "is-small"], i![C!["far", "fa-envelope"]]], + span![ + C!["NOTPORTED", "icon", "is-small"], + i![C!["NOTPORTED", "far", "fa-envelope"]] + ], IF!(show_icon_text=>span!["Unread"]), ev(Ev::Click, move |_| Msg::MultiMsg(vec![ Msg::SetUnread(unread_thread_id, true), @@ -788,13 +801,16 @@ fn thread( ], ], div![ - C!["level-item"], + C!["NOTPORTED", "level-item"], div![ - C!["buttons", "has-addons"], + C!["NOTPORTED", "buttons", "has-addons"], button![ - C!["button", "spam"], + C!["NOTPORTED", "button", "spam"], attrs! {At::Title => "Spam"}, - span![C!["icon", "is-small"], i![C!["far", "fa-hand"]]], + span![ + C!["NOTPORTED", "icon", "is-small"], + i![C!["NOTPORTED", "far", "fa-hand"]] + ], IF!(show_icon_text=>span!["Spam"]), ev(Ev::Click, move |_| Msg::MultiMsg(vec![ Msg::AddTag(spam_add_thread_id, "Spam".to_string()), @@ -834,7 +850,7 @@ fn view_content_tree(content_tree: &str) -> Node { }) ], IF!(debug_open.get() => - pre![C!["content-tree"], content_tree]), + pre![C!["NOTPORTED","content-tree"], content_tree]), ] } @@ -848,12 +864,17 @@ fn view_header(query: &str, refresh_request: &RefreshingState) -> Node { }; let query = Url::decode_uri_component(query).unwrap_or("".to_string()); nav![ - C!["navbar"], + C!["NOTPORTED", "navbar"], attrs! {At::Role=>"navigation"}, div![ - C!["navbar-start"], + C!["NOTPORTED", "navbar-start"], a![ - C!["navbar-item", "button", IF![is_error => "is-danger"]], + C![ + "NOTPORTED", + "navbar-item", + "button", + IF![is_error => "is-danger"] + ], span![i![C![ "fa-solid", "fa-arrow-rotate-right", @@ -863,21 +884,21 @@ fn view_header(query: &str, refresh_request: &RefreshingState) -> Node { ev(Ev::Click, |_| Msg::RefreshStart), ], a![ - C!["navbar-item", "button"], + C!["NOTPORTED", "navbar-item", "button"], attrs! { At::Href => urls::search(unread_query(), 0) }, "Unread", ], a![ - C!["navbar-item", "button"], + C!["NOTPORTED", "navbar-item", "button"], attrs! { At::Href => urls::search("", 0) }, "All", ], input![ - C!["navbar-item", "input"], + C!["NOTPORTED", "navbar-item", "input"], attrs! { At::Placeholder => "Search"; At::AutoFocus => true.as_at_value(); @@ -909,9 +930,9 @@ pub fn view(model: &Model) -> Node { .as_f64() .expect("window height f64"); div![match w { - w if w < 800. => div![C!["mobile"], mobile::view(model)], - w if w < 1024. => div![C!["tablet"], tablet::view(model)], - _ => div![C!["desktop"], desktop::view(model)], + w if w < 800. => div![C!["NOTPORTED", "mobile"], mobile::view(model)], + w if w < 1024. => div![C!["NOTPORTED", "tablet"], tablet::view(model)], + _ => div![C!["NOTPORTED", "desktop"], desktop::view(model)], },] } pub fn tags(model: &Model) -> Node { @@ -925,9 +946,9 @@ pub fn tags(model: &Model) -> Node { attrs! { At::Href => href }, - (0..indent).map(|_| span![C!["tag-indent"], ""]), + (0..indent).map(|_| span![C!["NOTPORTED", "tag-indent"], ""]), i![ - C!["tag-tag", "fa-solid", "fa-tag"], + C!["NOTPORTED", "tag-tag", "fa-solid", "fa-tag"], style! { //"--fa-primary-color" => t.fg_color, St::Color => t.bg_color, @@ -987,13 +1008,13 @@ pub fn tags(model: &Model) -> Node { let tags_open = use_state(|| false); let force_tags_open = unread.is_empty(); aside![ - C!["tags-menu", "menu"], - IF!(!unread.is_empty() => p![C!["menu-label"], "Unread"]), - IF!(!unread.is_empty() => ul![C!["menu-list"], view_tag_list(unread.into_iter(),true)]), + C!["NOTPORTED", "tags-menu", "menu"], + IF!(!unread.is_empty() => p![C!["NOTPORTED","menu-label"], "Unread"]), + IF!(!unread.is_empty() => ul![C!["NOTPORTED","menu-list"], view_tag_list(unread.into_iter(),true)]), p![ - C!["menu-label"], + C!["NOTPORTED", "menu-label"], IF!(!force_tags_open => - i![C![ + i![C!["NOTPORTED", "fa-solid", if tags_open.get() { "fa-angle-up" @@ -1007,7 +1028,7 @@ pub fn tags(model: &Model) -> Node { }) ], ul![ - C!["menu-list"], + C!["NOTPORTED", "menu-list"], IF!(force_tags_open||tags_open.get() => model.tags.as_ref().map(|tags| view_tag_list(tags.iter(),false))), ] ] @@ -1024,29 +1045,30 @@ fn news_post( fn tag(tag: String, is_mobile: bool) -> Node { let hex = compute_color(&tag); let style = style! {St::BackgroundColor=>hex}; - let classes = C!["tag", IF!(is_mobile => "is-small")]; + let classes = C!["NOTPORTED", "tag", IF!(is_mobile => "is-small")]; let attrs = attrs! { At::Href => urls::search(&format!("tag:{tag}"), 0) }; let tag = tag.clone(); div![ C![ + "NOTPORTED", "message-tags", "field", "is-grouped", "is-grouped-multiline" ], div![ - C!["control"], + C!["NOTPORTED", "control"], div![ - C!["tags", "has-addons"], + C!["NOTPORTED", "tags", "has-addons"], a![ classes, attrs, style, match tag.as_str() { "attachment" => span!["📎"], - "replied" => span![i![C!["fa-solid", "fa-reply"]]], + "replied" => span![i![C!["NOTPORTED", "fa-solid", "fa-reply"]]], _ => span![&tag], }, ev(Ev::Click, move |_| Msg::FrontPageRequest { @@ -1063,19 +1085,22 @@ fn news_post( } div![ - C!["thread"], - h3![C!["is-size-5"], subject], + C!["NOTPORTED", "thread"], + h3![C!["NOTPORTED", "is-size-5"], subject], tag(format!("News/{}", post.slug), false), div![ - C!["level", "is-mobile"], + C!["NOTPORTED", "level", "is-mobile"], div![ - C!["level-item"], + C!["NOTPORTED", "level-item"], div![ - C!["buttons", "has-addons"], + C!["NOTPORTED", "buttons", "has-addons"], button![ - C!["button", "mark-read"], + C!["NOTPORTED", "button", "mark-read"], attrs! {At::Title => "Mark as read"}, - span![C!["icon", "is-small"], i![C!["far", "fa-envelope-open"]]], + span![ + C!["NOTPORTED", "icon", "is-small"], + i![C!["NOTPORTED", "far", "fa-envelope-open"]] + ], IF!(show_icon_text=>span!["Read"]), ev(Ev::Click, move |_| Msg::MultiMsg(vec![ Msg::SetUnread(read_thread_id, false), @@ -1083,9 +1108,12 @@ fn news_post( ])), ], button![ - C!["button", "mark-unread"], + C!["NOTPORTED", "button", "mark-unread"], attrs! {At::Title => "Mark as unread"}, - span![C!["icon", "is-small"], i![C!["far", "fa-envelope"]]], + span![ + C!["NOTPORTED", "icon", "is-small"], + i![C!["NOTPORTED", "far", "fa-envelope"]] + ], IF!(show_icon_text=>span!["Unread"]), ev(Ev::Click, move |_| Msg::MultiMsg(vec![ Msg::SetUnread(unread_thread_id, true), @@ -1096,13 +1124,18 @@ fn news_post( ], // This would be the holder for spam buttons on emails, needed to keep layout // consistent - div![C!["level-item"], div![]] + div![C!["NOTPORTED", "level-item"], div![]] ], div![ - C!["message"], - div![C!["header"], render_news_post_header(&post)], + C!["NOTPORTED", "message"], + div![C!["NOTPORTED", "header"], render_news_post_header(&post)], div![ - C!["body", "news-post", format!("site-{}", post.slug)], + C![ + "NOTPORTED", + "body", + "news-post", + format!("site-{}", post.slug) + ], el_ref(content_el), raw![&post.body] ] @@ -1186,14 +1219,10 @@ fn render_news_post_header(post: &ShowThreadQueryThreadOnNewsPost) -> Node } fn reading_progress(ratio: f64) -> Node { let percent = ratio * 100.; + // TODO: percent broken with no styles + info!("percent {percent}"); progress![ - C![ - "read-progress", - "progress", - "is-success", - "is-small", - IF!(percent<1. => "is-invisible") - ], + C!["absolute", "w-screen", IF!(percent<1. => "hidden")], attrs! { At::Value=>percent, At::Max=>"100" @@ -1204,26 +1233,29 @@ fn reading_progress(ratio: f64) -> Node { pub fn versions(versions: &crate::state::Version) -> Node { debug!("versions {versions:?}"); aside![ - C!["tags-menu", "menu"], - p![C!["menu-label"], "Versions"], + C!["NOTPORTED", "tags-menu", "menu"], + p![C!["NOTPORTED", "menu-label"], "Versions"], ul![ - C!["menu-list"], + C!["NOTPORTED", "menu-list"], li!["Client"], - li![span![C!["tag-indent"], &versions.client]] + li![span![C!["NOTPORTED", "tag-indent"], &versions.client]] ], versions.server.as_ref().map(|v| ul![ - C!["menu-list"], + C!["NOTPORTED", "menu-list"], li!["Server"], - li![span![C!["tag-indent"], v]] + li![span![C!["NOTPORTED", "tag-indent"], v]] ]) ] } fn click_to_top() -> Node { button![ - C!["button", "is-danger", "is-small"], + C!["NOTPORTED", "button", "is-danger", "is-small"], span!["Top"], - span![C!["icon"], i![C!["fas", "fa-arrow-turn-up"]]], + span![ + C!["NOTPORTED", "icon"], + i![C!["NOTPORTED", "fas", "fa-arrow-turn-up"]] + ], ev(Ev::Click, |_| web_sys::window() .unwrap() .scroll_to_with_x_and_y(0., 0.)) diff --git a/web/src/view/tablet.rs b/web/src/view/tablet.rs index 24de306..2a37312 100644 --- a/web/src/view/tablet.rs +++ b/web/src/view/tablet.rs @@ -35,7 +35,7 @@ pub(super) fn view(model: &Model) -> Node { ), }; div![ - C!["main-content"], + C!["NOTPORTED", "main-content"], div![ reading_progress(model.read_completion_ratio), view_header(&model.query, &model.refreshing_state), diff --git a/web/static/main.css b/web/static/main.css deleted file mode 100644 index f503017..0000000 --- a/web/static/main.css +++ /dev/null @@ -1,268 +0,0 @@ -/* Bulma Utilities */ -.b-checkbox.checkbox { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* Box-shadow on hover */ -.b-checkbox.checkbox { - outline: none; - display: inline-flex; - align-items: center; -} - -.b-checkbox.checkbox:not(.button) { - margin-right: 0.5em; -} - -.b-checkbox.checkbox:not(.button) + .checkbox:last-child { - margin-right: 0; -} - -.b-checkbox.checkbox input[type=checkbox] { - position: absolute; - left: 0; - opacity: 0; - outline: none; - z-index: -1; -} - -.b-checkbox.checkbox input[type=checkbox] + .check { - width: 1.25em; - height: 1.25em; - flex-shrink: 0; - border-radius: 4px; - border: 2px solid #7a7a7a; - transition: background 150ms ease-out; - background: transparent; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check { - background: #00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: #00d1b2; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-white { - background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%230a0a0a' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: white; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-black { - background: #0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:white' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: #0a0a0a; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-light { - background: whitesmoke url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:rgba(0, 0, 0, 0.7)' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: whitesmoke; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-dark { - background: #363636 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: #363636; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-primary { - background: #00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: #00d1b2; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-link { - background: #485fc7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: #485fc7; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-info { - background: #3e8ed0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: #3e8ed0; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-success { - background: #48c78e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: #48c78e; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-warning { - background: #ffe08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:rgba(0, 0, 0, 0.7)' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: #ffe08a; -} - -.b-checkbox.checkbox input[type=checkbox]:checked + .check.is-danger { - background: #f14668 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center; - border-color: #f14668; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check { - background: #00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: #00d1b2; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-white, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-white { - background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%230a0a0a' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: white; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-black, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-black { - background: #0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:white' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: #0a0a0a; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-light, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-light { - background: whitesmoke url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:rgba(0, 0, 0, 0.7)' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: whitesmoke; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-dark, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-dark { - background: #363636 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: #363636; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-primary, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-primary { - background: #00d1b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: #00d1b2; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-link, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-link { - background: #485fc7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: #485fc7; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-info, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-info { - background: #3e8ed0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: #3e8ed0; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-success, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-success { - background: #48c78e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: #48c78e; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-warning, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-warning { - background: #ffe08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:rgba(0, 0, 0, 0.7)' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: #ffe08a; -} - -.b-checkbox.checkbox input[type=checkbox]:indeterminate + .check.is-danger, .b-checkbox.checkbox input[type=checkbox].is-indeterminate + .check.is-danger { - background: #f14668 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Crect style='fill:%23fff' width='0.7' height='0.2' x='.15' y='.4'%3E%3C/rect%3E%3C/svg%3E") no-repeat center center; - border-color: #f14668; -} - -.b-checkbox.checkbox input[type=checkbox]:focus + .check { - box-shadow: 0 0 0.5em rgba(122, 122, 122, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check { - box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-white { - box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-black { - box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-light { - box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-dark { - box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-primary { - box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-link { - box-shadow: 0 0 0.5em rgba(72, 95, 199, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-info { - box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-success { - box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-warning { - box-shadow: 0 0 0.5em rgba(255, 224, 138, 0.8); -} - -.b-checkbox.checkbox input[type=checkbox]:focus:checked + .check.is-danger { - box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.8); -} - -.b-checkbox.checkbox .control-label { - padding-left: calc(0.75em - 1px); -} - -.b-checkbox.checkbox.button { - display: flex; -} - -.b-checkbox.checkbox[disabled] { - opacity: 0.5; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check { - border-color: #00d1b2; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-white { - border-color: white; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-black { - border-color: #0a0a0a; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-light { - border-color: whitesmoke; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-dark { - border-color: #363636; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-primary { - border-color: #00d1b2; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-link { - border-color: #485fc7; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-info { - border-color: #3e8ed0; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-success { - border-color: #48c78e; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-warning { - border-color: #ffe08a; -} - -.b-checkbox.checkbox:hover input[type=checkbox]:not(:disabled) + .check.is-danger { - border-color: #f14668; -} - -.b-checkbox.checkbox.is-small { - border-radius: 2px; - font-size: 0.75rem; -} - -.b-checkbox.checkbox.is-medium { - font-size: 1.25rem; -} - -.b-checkbox.checkbox.is-large { - font-size: 1.5rem; -}