Commit 63ddb1e18247770a463500b04089782bbebae2cb
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()">☰</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 |