Improve resource navigation and mobile layout

Author: MonitSharma

project-site.css

@@ -71,8 +71,10 @@ footer a { color: var(--accent); }
 .problem-archive .resource-grid { margin: 0 0 20px; }
 
 @media (max-width: 700px) {
-  nav { gap: 12px; }
-  nav a:first-child { display: none; }
+  .topbar-inner { min-height: 60px; flex-wrap: wrap; padding-block: 11px; }
+  nav { width: 100%; gap: 16px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
+  nav::-webkit-scrollbar { display: none; }
+  nav a { flex: 0 0 auto; }
   .hero { padding-block: 70px; }
   .hero h1 { font-size: clamp(3.1rem, 16vw, 5rem); }
   .content, .repo-index-head { grid-template-columns: 1fr; }

project-viewer.js

@@ -177,8 +177,6 @@
         if (href) {
           var link = doc.createElement('a');
           link.href = href;
-          link.target = '_blank';
-          link.rel = 'noopener noreferrer';
           appendText(link, linkMatch[1]);
           parent.appendChild(link);
         } else {
@@ -277,6 +275,7 @@
     button.className = className;
     button.dataset.viewerAction = action;
     button.textContent = label;
+    if (action === 'close') button.setAttribute('aria-label', 'Close resource viewer');
     return button;
   }
 
@@ -294,8 +293,10 @@
     this.downloadObjectUrl = '';
     this.requestId = 0;
     this.initialized = false;
+    this.historyEntry = false;
     this.onDocumentClick = this.onDocumentClick.bind(this);
     this.onDocumentKeydown = this.onDocumentKeydown.bind(this);
+    this.onPopState = this.onPopState.bind(this);
     this.onDialogClick = this.onDialogClick.bind(this);
     this.onDialogCancel = this.onDialogCancel.bind(this);
     this.init();
@@ -307,6 +308,7 @@
     this.buildDialog();
     doc.addEventListener('click', this.onDocumentClick);
     doc.addEventListener('keydown', this.onDocumentKeydown);
+    global.addEventListener('popstate', this.onPopState);
     this.initialized = true;
     return this;
   };
@@ -358,13 +360,9 @@
     var download = doc.createElement('a');
     download.className = 'resource-viewer-action';
     download.textContent = 'Download';
-    download.target = '_blank';
-    download.rel = 'noopener';
     var original = doc.createElement('a');
     original.className = 'resource-viewer-action secondary';
     original.textContent = 'Open original';
-    original.target = '_blank';
-    original.rel = 'noopener';
     actions.appendChild(download);
     actions.appendChild(original);
     footer.appendChild(note);
@@ -393,6 +391,23 @@
     this.open(link);
   };
 
+  ProjectResourceViewer.prototype.onPopState = function (event) {
+    if (event.state && event.state.projectViewerPath) {
+      var links = doc.querySelectorAll('a.resource-link');
+      var link = Array.prototype.find.call(links, function (candidate) {
+        return candidate.dataset.path === event.state.projectViewerPath;
+      });
+      if (link) {
+        this.open(link, { fromHistory: true });
+        return;
+      }
+    }
+    if (this.isOpen()) {
+      this.historyEntry = false;
+      this.close({ fromPopstate: true });
+    }
+  };
+
   ProjectResourceViewer.prototype.onDocumentKeydown = function (event) {
     if (!this.isOpen()) return;
     if (event.key === 'Escape' || event.key === 'Esc') {
@@ -434,7 +449,8 @@
     }
   };
 
-  ProjectResourceViewer.prototype.open = function (link) {
+  ProjectResourceViewer.prototype.open = function (link, options) {
+    options = options || {};
     var pathValue = link.dataset.path || link.getAttribute('href') || '';
     var url = safeUrl(pathValue, doc.baseURI);
     if (!url) {
@@ -448,6 +464,10 @@
       try { problemFiles = JSON.parse(link.dataset.problemFiles); } catch (error) { problemFiles = []; }
     }
     var item = { kind: kind, path: pathValue, url: url, title: title, fileName: link.dataset.fileName || basename(pathValue), problemFiles: problemFiles };
+    if (!options.fromHistory) {
+      global.history.pushState({ projectViewerPath: pathValue }, '', global.location.href);
+      this.historyEntry = true;
+    }
     this.previousFocus = doc.activeElement;
     this.requestId += 1;
     var requestId = this.requestId;
@@ -741,7 +761,12 @@
     this.downloadObjectUrl = '';
   };
 
-  ProjectResourceViewer.prototype.close = function () {
+  ProjectResourceViewer.prototype.close = function (options) {
+    options = options || {};
+    if (this.historyEntry && !options.fromPopstate) {
+      this.historyEntry = false;
+      global.history.back();
+    }
     this.requestId += 1;
     if (this.abortController && typeof this.abortController.abort === 'function') this.abortController.abort();
     this.abortController = null;
@@ -762,6 +787,7 @@
     this.close();
     doc.removeEventListener('click', this.onDocumentClick);
     doc.removeEventListener('keydown', this.onDocumentKeydown);
+    global.removeEventListener('popstate', this.onPopState);
     if (this.dialog) this.dialog.remove();
     this.dialog = null;
     this.initialized = false;