From d445a346dc578d6078191931064fc915c1bad78b Mon Sep 17 00:00:00 2001 From: David Thompson Date: Sat, 22 Jan 2022 18:11:06 -0500 Subject: Make it so you can open/close sections of the page. --- css/garden.css | 16 +++++++- index.html | 125 +++++++++++++++++++++++++++++++-------------------------- js/garden.js | 11 +++++ 3 files changed, 94 insertions(+), 58 deletions(-) diff --git a/css/garden.css b/css/garden.css index 49f78c4..a2693dc 100644 --- a/css/garden.css +++ b/css/garden.css @@ -494,7 +494,6 @@ a:visited { background-color: #000000bb; } - .modal { position: fixed; border-radius: 4px; @@ -529,9 +528,22 @@ a:visited { } } - .detail-subheading { padding-left: 1rem; opacity: 60%; font-size: 70%; } + +h2.open, h2.closed { + cursor: pointer; +} + +h2.open::after { + content: " ▼"; + font-size: 75%; +} + +h2.closed::after { + content: " ▲"; + font-size: 75%; +} diff --git a/index.html b/index.html index c3aa1ae..203b9bd 100644 --- a/index.html +++ b/index.html @@ -7,63 +7,76 @@
-

Intensive Vegetable Garden Scheduler

-

- This handy tool helps plan your intensively planted, organic, - no-dig, home vegetable garden. Just select your first and - last frost dates and a planting schedule will be generated for - you. Click on a crop's name to view additional details about - that crop. -

-

- The algorithm works by using generalized information about - different types of crops such as average weeks to maturity, - whether direct sowing or transplanting is preferred, weeks - between plantings for continuous harvests, when and how a fall - crop should be planted (if applicable), etc. Such - generalizations could never hope to capture the true - complexity of growing vegetables, but it should serve as a - useful reference point so that you don't get lost in the weeds - during the growing season and forget to sow the next crop of - bush beans. -

-

- This planner works best for gardeners located in the nothern - areas of the northern hemisphere (USDA zone 7 and below) - where we need to start many summer crops indoors and cannot - harvest during winter without season extension. All planting - dates are made under the assumption that no season extension - techniques are being applied. -

-

- Source - code is available under the GNU Affero General Public - License version 3 or later. Perhaps you'd like to add a new - crop or fix a bug? -

-

Configuration

-
- - -
-
- - -
-

Schedule

-
-

Key

-
    -
  • : start seeds indoors
    • -
  • : direct sow outdoors
    • -
  • : transplant outdoors
    • -
-
-
+

Intensive Vegetable Garden Planner

+
+

Introduction

+
+

+ This handy tool helps plan your intensively planted, + organic, no-dig, home vegetable garden. Just select your + first and last frost dates and a planting schedule will be + generated for you. Click on a crop's name to view + additional details about that crop. +

+

+ The algorithm works by using generalized information about + different types of crops such as average weeks to maturity, + whether direct sowing or transplanting is preferred, weeks + between plantings for continuous harvests, when and how a fall + crop should be planted (if applicable), etc. Such + generalizations could never hope to capture the true + complexity of growing vegetables, but it should serve as a + useful reference point so that you don't get lost in the + weeds during the growing season and forget to sow the next + crop of bush beans. +

+

+ This planner works best for gardeners located in the nothern + areas of the northern hemisphere (USDA zone 7 and below) + where we need to start many summer crops indoors and cannot + harvest during winter without season extension. All planting + dates are made under the assumption that no season extension + techniques are being applied. +

+

+ Source + code is available under the GNU Affero General Public + License version 3 or later. Perhaps you'd like to add a new + crop or fix a bug? +

-
-

Week-by-week instructions

-
+ +
+

Configuration

+
+
+ + +
+
+ + +
+
+
+
+

Schedule

+
+

Key

+
    +
  • start seeds indoors
    • +
  • direct sow outdoors
    • +
  • transplant outdoors
    • +
+
+
+
+
+
+
+

Week-by-week instructions

+
+
diff --git a/js/garden.js b/js/garden.js index be4e7e0..cb8a0ac 100644 --- a/js/garden.js +++ b/js/garden.js @@ -735,6 +735,17 @@ function loadIntensiveGarden() { refreshView(); }); refreshView(); + // Open/close sections of page. + document.querySelectorAll("section").forEach(section => { + const container = section.querySelector(".section-container"); + const header = section.querySelector("h2"); + header.classList.add("open"); + header.addEventListener("click", event => { + header.classList.remove(container.hidden ? "closed" : "open"); + container.hidden = !container.hidden; + header.classList.add(container.hidden ? "closed" : "open"); + }); + }); } window.addEventListener("load", loadIntensiveGarden); -- cgit v1.2.3