fix for PDF printing and bump version to re-publish

mhfan · Dec 18, 2024 · 1f1d939 · 1f1d939
1 parent 1d718a2
commit 1f1d939
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 25 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -2,7 +2,7 @@
 [package]
 edition = "2021"
 name = "inperiod"
-version = "0.1.3"
+version = "0.1.6"
 license = "MIT OR Apache-2.0"
 authors = ["MeiHui FAN <mhfan@ustc.edu>"]
 homepage = "https://mhfan.github.io/inperiod"

diff --git a/Dioxus.toml b/Dioxus.toml
@@ -16,7 +16,7 @@ default_platform = "web"    # value: web | desktop | mobile
 level = "4"     # The level wasm-opt should target. z is the smallest. 4 is the fastest.
 
 [web.app]
-#title = "Elements Periodic Table"   # HTML title tag content
+title = "Elements Periodic Table"   # HTML title tag content
 base_path = "inperiod" # "/"
 #index_on_404 = true
 

diff --git a/README.md b/README.md
@@ -22,9 +22,13 @@ Thus, this project was born.
 
 <https://mhfan.github.io/inperiod>
 
-![Elements Periodic Table](https://github.com/user-attachments/assets/34632195-1344-4377-a02e-d654e88a0afb)
-![Show electron configuration diagram](https://github.com/user-attachments/assets/e6a46fba-04cf-4275-b1e0-db78aecf307d)
-![Show crystal structure](https://github.com/user-attachments/assets/32518da9-e1b5-4314-95bc-cffa43ec6fc4)
+![Elements Periodic Table](https://github.com/user-attachments/assets/e1e34ebd-2ee6-4bd9-8804-6c8a81f0f6f7)
+![Chinese Periodic Table](https://github.com/user-attachments/assets/f32ee5d1-da6b-46d1-b478-9dbb7a9500ac)
+![Elements cosmic origin](https://github.com/user-attachments/assets/0aec4ecc-5e56-4e61-848d-e00b4fa06873)
+![Elements flame test](https://github.com/user-attachments/assets/271122e5-42a6-4011-81e0-3ed5f20b3153)
+
+![Show electron configuration diagram](https://github.com/user-attachments/assets/931590e3-34e0-44d8-9209-7febac64306a)
+![Show crystal structure](https://github.com/user-attachments/assets/b9c0c651-5d3c-43be-af42-8cd374c5aa07)
 
 Additionally, this project also targets to provide a set of API in Rust for accessing
 all kinds of information and data about the elements.
@@ -54,7 +58,7 @@ dx serve --platform android #ios
 
 Open the browser to <http://localhost:8080/inperiod>
 
-Note: Recommended to print as PDF on Chrome browser.
+Note: Recommended to `Print to PDF` on Chrome, or `Export to PDF` on Safari.
 
 ## References
 

diff --git a/index.html b/index.html
@@ -4,23 +4,16 @@
   <meta charset="UTF-8" />
   <!--meta content="text/html; charset=utf-8" http-equiv="Content-Type" /-->
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>{app_title}</title> <base href="/{base_path}/"/>
+  <base href="/{base_path}/"/>
 </head>
 
 <body id="main"> <!--div id="main"></div-->
   <script>
 const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-if (isChrome) { document.body.style.zoom = '0.5'; } else {
-/* if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) */
-  /* const elem = document.documentElement; <html> */
-  const elem = document.body;
-  const scale = 0.5;
-  const width  = scale * elem.offsetWidth;
-  const height = scale * elem.offsetHeight;
-  elem.style.transform = `scale(${scale})`;
-  elem.style.transformOrigin = '0 0';
-  elem.style.width  = width  + 'px';
-  elem.style.height = height + 'px';
+if (isChrome) { document.body.style = "zoom: 0.5; width: fit-content"; } else {
+//if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent))
+  document.body.style = //document.documentElement.style = // <html>
+    "transform: scale(0.5); transform-origin: 0px 0px; width: 0px; height: 0px;";
 
   const style = document.createElement('style');
   style.innerHTML = `

diff --git a/src/main.rs b/src/main.rs
@@ -20,11 +20,12 @@ fn App() -> Element {
   @page { size: A4 landscape; margin: 0; }  /* 设置页面的方向为横向并清除默认页边距 */
   body { width: 297mm; margin: auto; }      /* 设置主体样式以适应横向打印 */
   .non-printable { display: none; }         /* 隐藏非打印元素 */
+  select { appearance: none; background: transparent; }
 }";
 
     use dioxus::document::{Link, Title, Style/*, Script, Meta*/};
     rsx! {  //Router::<Route> {}
-        Title { "Elements Periodic Table" }
+        //Title { "Elements Periodic Table" } // respect index.html and Dioxus.toml
         // XXX: asset!("...") does not work for desktop when web.app.base_path is set
         Link { rel: "icon",       href: "assets/ptable.svg" }
         Link { rel: "stylesheet", href: "assets/tailwind.css" }
@@ -70,7 +71,7 @@ fn PeriodicTable() -> Element {
         }
         p { class: "self-end text-center font-bold text-lg", "VIIIA - 18" }
         p { class: "font-bold leading-none relative -bottom-4 content-center ml-2",
-            style: wm_vert, {tr!(lang, "E-shell")} br{} {tr!(lang, "E-max")}
+            style: wm_vert, {tr!(lang, "E-max")} br{} {tr!(lang, "E-shell")}
         }
         div { class: "grid row-span-7 mx-1 gap-0.5 items-center text-lg font-bold", // divide-y
             for i in 1..=7 { p {
@@ -169,7 +170,7 @@ fn PeriodicTable() -> Element {
                 }
                 div { class: "self-end ml-6 text-lg/6", PhysConsts {} }
             }
-            p { class: "absolute right-0 mt-1", style: wm_vert,
+            p { class: "absolute right-0 mt-1 text-nowrap", style: wm_vert,
                 {tr!(lang, "metal - nonmetal divider")}
             }
         }
@@ -313,7 +314,7 @@ static COLORING_ORIGINS: [(&str, &str); CosmicOrigin::MAX as usize] = [ // stric
 
     let metal_bound = match ordinal {
         1 => "shadow-black-b", 118 => "shadow-black-l", 4 => "shadow-[0_-2px_black]",
-        21|39|71 => "shadow-spread-2 shadow-amber-300", // rare earth metals indication
+        21|39|71 => "border-amber-300", // rare earth metals indication
         2 => "shadow-[0_2px_#fca5a5]", // indicate He is of s-block, shadow-red-300
         5|14|33|52|85 => "shadow-black-bl", _ => "",
     };
@@ -414,9 +415,10 @@ static COLORING_ORIGINS: [(&str, &str); CosmicOrigin::MAX as usize] = [ // stric
                 }
                 div { class: "text-right ml-1 relative",
                     div { class: "absolute w-full h-full group font-bold leading-tight",
-                        for os in os_main.iter().rev() { pre { { format!("{}{os}",
-                            match *os { x if 0 < x => "+", 0 => " ", _ => "" })
-                        } } }
+                        style: if 7 < os_main.len() { "line-height: 1;" } else { "" },
+                        for os in os_main.iter().rev() { pre {
+                        {format!("{}{os}", match *os { x if 0 < x => "+", 0 => " ", _ => "" })}
+                        } }
                         if os_main.len() < os_all.len() { div { class: "absolute hidden
                             left-full -top-2 ml-1.5 p-1 text-lg/5 font-normal rounded
                             border border-orange-600 bg-white group-hover:block z-10",