Changeset 35237

Timestamp:

2021-08-02T19:42:42+12:00 (3 years ago)

Author:

anupama

Message:

1. In weebly's embedded-dl.html, added overflow-y: hidden to body element to hide scroller of body outside iframe. One problem is when using developer tools, the extra outer scroller (now no longer there) came in handy. 2. Changes in this commit's files: Trying to add media-queries to support mobile case for responsive layout to get equivalent of recent commit of empty spacer div and a scrollable subsequent div, but not quite right yet. However, undoing my recent commit's changes does not appear to have allowed full scrolling either.

File:

• main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css (modified) (2 diffs)

main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css

@@ -2 +2 @@
 will take up the space of the whakatohea navbar. Want the scrollbar shifted from
 body element into (an) element that spatially immediately follows the vertical spacer.*/
-body {
-    overflow: hidden;
+body#top {
+    overflow-y: hidden;
     margin: 0;
-    border: none;
-}
+    border: none;    
+}
+
 div#spacer-for-nav
 {
     height: 120px;
     width: auto;
-    /* margin-top:120px; Why did height not have any effect? Because of self-closing div. Need explicit closing div */
-}
+}    /* margin-top:120px; Why did height not have any effect? Because of self-closing div. Need explicit closing div. But an empty opening + closing div is dangerous in GS3, try using gsf:div element (not sure if class attribute will work on it) if xml equivalent of nbsp entity inside empty op+closing div doesn't work.*/
+
+
 /* https://www.w3schools.com/cssref/css_units.asp 
  https://css-tricks.com/a-complete-guide-to-calc-in-css/
@@ -19 +21 @@
 .shifted-frame {
     overflow: auto;
-    height: calc(100vh - 120px); /* Why does 100% not work? */
+    height: calc(100vh - 120px);
     width: auto;
+
+} /* Why does height calc(100% -120px) instead of using 100vh not work? */
+
+/*display: none;*/
+/*height: 100vh; */
+
+/* hardcoded values copied from weebly site theme's variables.less file called in header.less */
+@media screen and (max-width: 1024px) {
+    body {
+    overflow: auto;
+    }
+
+    div#spacer-for-nav {
+    height:93px;
+    }
+
+    .shifted-frame {
+    height: 100vh; /*calc(100vh - 93px);*/
+    /*overflow-y: auto;*//* scroll;*/
+    }
 }