summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/garden.css16
-rw-r--r--index.html125
-rw-r--r--js/garden.js11
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 @@
</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);