Fix styling

This commit is contained in:
Michael Soukup 2021-05-10 09:55:04 +02:00
parent 281522f227
commit 8584ee1bfe
2 changed files with 52 additions and 35 deletions

View File

@ -14,7 +14,7 @@
flex-direction: column; flex-direction: column;
margin: auto auto; margin: auto auto;
height: 95vh; height: 95vh;
width: 90vh; width: 75vw;
} }
#container div { #container div {
align-self: center; align-self: center;
@ -28,16 +28,16 @@
</head> </head>
<body> <body>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<div id="container"> <div id="container">
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<div id="main"></div> <div id="main"></div>
</div> </div>
<script> <script>

View File

@ -4,34 +4,51 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title> <title>{{ title }}</title>
<style>body { padding: 0; margin: 0; }</style> <style>
body {
text-align:center;
}
#container {
display: flex;
flex-direction: column;
margin: auto auto;
height: 95vh;
width: 75vw;
}
#container div {
align-self: center;
padding: 10px;
}
</style>
</head> </head>
<body> <body>
{% with messages = get_flashed_messages() %} <div id="container">
{% if messages %} {% with messages = get_flashed_messages() %}
<ul class="messages"> {% if messages %}
{% for message in messages %} <ul class="messages">
<li>{{ message }}</li> {% for message in messages %}
{% endfor %} <li>{{ message }}</li>
</ul> {% endfor %}
{% endif %} </ul>
{% endwith %} {% endif %}
<form class="form-signin" method="POST" action="/post-surprise"> {% endwith %}
<h2 class="form-signin-heading">Set surprise</h2> <form class="form-signin" method="POST" action="/post-surprise">
{% for v in enum %} <h2 class="form-signin-heading">Set surprise</h2>
<div> {% for v in enum %}
<input type="radio" name="surprise" id="{{ v }}" value="{{ v }}"> <div>
<label for="{{ v }}">{{ v }}</label> <input type="radio" name="surprise" id="{{ v }}" value="{{ v }}">
</div> <label for="{{ v }}">{{ v }}</label>
{% endfor %} </div>
<div> {% endfor %}
<input class="form-control" type="password" required name="password" placeholder="Password"> <div>
</div> <input class="form-control" type="password" required name="password" placeholder="Password">
<div> </div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Set surprise</button> <div>
</div> <button class="btn btn-lg btn-primary btn-block" type="submit">Set surprise</button>
</form> </div>
</form>
</div>
</body> </body>
</html> </html>