From c1e7ef4a65675d88515c76a20877c1d65aec3cac Mon Sep 17 00:00:00 2001 From: Evgeny Zinoviev Date: Mon, 11 Jul 2022 13:06:00 +0300 Subject: skin/base: update header, fix for mobile devices --- htdocs/scss/app/head.scss | 10 +++++----- htdocs/scss/app/mobile.scss | 19 +++++++++++++------ htdocs/scss/bundle_common.scss | 2 +- 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 << '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 <<
- - - - {$ctx->renderMoonIcon()}{$theme} - - - - blog - projects - git - misc - contacts - {$ctx->if_admin('admin')} + {$ctx->for_each($items, fn($item) => $ctx->renderHeaderItem($item['url'], $item['label'], $item['label_id'], $item['theme_switcher']))}
HTML; } +function renderHeaderItem($ctx, $url, $label, $label_id, $is_theme_switcher) { +return <<if_true($is_theme_switcher, ' onclick="return ThemeSwitcher.next(event)"')}> + + {$ctx->if_true($is_theme_switcher, ''.$ctx->renderMoonIcon().'')} + if_true($label_id, ' id="'.$label_id.'"')}>{$label} + + +HTML; +} + // TODO rewrite this fcking crap function renderLogo($ctx, array $path_map = [], array $link_map = []): string { $uri = RequestDispatcher::path(); -- cgit v1.2.3