diff options
| author | David Thompson <dthompson@vistahigherlearning.com> | 2022-01-22 18:11:06 -0500 |
|---|---|---|
| committer | David Thompson <dthompson@vistahigherlearning.com> | 2022-01-22 18:11:06 -0500 |
| commit | d445a346dc578d6078191931064fc915c1bad78b (patch) | |
| tree | 4a5a1ade4abb99a60326eae248a7228c3096d5a2 | |
| parent | e258aaa656e9dcc3b61341ddf00e1ba7815b23a7 (diff) | |
Make it so you can open/close sections of the page.
| -rw-r--r-- | css/garden.css | 16 | ||||
| -rw-r--r-- | index.html | 125 | ||||
| -rw-r--r-- | 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%; +} @@ -7,63 +7,76 @@ </head> <body> <div id="container" class="container"> - <h1>Intensive Vegetable Garden Scheduler</h1> - <p> - 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. - </p> - <p> - 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. - </p> - <p> - 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. - </p> - <p> - <a href="https://git.dthompson.us/intensive-garden-planner.git">Source - code</a> 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? - </p> - <h2>Configuration</h2> - <div> - <label for="last-frost-date">Last frost date:</label> - <input name="last-frost-date" type="date"></input> - </div> - <div> - <label for="first-frost-date">First frost date:</label> - <input name="first-frost-date" type="date"></input> - </div> - <h2>Schedule</h2> - <div> - <h3>Key</h3> - <ul> - <li><img src="images/start-indoors.svg" class="key"/>: start seeds indoors</li> - <li><img src="images/direct-sow.svg" class="key"/>: direct sow outdoors</li> - <li><img src="images/transplant.svg" class="key"/>: transplant outdoors</li> - </ul> - <div class="table-container"> - <table id="schedule"></table> + <h1>Intensive Vegetable Garden Planner</h1> + <section> + <h2>Introduction</h2> + <div class="section-container"> + <p> + 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. + </p> + <p> + 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. + </p> + <p> + 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. + </p> + <p> + <a href="https://git.dthompson.us/intensive-garden-planner.git">Source + code</a> 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? + </p> </div> - </div> - <h2>Week-by-week instructions</h2> - <div id="instructions"></div> + </section> + <section> + <h2>Configuration</h2> + <div class="section-container"> + <div> + <label for="last-frost-date">Last frost date:</label> + <input name="last-frost-date" type="date"></input> + </div> + <div> + <label for="first-frost-date">First frost date:</label> + <input name="first-frost-date" type="date"></input> + </div> + </div> + </section> + <section> + <h2>Schedule</h2> + <div class="section-container"> + <h3>Key</h3> + <ul> + <li><img src="images/start-indoors.svg" class="key"/> start seeds indoors</li> + <li><img src="images/direct-sow.svg" class="key"/> direct sow outdoors</li> + <li><img src="images/transplant.svg" class="key"/> transplant outdoors</li> + </ul> + <div class="table-container"> + <table id="schedule"></table> + </div> + </div> + </section> + <section> + <h2>Week-by-week instructions</h2> + <div id="instructions" class="section-container"></div> + </section> </div> </body> </html> 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); |