diff --git a/bs.js b/bs.js index 7d381b4..85e992b 100755 --- a/bs.js +++ b/bs.js @@ -4,7 +4,6 @@ browserSync({ //proxy: 'http://137.149.200.93', proxy: "https://newspapers2.islandarchives.ca", files: "css/**/*.css", - files: "js/**/*.js", plugins: ["bs-rewrite-rules"], serveStatic: ["."], rewriteRules: [ diff --git a/css/components/islandora_mods.css b/css/components/islandora_mods.css index 6bd6de3..c0495c7 100755 --- a/css/components/islandora_mods.css +++ b/css/components/islandora_mods.css @@ -238,12 +238,18 @@ button.tl-menubar-button { .newspaper-browse .views-row { display: flex; + flex-direction: column; align-items: center; gap: var(--sp1); border-bottom: 1px solid #ccc; padding-bottom: var(--sp2); margin-block: var(--sp2); } +@media (min-width: 768px) { + .newspaper-browse .views-row { + flex-direction: row; + } +} .newspaper-browse .views-row h3 { margin: 0 0 var(--sp0-5); @@ -626,6 +632,39 @@ article .text-content img { border-right: 2px solid var(--color--upei-red) !important; } +@media screen and (max-width: 768px) { + .block-mirador { + /* Uses dynamic viewport height to fit mobile screens better */ + height: 100dvh; + min-height: 400px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + } + + /* Improve touch target interaction */ + .mirador-container * { + touch-action: manipulation; + } + + #mirador { + height: 100% !important; + width: 100% !important; + position: relative !important; + } + + /* Ensure navigation and controls are accessible on touch devices */ + .mirador-osd-container, + .mirador-canvas { + min-height: 200px; + touch-action: pan-x pan-y pinch-zoom; + } + + /* Fix for mobile browsers that may zoom in too much or show tap overlays */ + #mirador, + #mirador * { + -webkit-tap-highlight-color: transparent; + } +} /* ============================================================ RESPONSIVE ============================================================ */ @@ -683,3 +722,11 @@ article .text-content img { height: initial !important; } } +.view-newspapers-view .view-empty { + height: 100px; + display: flex; + justify-content: space-around; + background: #333; + font-size: 1.5rem; + align-items: center; +}