Updated forms to banner type
This commit is contained in:
parent
3be7669343
commit
c27269f406
4 changed files with 70 additions and 46 deletions
|
|
@ -15,10 +15,22 @@ html, body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
#banner {
|
||||
/* background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRp-RkNnMsGagfx0oV3SsHNONyIVlF3tfl9EiXhACZe&s");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%; */
|
||||
background-color: #00f;
|
||||
}
|
||||
|
||||
#step-counter {
|
||||
height: 10%
|
||||
}
|
||||
|
||||
.steps-form {
|
||||
display: table;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.steps-form .steps-row {
|
||||
|
|
|
|||
|
|
@ -1,25 +1,27 @@
|
|||
{% extends 'base.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block step-counter %}
|
||||
<div class="steps-form">
|
||||
<div class="steps-row setup-panel">
|
||||
<div class="steps-step">
|
||||
<button name="wizard_goto_step" class="btn btn-secondary btn-circle" type="submit" value="user">1</button>
|
||||
<p>Student Information</p>
|
||||
</div>
|
||||
<div class="steps-step">
|
||||
<button name="wizard_goto_step" class="btn btn-primary btn-circle" type="disabled"
|
||||
value="activity">2</button>
|
||||
<p>Activity Information</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<form method="POST">
|
||||
{% csrf_token %}
|
||||
{{ wizard.management_form }}
|
||||
|
||||
<div class="steps-form">
|
||||
<div class="steps-row setup-panel">
|
||||
<div class="steps-step">
|
||||
<button name="wizard_goto_step" class="btn btn-secondary btn-circle" type="submit" value="user">1</button>
|
||||
<p>Student Information</p>
|
||||
</div>
|
||||
<div class="steps-step">
|
||||
<button name="wizard_goto_step" class="btn btn-primary btn-circle" type="disabled"
|
||||
value="activity">2</button>
|
||||
<p>Activity Information</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="activity1" class="form-label">Activity 1:</label>
|
||||
{{ form.activity1 }}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,26 @@
|
|||
{% extends 'base.html' %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block step-counter %}
|
||||
<div class="steps-form">
|
||||
<div class="steps-row setup-panel">
|
||||
<div class="steps-step">
|
||||
<button name="wizard_goto_step" class="btn btn-secondary btn-circle" type="submit" value="user">1</button>
|
||||
<p>Student Information</p>
|
||||
</div>
|
||||
<div class="steps-step">
|
||||
<button name="wizard_goto_step" class="btn btn-primary btn-circle" type="disabled"
|
||||
value="activity">2</button>
|
||||
<p>Activity Information</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<form method="POST">
|
||||
{% csrf_token %}
|
||||
{{ wizard.management_form }}
|
||||
<div class="steps-form">
|
||||
<div class="steps-row setup-panel">
|
||||
<div class="steps-step">
|
||||
<button name="wizard_goto_step" class="btn btn-primary btn-circle" type="disabled" value="user">1</button>
|
||||
<p>Student Information</p>
|
||||
</div>
|
||||
<div class="steps-step">
|
||||
<button name="wizard_goto_step" class="btn btn-secondary btn-circle" type="submit"
|
||||
value="activity">2</button>
|
||||
<p>Activity Information</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="name" class="form-label">Name:</label>
|
||||
<div class="row mb-3" id="name">
|
||||
|
|
|
|||
|
|
@ -21,28 +21,35 @@
|
|||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<main role="main" class="container max-height">
|
||||
<div class="row d-flex justify-content-center align-items-center max-height">
|
||||
<div class="card col-md-5 p-4 m-3">
|
||||
<h1 id="header" class="text-center mt-1 mb-4">{% if formtitle %}{{ formtitle }}{% endif %}</h1>
|
||||
<!-- Main content -->
|
||||
{% block content %}{% endblock %}
|
||||
<div class="mt-3">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }}">{{ message }}</div>
|
||||
<main role="main" class="row max-height m-0 p-0">
|
||||
<div class="col-4 max-height m-0 p-5">
|
||||
<div id="step-counter" class="mb-5">
|
||||
{% block step-counter %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<h2 id="header" class="mt-2 mb-4">{% if formtitle %}{{ formtitle }}{% endif %}</h2>
|
||||
|
||||
<!-- Main content -->
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<!-- Message content and form errors -->
|
||||
<div class="mt-2">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }}">{{ message }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if form.errors %}
|
||||
{% for field in form %}
|
||||
{% for error in field.errors %}
|
||||
<div class="alert alert-danger">{{ error }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if form.errors %}
|
||||
{% for field in form %}
|
||||
{% for error in field.errors %}
|
||||
<div class="alert alert-danger">{{ error }}</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div id="banner" class="col max-height m-0"></div>
|
||||
</main>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
|
||||
|
|
|
|||
Reference in a new issue