Fossil SCM

Ajaxy animated hamburger button as requested by drh on the forum: https://fossil-scm.org/forum/forumpost/40a18bd742

wyoung 2018-09-05 23:08 trunk
Commit d7c43c5aa7761cbc1ab4ce04fed48e48951ad465450ad4d448a375e0a13b77e2
Parent dc5e06ff71b2a3a…
5 files changed +14 +34 +2 -4 +1 -1 +1 -1
~ skins/default/css.txt ~ skins/default/footer.txt ~ skins/default/header.txt ~ src/sitemap.c ~ src/style.c
M skins/default/css.txt
+14
--- skins/default/css.txt
+++ skins/default/css.txt
@@ -83,10 +83,11 @@
8383
 border:1px solid #eaeaea;
8484
 border-radius:5px;
8585
 overflow-x: auto;
8686
 overflow-y: hidden;
8787
 white-space: nowrap;
88
+ z-index: 21; /* just above hbdrop */
8889
 }
8990
9091
 .mainmenu a {
9192
 text-decoration:none;
9293
 color: #777;
@@ -95,10 +96,23 @@
9596
 .mainmenu a.active,
9697
 .mainmenu a:hover {
9798
 color: #000;
9899
 border-bottom:2px solid #D26911;
99100
 }
101
+
102
+div#hbdrop {
103
+ background-color: white;
104
+ border: 1px solid black;
105
+ border-top: white;
106
+ border-radius: 0 0 0.5em 0.5em;
107
+ display: none;
108
+ font-size: 80%;
109
+ left: 2em;
110
+ max-width: 33%;
111
+ position: absolute;
112
+ z-index: 20; /* just below mainmenu, but above timeline bubbles */
113
+}
100114
101115
 .submenu {
102116
 font-size: .7em;
103117
 padding: 10px;
104118
 border-bottom: 1px solid #ccc;
105119
--- skins/default/css.txt
+++ skins/default/css.txt
@@ -83,10 +83,11 @@
83 border:1px solid #eaeaea;
84 border-radius:5px;
85 overflow-x: auto;
86 overflow-y: hidden;
87 white-space: nowrap;
 
88 }
89
90 .mainmenu a {
91 text-decoration:none;
92 color: #777;
@@ -95,10 +96,23 @@
95 .mainmenu a.active,
96 .mainmenu a:hover {
97 color: #000;
98 border-bottom:2px solid #D26911;
99 }
 
 
 
 
 
 
 
 
 
 
 
 
 
100
101 .submenu {
102 font-size: .7em;
103 padding: 10px;
104 border-bottom: 1px solid #ccc;
105
--- skins/default/css.txt
+++ skins/default/css.txt
@@ -83,10 +83,11 @@
83 border:1px solid #eaeaea;
84 border-radius:5px;
85 overflow-x: auto;
86 overflow-y: hidden;
87 white-space: nowrap;
88 z-index: 21; /* just above hbdrop */
89 }
90
91 .mainmenu a {
92 text-decoration:none;
93 color: #777;
@@ -95,10 +96,23 @@
96 .mainmenu a.active,
97 .mainmenu a:hover {
98 color: #000;
99 border-bottom:2px solid #D26911;
100 }
101
102 div#hbdrop {
103 background-color: white;
104 border: 1px solid black;
105 border-top: white;
106 border-radius: 0 0 0.5em 0.5em;
107 display: none;
108 font-size: 80%;
109 left: 2em;
110 max-width: 33%;
111 position: absolute;
112 z-index: 20; /* just below mainmenu, but above timeline bubbles */
113 }
114
115 .submenu {
116 font-size: .7em;
117 padding: 10px;
118 border-bottom: 1px solid #ccc;
119
M skins/default/footer.txt
+34
--- skins/default/footer.txt
+++ skins/default/footer.txt
@@ -1,5 +1,39 @@
11
 <div class="footer">
22
 This page was generated in about
33
 <th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
44
 Fossil $release_version $manifest_version $manifest_date
55
 </div>
6
+
7
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8
+<th1>
9
+ html "<script nonce='$nonce'>"
10
+ html " (function() { var home='$home'; "
11
+</th1>
12
+ var panel = $("div#hbdrop");
13
+
14
+ function hidePanel() { panel.slideUp() }
15
+ function showPanel() { panel.slideDown() }
16
+
17
+ panel.on('click', hidePanel);
18
+
19
+ var needSitemapHTML = true;
20
+ $("div.mainmenu > a").first().on('click', function() {
21
+ if (panel.is(":visible")) {
22
+ // Hamburger button clicked a second time.
23
+ hidePanel();
24
+ }
25
+ else if (needSitemapHTML) {
26
+ // Only get it once per page load: it isn't likely to
27
+ // change on us.
28
+ $.get(home + '/sitemap', function(reply) {
29
+ panel.html($("ul#sitemap", reply));
30
+ needSitemapHTML = false;
31
+ showPanel();
32
+ });
33
+ }
34
+ else {
35
+ showPanel(); // just show what we built above
36
+ }
37
+ });
38
+ })();
39
+</script>
640
--- skins/default/footer.txt
+++ skins/default/footer.txt
@@ -1,5 +1,39 @@
1 <div class="footer">
2 This page was generated in about
3 <th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
4 Fossil $release_version $manifest_version $manifest_date
5 </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
--- skins/default/footer.txt
+++ skins/default/footer.txt
@@ -1,5 +1,39 @@
1 <div class="footer">
2 This page was generated in about
3 <th1>puts [expr {([utime]+[stime]+1000)/1000*0.001}]</th1>s by
4 Fossil $release_version $manifest_version $manifest_date
5 </div>
6
7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8 <th1>
9 html "<script nonce='$nonce'>"
10 html " (function() { var home='$home'; "
11 </th1>
12 var panel = $("div#hbdrop");
13
14 function hidePanel() { panel.slideUp() }
15 function showPanel() { panel.slideDown() }
16
17 panel.on('click', hidePanel);
18
19 var needSitemapHTML = true;
20 $("div.mainmenu > a").first().on('click', function() {
21 if (panel.is(":visible")) {
22 // Hamburger button clicked a second time.
23 hidePanel();
24 }
25 else if (needSitemapHTML) {
26 // Only get it once per page load: it isn't likely to
27 // change on us.
28 $.get(home + '/sitemap', function(reply) {
29 panel.html($("ul#sitemap", reply));
30 needSitemapHTML = false;
31 showPanel();
32 });
33 }
34 else {
35 showPanel(); // just show what we built above
36 }
37 });
38 })();
39 </script>
40
M skins/default/header.txt
+2 -4
--- skins/default/header.txt
+++ skins/default/header.txt
@@ -17,10 +17,11 @@
1717
 html "<a href='$home$url' class='active $cls'>$name</a>\n"
1818
 } else {
1919
 html "<a href='$home$url' class='$cls'>$name</a>\n"
2020
 }
2121
 }
22
+html "<a href='#'>&#9776;</a>"
2223
 menulink $index_page Home {}
2324
 if {[anycap jor]} {
2425
 menulink /timeline Timeline {}
2526
 }
2627
 if {[hascap oh]} {
@@ -39,13 +40,10 @@
3940
 if {[hascap j]} {
4041
 menulink /wiki Wiki wideonly
4142
 }
4243
 if {[hascap s]} {
4344
 menulink /setup Admin {}
44
- menulink /sitemap More... wideonly
4545
 } elseif {[hascap a]} {
4646
 menulink /setup_ulist Users {}
47
- menulink /sitemap More... {}
48
-} else {
49
- menulink /sitemap More... {}
5047
 }
5148
 </th1></div>
49
+<div id='hbdrop'></div>
5250
--- skins/default/header.txt
+++ skins/default/header.txt
@@ -17,10 +17,11 @@
17 html "<a href='$home$url' class='active $cls'>$name</a>\n"
18 } else {
19 html "<a href='$home$url' class='$cls'>$name</a>\n"
20 }
21 }
 
22 menulink $index_page Home {}
23 if {[anycap jor]} {
24 menulink /timeline Timeline {}
25 }
26 if {[hascap oh]} {
@@ -39,13 +40,10 @@
39 if {[hascap j]} {
40 menulink /wiki Wiki wideonly
41 }
42 if {[hascap s]} {
43 menulink /setup Admin {}
44 menulink /sitemap More... wideonly
45 } elseif {[hascap a]} {
46 menulink /setup_ulist Users {}
47 menulink /sitemap More... {}
48 } else {
49 menulink /sitemap More... {}
50 }
51 </th1></div>
 
52
--- skins/default/header.txt
+++ skins/default/header.txt
@@ -17,10 +17,11 @@
17 html "<a href='$home$url' class='active $cls'>$name</a>\n"
18 } else {
19 html "<a href='$home$url' class='$cls'>$name</a>\n"
20 }
21 }
22 html "<a href='#'>&#9776;</a>"
23 menulink $index_page Home {}
24 if {[anycap jor]} {
25 menulink /timeline Timeline {}
26 }
27 if {[hascap oh]} {
@@ -39,13 +40,10 @@
40 if {[hascap j]} {
41 menulink /wiki Wiki wideonly
42 }
43 if {[hascap s]} {
44 menulink /setup Admin {}
 
45 } elseif {[hascap a]} {
46 menulink /setup_ulist Users {}
 
 
 
47 }
48 </th1></div>
49 <div id='hbdrop'></div>
50
M src/sitemap.c
+1 -1
--- src/sitemap.c
+++ src/sitemap.c
@@ -46,11 +46,11 @@
4646
 login_check_credentials();
4747
 srchFlags = search_restrict(SRCH_ALL);
4848
 style_header("Site Map");
4949
 style_adunit_config(ADUNIT_RIGHT_OK);
5050
 @ <div class="columns" style="column-width:20em">
51
- @ <ul>
51
+ @ <ul id="sitemap">
5252
 @ <li>%z(href("%R/home"))Home Page</a>
5353
 for(i=0; i<sizeof(aExtra)/sizeof(aExtra[0]); i++){
5454
 char *z = db_get(aExtra[i].zProperty,0);
5555
 if( z==0 || z[0]==0 ) continue;
5656
 if( !inSublist ){
5757
--- src/sitemap.c
+++ src/sitemap.c
@@ -46,11 +46,11 @@
46 login_check_credentials();
47 srchFlags = search_restrict(SRCH_ALL);
48 style_header("Site Map");
49 style_adunit_config(ADUNIT_RIGHT_OK);
50 @ <div class="columns" style="column-width:20em">
51 @ <ul>
52 @ <li>%z(href("%R/home"))Home Page</a>
53 for(i=0; i<sizeof(aExtra)/sizeof(aExtra[0]); i++){
54 char *z = db_get(aExtra[i].zProperty,0);
55 if( z==0 || z[0]==0 ) continue;
56 if( !inSublist ){
57
--- src/sitemap.c
+++ src/sitemap.c
@@ -46,11 +46,11 @@
46 login_check_credentials();
47 srchFlags = search_restrict(SRCH_ALL);
48 style_header("Site Map");
49 style_adunit_config(ADUNIT_RIGHT_OK);
50 @ <div class="columns" style="column-width:20em">
51 @ <ul id="sitemap">
52 @ <li>%z(href("%R/home"))Home Page</a>
53 for(i=0; i<sizeof(aExtra)/sizeof(aExtra[0]); i++){
54 char *z = db_get(aExtra[i].zProperty,0);
55 if( z==0 || z[0]==0 ) continue;
56 if( !inSublist ){
57
M src/style.c
+1 -1
--- src/style.c
+++ src/style.c
@@ -391,11 +391,11 @@
391391
 @ <html>
392392
 @ <head>
393393
 @ <base href="$baseurl/$current_page" />
394394
 @ <meta http-equiv="Content-Security-Policy" \
395395
 @ content="default-src 'self' data: ; \
396
-@ script-src 'self' 'nonce-$<nonce>' ;\
396
+@ script-src 'self' 'nonce-$<nonce>' ajax.googleapis.com ;\
397397
 @ style-src 'self' 'unsafe-inline'" />
398398
 @ <meta name="viewport" content="width=device-width, initial-scale=1.0">
399399
 @ <title>$<project_name>: $<title></title>
400400
 @ <link rel="alternate" type="application/rss+xml" title="RSS Feed" \
401401
 @ href="$home/timeline.rss" />
402402
--- src/style.c
+++ src/style.c
@@ -391,11 +391,11 @@
391 @ <html>
392 @ <head>
393 @ <base href="$baseurl/$current_page" />
394 @ <meta http-equiv="Content-Security-Policy" \
395 @ content="default-src 'self' data: ; \
396 @ script-src 'self' 'nonce-$<nonce>' ;\
397 @ style-src 'self' 'unsafe-inline'" />
398 @ <meta name="viewport" content="width=device-width, initial-scale=1.0">
399 @ <title>$<project_name>: $<title></title>
400 @ <link rel="alternate" type="application/rss+xml" title="RSS Feed" \
401 @ href="$home/timeline.rss" />
402
--- src/style.c
+++ src/style.c
@@ -391,11 +391,11 @@
391 @ <html>
392 @ <head>
393 @ <base href="$baseurl/$current_page" />
394 @ <meta http-equiv="Content-Security-Policy" \
395 @ content="default-src 'self' data: ; \
396 @ script-src 'self' 'nonce-$<nonce>' ajax.googleapis.com ;\
397 @ style-src 'self' 'unsafe-inline'" />
398 @ <meta name="viewport" content="width=device-width, initial-scale=1.0">
399 @ <title>$<project_name>: $<title></title>
400 @ <link rel="alternate" type="application/rss+xml" title="RSS Feed" \
401 @ href="$home/timeline.rss" />
402

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button