Improve alias page UI

- use 1 column layout for alias page when screen is <lg
- reduce space between search bar and header
- move alias switch to the right
This commit is contained in:
Son NK 2020-02-02 20:50:56 +07:00
parent c1a162e68b
commit a30397a88f
1 changed files with 39 additions and 36 deletions

View File

@ -8,6 +8,7 @@
font-weight: 600;
font-size: 14px;
}
.btn-group-border-left {
border-left: 1px #fbfbfb4f solid;
}
@ -19,7 +20,7 @@
{% endblock %}
{% block default_content %}
<div class="page-header row">
<div class="page-header row" style="margin-top: 0rem">
<div class="col-lg-3 col-sm-12 p-0 mt-1">
<form method="get">
<input type="search" name="query" autofocus placeholder="Enter to search for alias" class="form-control shadow"
@ -27,7 +28,7 @@
</form>
</div>
<div class="col-lg-4 offset-lg-5 pr-0 mt-1">
<div class="col-lg-5 offset-lg-4 pr-0 mt-1">
<div class="btn-group float-right" role="group">
<form method="post">
<input type="hidden" name="form-name" value="create-custom-email">
@ -73,9 +74,10 @@
{% for alias_info in aliases %}
{% set gen_email = alias_info.gen_email %}
<div class="col-md-6">
<div class="col-12 col-lg-6">
<div class="card p-3 shadow-sm border-0 {% if alias_info.highlight %} highlight-row {% endif %}">
<div>
<div class="row">
<div class="col">
<span class="clipboard cursor mb-0"
{% if loop.index ==1 %}
data-intro="This is an <em>alias</em>. <br><br>
@ -98,30 +100,11 @@
{% endif %}
</span>
</div>
<hr class="my-2">
<p class="small-text">
Created {{ gen_email.created_at | dt }}
{% if alias_info.highlight %}
- <span class="font-weight-bold text-success small-text">New</span>
{% endif %}
</p>
<div class="" style="font-size: 12px">
<span class="alias-activity">{{ alias_info.nb_forward }}</span> forwards,
<span class="alias-activity">{{ alias_info.nb_blocked }}</span> blocks,
<span class="alias-activity">{{ alias_info.nb_reply }}</span> replies
<a href="{{ url_for('dashboard.alias_log', alias_id=gen_email.id) }}"
class="btn btn-sm btn-link">
See All Activity &nbsp;
</a>
</div>
<div>
<div class="col text-right">
<form method="post">
<input type="hidden" name="form-name" value="switch-email-forwarding">
<input type="hidden" name="gen-email-id" value="{{ gen_email.id }}">
<label class="custom-switch cursor mt-2"
<label class="custom-switch cursor"
data-toggle="tooltip"
{% if gen_email.enabled %}
title="Block Alias"
@ -147,6 +130,26 @@
</label>
</form>
</div>
</div>
<hr class="my-2">
<p class="small-text">
Created {{ gen_email.created_at | dt }}
{% if alias_info.highlight %}
- <span class="font-weight-bold text-success small-text">New</span>
{% endif %}
</p>
<div class="" style="font-size: 12px">
<span class="alias-activity">{{ alias_info.nb_forward }}</span> forwards,
<span class="alias-activity">{{ alias_info.nb_blocked }}</span> blocks,
<span class="alias-activity">{{ alias_info.nb_reply }}</span> replies
<a href="{{ url_for('dashboard.alias_log', alias_id=gen_email.id) }}"
class="btn btn-sm btn-link">
See All Activity &nbsp;
</a>
</div>
<div class="row mt-3">
<div class="col">