Updated forms to banner type

This commit is contained in:
Ceferino Patino 2022-09-08 23:29:49 -05:00
commit c27269f406
4 changed files with 70 additions and 46 deletions

View file

@ -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 {

View file

@ -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 }}

View file

@ -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">

View file

@ -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"