till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-18 00:09:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

fix(clock-bot): optimize widget styling for Element info panel

Browse source 
- Use transparent background to adapt to Element theme
- Remove min-height and centering (content starts at top)
- Reduce font sizes and spacing for compact display
- Use semi-transparent backgrounds for theme compatibility
- Add flex-wrap for narrow panels

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS 2026-02-14 12:46:19 +01:00
parent 0a41640c19
commit 5025bfa883
3 changed files with 93 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

27
apps/nutriphi/apps/web/src/hooks.server.ts Normal file
View file

@ -0,0 +1,27 @@
/**
* Server Hooks for SvelteKit
* - Injects runtime environment variables for client-side use
* - Auth is handled client-side via Mana Core Auth
*/
import type { Handle } from '@sveltejs/kit';
// Get client-side URLs from environment (Docker runtime)
const PUBLIC_MANA_CORE_AUTH_URL_CLIENT =
process.env.PUBLIC_MANA_CORE_AUTH_URL_CLIENT || process.env.PUBLIC_MANA_CORE_AUTH_URL || '';
const PUBLIC_BACKEND_URL_CLIENT =
process.env.PUBLIC_BACKEND_URL_CLIENT || process.env.PUBLIC_BACKEND_URL || '';
export const handle: Handle = async ({ event, resolve }) => {
return resolve(event, {
transformPageChunk: ({ html }) => {
// Inject runtime environment variables into the HTML
// These will be available on window.__PUBLIC_*__ for client-side code
const envScript = `<script>
window.__PUBLIC_MANA_CORE_AUTH_URL__ = "${PUBLIC_MANA_CORE_AUTH_URL_CLIENT}";
window.__PUBLIC_BACKEND_URL__ = "${PUBLIC_BACKEND_URL_CLIENT}";
</script>`;
return html.replace('<head>', `<head>${envScript}`);
},
});
};

16
apps/nutriphi/apps/web/src/lib/stores/auth.svelte.ts
View file

@ -6,7 +6,19 @@
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { initializeWebAuth } from '@manacore/shared-auth'; import { initializeWebAuth } from '@manacore/shared-auth';
import type { UserData } from '@manacore/shared-auth'; import type { UserData } from '@manacore/shared-auth';
import { PUBLIC_MANA_CORE_AUTH_URL } from '$env/static/public';
// Get auth URL dynamically at runtime - fallback for SSR and client
function getAuthUrl(): string {
if (browser && typeof window !== 'undefined') {
// Client-side: use injected window variable (set by hooks.server.ts)
// Falls back to localhost for local development
const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
.__PUBLIC_MANA_CORE_AUTH_URL__;
return injectedUrl || 'http://localhost:3001';
}
// Server-side (SSR): use Docker internal URL for container-to-container communication
return process.env.PUBLIC_MANA_CORE_AUTH_URL || 'http://localhost:3001';
}
// Get backend URL dynamically at runtime // Get backend URL dynamically at runtime
function getBackendUrl(): string { function getBackendUrl(): string {
@ -26,7 +38,7 @@ function getAuthService() {
if (!browser) return null; if (!browser) return null;
if (!_authService) { if (!_authService) {
const auth = initializeWebAuth({ const auth = initializeWebAuth({
baseUrl: PUBLIC_MANA_CORE_AUTH_URL || 'http://localhost:3001', baseUrl: getAuthUrl(),
backendUrl: getBackendUrl(), backendUrl: getBackendUrl(),
}); });
_authService = auth.authService; _authService = auth.authService;

98
services/matrix-clock-bot/src/widget/widget.controller.ts
View file

@ -150,53 +150,47 @@ export class WidgetController {
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: #1a1a2e; background: transparent;
color: #eee; color: #eee;
min-height: 100vh; padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px;
} }
.container { .container {
width: 100%; width: 100%;
max-width: 320px;
text-align: center; text-align: center;
} }
.status-icon { .status-icon {
font-size: 48px; font-size: 32px;
margin-bottom: 16px;
}
.time-display {
font-size: 48px;
font-weight: 300;
font-variant-numeric: tabular-nums;
margin-bottom: 8px; margin-bottom: 8px;
} }
.time-display {
font-size: 36px;
font-weight: 300;
font-variant-numeric: tabular-nums;
margin-bottom: 4px;
}
.time-total { .time-total {
font-size: 14px; font-size: 12px;
color: #888; color: #888;
margin-bottom: 16px; margin-bottom: 12px;
} }
.progress-container { .progress-container {
width: 100%; width: 100%;
height: 8px; height: 6px;
background: #333; background: rgba(255,255,255,0.1);
border-radius: 4px; border-radius: 3px;
overflow: hidden; overflow: hidden;
margin-bottom: 8px; margin-bottom: 6px;
} }
.progress-bar { .progress-bar {
height: 100%; height: 100%;
background: linear-gradient(90deg, #4CAF50, #8BC34A); background: linear-gradient(90deg, #4CAF50, #8BC34A);
border-radius: 4px; border-radius: 3px;
transition: width 0.3s ease; transition: width 0.3s ease;
} }
@ -205,37 +199,39 @@ export class WidgetController {
} }
.percentage { .percentage {
font-size: 14px; font-size: 11px;
color: #888; color: #888;
margin-bottom: 24px; margin-bottom: 12px;
} }
.label { .label {
font-size: 14px; font-size: 11px;
color: #aaa; color: #aaa;
margin-bottom: 24px; margin-bottom: 12px;
padding: 8px 16px; padding: 4px 10px;
background: #252540; background: rgba(255,255,255,0.05);
border-radius: 16px; border-radius: 12px;
display: inline-block; display: inline-block;
word-break: break-word;
} }
.controls { .controls {
display: flex; display: flex;
gap: 12px; gap: 8px;
justify-content: center; justify-content: center;
flex-wrap: wrap;
} }
.btn { .btn {
padding: 12px 24px; padding: 8px 14px;
font-size: 16px; font-size: 13px;
border: none; border: none;
border-radius: 8px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
display: flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 4px;
} }
.btn-primary { .btn-primary {
@ -248,12 +244,12 @@ export class WidgetController {
} }
.btn-secondary { .btn-secondary {
background: #333; background: rgba(255,255,255,0.1);
color: #eee; color: #eee;
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #444; background: rgba(255,255,255,0.15);
} }
.btn:disabled { .btn:disabled {
@ -264,34 +260,44 @@ export class WidgetController {
.no-timer { .no-timer {
text-align: center; text-align: center;
color: #888; color: #888;
padding: 8px 0;
} }
.no-timer-icon { .no-timer-icon {
font-size: 64px; font-size: 40px;
margin-bottom: 16px; margin-bottom: 8px;
opacity: 0.5; opacity: 0.5;
} }
.no-timer h2 { .no-timer h2 {
font-size: 18px; font-size: 14px;
font-weight: 500; font-weight: 500;
margin-bottom: 8px; margin-bottom: 4px;
color: #aaa; color: #aaa;
} }
.no-timer p { .no-timer p {
font-size: 14px; font-size: 12px;
}
.no-timer code {
background: rgba(255,255,255,0.1);
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
} }
.error { .error {
color: #f44336; color: #f44336;
padding: 16px; padding: 12px;
background: #2a1a1a; background: rgba(244, 67, 54, 0.1);
border-radius: 8px; border-radius: 6px;
font-size: 12px;
} }
.loading { .loading {
color: #888; color: #888;
padding: 20px 0;
} }
.finished { .finished {