LukaDeka/HexName-Frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: mobile scale improvements, workflow

Browse source
This commit is contained in:
Luka Dekanozishvili 2026-02-01 13:14:03 +01:00
parent 2f1a928aa3
commit f14604f219
8 changed files with 117 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/lib/Footer.svelte
View file

@ -9,24 +9,19 @@
<div class="hidden sm:block"></div>
<aside>
<svg class="size-14" viewBox="-2 -2 139 157"><path style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:11px" d="M130.887 54.969 67.444 78.214 4 54.969l13.51-35.9L67.444 4l49.934 15.069zm-5.273 39.517-58.17 22.969-58.17-22.969h-.01m111.93 33.229-53.75 21.68-53.75-21.68m-.001 0L4.004 54.967m126.88 0-9.689 72.748M67.444 78.214v71.182"/></svg>
<p>
© 2025-{year} HexName
<br/>
Focus on what truly matters.
</p>
<p>© 2025-{year} HexName</p>
<p>Focus on what truly matters.</p>
</aside>
<nav>
<p class="footer-title">Services</p>
<!-- <div> -->
<a class="link link-hover" href="/register">Register</a>
<a class="link link-hover" href="/login">Log in</a>
<!-- </div> -->
<a class="link link-hover" href="/register">Register</a>
<a class="link link-hover" href="/login">Log in</a>
{#if auth.isAuthenticated}
<a class="link link-hover" href="/dashboard/register-domain">Register a domain</a>
{:else}
<a class="link link-hover" href="/#search-for-your-domain">Search for a domain</a>
{/if}
<a class="link link-hover" href="/#contact">Contact us!</a>
<a class="link link-hover" href="/#contact">Contact us</a>
</nav>
<nav>
<p class="footer-title">Pages</p>

65
src/lib/MainNavbar.svelte
View file

@ -1,44 +1,45 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { PUBLIC_BACKEND_API_HOST } from "$env/static/public";
import { auth, setUserLoggedOut } from "./auth.svelte";
// import { goto } from "$app/navigation";
// import { PUBLIC_BACKEND_API_HOST } from "$env/static/public";
// import { auth, setUserLoggedOut } from "./auth.svelte";
import { auth } from "./auth.svelte";
async function toggleMfa() {
try {
const res = await fetch(`${PUBLIC_BACKEND_API_HOST}/api/v1/user/update-mfa`, {
credentials: "include",
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ enable_mfa: auth.isMfaEnabled }),
});
// async function toggleMfa() {
// try {
// const res = await fetch(`${PUBLIC_BACKEND_API_HOST}/api/v1/user/update-mfa`, {
// credentials: "include",
// method: "PATCH",
// headers: { "Content-Type": "application/json" },
// body: JSON.stringify({ enable_mfa: auth.isMfaEnabled }),
// });
if (res.status === 401 || res.status === 500) {
setUserLoggedOut();
goto('/login');
throw new Error('Unauthorized');
} else if (res.status !== 204) {
let msg = await res.text();
throw new Error(`Failed updating MFA: ${msg}`);
}
} catch (err) {
// TODO: show error to user
console.error(err);
auth.isMfaEnabled = !auth.isMfaEnabled;
}
}
// if (res.status === 401 || res.status === 500) {
// setUserLoggedOut();
// goto('/login');
// throw new Error('Unauthorized');
// } else if (res.status !== 204) {
// let msg = await res.text();
// throw new Error(`Failed updating MFA: ${msg}`);
// }
// } catch (err) {
// // TODO: show error to user
// console.error(err);
// auth.isMfaEnabled = !auth.isMfaEnabled;
// }
// }
let { sideMenuOpen = $bindable() } = $props()
let innerWidth: number | null | undefined = $state();
let isMobile: boolean = $derived.by(() =>{
if (!innerWidth) return false;
return innerWidth < 768;
if (!innerWidth) return false;
return innerWidth < 768;
});
let isXs: boolean = $derived.by(() =>{
if (!innerWidth) return false;
return innerWidth < 480;
let isXxs: boolean = $derived.by(() =>{
if (!innerWidth) return false;
return innerWidth < 360;
});
</script>
@ -103,7 +104,7 @@
</div>
{:else}
<div class="xs:gap-4 flex">
{#if isXs}
{#if isXxs}
<a href="/register"><button style="box-shadow: 0 0 10px rgba(0,0,0,0.6)" class="btn btn-primary break-keep whitespace-nowrap rounded-lg">Register</button></a>
{:else}
<a href="/register"><button style="box-shadow: 0 0 10px rgba(0,0,0,0.6)" class="btn btn-primary break-keep whitespace-nowrap rounded-lg">Create an account</button></a>
@ -113,4 +114,4 @@
{/if}
</div>
</div>
<div class="divider bg-primary-content/20 fixed mt-[63px] z-41 h-0.25 w-screen"></div>
<div class="divider bg-primary-content/20 fixed mt-[63px] z-41 h-0.25 w-full"></div>

4
src/lib/SideMenu.svelte
View file

@ -20,7 +20,7 @@
z-31
`}
>
<ul class="menu bg-white/6 h-[calc(100vh-65px)] z-9 w-60 block min-h-0 overflow-y-auto">
<ul class="menu bg-white/6 h-[calc(135vh-65px)] z-9 w-60 block min-h-0 overflow-y-auto">
{#if isDashboard}
<li class="bg-base-300 opacity-0 lg:opacity-100 h-screen fixed -z-1 w-60 top-0 left-0 m-0"></li>
{/if}
@ -62,5 +62,5 @@
<li class="bg-error rounded"><a class="text-error-content" href="/logout">Loading your domains failed. Please refresh the page or try logging out and back in</a></li>
{/if}
</ul>
<div class="divider divider-vertical bg-primary-content/35 fixed w-0.25 h-[calc(100vh-65px)] top-0 z-10 m-0 ml-60">&nbsp;</div>
<div class="divider divider-vertical bg-primary-content/35 fixed w-0.25 h-[calc(135vh-65px)] top-0 z-10 m-0 ml-60">&nbsp;</div>
</aside>