north-star / commit
style changes
.vscode/settings.json | 8 +++++++ src/app.ts | 2 +- src/index.html | 32 ++++++++++++++----------- src/style.css | 66 +++++++++++++++++++++++++++++++++++---------------- 4 files changed, 72 insertions(+), 36 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..98fc7a3 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "chat.tools.terminal.autoApprove": { + "/^npx tsc --noEmit && npm run build$/": { + "approve": true, + "matchCommandLine": true + } + } +} \ No newline at end of file diff --git a/src/app.ts b/src/app.ts index 6a516be..516b007 100644 --- a/src/app.ts +++ b/src/app.ts @@ -186,7 +186,7 @@ const render = () => { getArrowDisplayColor }); - logDebug(`Real friends: ${friends.length} | Commit: ${isLocalCommit ? 'local' : `<a href="https://gitlab.com/PavelSafronov/north-star/-/commit/${GIT_COMMIT}" target="_blank">${GIT_COMMIT}</a>`} | Repo: <a href="https://gitlab.com/PavelSafronov/north-star" target="_blank">north-star</a>`); + logDebug(`Commit: ${isLocalCommit ? 'local' : `<a href="https://gitlab.com/PavelSafronov/north-star/-/commit/${GIT_COMMIT}" target="_blank">${GIT_COMMIT}</a>`} | Repo: <a href="https://gitlab.com/PavelSafronov/north-star" target="_blank">north-star</a>`); }; await syncSelfFriend(); diff --git a/src/index.html b/src/index.html index 8c81c87..42e2ce3 100644 --- a/src/index.html +++ b/src/index.html @@ -33,31 +33,35 @@ <a id="create-room-link" href="https://pavelsafronov.gitlab.io/north-star/">Create New Room</a> </div> <form id="name-form" class="name-form" autocomplete="off"> - <input id="self-name-input" name="selfName" type="text" maxlength="32" enterkeyhint="done" /> - <input id="self-color-input" name="selfColor" type="color" /> - <button id="dark-mode-toggle" class="dark-mode-toggle" type="button" aria-label="Toggle dark mode">🌙</button> + <div class="controls-row controls-row-main"> + <input id="self-name-input" name="selfName" type="text" maxlength="32" enterkeyhint="done" /> + <input id="self-color-input" name="selfColor" type="color" /> + <button id="dark-mode-toggle" class="dark-mode-toggle" type="button" + aria-label="Toggle dark mode">🌙</button> + </div> + <div class="controls-row controls-row-secondary"> + <button id="calibrate-heading-link" class="friends-toggle" type="button">Compass</button> + <button id="friends-toggle" class="friends-toggle" type="button" aria-expanded="true">Hide Friends</button> + </div> </form> <div id="default-arrow" style="display: none;" class="arrow"> <div class="arrow-img"></div> </div> <div id="content"> - <div class="panel-actions"> - <button id="calibrate-heading-link" class="friends-toggle" type="button">Enable Compass</button> - <button id="friends-toggle" class="friends-toggle" type="button" aria-expanded="true">Hide - Friends</button> - </div> <aside id="friends-panel" class="friends-panel" aria-label="Friends"></aside> </div> <div class="room-links"> <div id="invite-room-qr-list" class="room-qr-list" aria-label="Room invite QR codes"></div> </div> - <div> + <div id="debug-info"> <p id="debug"></p> - <a href="https://www.flaticon.com/free-icons/tools-and-utensils" title="Tools and utensils icons">Tools and - utensils - icons created by Icongeek26 - Flaticon</a> - <a href="https://www.flaticon.com/free-icons/arrow" title="arrow icons">Arrow icons created by Freepik - - Flaticon</a> + <p id="attributions"> + <a href="https://www.flaticon.com/free-icons/tools-and-utensils" title="Tools and utensils icons">Tools and + utensils + icons created by Icongeek26 - Flaticon</a> + <a href="https://www.flaticon.com/free-icons/arrow" title="arrow icons">Arrow icons created by Freepik - + Flaticon</a> + </p> </div> <script src="app.ts" type="module"></script> </body> diff --git a/src/style.css b/src/style.css index cbfaa0f..f6540ac 100644 --- a/src/style.css +++ b/src/style.css @@ -36,6 +36,10 @@ a { margin-right: 0.15em; } +body.dark .app-icon { + filter: invert(1) brightness(1.08) drop-shadow(0 0 2px rgba(255, 255, 255, 0.45)); +} + .app-title { margin: 0; font-size: clamp(28px, 5.2vmin, 56px); @@ -152,9 +156,9 @@ a { .name-form { display: flex; - align-items: center; + flex-direction: column; + align-items: stretch; justify-content: center; - flex-wrap: wrap; gap: 8px; padding: 10px; margin-top: 4px; @@ -169,6 +173,22 @@ a { z-index: 2; } +.controls-row { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + flex-wrap: wrap; +} + +.controls-row-main { + flex-wrap: nowrap; +} + +.controls-row-secondary { + justify-content: center; +} + .name-form label { font-size: 14px; font-weight: 600; @@ -176,9 +196,10 @@ a { } .name-form input { - width: 100%; + width: auto; min-width: 0; max-width: 220px; + flex: 1 1 220px; padding: 10px 12px; border: 1px solid #64748b; border-radius: 10px; @@ -189,6 +210,7 @@ a { .name-form input[type="color"] { width: 44px; + flex: 0 0 auto; min-width: 44px; height: 44px; padding: 2px; @@ -213,6 +235,7 @@ a { .dark-mode-toggle { width: 44px; + flex: 0 0 auto; min-width: 44px; height: 44px; padding: 2px; @@ -240,17 +263,6 @@ body.dark .dark-mode-toggle { z-index: 1; } -.panel-actions { - position: absolute; - left: 10px; - right: 10px; - top: 8px; - display: flex; - justify-content: space-between; - align-items: center; - z-index: 4; -} - .friends-toggle { padding: 6px 10px; border: 1px solid #cbd5e1; @@ -262,6 +274,14 @@ body.dark .dark-mode-toggle { cursor: pointer; } +.name-form .friends-toggle { + color: #0f172a; +} + +.controls-row-secondary .friends-toggle { + min-width: 130px; +} + .friends-toggle:disabled { cursor: not-allowed; opacity: 0.75; @@ -275,6 +295,7 @@ body.dark .dark-mode-toggle { .friends-toggle.compass-error { border: 2px solid #f97316; background: rgba(255, 237, 213, 0.96); + color: #7c2d12; } .friends-panel { @@ -424,7 +445,7 @@ body.dark .dark-mode-toggle { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); } -#debug { +#debug-info { position: relative; margin: 0; width: min(100%, 720px); @@ -533,18 +554,21 @@ body.dark .arrow-label { } @media (max-width: 720px) { - .panel-actions { - left: 6px; - right: 6px; - top: 6px; + .controls-row-main { + flex-wrap: wrap; + } + + .controls-row-main #self-name-input { + flex-basis: 100%; + max-width: 100%; } .friends-panel { width: min(88vw, 320px); right: 6px; - top: 38px; + top: 6px; transform: none; - max-height: calc(100% - 44px); + max-height: calc(100% - 12px); padding: 6px; }