From a6353699df995ce37f94c11e46966f0158e2da0d Mon Sep 17 00:00:00 2001
From: Dmitriy Pleshevskiy <dmitriy@ideascup.me>
Date: Fri, 27 May 2022 23:52:11 +0300
Subject: [PATCH] web: improve styles for ingredients

---
 web/comp/page_layout.ts  |  4 ++--
 web/static/styles.css    |  4 +---
 web/views/ingredients.ts | 10 ++++++++--
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/comp/page_layout.ts b/web/comp/page_layout.ts
index dc43ae7..2f35f58 100644
--- a/web/comp/page_layout.ts
+++ b/web/comp/page_layout.ts
@@ -11,7 +11,7 @@ export function PageLayout(ctx: Context, children: AnyNode[]): Elem {
 }
 
 export function Header(ctx: Context): AnyNode {
-  return E("header", classNames("header"), [
+  return E("header", classNames("header gap-v-1x5"), [
     E("div", classNames("content-width"), [HeaderNav(ctx)]),
   ]);
 }
@@ -31,7 +31,7 @@ function navLink(href: string, ctx?: Context): Attrs {
 }
 
 export function Footer(): AnyNode {
-  return E("footer", classNames("footer"), [
+  return E("footer", classNames("footer gap-v-1x5"), [
     E("div", classNames("content-width"), [
       Link("Исходный код", {
         href: "https://notabug.org/pleshevskiy/recipes",
diff --git a/web/static/styles.css b/web/static/styles.css
index f82dbeb..66f679f 100644
--- a/web/static/styles.css
+++ b/web/static/styles.css
@@ -57,14 +57,12 @@ ul, ol {
   flex: 1 0;
 }
 
-.header {
+.gap-v-1x5 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
 
 .footer {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
   border-top: solid 1px var(--color-gray);
 }
 
diff --git a/web/views/ingredients.ts b/web/views/ingredients.ts
index 9a0a055..a27971e 100644
--- a/web/views/ingredients.ts
+++ b/web/views/ingredients.ts
@@ -16,13 +16,19 @@ export function IngredientsPage(
   return PageLayout(ctx, [
     E("div", classNames("content-width"), [
       H3("Ингредиенты"),
-      E("div", [], data.ingredients.map(IngredientItem)),
+      IngredientList(data.ingredients),
     ]),
   ]);
 }
 
+export function IngredientList(ingrs: Ingredient[]): AnyNode {
+  return E("div", classNames("responsive-typography"), [
+    E("ul", classNames("gap-v-1x5"), ingrs.map(IngredientItem)),
+  ]);
+}
+
 export function IngredientItem(ingr: Ingredient): AnyNode {
-  return E("div", [], [
+  return E("li", [], [
     ingr.name,
     // E("a", { href: `/ingredients/${ingr.key}` }, ingr.name),
   ]);