From d43bd985c6243560655b8a4ef8d383141addd734 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= Date: Wed, 14 Jan 2026 17:34:26 +0100 Subject: [PATCH] Clean up dashboard ui and remove channels page --- src/main/resources/static/css/styles.css | 82 +++++++ src/main/resources/templates/channels.html | 80 ------ src/main/resources/templates/dashboard.html | 254 ++++++++++---------- 3 files changed, 207 insertions(+), 209 deletions(-) delete mode 100644 src/main/resources/templates/channels.html diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css index e4df6bf..b73a271 100644 --- a/src/main/resources/static/css/styles.css +++ b/src/main/resources/static/css/styles.css @@ -860,6 +860,17 @@ button:disabled:hover { gap: 20px; } +.dashboard-grid { + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + align-items: start; +} + +.dashboard-span-full { + grid-column: 1 / -1; +} + .dashboard-topbar { display: flex; align-items: center; @@ -955,6 +966,77 @@ button:disabled:hover { font-size: 12px; } +.dashboard-tile-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 12px; + margin-top: 12px; +} + +.dashboard-tile { + display: flex; + flex-direction: column; + gap: 8px; + padding: 16px; + border-radius: 12px; + border: 1px solid rgba(148, 163, 184, 0.35); + background: rgba(15, 23, 42, 0.75); + color: #e2e8f0; + text-decoration: none; + min-height: 140px; + transition: + border-color 0.2s ease, + background-color 0.2s ease, + transform 0.2s ease; +} + +.dashboard-tile:hover, +.dashboard-tile:focus-visible { + border-color: rgba(226, 232, 240, 0.7); + background: rgba(30, 41, 59, 0.8); + transform: translateY(-1px); +} + +.dashboard-tile .tile-icon { + min-width: 44px; + height: 44px; + border-radius: 10px; + display: grid; + place-items: center; + background: rgba(124, 58, 237, 0.18); + color: #c4b5fd; + font-weight: 700; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.dashboard-tile .tile-title { + font-weight: 600; + font-size: 15px; +} + +.dashboard-tile .tile-subtitle { + color: #cbd5e1; + font-size: 12px; + line-height: 1.4; +} + +.dashboard-toggle-tile { + cursor: pointer; +} + +.dashboard-toggle-tile .tile-row { + display: flex; + align-items: center; + gap: 8px; + width: 100%; +} + +.dashboard-toggle-tile input[type="checkbox"] { + margin-left: auto; +} + .user-display { font-weight: 700; color: #e2e8f0; diff --git a/src/main/resources/templates/channels.html b/src/main/resources/templates/channels.html deleted file mode 100644 index 0c8d86b..0000000 --- a/src/main/resources/templates/channels.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - Browse channels - Imgfloat - - - - -
-
-
- brand -
-
Imgfloat
-
Twitch overlay manager
-
-
-
- -
-
-

Broadcast overlay

-

Open a channel

-

Type the channel name to jump straight to their overlay.

-
- - - - -
-
-
- - -
- - - - diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html index fdfb187..699398d 100644 --- a/src/main/resources/templates/dashboard.html +++ b/src/main/resources/templates/dashboard.html @@ -29,142 +29,138 @@ -
-

Navigation

-

Shortcuts

-

Jump into your overlay

-
- - Live - - Open broadcast overlay - Launch your live overlay view. - - - - Admin - - Open admin console - Manage assets, scripts, and layout. - - - - App - - Application settings - Configure server-wide preferences. - - - - Browse - - Browse channels - Find other overlays you manage. - - -
-
+
+
+

Navigation

+

Shortcuts

+

Jump into your overlay

+
+ + Live + Open broadcast overlay + Launch your live overlay view. + + + Admin + Open admin console + Manage assets, scripts, and layout. + + + App + Application settings + Configure server-wide preferences. + +
+
-
-

Settings

-

Overlay dimensions

-

Match these with your OBS resolution.

-
- - -
-
- - -
-
+
+

Settings

+

Overlay dimensions

+

Match these with your OBS resolution.

+
+ + +
+
+ + +
+
-
-

Script privacy

-

Script asset access

-

Control what data scripts can access in your channel.

-
- - - -
-
- - -
-
+
+

Script privacy

+

Script asset access

+

Control what data scripts can access in your channel.

+
+ + + +
+
+ + +
+
-
-
+
+
+
+
+

Collaboration

+

Channel admins

+

Invite moderators to help manage assets.

+
+
+
+
+ + Enter the username without the @ symbol. +
+ +
+
+
+

Channel Admins

+

Users who can currently modify your overlay.

+
+
    +
    +
    +
    +

    Your Twitch moderators

    +

    Add moderators who already help run your channel.

    +
    +
      +
      +
      +
      + +
      -

      Collaboration

      -

      Channel admins

      -

      Invite moderators to help manage assets.

      +

      Your access

      +

      Channels you administer

      +

      Jump into a teammate's overlay console.

      -
      -
      - - Enter the username without the @ symbol. -
      - -
      -
      -
      -

      Channel Admins

      -

      Users who can currently modify your overlay.

      -
      -
        -
        -
        -
        -

        Your Twitch moderators

        -

        Add moderators who already help run your channel.

        -
        -
          -
          -
          -
          - -
          -
          -
          -

          Your access

          -

          Channels you administer

          -

          Jump into a teammate's overlay console.

          -
          -
          -

          No admin invitations yet.

          -
            -
          • -
            -

            channel

            -

            Channel admin access

            -
            - Open -
            • -
          -
          - -
          +

          No admin invitations yet.

          + + +