Documentation Source Text

Check-in [b24301fa11]
Login
Home Timeline Branches Tickets Wiki More...

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

Overview
Comment:Use the experimental mobile-friendly menu.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | mobile-friendly
Files: files | file ages | folders
SHA1: b24301fa11c0e751bdbb4aabc0a28a7431378ac2
User & Date: drh 2016-08-31 12:02:13
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
Hide Diffs Unified Diffs 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
...
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
...
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



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;
................................................................................
  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));
................................................................................
      /* 
      ** 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
}







>



>
>
>
>

|
|
<







|








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







 







|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
>
>
>
>
>
>
>
>
>
>







 







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













<
<
<
<
<
<
<
<
<






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
...
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
...
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



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;
................................................................................
  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));
................................................................................
      /* 
      ** 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
}

This page was generated in about 0.006s by Fossil 2.13 [c3de0a9930] 2020-09-18 16:58:18