Merge pull request #118 from pythoncanarias/fix-programa-in-mobile

Fix pretalx overflow in mobile
pythoncanarias · Sep 10, 2023 · 4dc1fbc · 4dc1fbc
2 parents a34ea7a + ae6db93
commit 4dc1fbc
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/theme/pycones23/static/assets/css/main.css b/theme/pycones23/static/assets/css/main.css
@@ -160,11 +160,18 @@ body {
 
 @media (min-width: 70rem) {
   .header {
+    position: sticky;
+    top: 0;
+    z-index: 40;
     flex-direction: row;
     background: var(--blue-pink-gradient);
     color: var(--light-text-color);
   }
 
+  body:has(pretalx-schedule) .header {
+    position: relative;
+  }
+
   .header .logo-wrapper {
     margin: 0;
     padding-left: 0.75rem;

diff --git a/theme/pycones23/templates/programa.html b/theme/pycones23/templates/programa.html
@@ -17,3 +17,14 @@
     <a download target="_blank" class="button is-medium button is-primary" href="https://charlas.2023.es.pycon.org/pycones-2023/schedule/export/schedule.ics">Descargar ICal</a>
     <a download target="_blank" class="button is-medium button is-link" href="https://charlas.2023.es.pycon.org/pycones-2023/schedule/export/schedule.xcal">Descargar XCal</a>
 </div>
+
+<script>
+    // Because pretalx uses a shadow dom element, we need to inject the style tag programmatically
+    const style = document.createElement('style');
+    style.innerHTML = ".pretalx-schedule .settings { margin-left: 0; width: auto; }";
+    style.innerHTML += ".pretalx-schedule .settings .filter-tracks { margin-right: 20px; }";
+
+    const pretalxWrapper = document.querySelector('pretalx-schedule');
+    const pretalxRoot = pretalxWrapper.shadowRoot;
+    pretalxRoot.appendChild(style);
+</script>
diff --git a/theme/pycones23_en/static/assets/css/main.css b/theme/pycones23_en/static/assets/css/main.css
@@ -160,11 +160,18 @@ body {
 
 @media (min-width: 70rem) {
   .header {
+    position: sticky;
+    top: 0;
+    z-index: 40;
     flex-direction: row;
     background: var(--blue-pink-gradient);
     color: var(--light-text-color);
   }
 
+  body:has(pretalx-schedule) .header {
+    position: relative;
+  }
+
   .header .logo-wrapper {
     margin: 0;
     padding-left: 0.75rem;

diff --git a/theme/pycones23_en/templates/programa.html b/theme/pycones23_en/templates/programa.html
@@ -17,3 +17,14 @@
     <a download target="_blank" class="button is-medium button is-primary" href="https://charlas.2023.es.pycon.org/pycones-2023/schedule/export/schedule.ics">Download ICal</a>
     <a download target="_blank" class="button is-medium button is-link" href="https://charlas.2023.es.pycon.org/pycones-2023/schedule/export/schedule.xcal">Download XCal</a>
 </div>
+
+<script>
+    // Because pretalx uses a shadow dom element, we need to inject the style tag programmatically
+    const style = document.createElement('style');
+    style.innerHTML = ".pretalx-schedule .settings { margin-left: 0; width: auto; }";
+    style.innerHTML += ".pretalx-schedule .settings .filter-tracks { margin-right: 20px; }";
+
+    const pretalxWrapper = document.querySelector('pretalx-schedule');
+    const pretalxRoot = pretalxWrapper.shadowRoot;
+    pretalxRoot.appendChild(style);
+</script>