Skip to content

Commit

Permalink
center main content on larger screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@bmlancien
bmlancien committed Oct 9, 2024
1 parent 7d8c370 commit 9e63192
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 64 deletions.
7 changes: 7 additions & 0 deletions building_dialouge_webapp/static/css/layouts/_questions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,17 @@
display: flex;
flex-direction: row;

.step-container {
flex: 1;
display: flex;
justify-content: center;
}

.main {
background-color: $color-white;
padding: $step-item-padding;
flex: 1;
max-width: 60rem;
}

.help {
Expand Down
143 changes: 79 additions & 64 deletions building_dialouge_webapp/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,102 +137,117 @@
<section class="position-relative h-100 flex-grow-1 pb-5">
<div class="help-background"></div>
<div class="step-title">
<div class="main">
<h1>Angaben zu Gebäude</h1>
<div class="step-container">
<div class="main">
<h1>Angaben zu Gebäude</h1>
</div>
</div>
<div class="help"></div>
</div>
<div class="step-text">
<div class="main">
<span>Um das Potenzial Ihres Gebäudes genau einschätzen zu können, analysieren wir zuerst den aktuellen Energieverbrauch.</span>
<div class="step-container">
<div class="main">
<span>Um das Potenzial Ihres Gebäudes genau einschätzen zu können, analysieren wir zuerst den aktuellen Energieverbrauch.</span>
</div>
</div>
<div class="help"></div>
</div>
<form action="">
<div class="step-question">
<div class="main">
<label for="" class="form-label">Zeitraum</label>
<div class="input-unit">
<input type="date" id="" class="form-control form-control--sm">
<span class="form-text">
bis
</span>
<input type="date" id="" class="form-control form-control--sm">
<div class="step-container">
<div class="main">
<label for="" class="form-label">Zeitraum</label>
<div class="input-unit">
<input type="date" id="" class="form-control form-control--sm">
<span class="form-text">
bis
</span>
<input type="date" id="" class="form-control form-control--sm">
</div>
</div>
</div>
<div class="help"></div>
</div>
<div class="step-question">
<div class="main">
<label for="" class="form-label">Heizungsverbrauch</label>
<div class="input-unit">
<input type="number" id="" class="form-control form-control--sm">
<span class="form-text">
kWh
</span>
<div class="step-container">
<div class="main">
<label for="" class="form-label">Heizungsverbrauch</label>
<div class="input-unit">
<input type="number" id="" class="form-control form-control--sm">
<span class="form-text">
kWh
</span>
</div>
</div>
</div>
<div class="help"></div>
</div>
<div class="step-question">
<div class="main">
<label for="" class="form-label">Anzahl Wohneiheiten</label>
<input type="number" id="" class="form-control form-control--sm">
<div class="step-container">
<div class="main">
<label for="" class="form-label">Anzahl Wohneiheiten</label>
<input type="number" id="" class="form-control form-control--sm">
</div>
</div>
<div class="help">
<span>Wohneiheiten: </span>Die Anzahl der Wohneinheiten gibt an, wie viele separate Wohnungen oder Wohnbereiche in einem Gebäude oder einer Immobilie vorhanden sind.
</div>
</div>
<div class="step-question">
<div class="main">
<label for="" class="form-label">Anzahl Wohneiheiten</label>
<select class="form-select form-select--md" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="help">
<div class="step-container">
<div class="main">
<label for="" class="form-label">Anzahl Wohneiheiten</label>
<select class="form-select form-select--md" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="help"></div>
</div>
<div class="step-question">
<div class="main">
<fieldset>
<legend class="form-label">PV-Anlage vorhanden</legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Ja
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Nein
</label>
</div>
</fieldset>
<div class="step-container">
<div class="main">
<fieldset>
<legend class="form-label">PV-Anlage vorhanden</legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Ja
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Nein
</label>
</div>
</fieldset>
</div>
</div>
<div class="help"></div>
</div>
<div class="step-question">
<div class="main">
<fieldset>
<legend class="form-label">Select Options</legend>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
</fieldset>
<div class="step-container">
<div class="main">
<fieldset>
<legend class="form-label">Select Options</legend>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
</fieldset>
</div>
</div>
<div class="help">
<span>Wohneiheiten: </span>Die Anzahl der Wohneinheiten gibt an, wie viele separate Wohnungen oder Wohnbereiche in einem Gebäude oder einer Immobilie vorhanden sind.
Expand Down

0 comments on commit 9e63192

Please sign in to comment.