PWA fixes

attestate · Aug 30, 2023 · 5015561 · 5015561
1 parent 0a14f61
commit 5015561
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 8 deletions.
diff --git a/src/public/news.css b/src/public/news.css
@@ -3,6 +3,7 @@ body {
      font-family:Verdana, Geneva, sans-serif;
      font-size:10pt;
      color:#828282;
+     overscroll-behavior: none;
 }
  @keyframes pulsate {
    0% {

diff --git a/src/views/components/footer.mjs b/src/views/components/footer.mjs
@@ -46,7 +46,7 @@ if (env.NODE_ENV === "production") {
 const footer = (theme, path) => html`
   ${["/", "/new", "/community"].includes(path)
     ? html`
-        <div style="position: fixed; bottom: 20px; right: 20px; z-index: 5;">
+        <div style="position: fixed; bottom: 3rem; right: 2rem; z-index: 5;">
           <a
             href="/submit"
             style="align-items: center; justify-content: center; height: 50px; width: 50px; background-color: ${theme.color}; border-radius: 2px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);"

diff --git a/src/views/components/head.mjs b/src/views/components/head.mjs
@@ -6,7 +6,11 @@ const html = htm.bind(vhtml);
 export default html`
   <meta charset="utf-8" />
   <meta name="referrer" content="origin" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1, maximum-scale=1,
+ user-scalable=0"
+  />
   <meta property="og:image" content="https://news.kiwistand.com/preview.jpeg" />
   <meta
     property="twitter:image"

diff --git a/src/views/components/secondheader.mjs b/src/views/components/secondheader.mjs
@@ -4,7 +4,7 @@ import vhtml from "vhtml";
 
 const html = htm.bind(vhtml);
 
-const style = "width: 1rem; position: relative; top: 0.2rem;";
+const style = "width: 1rem; position: relative; top: 0.15rem;";
 
 const broadcastSVG = html`
   <svg
@@ -149,7 +149,7 @@ const secondheader = (theme, site) => html`
         ${site === "top" || site === "new" || site === "alltime"
           ? html` <a href="/">
               <button
-                style=${`font-size: 1.01rem; border-radius: 2px; cursor: pointer; padding: 5px 10px 5px 10px; background-color: transparent; border: 1px solid ${
+                style=${`font-size: 1.01rem; border-radius: 2px; cursor: pointer; padding: 5px 15px; background-color: transparent; border: 1px solid ${
                   site === "top" ? theme.color : "#7f8c8d"
                 }; color: ${site === "top" ? theme.color : "#7f8c8d"};`}
               >
@@ -167,7 +167,7 @@ const secondheader = (theme, site) => html`
                 : "/nfts"}"
             >
               <button
-                style=${`font-size: 1.01rem; margin-left: 10px; cursor: pointer; border-radius: 2px; padding: 5px 7px; background-color: transparent; border: 1px solid ${
+                style=${`font-size: 1.01rem; margin-left: 10px; cursor: pointer; border-radius: 2px; padding: 5px 15px; background-color: transparent; border: 1px solid ${
                   site === "new" || site === "nfts" ? theme.color : "#7f8c8d"
                 }; color: ${
                   site === "new" || site === "nfts" ? theme.color : "#7f8c8d"
@@ -180,14 +180,15 @@ const secondheader = (theme, site) => html`
         ${site === "top" || site === "new" || site === "alltime"
           ? html` <a href="/alltime">
               <button
-                style=${`font-size: 1.01rem; margin-left: 10px; cursor: pointer; border-radius: 2px; padding: 5px 7px; background-color: transparent; border: 1px solid ${
+                style=${`font-size: 1.01rem; margin-left: 10px; cursor: pointer; border-radius: 2px; padding: 5px 15px; background-color: transparent; border: 1px solid ${
                   site === "alltime" ? theme.color : "#7f8c8d"
                 }; color: ${site === "alltime" ? theme.color : "#7f8c8d"};`}
               >
                 <span> ${trophySVG} Top</span>
               </button>
             </a>`
           : ""}
+        <a class="nav-refresh-button"></a>
       </div>
       <nav-learn-more />
     </div>

diff --git a/src/web/src/Navigation.jsx b/src/web/src/Navigation.jsx
@@ -15,6 +15,55 @@ const shorten = (address) =>
   "..." +
   address.slice(address.length - 4, address.length);
 
+// NOTE: &#8203; This weird character is added there on purpose as to trick the
+// component into thinking that it also has text in it.
+export const RefreshButton = () => {
+  if (isRunningPWA()) {
+    return (
+      <button
+        onClick={() => location.reload()}
+        style={{
+          fontSize: "1.01rem",
+          marginLeft: "10px",
+          cursor: "pointer",
+          borderRadius: "2px",
+          padding: "5px 15px 5px 15px",
+          backgroundColor: "transparent",
+          border: "1px solid #7f8c8d",
+          color: "#7f8c8d",
+        }}
+      >
+        &#8203;
+        <span>
+          <svg
+            style={{ width: "1rem", position: "relative", top: "0.15rem" }}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 256 256"
+          >
+            <rect width="256" height="256" fill="none" />
+            <polyline
+              points="184 104 232 104 232 56"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="16"
+            />
+            <path
+              d="M188.4,192a88,88,0,1,1,1.83-126.23L232,104"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="16"
+            />
+          </svg>
+        </span>
+      </button>
+    );
+  }
+};
+
 const LearnMore = () => {
   const { isConnected } = useAccount();
   const [display, setDisplay] = useState(false);
@@ -24,7 +73,7 @@ const LearnMore = () => {
   };
 
   useEffect(() => {
-    setDisplay(!isConnected);
+    setDisplay(!isConnected && !isRunningPWA());
   }, [isConnected]);
 
   if (!display && !isRunningPWA() && (isChromeOnAndroid() || isSafariOnIOS())) {

diff --git a/src/web/src/main.jsx b/src/web/src/main.jsx
@@ -105,7 +105,11 @@ async function addBuyButton(allowlistPromise, delegationsPromise, toast) {
     const BuyButton = (await import("./BuyButton.jsx")).default;
     createRoot(buyButtonContainer).render(
       <StrictMode>
-        <BuyButton allowlist={allowlist} delegations={delegations} toast={toast} />
+        <BuyButton
+          allowlist={allowlist}
+          delegations={delegations}
+          toast={toast}
+        />
       </StrictMode>,
     );
   }
@@ -134,6 +138,7 @@ async function addConnectedComponents() {
     ConnectedLearnMore,
     ConnectedDisconnectButton,
     ConnectedConnectButton,
+    RefreshButton,
   } = await import("./Navigation.jsx");
 
   const connectButton = document.querySelector("#connectButton");
@@ -156,6 +161,14 @@ async function addConnectedComponents() {
       <ConnectedProfile />
     </StrictMode>,
   );
+  const refreshButton = document.querySelector("a.nav-refresh-button");
+  if (refreshButton) {
+    createRoot(refreshButton).render(
+      <StrictMode>
+        <RefreshButton />
+      </StrictMode>,
+    );
+  }
   const learnMore = document.querySelector("nav-learn-more");
   if (learnMore) {
     createRoot(learnMore).render(