diff options
| author | Evgeny Zinoviev <me@ch1p.io> | 2022-07-11 13:06:00 +0300 |
|---|---|---|
| committer | Evgeny Zinoviev <me@ch1p.io> | 2022-07-11 13:06:00 +0300 |
| commit | c1e7ef4a65675d88515c76a20877c1d65aec3cac (patch) | |
| tree | 4454bfc557217eb7726f10801fa89bcfe2da881b | |
| parent | e12220dd63e9c91d87670c1ab413ba3d090c164d (diff) | |
skin/base: update header, fix for mobile devices
| -rw-r--r-- | htdocs/scss/app/head.scss | 10 | ||||
| -rw-r--r-- | htdocs/scss/app/mobile.scss | 19 | ||||
| -rw-r--r-- | htdocs/scss/bundle_common.scss | 2 | ||||
| -rw-r--r-- | skin/base.skin.php | 41 |
4 files changed, 46 insertions, 26 deletions
diff --git a/htdocs/scss/app/head.scss b/htdocs/scss/app/head.scss index fed30d1..4983299 100644 --- a/htdocs/scss/app/head.scss +++ b/htdocs/scss/app/head.scss @@ -7,7 +7,6 @@ border-bottom: 2px $border-color solid; } .head-logo { - padding: 4px 0; font-family: $ffMono; font-size: 15px; display: inline-block; @@ -110,8 +109,7 @@ body:not(.theme-changing) .head-logo-path { .head-items { float: right; - color: #777; // color of separators - //padding: 8px 0; + color: $dark-grey; // color of separators } a.head-item { color: $fg; @@ -128,8 +126,10 @@ a.head-item { > span { padding: 2px 0; - > span.moon-icon { + &.moon-icon { + padding: 0; position: absolute; + top: 0; left: 0; > svg path { @@ -152,6 +152,6 @@ a.head-item:hover { //color: $link-color; text-decoration: none; } -a.head-item:hover > span > span { +a.head-item:hover > span > span:not(.moon-icon) { border-bottom: 1px $head-items-separator solid; }
\ No newline at end of file diff --git a/htdocs/scss/app/mobile.scss b/htdocs/scss/app/mobile.scss index a765e25..27d250c 100644 --- a/htdocs/scss/app/mobile.scss +++ b/htdocs/scss/app/mobile.scss @@ -4,21 +4,31 @@ textarea { -webkit-overflow-scrolling: touch; } +.head { + padding: 0; +} + // header .head-logo { position: static; display: block; - //padding-bottom: 6px; - // not very good fix: overflow: hidden; white-space: nowrap; - padding-bottom: 0; + padding: 18px $side-padding 7px; } .head-logo::after { display: none; } .head-items { float: none; + padding: 0 $side-padding 0 $side-padding - 2px; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; +} +a.head-item { + float: none; + display: inline-block; } a.head-item:hover, a.head-item:active { @@ -28,9 +38,6 @@ a.head-item:last-child > span { border-right: 0; padding-right: 12px; } -a.head-item:first-child > span { - padding-left: 1px; -} // blog .blog-tags { diff --git a/htdocs/scss/bundle_common.scss b/htdocs/scss/bundle_common.scss index dd0bd6a..14fd8b0 100644 --- a/htdocs/scss/bundle_common.scss +++ b/htdocs/scss/bundle_common.scss @@ -5,6 +5,6 @@ @import "./app/pages"; @import "./hljs/github.scss"; -@media screen and (max-width: 600px) { +@media screen and (max-width: 640px) { @import "./app/mobile"; } diff --git a/skin/base.skin.php b/skin/base.skin.php index 616e1b3..aa1da8a 100644 --- a/skin/base.skin.php +++ b/skin/base.skin.php @@ -166,30 +166,43 @@ function getStaticVersion(string $name): string { } function renderHeader($ctx, $theme, $unsafe_logo_html) { - return <<<HTML +$items = [ + ['url' => 'javascript:void(0)', 'label' => $theme, 'label_id' => 'theme-switcher-label', 'theme_switcher' => true], + ['url' => '/', 'label' => 'blog'], + ['url' => '/projects/', 'label' => 'projects'], + ['url' => 'https://git.ch1p.io/?s=idle', 'label' => 'git'], + ['url' => '/misc/', 'label' => 'misc'], + ['url' => '/contacts/', 'label' => 'contacts'], + ['url' => '/', 'label' => 'blog'], +]; +if (\admin::isAdmin()) + $items[] = ['url' => '/admin/', 'label' => 'admin']; + +// here, items are rendered using for_each, so that there are no gaps (whitespaces) between tags + +return <<<HTML <div class="head base-width"> <div class="head-inner clearfix"> <div class="head-logo">{$unsafe_logo_html}</div> <div class="head-items clearfix"> - <a class="head-item is-theme-switcher" href="javascript:void(0)" onclick="return ThemeSwitcher.next(event)"> - <span> - <span> - <span class="moon-icon">{$ctx->renderMoonIcon()}</span><span id="theme-switcher-label">{$theme}</span> - </span> - </span> - </a> - <a class="head-item" href="/"><span><span>blog</span></span></a> - <a class="head-item" href="/projects/"><span><span>projects</span></span></a> - <a class="head-item" href="https://git.ch1p.io/?s=idle"><span><span>git</span></span></a> - <a class="head-item" href="/misc/"><span><span>misc</span></span></a> - <a class="head-item" href="/contacts/"><span><span>contacts</span></span></a> - {$ctx->if_admin('<a class="head-item" href="/admin/"><span><span>admin</span></span></a>')} + {$ctx->for_each($items, fn($item) => $ctx->renderHeaderItem($item['url'], $item['label'], $item['label_id'], $item['theme_switcher']))} </div> </div> </div> HTML; } +function renderHeaderItem($ctx, $url, $label, $label_id, $is_theme_switcher) { +return <<<HTML +<a class="head-item{$ctx->if_true($is_theme_switcher, ' is-theme-switcher')}" href="{$url}"{$ctx->if_true($is_theme_switcher, ' onclick="return ThemeSwitcher.next(event)"')}> + <span> + {$ctx->if_true($is_theme_switcher, '<span class="moon-icon">'.$ctx->renderMoonIcon().'</span>')} + <span{$ctx->if_true($label_id, ' id="'.$label_id.'"')}>{$label}</span> + </span> +</a> +HTML; +} + // TODO rewrite this fcking crap function renderLogo($ctx, array $path_map = [], array $link_map = []): string { $uri = RequestDispatcher::path(); |