Skip to content

Commit fc4e185

Browse files
paulapreusspaulapreuss
committed
Move slider outside of main accordion
That way this option can also be selected if custom demand has been uploaded
1 parent 0b76a88 commit fc4e185

1 file changed

Lines changed: 49 additions & 45 deletions

File tree

‎offgridplanner/templates/pages/demand_estimation.html‎

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424

2525
<section id="section" class="dashboard" style="height: auto">
2626
<div class="row" style="height: auto">
27-
<div class="chart" style="height: auto; padding-bottom: 10px">
27+
<div class="chart" style="height: fit-content; padding-bottom: 10px">
2828
<div class="accordion" id="accordionExample" style="margin-top: 12px">
29-
<div class="accordion-item" style="padding: 10px">
29+
<div class="accordion-item">
3030
<h2 class="accordion-header" id="headingOne">
3131
<button class="accordion-button no-arrow"
3232
type="button"
@@ -35,10 +35,10 @@ <h2 class="accordion-header" id="headingOne">
3535
<span style="flex-shrink: 0; margin-right: 20px;">
3636
<strong>{% translate 'Use Custom Demand Time Series:' %}</strong>
3737
</span>
38-
<label class="switch inverted" style="margin-right: 20px;">
39-
{{ opts_form.do_demand_estimation }}
40-
<span class="slider round"></span>
41-
</label>
38+
<label class="switch inverted" style="margin-right: 20px;">
39+
{{ opts_form.do_demand_estimation }}
40+
<span class="slider round"></span>
41+
</label>
4242
</button>
4343
</h2>
4444
<div id="consumerProperties"
@@ -79,7 +79,7 @@ <h2 class="accordion-header" id="headingOne">
7979
</p>
8080
<p>{% translate "You have entered" %}
8181
<strong id="demand-check">0%</strong>
82-
{% translate "out of 100%." %}</p>
82+
{% translate "out of 100%." %}</p>
8383
<!-- Input Fields Container -->
8484
<div class="shares-container">
8585
{% for field in form %}
@@ -145,21 +145,9 @@ <h2 class="accordion-header" id="headingOne">
145145
<span class="slider round"></span>
146146
</label>
147147
</span>
148-
149-
</span>
150-
<span style="display: flex; align-items: center; ; margin-right: 10px">
151-
<a style="margin-right: 10px;">{% translate 'Annual Demand Increase' %}</a>
152-
<label class="switch">
153-
<input type="checkbox"
154-
id="demandIncreaseToggle"
155-
data-bs-toggle="collapse"
156-
data-bs-target="#collapseDemandIncrease" {% if demand_increase.active %}checked{% endif %}>
157-
<span class="slider round"></span>
158-
</label>
159-
</span>
160148
</div>
161149
</div>
162-
<div class="accordion-item" style="border-top: none; padding: 10px">
150+
<div class="accordion-item" style="border-top: none;">
163151
<div id="collapseTwo"
164152
class="accordion-collapse collapse {% if calibration.active %}show{% endif %}"
165153
aria-labelledby="headingTwo">
@@ -210,31 +198,7 @@ <h2 class="accordion-header" id="headingOne">
210198
</div>
211199
</div>
212200
</div>
213-
<div class="accordion-item" style="border-top: none; padding: 10px">
214-
<div id="collapseDemandIncrease"
215-
class="accordion-collapse collapse {% if demand_increase.active %}show{% endif %}"
216-
aria-labelledby="headingDemandIncrease">
217-
<div class="accordion-body">
218-
<p>
219-
<a>
220-
<br>
221-
{% translate 'Set Annual Demand Increase' %}</a>
222-
</p>
223-
<p>
224-
{% blocktranslate trimmed %}
225-
Specify the expected annual increase in demand as a percentage.
226-
<br>
227-
This will be applied to the projected demand calculations.
228-
{% endblocktranslate %}
229-
</p>
230-
<div class="input-group" style="max-width: 200px">
231-
{{ form.annual_demand_increase|add_class:"form-control" }}
232-
<span class="input-group-text">%</span>
233-
</div>
234-
</div>
235-
</div>
236-
</div>
237-
<div class="accordion-item" style="border-top: none; padding: 10px">
201+
<div class="accordion-item" style="border-top: none;">
238202
<div id="demandUpload"
239203
class="accordion-collapse collapse {% if not opts_form.do_demand_estimation.value %} show {% endif %}"
240204
aria-labelledby="headingThree">
@@ -261,6 +225,46 @@ <h2 class="accordion-header" id="headingOne">
261225
</div>
262226
</div>
263227
</div>
228+
<div class="accordion-item" style="border-top: none;">
229+
<p style="display: flex;
230+
justify-content: end;
231+
align-items: center;
232+
color: var(--ccb);
233+
padding-top:10px">
234+
<span style="display: flex; margin-right: 10px">
235+
<a style="margin-right: 10px;">{% translate 'Set Annual Demand Increase' %}</a>
236+
<label class="switch">
237+
<input type="checkbox"
238+
id="demandIncreaseToggle"
239+
data-bs-toggle="collapse"
240+
data-bs-target="#collapseDemandIncrease" {% if demand_increase.active %}checked{% endif %}>
241+
<span class="slider round"></span>
242+
</label>
243+
</span>
244+
</p>
245+
<div id="collapseDemandIncrease"
246+
class="accordion-collapse collapse {% if demand_increase.active %}show{% endif %}"
247+
aria-labelledby="headingDemandIncrease">
248+
<div class="accordion-body">
249+
<p>
250+
<a>
251+
{% translate 'Set Annual Demand Increase' %}</a>
252+
</p>
253+
<p>
254+
{% blocktranslate trimmed %}
255+
Specify the expected annual increase in demand as a percentage.
256+
<br>
257+
This will be applied to the projected demand calculations.
258+
{% endblocktranslate %}
259+
</p>
260+
<div class="input-group" style="max-width: 200px">
261+
{{ form.annual_demand_increase|add_class:"form-control" }}
262+
<span class="input-group-text">%</span>
263+
</div>
264+
</div>
265+
</div>
266+
</div>
267+
264268
</div>
265269
</div>
266270
</section>

0 commit comments

Comments
 (0)