Improve alert box style

This commit is contained in:
rubenwardy 2018-05-18 21:35:54 +01:00
parent ec4461d0f7
commit 51a31b58b6
No known key found for this signature in database
GPG Key ID: A1E29D52FF81513C
5 changed files with 87 additions and 31 deletions

@ -31,8 +31,8 @@ a:hover {
border-bottom: 1px solid #444;
}
.box > p, .box > table, .box > .buttonset, .box > form {
margin: 1em;
.box .box-body {
padding: 1em;
}
// .box form {
@ -139,7 +139,6 @@ select:not([multiple]) {
.button:hover, .buttonset li a:hover, input[type=submit]:hover {
background: rgba(255,255,255,0.13);
border: 1px solid rgba(255,255,255,0.17);
border: 1px solid #555;
text-decoration: none;
color: #ddd;
}
@ -173,6 +172,45 @@ select:not([multiple]) {
/* Alerts */
.alert {
padding: 10px;
position: relative;
}
.alert .alert_right, .alert > form {
display: inline-block;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.alert .alert_right form {
height: 100%;
}
.alert form {
display: inline-block;
margin: 0;
padding: 0;
}
.alert input {
margin: 0;
height: 100%;
background: 0;
border: 0;
border-left: 1px solid rgba(255,255,255,0.12);
border-radius: 0;
}
.alert input:hover {
border: 0;
border-left: 1px solid rgba(255,255,255,0.2);
}
#alerts {
list-style: none;
position: fixed;
@ -258,6 +296,10 @@ table.fancyTable tfoot td {
font-size: 12px;
}
.t-mll tr td:not(:first-child) {
text-align: left;
}
.userlist li.NOT_JOINED {
color: #aaa;
}

@ -13,7 +13,7 @@
<div class="box box_grey">
<h2>Do action</h2>
<form method="post" action="">
<form method="post" action="" class="box-body">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<select name="action">
<option value="importusers" selected>Create users from mod list</option>

@ -10,7 +10,10 @@ Sign in
{% from "flask_user/_macros.html" import render_field, render_checkbox_field, render_submit_field %}
<h2>{%trans%}Sign in{%endtrans%}</h2>
<form action="" method="POST" class="form" role="form">
<form action="" method="POST" class="form" role="form" class="box-body">
<a href="{{ url_for('github_signin_page') }}">GitHub</a>
{{ form.hidden_tag() }}
{# Username or Email field #}
@ -62,16 +65,17 @@ Sign in
{{ render_submit_field(form.submit, tabindex=180) }}
</form>
<a href="{{ url_for('github_signin_page') }}">GitHub</a>
</div>
<div class="right">
<aside class="box box_grey">
<h2>New here?</h2>
<p>Create an account using your forum account.</p>
<div class="box-body">
<p>Create an account using your forum account.</p>
<a href="{{ url_for('user_claim_page') }}" class="button">{%trans%}Claim your account{%endtrans%}</a>
<a href="{{ url_for('user_claim_page') }}" class="button">{%trans%}Claim your account{%endtrans%}</a>
</div>
</aside>
</div>
</div>

@ -3,8 +3,10 @@
{% block container %}
<main>
<div class="box box_grey">
{% block content %}
{% endblock %}
<div class="box-body">
{% block content %}
{% endblock %}
</div>
</div>
</main>
{% endblock %}

@ -28,30 +28,38 @@
This edit request was rejected.
</div>
{% elif package.checkPerm(current_user, "APPROVE_CHANGES") %}
<div class="box box_grey">
<form method="post" action="{{ request.getApproveURL() }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="submit" value="Approve and Apply" />
</form>
<form method="post" action="{{ request.getRejectURL() }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="submit" value="Reject" />
</form>
<div class="box box_grey alert">
Request can be merged.
<div class="alert_right">
<form method="post" action="{{ request.getApproveURL() }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="submit" value="Approve and Apply" />
</form>
<form method="post" action="{{ request.getRejectURL() }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="submit" value="Reject" />
</form>
</div>
</div>
{% endif %}
<table>
<tr>
<th>Property</th>
<th>Old</th>
<th>New</th>
</tr>
{% for change in request.changes %}
<table class="fancyTable t-mll">
<thead>
<tr>
<td>{{ change.key.value }}</td>
<td>{{ change.oldValue }}</td>
<td>{{ change.newValue }}</td>
<th>Property</th>
<th>Old</th>
<th>New</th>
</tr>
{% endfor %}
</thead>
<tbody>
{% for change in request.changes %}
<tr>
<td>{{ change.key.value }}</td>
<td>{{ change.oldValue }}</td>
<td>{{ change.newValue }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}