Commit 63ddb1e18247770a463500b04089782bbebae2cb

Authored by William Daniau
1 parent bec0ea4cd3
Exists in master

Ajout d'un template avec une variante sur le menu :

+ ouvert par défaut et affiché sur le côté gauche sur sa propre zone.
      + on peut le refermer augmentant la zone utilisée pour le contenu

Showing 2 changed files with 289 additions and 0 deletions Inline Diff

templates/html/Wize_with_index_sod.html
File was created 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>[% title %]</title>
6 <meta name='Generator' content='[% generator.name %]'>
7 <link rel="stylesheet"
8 href="[% resource('common/zim-variables.css') %]" >
9 <link rel="stylesheet"
10 href="[% resource('common/zim-style.css') %]" >
11 <link rel="stylesheet"
12 href="[% resource('common/zim-table-style.css') %]" >
13 <link rel="stylesheet"
14 href="[% resource('common/zim-special.css') %]" >
15 <link rel="stylesheet"
16 href="[% resource('common/zim-hljs.css') %]" >
17
18 <style type='text/css'>
19
20 /* Comme on a le menu sur le côté */
21 /* On augmente la taille de la page */
22 :root {
23 --main-page-width: 80em;
24 }
25
26 * { font-family: sans-serif }
27
28 a:hover { text-decoration: underline; }
29
30 /* Centre les images mais elles sont coupées aux sauts de page à l'impression */
31 img {
32 display: block;
33 margin-left: auto;
34 margin-right: auto;
35 }
36
37 /* Specifique au with index */
38 span.insen { color: grey }
39
40 .pages {
41 /*max-width: 1000px;*/
42 /*padding-left: 320px;*/
43 margin-left: 300px;
44 width: inherit;
45 transition: margin-left .3s;
46 background: white;
47 padding-left: 10px;
48 padding-right: 10px;
49 padding-bottom: 20px;
50 padding-top: 10px;
51 }
52
53 .menu{
54 float:left;
55 width: 300px;
56 color:var(--main-header-color);
57 overflow-x: hidden;
58 /*position: absolute;*/
59 transition:.3s;
60 background: var(--main-menu-background-color);
61 border-style: solid;
62 border-width: 1px;
63 margin-left:-20px;
64 }
65
66 .menu a,.menu a:link,.menu a:hover,.menu a:active,.menu a:visited {
67 color: var(--main-header-color);
68 }
69
70 .menuOpen {
71 /*display: block;*/
72 }
73
74 .menuClosed {
75 border-style: unset;
76 }
77
78 .header{
79 max-width: var(--main-page-width);
80 position: fixed;
81 width: 100%;
82 top:0;
83 background:white;
84 z-index: 1;
85 }
86
87 hr{
88 clear:both;
89 border-style: solid;
90 border-width: 1px;
91 border-color: var(--main-header-color);
92 }
93
94 body {
95 max-width: var(--main-page-width);
96 display:block;
97 margin-left:auto;
98 margin-right:auto;
99 background: var(--main-body-background-color);
100 }
101
102 .intercalaire {
103 background:white;
104 margin-top: 48px;
105 padding: 10px;
106 }
107
108 .bold-footer {
109 color: var(--main-header-color);
110 }
111
112 .zemaster {
113 background: white;
114 }
115
116 </style>
117
118 <!-- Themes clair :
119 atom-one-light.css, vs.css googlecode.css github.css
120 qtcreator_light.css
121 Themes sombres :
122 agate.css vs2015.css atom-one-dark.css hybrid.css
123 ir-black.css sunburst.css tomorrow-night-bright.css
124 qtcreator_dark.css
125 Demo live : https://highlightjs.org/static/demo/ -->
126 <link rel="stylesheet"
127 href="[% resource('common/hljs/styles/sunburst.css') %]" >
128
129 <!-- hljs -->
130 <script src="[% resource('common/hljs/highlight.pack.js') %]"></script>
131
132 <script>
133 function openNav() {
134 if (document.getElementById("mySidenav").getAttribute("class").split(' ')[1] == "menuClosed") {
135 document.getElementById("mySidenav").style.width = "300px";
136 document.getElementById("main").style.marginLeft = "300px";
137 document.getElementById("mySidenav").setAttribute("class","menu menuOpen");
138 /* Scroll to top when opening menu */
139 document.body.scrollTop = 0
140 document.documentElement.scrollTop = 0;
141 } else {
142 document.getElementById("mySidenav").style.width = "0";
143 document.getElementById("main").style.marginLeft = "0";
144 document.getElementById("mySidenav").setAttribute("class","menu menuClosed");
145 }
146 }
147 </script>
148 </head>
149 <body>
150
151 <!-- Header -->
152 <div class='header'>
153 <table class='navigation' style="float:left">
154 <tr class='navigation'>
155 <td class='navigation'>
156 <span style="font-size:30px;cursor:pointer;color: var(--main-header-color);" onclick="openNav()">&#9776;</span>
157 </td>
158 <td class='navigation'>
159 [% IF navigation.prev %]
160 <a href='[% uri(navigation.prev) %]'>
161 <img src="[% resource('common/arrow-left.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]">
162 </a>
163 [% ELSE %]
164 <img src="[% resource('common/arrow-left-inact.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]">
165 [% END %]
166 </td>
167 <td class='navigation'>
168 [% IF links.get("index") %]
169 <a href='[% uri(links.get("index")) %]'>
170 <img src="[% resource('common/arrow-up.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]">
171 </a>
172 [% ELSE %]
173 <img src="[% resource('common/arrow-up-inact.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]">
174 [% END %]
175 </td>
176 <td class='navigation'>
177 [% IF navigation.next %]
178 <a href='[% uri(navigation.next) %]'>
179 <img src="[% resource('common/arrow-right.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]">
180 </a>
181 [% ELSE %]
182 <img src="[% resource('common/arrow-right-inact.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]">
183 [% END %]
184 </td>
185 </tr>
186 </table>
187
188 <span>
189 [% FOR page IN pages %]
190 <a name='[% anchor(page) %]'></a>
191 <h1 style="display:inline-block;margin-left:20px;margin-top:5px;">
192 [% page.title %]</h1>
193 [% END %]
194 </span>
195
196 <table class='navigation' style="float:right;margin-right:10px;">
197 <tr class='navigation'>
198 <td class='navigation'>
199 [% FOR page IN pages %]
200 [% FOR link IN page.backlinks %]
201 [% IF loop.first %]<a href="#backlinks">
202 <img src='[% resource("common/backlink.png") %]' alt='[% gettext("Backlinks:") %]' title='[% gettext("Backlinks:") %]'>
203 </a>[% END %]
204 [% END %]
205 [% END %]
206 </td>
207 <td class='navigation'>
208 [% FOR page IN pages %]
209 [% FOR file IN page.attachments %]
210 [% IF loop.first %]<a href="#attach">
211 <img src='[% resource("common/attachment.png") %]' alt='[% gettext("Attachments:") %]' title='[% gettext("Attachments:") %]'>
212 </a>[% END %]
213 [% END %]
214 [% END %]
215 </td>
216 </tr>
217 </table>
218 </div>
219
220 <div class="intercalaire">
221 <hr />
222 </div>
223
224 <div class="zemaster">
225
226 <div id="mySidenav" class="menu menuOpen">
227 [% index() %]
228 </div>
229
230 [% options.empty_lines = "default" %]
231
232 <!-- Wiki content -->
233
234 <div id="main" class='pages'>
235 <!--[% FOR page IN pages %]-->
236 <!--
237 <div class='heading'>
238 <h1>[% page.title %] <a name='[% anchor(page) %]'></a></h1>
239 </div>
240 -->
241 <div class='content'>
242 [% page.body %]
243 </div>
244
245 <br />
templates/html/Wize_with_index_sod/common
File was created 1 ../common