Make UI more consistent

This commit is contained in:
Son NK 2020-04-05 19:59:48 +02:00
parent b19dfc6ef4
commit cfdaf659f9
7 changed files with 55 additions and 51 deletions

View file

@ -11,7 +11,7 @@
{% block default_content %} {% block default_content %}
<div class="row"> <div class="row">
<div class="col-md-8 offset-md-2"> <div class="col">
<h1 class="h3"> API Key </h1> <h1 class="h3"> API Key </h1>
<div class="alert alert-primary" role="alert"> <div class="alert alert-primary" role="alert">
@ -33,7 +33,7 @@
</div> </div>
{% for api_key in api_keys %} {% for api_key in api_keys %}
<div class="card" style="max-width: 50rem"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ api_key.name }}</h5> <h5 class="card-title">{{ api_key.name }}</h5>
<h6 class="card-subtitle mb-2 text-muted"> <h6 class="card-subtitle mb-2 text-muted">

View file

@ -10,7 +10,7 @@
{% block default_content %} {% block default_content %}
<div class="row"> <div class="row">
<div class="col-md-8 offset-md-2"> <div class="col">
<h1 class="h3"> Custom Domains </h1> <h1 class="h3"> Custom Domains </h1>
{% if not current_user.is_premium() %} {% if not current_user.is_premium() %}
@ -26,7 +26,7 @@
</div> </div>
{% for custom_domain in custom_domains %} {% for custom_domain in custom_domains %}
<div class="card" style="max-width: 50rem"> <div class="card" style="">
<div class="card-body"> <div class="card-body">
<h5 class="card-title"> <h5 class="card-title">
<a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a> <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a>

View file

@ -7,7 +7,7 @@
{% block default_content %} {% block default_content %}
<div class="row"> <div class="row">
<div class="col-md-8 offset-md-2"> <div class="col">
<h1 class="h3"> Directories </h1> <h1 class="h3"> Directories </h1>
{% if not current_user.is_premium() %} {% if not current_user.is_premium() %}
@ -39,7 +39,7 @@
</div> </div>
{% for dir in dirs %} {% for dir in dirs %}
<div class="card" style="max-width: 50rem"> <div class="card" style="">
<div class="card-body"> <div class="card-body">
<h5 class="card-title"> <h5 class="card-title">
{{ dir.name }} {{ dir.name }}

View file

@ -7,7 +7,7 @@
{% block default_content %} {% block default_content %}
<div class="row"> <div class="row">
<div class="col-md-8 offset-md-2"> <div class="col">
<h1 class="h3"> Mailboxes </h1> <h1 class="h3"> Mailboxes </h1>
{% if not current_user.is_premium() %} {% if not current_user.is_premium() %}
@ -30,7 +30,7 @@
</div> </div>
{% for mailbox in mailboxes %} {% for mailbox in mailboxes %}
<div class="card" style="max-width: 50rem"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title"> <h5 class="card-title">
{{ mailbox.email }} {{ mailbox.email }}

View file

@ -7,7 +7,7 @@
{% set active_page = "setting" %} {% set active_page = "setting" %}
{% block default_content %} {% block default_content %}
<div style="max-width: 60em; margin: auto"> <div class="col">
<h1 class="h3 mb-5"> Quarantine </h1> <h1 class="h3 mb-5"> Quarantine </h1>
<div class="alert alert-info"> <div class="alert alert-info">

View file

@ -6,9 +6,19 @@
Settings Settings
{% endblock %} {% endblock %}
{% block head %}
<style>
.card-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 3px;
}
</style>
{% endblock %}
{% block default_content %} {% block default_content %}
<div class="col-md-8 offset-md-2 pb-3"> <div class="col pb-3">
<!-- Change email --> <!-- Change email -->
<div class="card"> <div class="card">
<form method="post" enctype="multipart/form-data"> <form method="post" enctype="multipart/form-data">
@ -75,11 +85,10 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-title">Multi-Factor Authentication (MFA) <div class="card-title">Multi-Factor Authentication (MFA)</div>
<div class="small-text mt-1 mb-3"> <div class="mb-3">
Secure your account with Multi-Factor Authentication. <br> Secure your account with Multi-Factor Authentication. <br>
This requires having applications like Google Authenticator, Authy, FreeOTP, etc. This requires having applications like Google Authenticator, Authy, FreeOTP, etc.
</div>
</div> </div>
{% if not current_user.enable_otp %} {% if not current_user.enable_otp %}
<a href="{{ url_for('dashboard.mfa_setup') }}" class="btn btn-outline-primary">Enable</a> <a href="{{ url_for('dashboard.mfa_setup') }}" class="btn btn-outline-primary">Enable</a>
@ -93,9 +102,9 @@
<div class="card-body"> <div class="card-body">
<div class="card-title"> <div class="card-title">
Change password Change password
<div class="small-text mt-1 mb-3"> </div>
You will receive an email containing instructions on how to change password. <div class="mb-3">
</div> You will receive an email containing instructions on how to change password.
</div> </div>
<form method="post"> <form method="post">
<input type="hidden" name="form-name" value="change-password"> <input type="hidden" name="form-name" value="change-password">
@ -106,9 +115,8 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-title">Random Alias <div class="card-title">Random Alias</div>
<div class="small-text mt-1 mb-3">Choose how to create your email alias by default</div> <div class="mb-3">Choose how to create your email alias by default</div>
</div>
<form method="post" class="form-inline"> <form method="post" class="form-inline">
<input type="hidden" name="form-name" value="change-alias-generator"> <input type="hidden" name="form-name" value="change-alias-generator">
<select class="custom-select mr-sm-2" name="alias-generator-scheme"> <select class="custom-select mr-sm-2" name="alias-generator-scheme">
@ -126,11 +134,10 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-title" id="notification">Newsletters <div class="card-title" id="notification">Newsletters</div>
<div class="small-text mt-1 mb-3"> <div class="mb-3">
Every now and then we can send you an email Every now and then we can send you an email
to let you know about a new feature that might be useful to you. to let you know about a new feature that might be useful to you.
</div>
</div> </div>
<form method="post"> <form method="post">
<input type="hidden" name="form-name" value="notification-preference"> <input type="hidden" name="form-name" value="notification-preference">
@ -204,14 +211,14 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-title">Deleted Aliases <div class="card-title">Deleted Aliases</div>
<div class="small-text mt-1 mb-3" style="max-width: 40rem"> <div class="mb-3" style="">
When an alias is deleted, all its activities are deleted and no emails can be sent to it. <br> When an alias is deleted, all its activities are deleted and no emails can be sent to it.
It is moved to another location and only used to check when new alias is created. <br> The deleted alias is moved to another location and only used to check when new alias is created. <br>
This check is necessary to avoid someone else accidentally taking this alias. <br> This check is necessary to avoid someone else accidentally taking this alias.
Because in this case, the other person might receive inadvertently information that belong to you. <br> Otherwise the other person might receive inadvertently information that belong to you. <br>
</div>
</div> </div>
<a href="{{ url_for('dashboard.deleted_alias_route') }}" class="btn btn-outline-primary"> <a href="{{ url_for('dashboard.deleted_alias_route') }}" class="btn btn-outline-primary">
See deleted aliases See deleted aliases
</a> </a>
@ -220,16 +227,15 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-title">Quarantine <div class="card-title">Quarantine</div>
<div class="small-text mt-1 mb-3" style="max-width: 40rem"> <div class="mb-3">
When an email sent to your alias is classified as spam or refused by your email provider, When an email sent to your alias is classified as spam or refused by your email provider,
it usually means your alias has been leaked to a spammer. <br> it usually means your alias has been leaked to a spammer. <br>
In this case SimpleLogin will keep a copy of this email (so it isn't lost) In this case SimpleLogin will <b>keep</b> a copy of this email (so it isn't lost)
and notify you so you can take a look at its content and take appropriate actions. <br> and notify you so you can take a look at its content and take appropriate actions. <br>
The emails are deleted in 7 days. The emails are deleted in 7 days.
This is an exceptional case where SimpleLogin stores the email. This is an exceptional case where SimpleLogin stores the email.
</div>
</div> </div>
<a href="{{ url_for('dashboard.refused_email_route') }}" class="btn btn-outline-primary"> <a href="{{ url_for('dashboard.refused_email_route') }}" class="btn btn-outline-primary">
See refused emails See refused emails
@ -239,10 +245,9 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-title">Export Data <div class="card-title">Export Data</div>
<div class="small-text mt-1 mb-3"> <div class="mb-3">
You can download all aliases you have created on SimpleLogin along with other data. You can download all aliases you have created on SimpleLogin along with other data.
</div>
</div> </div>
<form method="post"> <form method="post">
<input type="hidden" name="form-name" value="export-data"> <input type="hidden" name="form-name" value="export-data">
@ -254,11 +259,10 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="card-title">Delete Account <div class="card-title">Delete Account</div>
<div class="small-text mt-1 mb-3">Please note that this operation is irreversible. <div class="mb-3">Please note that this operation is irreversible.
</div>
</div> </div>
<form method="post"> <form method="post">
<input type="hidden" name="form-name" value="delete-account"> <input type="hidden" name="form-name" value="delete-account">
<span class="delete-account btn btn-outline-danger">Delete account</span> <span class="delete-account btn btn-outline-danger">Delete account</span>

View file

@ -27,7 +27,7 @@
<div class="row row-cards row-deck mt-4"> <div class="row row-cards row-deck mt-4">
{% for client in clients %} {% for client in clients %}
<div class="col-md-6 col-xl-4"> <div class="col-md-6">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="card-title d-flex align-items-center"> <div class="card-title d-flex align-items-center">