Merge pull request #75 from ascholerChemeketa/toc-search-combined-fixes

Toc search combined fixes
PreTeXtBook · Sep 14, 2023 · 27e9959 · 27e9959
2 parents 3e00215 + 3d462d6
commit 27e9959
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 78 deletions.
diff --git a/banner_wide.css b/banner_wide.css
@@ -17,6 +17,4 @@
   justify-content: center;
   max-width: var(--page-width);
   padding: 8px 0;
-  border-left: 1px solid var(--page-border-color);
-  border-right: 1px solid var(--page-border-color);
 } 
diff --git a/navbar_crc.css b/navbar_crc.css
@@ -22,6 +22,14 @@
 
 
 /* Generic and large screen layout */
+.ptx-navbar .toc-toggle, .ptx-navbar .index-button, .ptx-navbar .searchbox
+{
+}
+
+.ptx-navbar .nav-other-controls
+{
+    margin-left: 1em;
+}
 
 .ptx-navbar .treebuttons {
     display: flex;
@@ -50,7 +58,7 @@ nav.ptx-navbar {
     display: grid;
     grid-column-gap: 0em;
 
-    grid-template-columns:  2fr auto 1fr 1fr 1fr auto; 
+    grid-template-columns: auto auto auto 1fr 1fr auto; 
     grid-template-areas:
     "MH-toc-area MH-extras-area1 ptx-searchbox MH-extras-area2 MH-page-navigation-area MH-preferences-area";
     background-color: #fff;
@@ -68,7 +76,7 @@ nav.ptx-navbar {
     z-index: 20;
 
     position: sticky;
-    top: 1px;
+    top: 0;
     align-items: end;
     min-height: unset; /* to thwart navbar.less */
     margin-bottom: 0; /* to thwart navbar.less */
@@ -145,6 +153,7 @@ nav.ptx-navbar::after {
     grid-area: MH-preferences-area;
     justify-self: end;
     display: flex;
+    padding-left: 4em;
 }
 
 /* .ptx-navbar button, */
@@ -189,9 +198,7 @@ nav.ptx-navbar::after {
 	right: 0;
 	padding: 0;
 	background: #ededed;
-    grid-template-columns: 3fr 1fr 1fr 1fr 1fr 3fr;
-    grid-template-areas:
-        "MH-toc-area MH-extras-area1 ptx-searchbox MH-extras-area2 MH-preferences-area MH-page-navigation-area";
+    grid-template-columns: auto auto auto auto 1fr auto; 
 /*
 	box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 5px;
 */
@@ -214,6 +221,14 @@ nav.ptx-navbar::after {
     .ptx-navbar .toc-toggle {
         padding: 0 40px;
     }
+
+    .ptx-navbar .nav-runestone-controls {
+        padding-left: 0;
+    }
+
+    .ptx-navbar .treebuttons {
+        justify-content: center;
+    }
 
     .ptx-navbar :is(.toc-toggle, .previous-button, .up-button, .next-button, .calculator-toggle, .index-button) .name {
         display: none;
@@ -324,23 +339,20 @@ nav.ptx-navbar::after {
 }
 
 @media screen and (max-width: 800px) {
-    .ptx-navbar .index-button,
-    .ptx-navbar .user-preferences-button,
-    .ptx-navbar .calculator-toggle {
-	display: none;
-    }
-
     .ptx-navbar .toc-toggle .name,
     .ptx-navbar .previous-button .name,
     .ptx-navbar .up-button .name,
     .ptx-navbar .up-button .disabled .name,
     .ptx-navbar .next-button .name {
-	display: none;
+        display: none;
     }
 
-    .ptx-navbar .up-button .icon,
-    .ptx-navbar .up-button .disabled .icon{
+    .ptx-navbar .toc-toggle {
+        margin: 0;
     }
 
+    .ptx-navbar .calculator-toggle .icon {
+        padding-top: 5px;
+    }
 }
 
diff --git a/navbar_default.css b/navbar_default.css
@@ -26,7 +26,7 @@ nav.ptx-navbar {
   align-items: center;
   padding: 0 10px;
   gap: 10px;
-  min-height: 35px;
+  min-height: 34px;
 
   color: #333333;
   background-color: #ededed;
@@ -77,11 +77,21 @@ nav.ptx-navbar {
   display: flex;
 }
 
-.ptx-navbar :is(.treebuttons) {
-  flex-grow: 1;
-  justify-content: right;
+.ptx-navbar .treebuttons {
+  flex: 1 1 210px;
+  justify-content: end;
 }
 
+.ptx-navbar .nav-runestone-controls {
+  flex: 1 1 70px;
+  justify-content: end;
+}
+
+.pretext .navbar .dropdown {
+  height: 34px;
+}
+
+
 .ptx-navbar :is(.treebuttons, .nav-runestone-controls) > *:first-child {
   border-left: 1px solid #bababa;
 }
@@ -111,13 +121,13 @@ nav.ptx-navbar {
 
 .ptx-navbar .calculator-toggle {
   width: 60px;
-  height: 33px;
+  min-height: 32px;
   text-align: center;
   border-radius: 20px;
   margin-left: 5px;
   border: 2px solid #66f;
   line-height: 25px;
-  margin-top: 2px;
+  margin-top: 1px;
   background-color: #eef;
 }
 
@@ -176,6 +186,7 @@ nav.ptx-navbar {
     border-radius: 0;
     margin-left: 0;
     border: 0;
+    border-right: 1px solid #bababa;
     line-height: inherit;
     margin-top: 0;
     background-color: inherit;

diff --git a/navbar_wide.css b/navbar_wide.css
@@ -12,9 +12,6 @@
   width: var(--page-width);
   background: var(--nav-background-color);
   border-top: 0;
-
-  border-left: 1px solid var(--page-border-color);
-  border-right: 1px solid var(--page-border-color);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
@@ -34,4 +31,9 @@
   margin-top: 0;
   background-color: #ededed;
   padding: 0 15px;
+}
+
+
+.ptx-navbar > :last-child > :last-child {
+  border-right: none;
 }
diff --git a/pretext_add_on.css b/pretext_add_on.css
@@ -824,7 +824,7 @@
 
 .navbar .indexnav {
     position: absolute;
-    top: 5em;
+    top: 46px;
     right: 0;
 }
 .mininav {

diff --git a/shell_wide.css b/shell_wide.css
@@ -43,11 +43,13 @@ body.pretext {
   margin: 0 auto;
   background: var(--page-color);
 
-  border-left: 1px solid var(--page-border-color);
-  border-right: 1px solid var(--page-border-color);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
+.searchresultsplaceholder {
+  left: calc(50vw - 300px);
+}
+
 .pretext .ptx-page .ptx-main {
   max-width: var(--content-width);
   margin: 0 auto;
@@ -70,8 +72,6 @@ body.pretext {
   justify-content: center;
   margin: 0 auto;
   gap: 90px;
-  border-left: 1px solid var(--page-border-color);
-  border-right: 1px solid var(--page-border-color);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   border-bottom: 0;
 }
@@ -334,6 +334,13 @@ body.pretext {
   .ptx-content .ptx-runestone-container .parsons .sortable-code:first-of-type {
     padding: 0 25px;
   }
+
+  .searchresultsplaceholder {
+    width: 80vw;
+    left: 10vw;
+    bottom: 10vh;
+  }
+
 }
 
 @media screen and (max-width: 663px) {

diff --git a/style_wide.css b/style_wide.css
@@ -129,13 +129,6 @@
   width: 100%;
 }
 
-table.visualizer tr {
-}
-
-#vizLayoutTdFirst {
-
-}
-
 .ptx-content table tr td {
   font-size: 1rem;
 }
@@ -144,26 +137,6 @@ table.visualizer tr {
   align-items: stretch;
 }
 
-.pretext
-  .ptx-content-footer
-  .button:is(.previous-button, .next-button, .top-button) {
-  height: auto;
-  display: flex;
-  gap: 4px;
-  margin: 0;
-  justify-content: center;
-  align-items: center;
-  width: 80px;
-}
-
-.pretext
-  .ptx-content-footer
-  .button:is(.previous-button, .next-button, .top-button)
-  :is(.name, .icon) {
-  bottom: 0;
-  top: 0;
-  margin: 0;
-}
 
 /*change margin to px to avoid font size issues */
 .ptx-content

diff --git a/toc_crc.css b/toc_crc.css
@@ -40,6 +40,7 @@
 }
 .ptx-toc ul ul li a {
     font-weight: 400;
+    grid-template-columns: 1.5em 1fr;
 }
 
 .ptx-toc .toc-chapter .toc-item-list .toc-item .codenumber {
@@ -62,7 +63,7 @@
     font-weight: bold;
 }
 .ptx-toc ul ul ul a > .title {
-    margin-left: 0;
+    margin-left: 0.5em;
     font-size: 90%;
 }
 .ptx-toc ul ul ul ul a > .title {
@@ -134,7 +135,7 @@
     width: 240px;
 */
     grid-gap: 3px;
-    grid-template-columns: 1fr 10fr;
+    grid-template-columns: 1.25em 10fr;
     grid-template-areas:
         "toc-codenumber toc-content";
 }

diff --git a/toc_default.css b/toc_default.css
@@ -29,44 +29,55 @@
 
 /* Places codenumbers */
 .ptx-toc .codenumber {
-    position: absolute;
-    margin-right: 0;
-    margin-left: 0em;
-/*
-    margin-top: 0.4px;
-*/
-    left: 0.3em;
+    padding-left: 0.3rem;
     display: inline-block;
 }
+
+.ptx-toc :is(.toc-frontmatter, .toc-backmatter) > .toc-title-box > a .title {
+    margin-left: 1.5rem;
+}
+
+.ptx-toc .toc-part > .toc-title-box > a .codenumber {
+    min-width: 1.5rem;
+    padding-right: 0.3rem;
+}
+
+.ptx-toc .toc-chapter > .toc-title-box > a .codenumber {
+    min-width: 1.9rem;
+    padding-right: 0.3rem;
+}
+
+.ptx-toc .toc-chapter .toc-item-list .toc-item .codenumber {
+    min-width: 2.5rem;
+    padding-right: 0.3rem;
+}
+
+.ptx-toc .toc-chapter .toc-item-list .toc-item-list .toc-item .codenumber {
+    min-width: 3.3rem;
+    padding-right: 0.3rem;
+}
+
 .ptx-toc .toc-chapter .toc-item-list .toc-item .codenumber {
     font-size: 80%;
     padding-top: 0.16em;
 }
+
 /* no codenumbers on subsections (anything under section) */
 .ptx-toc .toc-section .toc-item-list .toc-item a > .codenumber {
-    display: none;
+    visibility: hidden;
 }
 .ptx-toc .toc-section .toc-item-list .toc-item a:hover > .codenumber {
-    display: inline-block;
+    visibility: visible;
 }
 
-.ptx-toc ul.structural .title {
-    margin-left: 1.4em;
-    display: inline-block;
-}
-.ptx-toc ul.structural ul.structural .title {
-    margin-left: 1.5em;
-}
 .ptx-toc ul.structural ul.structural .title:empty::after {
     content: "empty heading!";
     font-weight: bold;
 }
 .ptx-toc ul.structural ul.structural ul.structural .title {
-    margin-left: 2.5em;
     font-size: 90%;
 }
 .ptx-toc ul.structural ul.structural ul.structural ul.structural .title {
-    margin-left: 3.2em;
     font-size: 90%;
     font-style: italic;
 }
@@ -98,7 +109,7 @@
 .ptx-toc ul.structural ul.structural li a {
     font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-weight: normal;
-    /* padding-left: 2.0em; */
+    display: flex;
 }
 
 /* Removes underlines from links in toc */
@@ -203,6 +214,7 @@ omitting, because it caused a "jump"
 
 .ptx-toc ul.structural li .toc-title-box a {
     flex: 1 1;
+    display: flex;
 }
 
 .ptx-toc.focused .toc-expander {