before day 14 (mobile)

WebEngineering-FHNW · Jan 9, 2024 · b2d71f3 · b2d71f3
1 parent 513661b
commit b2d71f3
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 3 deletions.
diff --git a/grails-app/controllers/rooms/SpoofController.groovy b/grails-app/controllers/rooms/SpoofController.groovy
@@ -2,22 +2,29 @@ package rooms
 
 class SpoofController {
 
-    final SAFARI  = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.2 Safari/605.1.15'
     final CHROME  = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
     final FIREFOX = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:120.0) Gecko/20100101 Firefox/120.0'
+    final SAFARI  = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.2 Safari/605.1.15'
+    final IPAD    = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.2 Safari/605.1.15'
+    final IPHONE  = 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.2 Mobile/15E148 Safari/604.1'
 
 
-    def index() {
+    def headers() {
         String result = '<pre>';
 
         result += '\n' + 'Headers:'
         request.getHeaderNames()
             .each { headerName -> result += '\n' +  "${headerName}: ${request.getHeader(headerName)}" }
 
-
         result += '</pre>'
         render text: result.toString()
+    }
 
+    def index() {
+        render view:"index"
+    }
 
+    def show(String height, String width) {
+        render text: "height is $height and width is $width"
     }
 }
diff --git a/grails-app/views/spoof/index.gsp b/grails-app/views/spoof/index.gsp
@@ -0,0 +1,22 @@
+
+<%@ page contentType="text/html;charset=UTF-8" %>
+<html>
+<head>
+  <title></title>
+    <style>
+        body {
+            width: 100vw;
+            height: 100vh;
+        }
+    </style>
+</head>
+<body id="body">
+<script>
+    const style = getComputedStyle(document.getElementById("body"));
+    let result = "";
+    result += "height=" + style.height;
+    result += "&width=" + style.width;
+    window.location.href = "/spoof/show?" + result;
+</script>
+</body>
+</html>
diff --git a/src/main/resources/public/AtContainer.html b/src/main/resources/public/AtContainer.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Try Container</title>
+    <style>
+
+        body {
+            margin: 1em;
+        }
+
+        main {
+
+        }
+
+        .myContainer {
+            container-type: inline-size; /* only looks at the width */
+            container-name: myContainer;
+            display:        flex;
+            flex-wrap:      wrap;
+            min-height:     3em;
+            margin:         1em;
+            overflow:       hidden;
+            box-shadow:     0 0 5px rebeccapurple;
+            background-color: lightgray;
+        }
+
+        .contained {
+            width:            200px;
+            min-height:       3em;
+            margin:           1em;
+            --my-color:       blue;
+            background-color: var(--my-color);
+        }
+
+        @container myContainer (width < 600px) {  /* name is optional */
+            .contained {
+                --my-color: red;
+            }
+            /* we cannot change myContainer's properties here */
+        }
+        @container myContainer (width < 101vw) {
+            .contained {
+                height: clamp( 3em, 9rem - 6cqw, 9em );
+            }
+        }
+        .outer {
+            display: grid;
+            grid-template-columns: 2fr 1fr;
+        }
+
+    </style>
+
+</head>
+<body>
+
+<main>
+    <p>Find two style classes: one for all the grey containers, a second one for the colored boxes.</p>
+
+    <div class="contained">
+    </div>
+
+
+    <div class="myContainer">
+        <div class="contained">
+        </div>
+        <div class="contained">
+        </div>
+        <div class="contained">
+        </div>
+    </div>
+
+    <div class="outer">
+        <div class="myContainer">
+            <div class="contained">
+            </div>
+            <div class="contained">
+            </div>
+            <div class="contained">
+            </div>
+        </div>
+        <div class="myContainer">
+            <div class="contained">
+            </div>
+        </div>
+    </div>
+
+</main>
+
+</body>
+</html>