Overview
Comment: | Move menu bar to bottom of screen on mobile, improve HTML for menu for navigation with text browser and accessibility |
---|---|
Downloads: | Tarball | ZIP archive | SQL archive |
Timelines: | family | ancestors | descendants | both | blocks |
Files: | files | file ages | folders |
SHA3-256: |
6152ca926405c92be779025f9a76d244 |
User & Date: | bohwaz on 2022-04-26 02:20:18 |
Other Links: | branch diff | manifest | tags |
Context
2022-05-02
| ||
11:56 | Merge with trunk check-in: 56711fffde user: bohwaz tags: blocks | |
2022-04-26
| ||
02:20 | Move menu bar to bottom of screen on mobile, improve HTML for menu for navigation with text browser and accessibility check-in: 6152ca9264 user: bohwaz tags: blocks | |
2022-04-25
| ||
01:43 | Update icon font with new icons, use {icon} function in _head.tpl check-in: 4d9cad0c5a user: bohwaz tags: blocks | |
Changes
Modified src/include/lib/Garradin/Template.php from [4d70ce41d4] to [93e2e7d79d].
︙ | ︙ | |||
186 187 188 189 190 191 192 193 194 195 196 197 198 199 | } return '<p class="block error">' . $this->escape($params['message']) . '</p>'; } protected function widgetIcon(array $params): string { $attributes = array_diff_key($params, ['shape']); $attributes = array_map(fn($v, $k) => sprintf('%s="%s"', $k, $this->escape($v)), $attributes, array_keys($attributes)); $attributes = implode(' ', $attributes); return sprintf('<b class="icn" %s>%s</b>', $attributes, Utils::iconUnicode($params['shape'])); | > > > > | 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 | } return '<p class="block error">' . $this->escape($params['message']) . '</p>'; } protected function widgetIcon(array $params): string { if (isset($params['html']) && $params['html'] == false) { return Utils::iconUnicode($params['shape']); } $attributes = array_diff_key($params, ['shape']); $attributes = array_map(fn($v, $k) => sprintf('%s="%s"', $k, $this->escape($v)), $attributes, array_keys($attributes)); $attributes = implode(' ', $attributes); return sprintf('<b class="icn" %s>%s</b>', $attributes, Utils::iconUnicode($params['shape'])); |
︙ | ︙ |
Modified src/templates/admin/_head.tpl from [d0b1bdfd4c] to [db4d97f3be].
︙ | ︙ | |||
49 50 51 52 53 54 55 | </figure> {/if} <ul> {if $is_logged} <?php $current_parent = substr($current, 0, strpos($current, '/')); ?> | | < | | | | | | < | | | 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 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | </figure> {/if} <ul> {if $is_logged} <?php $current_parent = substr($current, 0, strpos($current, '/')); ?> <li class="home{if $current == 'home'} current{elseif $current_parent == 'home'} current_parent{/if}"><h3><a href="{$admin_url}"><b data-icn="{icon html=false shape="home"}"></b><span>Accueil</span></a></h3> {if !empty($plugins_menu)} <ul> {foreach from=$plugins_menu key="plugin_id" item="name"} <li class="plugins {if $current == sprintf("plugin_%s", $plugin_id)} current{/if}"><a href="{plugin_url id=$plugin_id}">{$name}</a></li> {/foreach} </ul> {/if} </li> {if $session->canAccess($session::SECTION_USERS, $session::ACCESS_READ)} <li class="member list{if $current == 'membres'} current{elseif $current_parent == 'membres'} current_parent{/if}"><h3><a href="{$admin_url}membres/"><b data-icn="{icon html=false shape="users"}"></b></b><span>Membres</span></a></h3> <ul> {if $session->canAccess($session::SECTION_USERS, $session::ACCESS_WRITE)} <li class="member new{if $current == 'membres/ajouter'} current{/if}"><a href="{$admin_url}membres/ajouter.php">Ajouter</a></li> {/if} <li class="{if $current == 'membres/services'} current{/if}"><a href="{$admin_url}services/">Activités & cotisations</a></li> {if $session->canAccess($session::SECTION_USERS, $session::ACCESS_WRITE)} <li class="member message{if $current == 'membres/message'} current{/if}"><a href="{$admin_url}membres/message_collectif.php">Message collectif</a></li> {/if} </ul> </li> {/if} {if $session->canAccess($session::SECTION_ACCOUNTING, $session::ACCESS_READ)} <li class="{if $current == 'acc'} current{elseif $current_parent == 'acc'} current_parent{/if}"><h3><a href="{$admin_url}acc/"><b data-icn="{icon html=false shape="money"}"></b><span>Comptabilité</span></a></h3> <ul> {if $session->canAccess($session::SECTION_ACCOUNTING, $session::ACCESS_WRITE)} <li class="{if $current == 'acc/new'} current{/if}"><a href="{$admin_url}acc/transactions/new.php">Saisie</a></li> {/if} <li class="{if $current == 'acc/accounts'} current{/if}"><a href="{$admin_url}acc/accounts/">Comptes</a></li> <li class="{if $current == 'acc/simple'} current{/if}"><a href="{$admin_url}acc/accounts/simple.php">Suivi des écritures</a></li> <li class="{if $current == 'acc/years'} current{/if}"><a href="{$admin_url}acc/years/">Exercices & rapports</a></li> {if $session->canAccess($session::SECTION_ACCOUNTING, $session::ACCESS_WRITE)} <li class="{if $current == 'acc/charts'} current{/if}"><a href="{$admin_url}acc/charts/">Plans comptables</a></li> {/if} </ul> </li> {/if} {if $session->canAccess($session::SECTION_DOCUMENTS, $session::ACCESS_READ)} <li class="{if $current == 'docs'} current{elseif $current_parent == 'docs'} current_parent{/if}"><h3><a href="{$admin_url}docs/"><b data-icn="{icon html=false shape="folder"}"></b><span>Documents</span></a></h3> </li> {/if} {if $session->canAccess($session::SECTION_WEB, $session::ACCESS_READ)} <li class="{if $current == 'web'} current{elseif $current_parent == 'web'} current_parent{/if}"><h3><a href="{$admin_url}web/"><b data-icn="{icon html=false shape="globe"}"></b><span>Site web</span></a></h3> </li> {/if} {if $session->canAccess($session::SECTION_CONFIG, $session::ACCESS_ADMIN)} <li class="main config{if $current == 'config'} current{elseif $current_parent == 'config'} current_parent{/if}"><h3><a href="{$admin_url}config/"><b data-icn="{icon html=false shape="settings"}"></b><span>Configuration</span></a></h3> {/if} <li class="{if $current == 'me'} current{elseif $current_parent == 'me'} current_parent{/if}"><h3><a href="{$admin_url}me/"><b data-icn="{icon html=false shape="user"}"></b><span> Mes infos personnelles</span></a></h3> <ul> <li{if $current == 'me/services'} class="current"{/if}><a href="{$admin_url}me/services.php">Mes activités & cotisations</a></li> </ul> </li> {if !defined('Garradin\LOCAL_LOGIN') || !LOCAL_LOGIN} <li class="logout"><h3><a href="{$admin_url}logout.php"><b data-icn="{icon html=false shape="logout"}"></b><span>Déconnexion</span></a></h3></li> {/if} {if $help_url} <li> <h3><a href="{$help_url}" target="_blank"><b data-icn="{icon html=false shape="help"}"></b><span>Aide</span></a></h3> </li> {/if} {elseif !defined('Garradin\INSTALL_PROCESS')} <li><a href="{if $config.site_asso}{$config.site_asso}{else}{$www_url}{/if}">← Retour au site</a></li> <li><a href="{$admin_url}">Connexion</a> <ul> |
︙ | ︙ |
Modified src/www/admin/static/handheld.css from [4baefa0756] to [95a37e2987].
︙ | ︙ | |||
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 | max-width: calc(100% - 2em); width: calc(95% - 2em); } input[size] { width: auto; } a.icn-btn, input[type=submit], input[type=button], button, input[type=file] { padding: .4em .6em; } a.icn-btn { white-space: normal; } nav.breadcrumbs .quota { float: none; } nav.breadcrumbs ul { display: block; margin: .8em 0; } .header h1 { | > > > > | < < | > > > > > | < < < < < < | | < < | | > > > > > | | < | > | | > | | > | | < < < | > | | < > | < | | | | 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 113 114 115 116 117 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 | max-width: calc(100% - 2em); width: calc(95% - 2em); } input[size] { width: auto; } img { max-width: 100% !important; } a.icn-btn, input[type=submit], input[type=button], button, input[type=file] { padding: .4em .6em; } a.icn-btn { white-space: normal; } nav.breadcrumbs .quota { float: none; } nav.breadcrumbs ul { display: block; margin: .8em 0; } .header h1 { margin: 1em; text-align: center; font-size: 1.2em; } .header .menu { background: none !important; position: fixed; overflow: visible; bottom: inherit; z-index: 10000; margin: 0; width: 100vw; padding: 0; display: block; bottom: 0; top: inherit; left: 0; right: 0; } .header .menu .logo { display: none; } .header .menu *, .header .menu a { margin: 0; padding: 0; } .header .menu > ul { background: rgb(var(--gMainColor)); flex-wrap: nowrap; grid-template: none / repeat(auto-fit, minmax(20px, 1fr)); display: grid; align-items: center; } .header .menu > ul > li > h3 { display: inline; } .header .menu > ul > li > h3 a span { display: none; } .header .menu > ul > li > ul { display: none; } .header .menu h3 a { text-align: center; text-decoration: none !important; } .header .menu h3 b[data-icn]::before { float: none; display: block; position: relative; right: 0; margin: 0; padding: 10pt 0; line-height: 10pt; color: rgb(var(--gBgColor)); font-size: 20pt; } .header .menu li.current_parent h3 a { background: rgb(var(--gBgColor)); } .header .menu li.current h3 b[data-icn]::before, .header .menu > ul > li.current_parent h3 b[data-icn]::before { background: rgb(var(--gSecondColor)); color: rgb(var(--gBgColor)); text-shadow: 0px 0px 5px rgb(var(--gTextColor)), 0px 0px 5px rgb(var(--gTextColor)); } .header .menu > ul > li.current > ul, .header .menu > ul > li.current_parent > ul { display: flex; flex-wrap: wrap; justify-content: center; position: absolute; bottom: 30pt; left: 0; right: 0; background: rgb(var(--gSecondColor)); } .header .menu > ul > li.current > ul li, .header .menu > ul > li.current_parent > ul li { text-align: center; display: block; margin: .3rem; } .header .menu > ul > li.current > ul a, .header .menu > ul > li.current_parent > ul a { background: rgb(var(--gBgColor)); border-radius: .5em; color: rgb(var(--gMainColor)); padding: .3rem .6rem; font-size: 1em; font-weight: normal; } .header .menu > ul > li > ul li.current a { background: rgb(var(--gMainColor)); color: rgb(var(--gBgColor)); } main { margin: 0; padding: .1em; } |
︙ | ︙ | |||
290 291 292 293 294 295 296 | } #dialog > button { border: none; background: none; } | | | | 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 | } #dialog > button { border: none; background: none; } body main { padding-bottom: 7em; } dl.list { text-align: center; } table.statement td, table.statement tr { |
︙ | ︙ |
Modified src/www/admin/static/styles/01-layout.css from [ebaa181ac4] to [f9bc121654].
︙ | ︙ | |||
100 101 102 103 104 105 106 | } .header .menu::-webkit-scrollbar-thumb { background: rgba(var(--gBgColor), 0.5); border-radius: 10px; } | | > | | 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | } .header .menu::-webkit-scrollbar-thumb { background: rgba(var(--gBgColor), 0.5); border-radius: 10px; } .header .menu h3 { font-weight: bold; font-size: inherit; } .header .menu a { color: #fff; color: rgb(var(--gBgColor)); font-weight: bold; padding: 0.4em 0.4em 0.4em 1em; |
︙ | ︙ | |||
124 125 126 127 128 129 130 | } .header .menu li li a { font-size: 0.8em; padding-left: 2em; } | | < | > > > > > > > > > | | < | 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 163 164 | } .header .menu li li a { font-size: 0.8em; padding-left: 2em; } .header .menu li.current h3 a, .header .menu ul ul li.current a { background: rgb(var(--gBgColor)); color: rgb(var(--gMainColor)); } .header .menu h3 a { position: relative; } .header .menu h3 b[data-icn]::before { position: absolute; right: .4rem; content: attr(data-icn); display: block; font-family: "gicon"; float: right; text-decoration: none; margin-top: -.2em; font-size: 20pt; color: rgba(var(--gBgColor), .5); font-weight: normal; } .header .menu li.current h3 b[data-icn]::before { color: rgba(var(--gMainColor)); } ul.gallery { text-align: center; } ul.gallery li { display: inline-block; |
︙ | ︙ |
Modified src/www/admin/static/styles/05-navigation.css from [320458c7a4] to [e12c8f555c].
︙ | ︙ | |||
21 22 23 24 25 26 27 | nav.tabs .sub .title { margin: 0 1em 0 -1em; font-weight: bold; padding: .1em .5em; } nav.tabs li { | | | 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | nav.tabs .sub .title { margin: 0 1em 0 -1em; font-weight: bold; padding: .1em .5em; } nav.tabs li { margin: 0 0.2em; } nav.tabs li a { display: inline-block; background: rgba(var(--gSecondColor), .5); border-radius: .5em .5em 0 0; padding: .1em .5em; |
︙ | ︙ | |||
53 54 55 56 57 58 59 | nav.tabs aside { float: right; max-width: 50%; text-align: right; clear: right; } | | | | | | 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 | nav.tabs aside { float: right; max-width: 50%; text-align: right; clear: right; } main nav.menu > b { font-weight: normal; } main nav.menu { display: inline-block; position: relative; } main nav.menu span { display: none; } main nav.menu:hover span, main nav.menu:active span { display: flex; position: absolute; flex-direction: column; text-align: left; background: rgb(var(--gBgColor)); border-radius: .3em; padding: .3em; z-index: 1000; box-shadow: 2px 2px 5px var(--gLightBorderColor); } |