Take care that header IDs are not confused with layout element IDs

This fixes issue #47 For the most part, it was a problem with not strict enough CSS selectors.
c3er · Dec 20, 2023 · 61d41a5 · 61d41a5
1 parent 45681df
commit 61d41a5
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 70 deletions.
diff --git a/app/css/print.css b/app/css/print.css
@@ -1,5 +1,5 @@
-#status-bar,
-#blocked-content-info {
+div#status-bar,
+div#blocked-content-info {
     display: none;
 }
 

diff --git a/app/css/screen.css b/app/css/screen.css
@@ -11,7 +11,7 @@
     --text-dark-color: #f8f8f2;
 }
 
-#status-bar {
+div#status-bar {
     background-color: #fff;
     border-top: var(--border-width) solid var(--border-color);
     bottom: 0;
@@ -22,7 +22,7 @@
     right: 0;
 }
 
-#status-text {
+p#status-text {
     display: unset;
     font-size: 9pt;
     line-height: 0;
@@ -31,7 +31,7 @@
     white-space: nowrap;
 }
 
-#menu-border {
+div#menu-border {
     background-color: #fff;
     border-bottom: var(--border-width) solid var(--border-color);
     height: 0px;
@@ -42,7 +42,7 @@
     z-index: 1000;
 }
 
-#blocked-content-info {
+div#blocked-content-info {
     background-color: #ffffe1;
     border-bottom-style: solid;
     border-top-style: solid;
@@ -61,33 +61,33 @@
     z-index: 1000;
 }
 
-.blocked-content-info-text {
+p.blocked-content-info-text {
     font-size: 10pt;
     margin-bottom: 0px;
     margin-top: 0px;
     padding-left: 10px;
     padding-right: 10px;
 }
 
-#blocked-content-info-text-container {
+span#blocked-content-info-text-container {
     display: table-cell;
     width: 100%;
 }
 
-#blocked-content-info-close-button {
+span#blocked-content-info-close-button {
     display: table-cell;
 }
 
-.dialog-content {
+div.dialog-content {
     font-size: 11pt;
 }
 
-.dialog-input-field {
+div.dialog-input-field {
     margin: 1em 0;
     width: 100%;
 }
 
-#search-input {
+input#search-input {
     width: 100%;
 }
 
@@ -128,7 +128,7 @@ input[type="number"] {
     cursor: text;
 }
 
-#error-dialog-content {
+span#error-dialog-content {
     cursor: text;
 }
 
@@ -138,7 +138,7 @@ input[type="number"]::-webkit-outer-spin-button {
     opacity: 1;
 }
 
-#content {
+main#content {
     display: flex;
     position: fixed;
     top: 0;
@@ -147,7 +147,7 @@ input[type="number"]::-webkit-outer-spin-button {
     right: 0;
 }
 
-#separator {
+div#separator {
     background-color: var(--border-color);
     cursor: col-resize;
     flex-grow: 0;
@@ -159,7 +159,7 @@ input[type="number"]::-webkit-outer-spin-button {
     user-select: none;
 }
 
-#toc {
+nav#toc {
     display: none;
     margin: 0px 0px var(--status-bar-height) 0px;
     max-width: calc(100% - 100px);
@@ -169,17 +169,17 @@ input[type="number"]::-webkit-outer-spin-button {
     width: 20%;
 }
 
-#toc * {
+nav#toc * {
     cursor: default;
     vertical-align: middle;
 }
 
-.toc-section {
+div.toc-section {
     margin: 0px -10px;
     padding: 0;
 }
 
-.toc-section a {
+div.toc-section a {
     color: black;
     display: inline-block;
     font-size: 11pt;
@@ -188,50 +188,50 @@ input[type="number"]::-webkit-outer-spin-button {
     text-decoration: none;
 }
 
-.toc-section:hover {
+div.toc-section:hover {
     background-color: var(--highlight-light-color);
 }
 
-.toc-expand-button {
+span.toc-expand-button {
     display: inline-block;
     padding: 5px;
 }
 
-.toc-expand-button img {
+span.toc-expand-button img {
     height: 0.8em;
     padding: 0.2em;
     width: 0.8em;
 }
 
-.toc-expand-button:hover {
+span.toc-expand-button:hover {
     background-color: var(--strong-highlight-light-color);
 }
 
-#content-body {
+article#content-body {
     margin: 0px 0px var(--status-bar-height) 0px;
     overflow: auto;
     padding: 10px 15px 10px 10px;
     width: 100%;
 }
 
-#content-body:focus {
+article#content-body:focus {
     outline: none;
 }
 
-.search-result {
+span.search-result {
     background-color: var(--highlight-light-color);
 }
 
-#selected-search-result {
+span#selected-search-result {
     background-color: var(--strong-highlight-light-color);
 }
 
-.dialog-tab-container {
+div.dialog-tab-container {
     align-items: stretch;
     display: flex;
 }
 
-.dialog-tab {
+div.dialog-tab {
     border-color: var(--border-color);
     border-style: solid;
     border-width: var(--border-width);
@@ -241,11 +241,11 @@ input[type="number"]::-webkit-outer-spin-button {
     padding: 10px;
 }
 
-.unselected-tab:hover {
+div.unselected-tab:hover {
     background-color: var(--highlight-light-color);
 }
 
-.dialog-tab-content {
+div.dialog-tab-content {
     border-color: var(--border-color);
     border-style: solid;
     border-width: var(--border-width);
@@ -264,11 +264,11 @@ input[type="number"]::-webkit-outer-spin-button {
     text-align: center;
 }
 
-#application-icon {
+img#application-icon {
     height: 15rem;
 }
 
-#issue-link-paragraph {
+p#issue-link-paragraph {
     text-align: right !important;
 }
 
@@ -299,45 +299,45 @@ input[type="number"]::-webkit-outer-spin-button {
         color: var(--text-dark-color);
     }
 
-    #status-bar {
+    div#status-bar {
         background: var(--element-dark-bgcolor);
         border-top: var(--border-width) solid var(--dark-border-color);
         color: var(--text-dark-color);
     }
 
-    #menu-border {
+    div#menu-border {
         background-color: var(--element-dark-bgcolor);
         border-bottom: var(--border-width) solid var(--dark-border-color);
     }
 
-    #blocked-content-info {
+    div#blocked-content-info {
         background-color: #7a1f28;
         border-color: black;
         color: var(--text-dark-color);
     }
 
-    #separator {
+    div#separator {
         background-color: var(--dark-border-color);
     }
 
-    .toc-section a,
-    .toc-section * {
+    div.toc-section a,
+    div.toc-section * {
         color: var(--text-dark-color);
     }
 
-    .toc-section:hover {
+    div.toc-section:hover {
         background-color: var(--highlight-dark-color);
     }
 
-    .toc-expand-button:hover {
+    span.toc-expand-button:hover {
         background-color: var(--strong-highlight-dark-color);
     }
 
-    .search-result {
+    span.search-result {
         background-color: var(--highlight-dark-color);
     }
 
-    #selected-search-result {
+    span#selected-search-result {
         background-color: var(--strong-highlight-dark-color);
     }
 
@@ -351,15 +351,15 @@ input[type="number"]::-webkit-outer-spin-button {
         border-bottom-color: var(--dark-border-color);
     }
 
-    .dialog-tab {
+    div.dialog-tab {
         border-color: var(--dark-border-color);
     }
 
-    .unselected-tab:hover {
+    div.unselected-tab:hover {
         background-color: var(--highlight-dark-color);
     }
 
-    .dialog-tab-content {
+    div.dialog-tab-content {
         border-color: var(--dark-border-color);
     }
 }
diff --git a/app/index.html b/app/index.html
@@ -21,13 +21,12 @@
         </style>
         <script src="index.js"></script>
     </head>
+
     <body>
         <dialog id="error-dialog">
             <form>
                 <p>Error</p>
-                <div>
-                    <span class="dialog-content" id="error-dialog-content"></span>
-                </div>
+                <div class="dialog-content" id="error-dialog-content"></div>
                 <div class="dialog-buttons">
                     <button id="error-ok-button" value="error-dialog-default">OK</button>
                 </div>
@@ -252,11 +251,11 @@ <h2 id="application-description"></h2>
         </div>
 
         <!-- See https://stackoverflow.com/a/55202728 (Best way to do a split pane in HTML [closed]) -->
-        <div id="content">
-            <div id="toc"></div>
+        <main id="content">
+            <nav id="toc"></nav>
             <div id="separator"></div>
-            <div class="markdown-body" id="content-body" tabindex="0"></div>
-        </div>
+            <article class="markdown-body" id="content-body" tabindex="0"></article>
+        </main>
 
         <div id="status-bar">
             <p id="status-text"></p>

diff --git a/app/lib/contentBlocking/contentBlockingRenderer.js b/app/lib/contentBlocking/contentBlockingRenderer.js
@@ -38,7 +38,7 @@ function changeInfoElementVisiblity(isVisible) {
 
     // If the info element is visible, adapt the top margin of the body element,
     // otherwise, remove (set to an empty string) the custom margin from the body element
-    _document.getElementById("content").style.marginTop = isVisible
+    _document.querySelector("main#content").style.marginTop = isVisible
         ? _window.getComputedStyle(infoElement).height
         : ""
 }

diff --git a/app/lib/renderer/common.js b/app/lib/renderer/common.js
@@ -1,7 +1,7 @@
 let _document
 
 function contentElement() {
-    return _document.getElementById("content-body")
+    return _document.querySelector("article#content-body")
 }
 
 exports.init = document => (_document = document)