From dce4916b94bc901dfd24e548526f6c950891cd49 Mon Sep 17 00:00:00 2001 From: a2nr Date: Wed, 22 Apr 2026 21:04:38 +0700 Subject: [PATCH] ui: refactor navbar and improve mobile experience - Move navigation menu to the leftmost position and consolidate actions into a dropdown. - Replace clunky mobile sheet handle with explicit minimize/maximize buttons. - Fix home page content margins for list elements. - Ensure student identity remains visible on mobile devices with optimized font sizing. - Synchronize CircuitJS simulator theme with global light/dark mode. - Update elemes.sh to provide cleaner output by silencing podman-compose logs by default. --- elemes.sh | 56 +++---- .../src/lib/actions/renderCircuitEmbeds.ts | 4 +- .../src/lib/components/CircuitEditor.svelte | 6 +- frontend/src/lib/components/Navbar.svelte | 148 ++++++++++++++---- .../src/lib/components/WorkspaceHeader.svelte | 42 +---- frontend/src/routes/+page.svelte | 8 + 6 files changed, 167 insertions(+), 97 deletions(-) diff --git a/elemes.sh b/elemes.sh index 84d9ef1..ee7befd 100755 --- a/elemes.sh +++ b/elemes.sh @@ -5,6 +5,26 @@ PARENT_DIR="$(dirname "$SCRIPT_DIR")" EXAMPLES_DIR="$SCRIPT_DIR/examples" PROJECT_NAME="$(basename "$PARENT_DIR")" +# Check for --verbose flag +VERBOSE=0 +for arg in "$@"; do + if [ "$arg" == "--verbose" ]; then + VERBOSE=1 + break + fi +done + +# Function to run podman-compose quietly unless verbose +run_compose() { + # Ensure we are in the script directory so podman-compose finds the yaml file + cd "$SCRIPT_DIR" || exit + if [ "$VERBOSE" -eq 1 ]; then + podman-compose -p "$PROJECT_NAME" --env-file "$PARENT_DIR/.env" "$@" + else + podman-compose -p "$PROJECT_NAME" --env-file "$PARENT_DIR/.env" "$@" >/dev/null 2>&1 + fi +} + case "$1" in init) echo "โœจ === Elemes Quick Start === โœจ" @@ -61,7 +81,7 @@ init) ;; stop | run | runbuild | runclearbuild) echo "๐Ÿ›‘ Menghentikan container yang sedang berjalan..." - podman-compose -p "$PROJECT_NAME" --env-file ../.env down + run_compose down ;;& stop) echo "โœ… Container berhasil dihentikan." @@ -70,20 +90,20 @@ runclearbuild) echo "๐Ÿงน Membersihkan container dan image (prune)..." podman image prune -f echo "๐Ÿ—๏ธ Membangun ulang container dari awal (no-cache)..." - podman-compose -p "$PROJECT_NAME" --env-file ../.env build --no-cache + run_compose build --no-cache ;;& runbuild) echo "๐Ÿ—๏ธ Membangun container..." - podman-compose -p "$PROJECT_NAME" --env-file ../.env build + run_compose build ;;& runbuild | runclearbuild) echo "๐Ÿš€ Menjalankan container di background..." - podman-compose -p "$PROJECT_NAME" --env-file ../.env up --force-recreate -d + run_compose up --force-recreate -d echo "โœ… Elemes berhasil dijalankan!" ;; run) echo "๐Ÿš€ Menjalankan container..." - podman-compose -p "$PROJECT_NAME" --env-file ../.env up + run_compose up -d echo "โœ… Elemes berhasil dijalankan!" ;; generatetoken) @@ -93,6 +113,7 @@ generatetoken) exportall) echo "๐Ÿ“ฆ === Mengekspor Semua Image (Pre-Compiled Bundle) ===" TAR_FILE="lms-c-precompiled.tar" + cd "$SCRIPT_DIR" || exit echo "๐Ÿ—๏ธ 1. Mem-build Backend Elemes..." podman build -t lms-c-backend:latest -f Dockerfile . @@ -179,31 +200,6 @@ verify) fi done ;; -loadtest) - echo "๐Ÿ“Š === Elemes Load Testing ===" - cd "$SCRIPT_DIR/load-test" || exit - - if [ ! -d "env" ]; then - echo "โš™๏ธ Membuat Python Virtual Environment (env/)..." - python3 -m venv env - fi - - echo "โš™๏ธ Mengaktifkan environment & menginstall requirements..." - source env/bin/activate - pip install -r requirements.txt >/dev/null 2>&1 - - echo "โš™๏ธ Mempersiapkan Test Data & menginjeksi akun Bot..." - python3 content_parser.py --num-tokens 50 - - echo "" - echo "๐Ÿš€ Memulai Locust Test Suite..." - echo "๐Ÿ‘‰ Buka http://localhost:8089 di browser web milikmu." - echo "๐Ÿ‘‰ Masukkan URL backend Elemes sebagai Host (contoh: http://localhost:5000)" - echo "๐Ÿ‘‰ Tekan CTRL+C di terminal ini untuk menghentikan test." - echo "" - - locust -f locustfile.py - ;; *) echo "๐Ÿ’ก Cara Penggunaan elemes.sh:" echo " ./elemes.sh init # Inisialisasi konfigurasi, folder, & data tokens" diff --git a/frontend/src/lib/actions/renderCircuitEmbeds.ts b/frontend/src/lib/actions/renderCircuitEmbeds.ts index f6b9733..0c8af3c 100644 --- a/frontend/src/lib/actions/renderCircuitEmbeds.ts +++ b/frontend/src/lib/actions/renderCircuitEmbeds.ts @@ -15,8 +15,10 @@ function loadCircuitEmbed(div: HTMLElement) { wrapper.style.width = width; wrapper.style.height = height; + const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; + const iframe = document.createElement('iframe'); - iframe.src = '/circuitjs1/circuitjs.html'; + iframe.src = `/circuitjs1/circuitjs.html?whiteBackground=${!isDark}`; iframe.style.width = '100%'; iframe.style.height = '100%'; iframe.style.border = 'none'; diff --git a/frontend/src/lib/components/CircuitEditor.svelte b/frontend/src/lib/components/CircuitEditor.svelte index 142230b..be9faf9 100644 --- a/frontend/src/lib/components/CircuitEditor.svelte +++ b/frontend/src/lib/components/CircuitEditor.svelte @@ -1,6 +1,7 @@
@@ -162,7 +166,7 @@