diff --git a/src/apps/applets/migrations/0010_recognition_applet.py b/src/apps/applets/migrations/0010_recognition_applet.py new file mode 100644 index 0000000..8cc5130 --- /dev/null +++ b/src/apps/applets/migrations/0010_recognition_applet.py @@ -0,0 +1,25 @@ +from django.db import migrations + + +def seed_recognition_applet(apps, schema_editor): + Applet = apps.get_model("applets", "Applet") + Applet.objects.get_or_create( + slug="billboard-recognition", + defaults={ + "name": "Recognition", + "grid_cols": 4, + "grid_rows": 4, + "context": "billboard", + }, + ) + + +class Migration(migrations.Migration): + + dependencies = [ + ("applets", "0009_my_sky_applet"), + ] + + operations = [ + migrations.RunPython(seed_recognition_applet, migrations.RunPython.noop), + ] diff --git a/src/static_src/scss/_billboard.scss b/src/static_src/scss/_billboard.scss index b98c288..b1de5a8 100644 --- a/src/static_src/scss/_billboard.scss +++ b/src/static_src/scss/_billboard.scss @@ -87,17 +87,20 @@ body.page-billscroll { } // ── Billboard applet placement ───────────────────────────────────────────── -// Explicit placement: My Scrolls + Contacts stack left, Most Recent fills right. +// Left column (4-wide): My Scrolls → Contacts → Recognition stacked. +// Right column (8-wide): Most Recent spans full height. // Portrait override (container query) restores stacked full-width layout. #id_billboard_applets_container { - #id_applet_billboard_my_scrolls { grid-column: 1 / span 4; grid-row: 1 / span 3; } - #id_applet_billboard_my_contacts { grid-column: 1 / span 4; grid-row: 4 / span 3; } - #id_applet_billboard_most_recent { grid-column: 5 / span 8; grid-row: 1 / span 6; } + #id_applet_billboard_my_scrolls { grid-column: 1 / span 4; grid-row: 1 / span 3; } + #id_applet_billboard_my_contacts { grid-column: 1 / span 4; grid-row: 4 / span 3; } + #id_applet_billboard_recognition { grid-column: 1 / span 4; grid-row: 7 / span 4; } + #id_applet_billboard_most_recent { grid-column: 5 / span 8; grid-row: 1 / span 10; } @container (max-width: 550px) { #id_applet_billboard_my_scrolls, #id_applet_billboard_my_contacts, + #id_applet_billboard_recognition, #id_applet_billboard_most_recent { grid-column: 1 / span 12; grid-row: span var(--applet-rows, 3); @@ -105,6 +108,20 @@ body.page-billscroll { } } +// ── Recognition applet — vertical title ─────────────────────────────────── + +#id_applet_billboard_recognition { + h2 { + writing-mode: vertical-rl; + transform: rotate(180deg); + margin: 0; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } +} + // ── Most Recent applet — scrollable drama feed ───────────────────────────── #id_applet_billboard_most_recent { diff --git a/src/templates/apps/billboard/_partials/_applet-billboard-recognition.html b/src/templates/apps/billboard/_partials/_applet-billboard-recognition.html new file mode 100644 index 0000000..af12589 --- /dev/null +++ b/src/templates/apps/billboard/_partials/_applet-billboard-recognition.html @@ -0,0 +1,6 @@ +
+

Recognition

+