Improve overflow behavior on header and footer

hifiwi-fi · Jan 1, 2023 · acaf964 · acaf964
1 parent 9250f28
commit acaf964
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 7 deletions.
diff --git a/web/account/username/username-edit.js b/web/account/username/username-edit.js
@@ -31,10 +31,10 @@ export const usernameEdit = Component(({ user, onSave, onCancelEdit }) => {
       <form ref="${formRef}" class="bc-account-username-edit-form" id="bc-account-username-edit-form" onsubmit=${handleSave}>
       <fieldset ?disabled=${disabled}>
         <legend class="bc-account-username-edit-legend">Edit username</legend>
-        <div>
+      <div>
           <label class='block'>
             username:
-            <input class='block' type="text" name="username" value="${user.username}"/>
+            <input class='block' pattern="^[A-Za-z0-9]+(?:[ _-][A-Za-z0-9]+)*$" minlength="1" maxlength="50" type="text" name="username" value="${user.username}"/>
           </label>
         </div>
         <div class="bc-account-username-edit-submit-line">

diff --git a/web/components/header/index.css b/web/components/header/index.css
@@ -9,6 +9,14 @@
   padding-right: max(var(--body-padding), env(safe-area-inset-right));
   padding-top: max(var(--body-padding), env(safe-area-inset-top));
   padding-bottom: var(--body-padding);
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space:nowrap;
+  scrollbar-width: none;
+}
+
+.bc-header-nav::-webkit-scrollbar {
+    display: none;
 }
 
 .bc-logo {
@@ -22,6 +30,13 @@
 
 .bc-header-start {
   align-items: baseline;
+  overflow: hidden;
+  min-width: 100px;
+}
+
+.bc-header-start a {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .bc-header-end {

diff --git a/web/components/header/index.js b/web/components/header/index.js
@@ -32,9 +32,9 @@ export const header = Component(() => {
     <div class="bc-header-start">
       <span class="bc-logo round">
         <span>🥖 </span>
-        ${user ? null : html`<a href="/">Breadcrum</a>`}
+        ${!user ? html`<a href="/">Breadcrum</a>` : null}
       </span>
-      ${user ? html`<span><a href='/account'>${user.username}</a></span>` : null}
+      ${user ? html`<a href='/account'>${user.username}</a>` : null}
     </div>
     <div class="bc-header-end">
       ${!user

diff --git a/web/document.css b/web/document.css
@@ -66,12 +66,28 @@
 
 .bc-footer {
   padding-top: var(--body-padding);
+  padding-bottom: max(var(--body-padding), env(safe-area-inset-bottom));
   padding-left: max(var(--body-padding), env(safe-area-inset-left));
   padding-right: max(var(--body-padding), env(safe-area-inset-right));
-  padding-bottom: max(var(--body-padding), env(safe-area-inset-bottom));
   display: flex;
   justify-content: center;
   gap: 1em;
   font-size: var(--small-font-size);
   border-top: dotted 1px var(--accent-midground);
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space:nowrap;
+  scrollbar-width: none;
+}
+
+.bc-footer::-webkit-scrollbar {
+    display: none;
+}
+
+
+/* fairly arbitrary. Just make sure the content justification */
+@media screen and (max-width: 500px) {
+  .bc-footer {
+    justify-content: start;
+  }
 }
diff --git a/web/hooks/useUser.js b/web/hooks/useUser.js
@@ -10,8 +10,8 @@ export function useUser ({
 } = {}) {
   const state = useLSP()
 
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState(true)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
 
   useEffect(() => {
     setLoading(true)