web: add dropdown to change langs
This commit is contained in:
parent
b918557791
commit
9912188db1
|
@ -1,6 +1,6 @@
|
||||||
import { AnyNode, Attrs, E, Elem } from "ren/node.ts";
|
import { AnyNode, Attrs, E, Elem } from "ren/node.ts";
|
||||||
import { classNames } from "ren/attrs.ts";
|
import { classNames } from "ren/attrs.ts";
|
||||||
import { Context, Lang } from "../context.ts";
|
import { Context, iterLangs, Lang } from "../context.ts";
|
||||||
|
|
||||||
export function PageLayout(ctx: Context, children: AnyNode[]): Elem {
|
export function PageLayout(ctx: Context, children: AnyNode[]): Elem {
|
||||||
return E("div", { id: "main" }, [
|
return E("div", { id: "main" }, [
|
||||||
|
@ -31,16 +31,14 @@ function navLink(lhref: string, ctx?: Context): Attrs {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Footer(ctx: Context): AnyNode {
|
export function Footer(ctx: Context): AnyNode {
|
||||||
return E("footer", classNames("footer gap-v-1x5"), [
|
return E("footer", classNames("footer"), [
|
||||||
E("div", classNames("content-width"), [
|
E("div", classNames("content-width gap-v-1x5"), [
|
||||||
Link(ctx.tr.Source_code, {
|
Link(ctx.tr.Source_code, {
|
||||||
|
target: "_blank",
|
||||||
href: "https://notabug.org/pleshevskiy/recipes",
|
href: "https://notabug.org/pleshevskiy/recipes",
|
||||||
rel: "external nofollow noopener noreferrer",
|
rel: "external nofollow noopener noreferrer",
|
||||||
}),
|
}),
|
||||||
E("div", [], [
|
ChangeLang(ctx),
|
||||||
ChangeLangBtn(ctx, Lang.Rus),
|
|
||||||
ChangeLangBtn(ctx, Lang.Eng),
|
|
||||||
]),
|
|
||||||
]),
|
]),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
@ -49,6 +47,21 @@ export function Link(text: string, attrs: Attrs | Attrs[]): AnyNode {
|
||||||
return E("a", attrs, text);
|
return E("a", attrs, text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function ChangeLang(ctx: Context): AnyNode {
|
||||||
|
const dropdownId = "change_langs";
|
||||||
|
return E("div", classNames("dropdown"), [
|
||||||
|
E("input", { id: dropdownId, type: "checkbox" }),
|
||||||
|
E("label", { for: dropdownId }, ctx.lang),
|
||||||
|
E(
|
||||||
|
"ul",
|
||||||
|
[],
|
||||||
|
iterLangs().filter((l) => l !== ctx.lang).map((l) =>
|
||||||
|
ChangeLangBtn(ctx, l)
|
||||||
|
),
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
export function ChangeLangBtn(ctx: Context, lang: Lang): AnyNode {
|
export function ChangeLangBtn(ctx: Context, lang: Lang): AnyNode {
|
||||||
const prefix = lang === Lang.Rus ? "" : `/${lang}`;
|
const prefix = lang === Lang.Rus ? "" : `/${lang}`;
|
||||||
return E("a", { "href": prefix + ctx.locPath }, lang);
|
return E("a", { "href": prefix + ctx.locPath }, lang);
|
||||||
|
|
|
@ -6,6 +6,10 @@ export interface Context {
|
||||||
tr: Translations;
|
tr: Translations;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function iterLangs(): Lang[] {
|
||||||
|
return [Lang.Eng, Lang.Rus];
|
||||||
|
}
|
||||||
|
|
||||||
export enum Lang {
|
export enum Lang {
|
||||||
Rus = "rus",
|
Rus = "rus",
|
||||||
Eng = "eng",
|
Eng = "eng",
|
||||||
|
|
|
@ -66,6 +66,12 @@ ul, ol {
|
||||||
border-top: solid 1px var(--color-gray);
|
border-top: solid 1px var(--color-gray);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer > .content-width {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.main-menu {
|
.main-menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -101,6 +107,8 @@ ul, ol {
|
||||||
padding-right: 1.25rem;
|
padding-right: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* responsive typography */
|
||||||
|
|
||||||
.responsive-typography h3 {
|
.responsive-typography h3 {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
@ -153,3 +161,85 @@ ul, ol {
|
||||||
.responsive-typography li + li {
|
.responsive-typography li + li {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* dropdown
|
||||||
|
* Source: https://codepen.io/markcaron/pen/wdVmpB
|
||||||
|
*
|
||||||
|
* TODO: change styles
|
||||||
|
* */
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > input[type="checkbox"] {
|
||||||
|
position: absolute;
|
||||||
|
left: -100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 15px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.5em;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid #8c8c8c;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > label:hover {
|
||||||
|
border-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > label:after {
|
||||||
|
content: "▲";
|
||||||
|
font-size: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 6px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > ul {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
display: block;
|
||||||
|
left: -100vw;
|
||||||
|
bottom: calc(1.5em + 14px);
|
||||||
|
border: 1px solid #8c8c8c;
|
||||||
|
background: #fff;
|
||||||
|
padding: 6px 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-moz-border-radius: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
-webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);
|
||||||
|
-moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);
|
||||||
|
box-shadow: 0 3px 8px rgba(0,0,0,.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > ul a {
|
||||||
|
display: block;
|
||||||
|
padding: 6px 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > ul a:hover,
|
||||||
|
.dropdown > ul a:focus {
|
||||||
|
background: #ececec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > input[type="checkbox"]:checked ~ ul {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > [type="checkbox"]:checked + label:after {
|
||||||
|
content: "▼";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue