Documentation Source Text

Check-in [61608e2d14]
Login

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

Overview
Comment:The "Search" menubar option causes a drop-down search box to appear.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | mobile-friendly
Files: files | file ages | folders
SHA1: 61608e2d146b09ec92dbeaf80a61b49b112a9826
User & Date: drh 2016-09-01 01:54:29.627
Context
2016-09-01
02:08
Fix the syntax.html document so that it uses the output_list proc to generate a variable-column bullet list. (check-in: 028b7208ab user: drh tags: mobile-friendly)
01:54
The "Search" menubar option causes a drop-down search box to appear. (check-in: 61608e2d14 user: drh tags: mobile-friendly)
01:30
Modify the output of the "search" script so that it works better on mobile screens. (check-in: a4e77179b1 user: drh tags: mobile-friendly)
Changes
Unified Diff Ignore Whitespace Patch
Changes to document_header.tcl.
︙︙
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

    <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' id='search_menubutton'><a href="search">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";
        }
      }
      function menu_off(){document.getElementById("submenu").style.display="none";}
      window.onbeforeunload = function(e){menu_off();}

      /* Disable the Search feature if we are not operating from CGI, since */
      /* Search is accomplished using CGI and will not work without it. */
      if( !location.origin.match(/http/) ){
        document.getElementById("search_menubutton").style.display = "none";
      }
      








|







|
>









>
>
>
>
>
>




|
|






|
|








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

    <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_div("submenu")'>
                           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' id='search_menubutton'>
    <a href="javascript:void(0)" onclick='toggle_div("searchmenu")'>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>
    <div class="searchmenu" id="searchmenu">
    <form method="GET" action="search">
    Search for: <input type="text" name="q">
    <input type="submit" value="Go">
    </form>
    </div>
  }]

  append ret [subst -nocommands {
    <script>
      function toggle_div(nm) {
        var w = document.getElementById(nm);
        if( w.style.display=="block" ){
          w.style.display = "none";
        }else{
          w.style.display = "block";
        }
      }
      function div_off(nm){document.getElementById(nm).style.display="none";}
      window.onbeforeunload = function(e){div_off("submenu");}

      /* Disable the Search feature if we are not operating from CGI, since */
      /* Search is accomplished using CGI and will not work without it. */
      if( !location.origin.match(/http/) ){
        document.getElementById("search_menubutton").style.display = "none";
      }
︙︙
Changes to rawpages/sqlite.css.
︙︙
100
101
102
103
104
105
106











107
108
109
110
111
112
113

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








>
>
>
>
>
>
>
>
>
>
>








100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

}
.submenu ul li {
  float: none;
  border-radius: 8px;
  background-color: #0482c4;
  border-top: 2px solid white;
}

/* Styling for the search menu */
.searchmenu {
  width: 100%;
  text-align: right;
  display: none;
  float: none;
  padding: 1ex:
  background-color: #0482c4;
  border-radius: 8px;
}

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