Documentation Source Text

Check-in [b24301fa11]
Login

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

Overview
Comment:Use the experimental mobile-friendly menu.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | mobile-friendly
Files: files | file ages | folders
SHA1: b24301fa11c0e751bdbb4aabc0a28a7431378ac2
User & Date: drh 2016-08-31 12:02:13.127
Context
2016-08-31
13:35
Split out the CSS into a separate "sqlite.css" file. Add the "common_links" TCL procedure for generating the "Common Links" bullet list. Other changes to the homepage to try to be more mobile friendly. (check-in: 047e6c36f7 user: drh tags: mobile-friendly)
12:02
Use the experimental mobile-friendly menu. (check-in: b24301fa11 user: drh tags: mobile-friendly)
10:07
Fix date formats in the Last-Modified header. (check-in: 363a0d0503 user: drh tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to document_header.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



proc document_header {title path {search {}}} {
  set ret [subst -nocommands {
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html><head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>$title</title>
  <style type="text/css">




    body {
        margin: auto;
        font-family: Verdana, sans-serif;
        padding: 8px 1%;
    }
    
    .nounderline a { text-decoration: none }

    a { color: #044a64 }
    a:visited { color: #734559 }
    
    .logo { position:absolute; margin:3px; }
    .tagline {
      float:right;
      text-align:right;
      font-style:italic;
      width:300px;
      margin:12px;
      margin-top:58px;
    }









































































    .menubar {
      clear: both;
      border-radius: 8px;
      background: #044a64;
      padding: 0px;
      margin: 0px;







>



>
>
>
>

|
|
<







|








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








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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112



proc document_header {title path {search {}}} {
  set ret [subst -nocommands {
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html><head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>$title</title>
  <style type="text/css">
    * {box-sizing:border-box;}
    @media screen and (max-width: 800px){
      body {margin: 0;}
    }
    body {
      margin-top: 0;
      font-family: Verdana, sans-serif;

    }
    
    .nounderline a { text-decoration: none }

    a { color: #044a64 }
    a:visited { color: #734559 }
    
    .logo { float: left; margin:1px; }
    .tagline {
      float:right;
      text-align:right;
      font-style:italic;
      width:300px;
      margin:12px;
      margin-top:58px;
    }

    /* Style common to both the main and submenu */
    .menu::before {
      content: "";
      clear: both;     /* Clear the Logo and TagLine */
      display: block;
    }
    .menu ul {
      list-style-type: none;
      margin-left: 1px;
      margin-right: 1px;
      margin-top: 0;
      margin-bottom: 0;
      padding: 0;
      overflow: hidden;
    }
    .menu ul li {
      color: white;
    }
    .menu ul li a {
      display: block;
      color: white;
      text-align: center;
      padding: 0.7ex 1.4ex;
      text-decoration: none;
    }
    
    /* Styling specific to the main menu */
    .mainmenu ul {
      background-color: #044a64;
      border-radius: 8px;
    }
    .mainmenu ul li {
      float: left;
    }
    .mainmenu ul li.search {
      float: right;
    }
    
    /* Styling specific to the submenu */
    .submenu {
      display: none;
    }
    .submenu ul {
      color: white;
    }
    .submenu ul li {
      float: none;
      border-radius: 8px;
      background-color: #0482c4;
      border-top: 2px solid white;
    }
    
    /* Add the "mobileonly" class to any elements that should be visible
    ** on narrow-screen mobile devices only */
    @media screen and (min-width: 600px){
      /* Settings for wide desktop screens */
      .mobileonly {display: none;}
    }
    /* Add the "desktoponly" class to any elements that should be visible
    ** on desktops with at least 600 pixels of horizontal space. */
    @media screen and (max-width: 600px){
      /* Settings for narrow mobile screens */
      .desktoponly {display: none;}
    }
    /* Add the "wideonly" class to any elements that should be visible
    ** on wide-screen desktops with  */
    @media screen and (max-width: 800px){
      /* Settings for narrow mobile screens */
      .wideonly {display: none;}
    }
    

    .menubar {
      clear: both;
      border-radius: 8px;
      background: #044a64;
      padding: 0px;
      margin: 0px;
︙︙
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

136

137



138
139
140
141
142


143
144
145
146
147
148


149
150
151

152
153
154
155









156
157
158
159
160
161
162

  if {[file exists DRAFT]} {
    set tagline {<font size="6" color="red">*** DRAFT ***</font>}
  } else {
    set tagline {Small. Fast. Reliable.<br>Choose any three.}
  }

  append ret [subst -nocommands {<body>
    <div><!-- container div to satisfy validator -->
    
    <div class=nosearch>
    <a href="${path}index.html">
    <img class="logo" src="${path}images/sqlite370_banner.gif" alt="SQLite Logo"
     border="0"></a>
    <div><!-- IE hack to prevent disappearing logo--></div>
    <div class="tagline">${tagline}</div>

    <table width=100% class="menubar"><tr>
      <td width=100%>

      <div class="toolbar">

        <a href="${path}about.html">About</a>



        <a href="${path}docs.html">Documentation</a>
        <a href="${path}download.html">Download</a>
        <a href="${path}copyright.html">License</a>
        <a href="${path}support.html">Support</a>
        <a href="http://www.hwaci.com/sw/sqlite/prosupport.html">Purchase</a>


      </div>
  }]

  if {$search==""} {
    set initval   "Search with FTS5..."
    set initstyle {font-style:italic;color:#044a64}


  } else {
    set initval   $search
    set initstyle {font-style:normal;color:black}

  }

  append ret [subst -nocommands {
    <script>









      /* 
      ** Set the cookie named "name" to value "value". Expires in "days" days.
      */
      function createCookie(name,value,days) {
        if (days) {
          var date = new Date();
          date.setTime(date.getTime()+(days*24*60*60*1000));








<
<

<
|
<
|
|
|
<
|
>
|
>
|
>
>
>
|
|
|
|
|
>
>
|
<
|
<
|
|
>
>
|
<
<
>
|



>
>
>
>
>
>
>
>
>








194
195
196
197
198
199
200


201

202

203
204
205

206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221

222

223
224
225
226
227


228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248

  if {[file exists DRAFT]} {
    set tagline {<font size="6" color="red">*** DRAFT ***</font>}
  } else {
    set tagline {Small. Fast. Reliable.<br>Choose any three.}
  }

  append ret [subst -nocommands {<body>


    <div class=nosearch>

    <img class="logo" src="${path}images/sqlite370_banner.gif" alt="SQLite" border="0">

    <div><!-- IE hack to prevent disappearing logo --></div>
    <div class="tagline desktoponly">
      $tagline

    </div>
    </div>
    <div class="menu mainmenu">
    <ul>
    <li><a href="${path}index.html">Home</a>
    <li class='mobileonly'><a href="javascript:void(0)" onclick="toggle_menu()">
                           Menu</a>
    <li class='wideonly'><a href='${path}about.html'>About</a>
    <li class='desktoponly'><a href="${path}docs.html">Documentation</a>
    <li class='desktoponly'><a href="${path}download.html">Download</a>
    <li class='wideonly'><a href='${path}copyright.html'>License</a>
    <li class='desktoponly'><a href="${path}support.html">Support</a>
    <li class='desktoponly'><a href="http://www.hwaci.com/sw/sqlite/prosupport.html">Purchase</a>
    <li class='search'><a href="#">Search</a>
    </ul>
    </div>

    <div class="menu submenu" id="submenu">

    <ul>
    <li><a href='${path}docs.html'>Documentation</a>
    <li><a href='${path}support.html'>Support</a>
    <li><a href='http://www.hwaci.com/sw/sqlite/prosupport.html'>Purchase</a>
    </ul>


    </div>
  }]

  append ret [subst -nocommands {
    <script>
      function toggle_menu() {
        var w = document.getElementById("submenu");
        if( w.style.display=="block" ){
          w.style.display = "none";
        }else{
          w.style.display = "block";
        }
      }
      
      /* 
      ** Set the cookie named "name" to value "value". Expires in "days" days.
      */
      function createCookie(name,value,days) {
        if (days) {
          var date = new Date();
          date.setTime(date.getTime()+(days*24*60*60*1000));
︙︙
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232

      /* 
      ** Delete cookie "name".
      */
      function eraseCookie(name) {
        createCookie(name,"",-1);
      }

      gMsg = "Search with FTS5..."
      function entersearch() {
        var q = document.getElementById("q");
        if( q.value == gMsg ) { q.value = "" }
        q.style.color = "black"
        q.style.fontStyle = "normal"
      }
      function leavesearch() {
        var q = document.getElementById("q");
        if( q.value == "" ) { 
          q.value = gMsg
          q.style.color = "#044a64"
          q.style.fontStyle = "italic"
        }
      }
      function hideorshow(btn,obj){
        var x = document.getElementById(obj);
        var b = document.getElementById(btn);
        if( x.style.display!='none' ){
          x.style.display = 'none';
          b.innerHTML='show';
        }else{
          x.style.display = '';
          b.innerHTML='hide';
        }
        return false;
      }
    </script>
    <td>
        <div style="padding:0 1em 0px 0;white-space:nowrap">
        <form name=f method="GET" action="${path}search">
          <input id=q name=q type=search
           onfocus="entersearch()" onblur="leavesearch()" style="width:24ex;padding:1px 1ex; border:solid white 1px; font-size:0.9em ; $initstyle;" value="$initval">
          <input type=submit value="Go" style="border:solid white 1px;background-color:#044a64;color:white;font-size:0.9em;padding:0 1ex">
        </form>
        </div>
      </table>
    </div>    <!-- matches "div class=nosearch" -->
  }]

  return $ret
}








<
<
<
<
<
<
<
<
<
<
<
<
<
<
<













<
<
<
<
<
<
<
<
<






270
271
272
273
274
275
276















277
278
279
280
281
282
283
284
285
286
287
288
289









290
291
292
293
294

      /* 
      ** Delete cookie "name".
      */
      function eraseCookie(name) {
        createCookie(name,"",-1);
      }
















      function hideorshow(btn,obj){
        var x = document.getElementById(obj);
        var b = document.getElementById(btn);
        if( x.style.display!='none' ){
          x.style.display = 'none';
          b.innerHTML='show';
        }else{
          x.style.display = '';
          b.innerHTML='hide';
        }
        return false;
      }
    </script>









    </div>    <!-- matches "div class=nosearch" -->
  }]

  return $ret
}