From 9448e815721c882196b8c541560270734574af8e Mon Sep 17 00:00:00 2001
From: Merula Turdus <merula.turdus@outlook.be>
Date: Sat, 17 Aug 2024 15:13:53 +0200
Subject: [PATCH] Show table of contents by default on wide screens

Summary:
Show table of content in left whitespace area in wide screens (width >= 1792px)

Closes T15920

Test Plan:
1) Open Phriction wiki page in browser which contain a number of chapter titles
2) Open Responsive Design Mode in browser (Ctrl-Shift-M in Firefox) and test different width's of the page (e.g. 1024, 1280, 1440, 1600, 1920, ...)
3) Open Remarkup Reference at `/book/phorge/article/remarkup/` and repeat step 2
4) Open a Differential revision to confirm that the unrelated ToC panel has no changes

Reviewers: O1 Blessed Committers, aklapper

Reviewed By: O1 Blessed Committers, aklapper

Subscribers: aklapper, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T15920

Differential Revision: https://we.phorge.it/D25790
---
 resources/celerity/map.php                  |  4 +-
 webroot/rsrc/css/phui/phui-document-pro.css | 75 +++++++++++++++++++++
 2 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 18a0c7c6f9..15f68e7820 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -149,7 +149,7 @@ return array(
     'rsrc/css/phui/phui-crumbs-view.css' => '614f43cf',
     'rsrc/css/phui/phui-curtain-object-ref-view.css' => '51d93266',
     'rsrc/css/phui/phui-curtain-view.css' => '68c5efb6',
-    'rsrc/css/phui/phui-document-pro.css' => 'b9613a10',
+    'rsrc/css/phui/phui-document-pro.css' => 'ec7031a9',
     'rsrc/css/phui/phui-document-summary.css' => 'b068eed1',
     'rsrc/css/phui/phui-document.css' => '52b748a5',
     'rsrc/css/phui/phui-feed-story.css' => 'a0c05029',
@@ -843,7 +843,7 @@ return array(
     'phui-curtain-view-css' => '68c5efb6',
     'phui-document-summary-view-css' => 'b068eed1',
     'phui-document-view-css' => '52b748a5',
-    'phui-document-view-pro-css' => 'b9613a10',
+    'phui-document-view-pro-css' => 'ec7031a9',
     'phui-feed-story-css' => 'a0c05029',
     'phui-font-icon-base-css' => '303c9b87',
     'phui-fontkit-css' => '1ec937e5',
diff --git a/webroot/rsrc/css/phui/phui-document-pro.css b/webroot/rsrc/css/phui/phui-document-pro.css
index cdd790f574..bf50afc484 100644
--- a/webroot/rsrc/css/phui/phui-document-pro.css
+++ b/webroot/rsrc/css/phui/phui-document-pro.css
@@ -303,3 +303,78 @@ body.printable {
 .phui-document-foot-content {
   margin: 64px 0 32px;
 }
+
+@media (min-width: 1792px) {
+  div.phui-document-view.phui-document-view-pro.has-curtain {
+    max-width: 1332px;
+    left: 50px;
+  }
+
+  .device-desktop div.phui-document-view.phui-document-view-pro.has-curtain
+    div.phui-document-content-outer {
+    width: 1332px;
+  }
+
+  div.phui-document-content {
+    margin-left: -200px;
+  }
+
+  div.phui-document-curtain {
+    top: 130px;
+    position: sticky;
+    right: 15%;
+  }
+
+  div.phui-document-content-outer,
+  div.phui-document-view.phui-document-view-pro
+    div.phui-header-shell.phui-header-tall {
+    margin-left: 300px;
+  }
+
+  div.phui-document-toc-container > a.phui-document-toc {
+    display: none;
+  }
+
+  .device-desktop div.phui-document-inner {
+    overflow: inherit;
+  }
+
+  div.phui-list-sidenav.phui-document-toc-list {
+    top: -16px;
+    margin-top: 23px;
+    box-shadow: 0px 0px;
+    overflow-y: auto;
+    max-height: calc(100vh - 120px);
+    border: solid 1px {$lightgreyborder};
+  }
+
+  div.has-curtain div.phui-list-sidenav.phui-document-toc-list {
+    left: -185px;
+    margin-left: 175px;
+  }
+
+  .device-desktop .has-curtain div.phui-document-content-view {
+    display: block;
+  }
+
+  div.phui-document-container {
+    position: relative;
+  }
+
+  div.phui-document-toc-container {
+    position: sticky;
+    left: 0px;
+    top: 0;
+    margin-left: 32px;
+  }
+
+  div.phui-list-sidenav.phui-document-toc-list {
+    display: block;
+  }
+
+  div.phui-document-view-pro div.phui-document-toc-content li a {
+    white-space: break-spaces;
+    text-indent: -10px;
+    padding-left: 10px;
+  }
+}