Trial state of 29 Oct 2026: ATOMA reader setup, app dashboards, embedding notes

Baseline before the clean-up (PD-13): the PD-11 reader setup and the PD-12 app dashboards as they ran on the local stack, uncommitted until now. Not deployed, not independently reviewed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-29 20:50:26 +01:00
1 parent 97284052c1
commit 1b8e57adb4
@@ -0,0 +1,154 @@
+/* Readers only (petrolyst_reader.py, templates/head_custom_extra.html). Hides what Superset 6.1
+   shows whatever the permissions. Cosmetic: what protects is the role and the reader rules. */
+
+/* The dashboard's title row: name, favourite, refresh, owner, last change, "…". */
+[data-test="dashboard-header-container"] {
+  display: none !important;
+}
+
+/* ATOMA's Fleet tab: no filter column and its resize handle (no filter applies there); the
+   column is empty then, so the map takes the full width. Site details keeps it. Also hidden
+   until the dashboard's grid is there, so it does not flash up while the Fleet tab loads.
+   dashboards/atoma/build_bundle.py checks that this names the Fleet tab. */
+body:has(.ant-tabs-tab-active[data-node-key="TAB-fleet"]) [data-test="dashboard-filters-panel"],
+body:has(.ant-tabs-tab-active[data-node-key="TAB-fleet"]) div:has(+ [data-test="dashboard-filters-panel"]),
+body:not(:has([data-test="grid-container"])) [data-test="dashboard-filters-panel"],
+body:not(:has([data-test="grid-container"])) div:has(+ [data-test="dashboard-filters-panel"]) {
+  display: none !important;
+}
+
+/* Superset sizes blocks in pixels and measures again only about 0.3 s after loading, so the
+   map would start beside a column that is not there and then widen. Its block spans all 12
+   columns (build_bundle.py checks it), so the full width is always right. Its column grows to
+   the row's width; the blocks inside it follow.
+   Height: down to the window's bottom edge instead of the layout's 800 px. Above the block are
+   123 px (navbar, margin, tab row) and below it 16, so the map ends 32 px above the edge, as it
+   does from the sides. At least 592 px: the map's own minimum height, 560, and the padding. */
+.grid-row > .dragdroppable-column:has(#MARKDOWN-fleet-map) {
+  flex-grow: 1;
+}
+#MARKDOWN-fleet-map > .resizable-container {
+  width: 100% !important;
+  max-width: 100% !important;
+  height: max(592px, 100vh - 139px) !important;
+}
+
+/* Navbar: "+" (new) and the theme switcher. */
+li.ant-menu-submenu:has(> .ant-menu-submenu-title[data-menu-id$="-new-dropdown"]),
+li.ant-menu-submenu:has(> .ant-menu-submenu-title[data-menu-id$="-theme-sub-menu"]) {
+  display: none !important;
+}
+
+/* Settings: Info and the About group (Superset's name and version); User → Logout remains. */
+li.ant-menu-item[data-menu-id$="-info"],
+li.ant-menu-item-group:has([data-menu-id$="-about-info"]),
+li.ant-menu-item-divider:has(+ li.ant-menu-item-group [data-menu-id$="-about-info"]) {
+  display: none !important;
+}
+
+/* ATOMA's top-level tabs as a lens switch in the navbar, centred: Map and Insights (owner,
+   29 Oct). Pinned to the window, a scroll-linked animation moves it up as fast as the navbar
+   scrolls away. Without that support, or narrower than 900 px, the tab row stays in the page.
+   With the switch, the map's block grows by the tab row's 46 px: 93 px are left above and
+   below it. */
+@supports (animation-timeline: scroll()) {
+  @media (min-width: 900px) {
+    #TABS-main > .ant-tabs-nav {
+      position: fixed;
+      top: 9px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 1000;
+      margin: 0;
+      padding: 4px;
+      border-radius: 12px;
+      background: rgba(11, 29, 51, 0.06);
+      animation: petrolyst-lens-scroll linear both;
+      animation-timeline: scroll(root block);
+      animation-range: 0 61px;
+    }
+    #TABS-main > .ant-tabs-nav::before,
+    #TABS-main > .ant-tabs-nav .ant-tabs-ink-bar,
+    #TABS-main > .ant-tabs-nav .anchor-link-container {
+      display: none;
+    }
+    #TABS-main > .ant-tabs-nav .ant-tabs-nav-list {
+      gap: 4px;
+    }
+    #TABS-main > .ant-tabs-nav .ant-tabs-tab {
+      margin: 0 !important;
+      padding: 7px 18px 7px 14px !important;
+      border-radius: 9px !important;
+      font-size: 15px;
+      font-weight: 600;
+      color: #3b4a5c;
+    }
+    #TABS-main > .ant-tabs-nav .ant-tabs-tab-active {
+      background: #0b1d33 !important;
+    }
+    #TABS-main > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn {
+      color: #fff !important;
+    }
+    #TABS-main > .ant-tabs-nav [data-test="span-title"]::before {
+      content: "";
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      margin-right: 8px;
+      vertical-align: -3px;
+      background: currentColor;
+      -webkit-mask: var(--lens-icon) center / contain no-repeat;
+      mask: var(--lens-icon) center / contain no-repeat;
+    }
+    #TABS-main .ant-tabs-tab[data-node-key="TAB-fleet"] {
+      --lens-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%204%203%206v14l6-2%206%202%206-2V4l-6%202-6-2z'/%3E%3Cpath%20d='M9%204v14M15%206v14'/%3E%3C/svg%3E");
+    }
+    #TABS-main .ant-tabs-tab[data-node-key="TAB-site"] {
+      --lens-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020V10M10%2020V4M16%2020v-7M22%2020H2'/%3E%3C/svg%3E");
+    }
+    #MARKDOWN-fleet-map > .resizable-container {
+      height: max(592px, 100vh - 93px) !important;
+    }
+    /* A third lens, AI, as a teaser: greyed, tagged PRO, not a tab and not clickable (owner,
+       29 Oct; no AI lens is built until Botswerk exists). Drawn by the tab list itself, so the
+       dashboard's layout stays Map and Insights. From 1100 px only: narrower, the wider switch
+       would cover the logo. */
+    @media (min-width: 1100px) {
+      #TABS-main > .ant-tabs-nav .ant-tabs-nav-list::before {
+        content: "AI" / "AI, available with Petrolyst Pro";
+        order: 1;
+        display: flex;
+        align-items: center;
+        padding: 7px 58px 7px 40px;
+        border-radius: 9px;
+        font-size: 15px;
+        font-weight: 600;
+        line-height: 22px;
+        color: #8a96a3;
+        cursor: not-allowed;
+        background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238a96a3'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z'/%3E%3Cpath%20d='M20%203v4M22%205h-4'/%3E%3C/svg%3E") 14px center / 18px 18px no-repeat;
+      }
+      #TABS-main > .ant-tabs-nav .ant-tabs-nav-list::after {
+        content: "PRO" / "";
+        position: absolute;
+        right: 14px;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 3px 7px;
+        border-radius: 999px;
+        background: #0f7b6c;
+        color: #fff;
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        line-height: 1;
+        pointer-events: none;
+      }
+    }
+  }
+}
+@keyframes petrolyst-lens-scroll {
+  to {
+    transform: translate(-50%, -61px);
+  }
+}