eswyft/ch1p_io_web
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

skin/base: update header, fix for mobile devices

Browse Source
This commit is contained in:
Evgeny Zinoviev 2022-07-11 13:06:00 +03:00
parent e12220dd63
commit c1e7ef4a65
4 changed files with 46 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
htdocs/scss/app/head.scss
View File

@ -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;
}

19
htdocs/scss/app/mobile.scss
View File

@ -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 {

2
htdocs/scss/bundle_common.scss
View File

@ -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";
}

41
skin/base.skin.php
View File

@ -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();