Wapp: Check-in [c736164111]

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 Unified Diffs Show Whitespace Changes Patch

Added examples/mediaquery.tcl.

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

# 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