Wapp

Check-in [c736164111]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Add the mediaquery.tcl example script.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: c73616411143f6647996bab46550d2e8fcb92cf6b38722ca789bcd5ac620138a
User & Date: drh 2018-08-31 15:01:58.846
Context
2018-11-27
17:27
Update the built-in SQLite to the lastest 3.26.0 beta for testing. (check-in: 6a4d54bab7 user: drh tags: trunk)
2018-08-31
15:01
Add the mediaquery.tcl example script. (check-in: c736164111 user: drh tags: trunk)
01:10
Fix the doclist.html document so that it works for non-root repositories. (check-in: f7863d2470 user: drh tags: trunk)
Changes
Side-by-Side Diff Ignore Whitespace Patch
Added examples/mediaquery.tcl. 












































































1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

# This application demonstrates responsive CSS design principles using
# the media-query mechanism.  To run this app:
#
#      wapptclsh mediaquery.tcl --server 8080
#
# Then connect various devices to see how their display changes according
# to the viewport size.  Or resize the browser window.  Or twist the
# handheld device between landscape and portrait modes.
#
# The foreground and background colors change according to the viewport size
# of the device.  In a real application, the CSS would be extended to make
# other changes according to the viewport size.
#
source wapp.tcl
proc wapp-default {} {
  wapp-content-security-policy {default_src 'self' 'unsafe-inline'}
  set top [wapp-param SCRIPT_NAME]
  wapp-trim {
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="%url($top/style.css)" rel="stylesheet">
    </head>
    <body>
    <h1>Media Query Breakpoints</h1>
    <div class="media-bg">
    <p>Viewport-size: <span id="screen-size"></span>
    <ul>
    <li> Red:     width &lt;= 600
    <li> Orange:  600 &lt; width &lt;= 768
    <li> Yellow:  768 &lt; width &lt;= 992
    <li> Green:   992 &lt; width &lt;= 1200
    <li> Blue:    1200 &lt; width
    </ul>
    </div>
    </body>
    <script>
    function setwidth(){
      x = document.getElementById("screen-size");
      x.innerHTML = window.innerWidth + "px by "+window.innerHeight+"px"
    }
    window.onresize = setwidth;
    setwidth();
    </script>
    </html>
  }
}
proc wapp-page-style.css {} {
  wapp-mimetype text/css
  wapp-cache-control max-age=3600
  wapp-trim {
    @media screen and (max-width: 600px) {
      /* Smallest devices, small phones.  Less than 600px */
      .media-bg {background:red;color:white;}
    }
    @media screen and (min-width: 600px) {
      /* Large phones and tablets in portrait mode.  600px and up */
      .media-bg {background:orange;color:black;}
    }
    @media screen and (min-width: 768px) {
      /* landscape tablets.  768px and up */
      .media-bg {background:yellow;color:black;}
    }
    @media screen and (min-width: 992px) {
      /* laptops and desktops.  992px and up */
      .media-bg {background:green;color:white;}
    }
    @media screen and (min-width: 1200px) {
      /* wide-screen desktops.  1200px and up */
      .media-bg {background:blue;color:white;}
    }
  }
}
wapp-start $argv