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 | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: c73616411143f6647996bab46550d2e8fcb92cf6b38722ca789bcd5ac620138a
User & Date: drh 2018-08-31 15:01:58
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
Hide Diffs Side-by-Side Diffs Ignore Whitespace Patch

Added examples/mediaquery.tcl.

            1  +# This application demonstrates responsive CSS design principles using
            2  +# the media-query mechanism.  To run this app:
            3  +#
            4  +#      wapptclsh mediaquery.tcl --server 8080
            5  +#
            6  +# Then connect various devices to see how their display changes according
            7  +# to the viewport size.  Or resize the browser window.  Or twist the
            8  +# handheld device between landscape and portrait modes.
            9  +#
           10  +# The foreground and background colors change according to the viewport size
           11  +# of the device.  In a real application, the CSS would be extended to make
           12  +# other changes according to the viewport size.
           13  +#
           14  +source wapp.tcl
           15  +proc wapp-default {} {
           16  +  wapp-content-security-policy {default_src 'self' 'unsafe-inline'}
           17  +  set top [wapp-param SCRIPT_NAME]
           18  +  wapp-trim {
           19  +    <!DOCTYPE html>
           20  +    <html>
           21  +    <head>
           22  +    <meta name="viewport" content="width=device-width,initial-scale=1.0">
           23  +    <link href="%url($top/style.css)" rel="stylesheet">
           24  +    </head>
           25  +    <body>
           26  +    <h1>Media Query Breakpoints</h1>
           27  +    <div class="media-bg">
           28  +    <p>Viewport-size: <span id="screen-size"></span>
           29  +    <ul>
           30  +    <li> Red:     width &lt;= 600
           31  +    <li> Orange:  600 &lt; width &lt;= 768
           32  +    <li> Yellow:  768 &lt; width &lt;= 992
           33  +    <li> Green:   992 &lt; width &lt;= 1200
           34  +    <li> Blue:    1200 &lt; width
           35  +    </ul>
           36  +    </div>
           37  +    </body>
           38  +    <script>
           39  +    function setwidth(){
           40  +      x = document.getElementById("screen-size");
           41  +      x.innerHTML = window.innerWidth + "px by "+window.innerHeight+"px"
           42  +    }
           43  +    window.onresize = setwidth;
           44  +    setwidth();
           45  +    </script>
           46  +    </html>
           47  +  }
           48  +}
           49  +proc wapp-page-style.css {} {
           50  +  wapp-mimetype text/css
           51  +  wapp-cache-control max-age=3600
           52  +  wapp-trim {
           53  +    @media screen and (max-width: 600px) {
           54  +      /* Smallest devices, small phones.  Less than 600px */
           55  +      .media-bg {background:red;color:white;}
           56  +    }
           57  +    @media screen and (min-width: 600px) {
           58  +      /* Large phones and tablets in portrait mode.  600px and up */
           59  +      .media-bg {background:orange;color:black;}
           60  +    }
           61  +    @media screen and (min-width: 768px) {
           62  +      /* landscape tablets.  768px and up */
           63  +      .media-bg {background:yellow;color:black;}
           64  +    }
           65  +    @media screen and (min-width: 992px) {
           66  +      /* laptops and desktops.  992px and up */
           67  +      .media-bg {background:green;color:white;}
           68  +    }
           69  +    @media screen and (min-width: 1200px) {
           70  +      /* wide-screen desktops.  1200px and up */
           71  +      .media-bg {background:blue;color:white;}
           72  +    }
           73  +  }
           74  +}
           75  +wapp-start $argv