beenull/forkbb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update style and templates

Browse source 
For a screen width of 81rem and more, the navigation block goes vertically to the right. O_o
This commit is contained in:
Visman 2021-01-08 13:49:28 +07:00
parent a7d560351f
commit 683e5a8471
2 changed files with 94 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/templates/layouts/main.forkbb.php
View file

@ -13,8 +13,14 @@
@endforeach
</head>
<body>
<div id="fork">
@if ($p->fNavigation)
<div id="fork" @if ($p->fNavigation) class="f-with-nav" @endif>
<header id="fork-header">
<h1 id="id-fhth1"><a id="id-fhtha" href="{{ $p->fRootLink }}">{{ $p->fTitle }}</a></h1>
@if ('' != $p->fDescription)
<p id="id-fhtdesc">{!! $p->fDescription !!}</p>
@endif
</header>
@if ($p->fNavigation)
<nav id="fork-nav" class="f-menu @if ($p->fNavigation['search']) f-main-nav-search @endif">
<div id="fork-navdir">
<input id="id-mn-checkbox" class="f-menu-checkbox" type="checkbox">
@ -72,12 +78,6 @@
</div>
</nav>
@endif
<header id="fork-header">
<h1 id="id-fhth1"><a id="id-fhtha" href="{{ $p->fRootLink }}">{{ $p->fTitle }}</a></h1>
@if ('' != $p->fDescription)
<p id="id-fhtdesc">{!! $p->fDescription !!}</p>
@endif
</header>
<main>
@if ($p->fAnnounce)
<aside id="fork-announce">

87
public/style/ForkBB/style.css
View file

@ -137,6 +137,12 @@ body,
position: relative;
}
@media screen and (min-width: 64rem) {
#fork {
max-width: calc(80% + 12.8rem); /* (100% - 64rem) * 0.8 + 64rem */
}
}
#fork main {
display: block;
}
@ -515,7 +521,6 @@ body,
/* Шапка */
/*********/
#fork #fork-header {
order: -1;
background-color: #AA7939;
}
@ -3246,3 +3251,83 @@ body,
#fork .f-reports legend {
border-top: 0.0625rem dashed #AA7939;
}
/****************************************/
@media screen and (min-width: 81rem) {
#fork.f-with-nav {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#fork.f-with-nav #fork-header {
order: 0;
width: 100%;
}
#fork.f-with-nav main {
order: 1;
width: calc(100% - 17rem);
}
#fork.f-with-nav #fork-nav {
order: 2;
width: 16rem;
border-bottom: 0;
border-left: 0.0625rem solid #AA7939;
padding: 0;
background-color: #F8F4E3;
}
#fork.f-with-nav #fork-footer {
order: 3;
width: 100%;
}
#fork.f-with-nav #fork-debug {
order: 4;
width: 100%;
}
#fork.f-with-nav #fork-navdir {
position: sticky;
top: 0;
flex-direction: column;
flex-wrap: nowrap;
border: 0
}
#fork.f-with-nav #fork-nav .f-menu-items {
display: block;
padding: 2rem 0;
}
#fork.f-with-nav #fork-nav .f-menu-user-items {
order: -1;
display: block;
margin: 0;
padding: 2rem 0;
}
#fork.f-with-nav #fork-nav .f-menu-a {
justify-content: left;
}
#fork.f-with-nav #fork-nav .f-submenu-items .f-menu-a {
justify-content: right;
}
#fork.f-with-nav #fork-nav .f-menu-items .f-menu-a {
border-top: 0.0625rem dotted;
}
#fork.f-with-nav #fork-nav .f-menu-user-items .f-menu-a {
border-bottom: 0.0625rem dotted;
}
#fork.f-with-nav #fork-nav .f-submenu-items {
display: block;
position: static;
background-color: #FFEBCD;
}
}