Skip to content

Commit eba6868

Browse files
sstriglersstrigler
committed
styling improvements
1 parent 5bb989d commit eba6868

File tree

6 files changed

+33
-32
lines changed

6 files changed

+33
-32
lines changed

‎priv/mod_invites/apps.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<div class="container">
1+
<div class="container mb-0">
22
<div class="row">
33
{% for item in apps %}
44
<div class="card mx-0 mb-3 me-3 client-card {% for platform in item.platforms %}app-platform-{{ platform|lower }} {% endfor %}flex-wrap col-sm-12 col-md-8 col-lg-5">
55
<div class="row no-gutters h-100">
6-
<div class="col-md-4">
6+
<div class="col-md-4 pt-2 mt-1">
77
<img src="{{ static }}/{{ item.image }}" class="p-2 img-fluid" alt="{{ item.alttext }}">
88
</div>
99
<div class="col-md-8">
@@ -21,6 +21,6 @@ <h3 class="card-title text-nowrap mb-1 h5">{{ item.name }}</h3>
2121
{% endfor %}
2222
</div>
2323
</div>
24-
<div id="show-all-clients-button-container" class="d-none alert alert-info">
24+
<div id="show-all-clients-button-container" class="d-none alert alert-info mb-0">
2525
{% blocktrans with tabidx=apps|length|add:2 %}Showing apps for <span class='platform-name'>your current platform</span> only. You may also <a href='#' id='show-all-clients-button' tabindex="{{ tabidx }}">view all apps.</a>{% endblocktrans %}
2626
</div>

‎priv/mod_invites/client.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,18 @@
99
{% blocktrans %}You have been invited to chat on {{ site_name }}, part of the XMPP secure and decentralized messaging network.{% endblocktrans %}
1010
{% endif %}</p>
1111

12-
<h2 class="h5">{% blocktrans with app_name=app.name %}You can start chatting right away with {{ app_name }}. Let's get started!{% endblocktrans %}</h2>
12+
<div class="bd-callout bd-callout-info col-12 col-md-8">
13+
<svg class="svg-inline--fa fa-lightbulb fa-w-11 text-warning" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lightbulb" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg=""><path fill="currentColor" d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg>
14+
{% blocktrans with app_name=app.name %}You can start chatting right away with {{ app_name }}. Let's get started!{% endblocktrans %}
15+
</div>
1316

14-
<div class="card m-3 client-card {% for item in app.platforms %}app-platform-{{ item|lower }} {% endfor %} flex-wrap col-sm-12 col-md-8 col-lg-5">
17+
<div class="card client-card {% for item in app.platforms %}app-platform-{{ item|lower }} {% endfor %} flex-wrap col-sm-12 col-md-8 col-lg-5 p-3 my-3">
1518
<div class="row no-gutters h-100">
1619
<div class="col-md-4">
17-
<img src="{{ static }}/{{ app.image }}" class="p-2 img-fluid" alt="{{ app.alttext }}">
20+
<img src="{{ static }}/{{ app.image }}" class="img-fluid" alt="{{ app.alttext }}">
1821
</div>
19-
<div class="col-md-8 h-100">
20-
<div class="card-body d-flex flex-column h-100">
22+
<div class="col-md-8 h-100 ps-md-1">
23+
<div class="card-body d-flex flex-column h-100 pb-0 p-md-0">
2124
<h3 class="card-title text-nowrap mb-1 h5">{{ app.name }}</h3>
2225
<div>
2326
{% for item in app.platforms %}<span class="badge text-bg-info client-platform-badge client-platform-badge-{{ item|lower }} me-1 mb-3">{{ item }}</span> {% endfor %}
@@ -28,7 +31,7 @@ <h3 class="card-title text-nowrap mb-1 h5">{{ app.name }}</h3>
2831
</div>
2932
</div>
3033

31-
<h2 class="h3 clear-both">{% blocktrans with app_name=app.name %}Step 1: Install {{ app_name }}{% endblocktrans %}</h2>
34+
<h2 class="h3 alert alert-info p-2" clear-both">{% blocktrans with app_name=app.name %}Step 1: Install {{ app_name }}{% endblocktrans %}</h2>
3235

3336
<p>{% if app.download.text %}{{ app.download.text }}{% else %}{% blocktrans with app_name=app.name %}Download and install {{ app_name }} below:{% endblocktrans %}{% endif %}</p>
3437

@@ -49,22 +52,21 @@ <h2 class="h3 clear-both">{% blocktrans with app_name=app.name %}Step 1: Install
4952

5053
<p class="mt-3">{% blocktrans with app_name=app.name %}After successfully installing {{ app_name }}, come back to this page and <strong>continue with Step 2</strong>.{% endblocktrans %}</p>
5154

52-
<h2 class="h3">{% trans "Step 2: Activate your account" %}</h2>
55+
<h2 class="h3 alert alert-info p-2">{% trans "Step 2: Activate your account" %}</h2>
5356

5457
<p>{% trans "Installed ok? Great! <strong>Click or tap the button below</strong> to accept your invite and continue with your account setup:" %}</p>
5558

56-
<div>
57-
<a href="{{ uri }}" id="uri-cta" class="btn btn-primary ms-5 mt-1 mb-3" tabindex="5">{% blocktrans with app_name=app.name %}Accept invite using {{ app_name }}{% endblocktrans %}</a><br/>
59+
<div class="w-100 text-center text-md-start">
60+
<a href="{{ uri }}" id="uri-cta" class="btn btn-success ms-md-5 mt-1 mb-3" tabindex="5">{% blocktrans with app_name=app.name %}Accept invite using {{ app_name }}{% endblocktrans %}</a><br/>
5861
</div>
5962

6063
<p>{% blocktrans with app_name=app.name %}After clicking the button you will be taken to {{ app_name }} to finish setting up your new {{ site_name }} account.{% endblocktrans %}</p>
6164
<nav aria-label="{% trans 'Page navigation' %}">
62-
<ul class="pagination">
65+
<ul class="pagination mb-0">
6366
<li class="page-item"><a tabindex="6" class="page-link" href="/{{ base }}/{{ token }}" aria-label="{% trans 'Previous' %}">
6467
<span aria-hidden="true">&laquo;</span>
6568
<span>{% trans "Previous" %}</span>
6669
</a></li>
6770
</ul>
6871
</nav>
69-
7072
{% endblock %}

‎priv/mod_invites/invite.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ <h2 class="card-title h5 clear-both">{% trans "Get started" %}</h2>
1111

1212
{% include "apps.html" %}
1313

14-
<h2 class="h5">{% trans "Other software" %}</h2>
15-
<p id="other-software">{% blocktrans with tabidx=apps|length|add:3 %}You can connect to {{ site_name }} using any XMPP-compatible software. If your preferred software is not listed above, you may still <a href="{{ registration_url }}" tabindex='{{ tabidx }}'>register an account manually</a>.{% endblocktrans %}</p>
14+
<h2 class="h5 mt-3">{% trans "Other software" %}</h2>
15+
<p id="other-software" class="mb-0">{% blocktrans with tabidx=apps|length|add:3 %}You can connect to {{ site_name }} using any XMPP-compatible software. If your preferred software is not listed above, you may still <a href="{{ registration_url }}" tabindex='{{ tabidx }}'>register an account manually</a>.{% endblocktrans %}</p>
1616
{% endblock %}

‎priv/mod_invites/register.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h2 class="card-title h5">{% trans "Create an account" %}</h2>
2525
{%if error and error.class == 'undefined' %}<div class="alert alert-danger" role="alert">{{ error.text }}</div>{% endif %}
2626
<form method="post" class="needs-validation" novalidate>
2727
<div class="input-group mb-3">
28-
<label for="user" class="col-md-4 col-lg-12 form-label">{% trans "Username" %}:</label>
28+
<label for="user" class="col-md-4 col-lg-12 form-label fw-bold">{% trans "Username" %}:</label>
2929
<div class="col-md-8 col-lg-12">
3030
<div class="input-group">
3131
<input
@@ -43,7 +43,7 @@ <h2 class="card-title h5">{% trans "Create an account" %}</h2>
4343
</div>
4444
</div>
4545
<div class="input-group mb-3">
46-
<label for="password" class="col-md-4 col-lg-12 form-label col-form-label">{% trans "Password" %}:</label>
46+
<label for="password" class="col-md-4 col-lg-12 form-label col-form-label fw-bold">{% trans "Password" %}:</label>
4747
<div class="col-md-8 col-lg-12">
4848
<input type="password" name="password" class="form-control {% if error.class == 'password' %}is-invalid{% endif %}" aria-describedby="passwordHelp" tabindex="2"
4949
autocomplete="new-password" required minlength="{{ password_min_length }}">
@@ -58,11 +58,11 @@ <h2 class="card-title h5">{% trans "Create an account" %}</h2>
5858
<input type="hidden" name="token" value="{{ token }}">
5959
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
6060
{% if app %}<input type="hidden" name="app_id" value="{{ app.id }}">{% endif %}
61-
<button type="submit" tabindex="3" class="btn btn-primary btn-lg">{% trans "Submit" %}</button>
61+
<button type="submit" tabindex="3" class="btn btn-primary float-end">{% trans "Submit" %}</button>
6262
</div>
6363
</form>
6464
<nav aria-label="{% trans 'Page navigation' %}">
65-
<ul class="pagination mt-3">
65+
<ul class="pagination mt-3 mb-0">
6666
<li class="page-item"><a tabindex="4" class="page-link" href="/{{ base }}/{{ token }}" aria-label="{% trans 'Previous' %}">
6767
<span aria-hidden="true">&laquo;</span>
6868
<span>{% trans "Previous" %}</span>

‎priv/mod_invites/register_success.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ <h2 class="card-title h5">{% trans "Congratulations!" %}</h2>
1010
<p>{% trans "To start chatting, you need to enter your new account credentials into your chosen XMPP software." %}</p>
1111

1212
{% if webchat_url %}
13-
<div class="alert alert-success">
13+
<div class="bd-callout bd-callout-info col-12">
1414
<div class="container">
1515
<div class="row">
16-
<div class="col-9">
17-
<p>{% trans "<strong>No suitable software installed right now?</strong> You can also log in to your account through our online web chat!" %}</p>
16+
<div class="col-12 col-md-9">
17+
<svg class="svg-inline--fa fa-lightbulb fa-w-11 text-warning" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lightbulb" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg=""><path fill="currentColor" d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg> {% trans "<strong>No suitable software installed right now?</strong> You can also log in to your account through our online web chat!" %}
1818
</div>
19-
<div class="col">
19+
<div class="col text-end mt-3 mt-md-0">
2020
<a class="btn btn-primary" href="{{ webchat_url }}" target="_blank" noopener>{% trans "Log in via web" %}</a>
2121
</div>
2222
</div>
@@ -27,7 +27,7 @@ <h2 class="card-title h5">{% trans "Congratulations!" %}</h2>
2727
{% if app %}
2828
<p>{% blocktrans with app_name=app.name %}You can now set up {{ app_name }} and connect it to your new account.{% endblocktrans %}</p>
2929

30-
<h2 class="h5">{% blocktrans with app_name=app.name %}Step 1: Download and install {{ app_name }}{% endblocktrans %}</h2>
30+
<h2 class="h5 alert alert-info p-2">{% blocktrans with app_name=app.name %}Step 1: Download and install {{ app_name }}{% endblocktrans %}</h2>
3131

3232
<p>{% if app.download.text %}{{ app.download.text }}{% else %}{% blocktrans with app_name=app.name %}Download and install {{ app_name }} below:{% endblocktrans %}{% endif %}</p>
3333

@@ -48,24 +48,24 @@ <h2 class="h5">{% blocktrans with app_name=app.name %}Step 1: Download and insta
4848
{% endfor %}
4949
</div>
5050

51-
<h2 class="h5">{% blocktrans with app_name=app.name %}Step 2: Connect {{ app_name }} to your new account{% endblocktrans %}</h2>
51+
<h2 class="h5 alert alert-info p-2">{% blocktrans with app_name=app.name %}Step 2: Connect {{ app_name }} to your new account{% endblocktrans %}</h2>
5252

5353
<p>{% if app.setup.text %}{{ app.setup.text }}{% else %}{% blocktrans with app_name=app.name %}Launch {{ app_name }} and sign in using your account credentials.{% endblocktrans %}{% endif %}</p>
5454
{% endif %}
5555

5656
<p>{% trans "As a final reminder, your account details are shown below:" %}</p>
5757

58-
<form class="account-details col-12 col-lg-6 mx-auto">
58+
<form class="account-details col-12 mx-auto">
5959
<div class="input-group">
60-
<label for="user" class="col-md-4 col-lg-12 col-form-label">{% trans "Chat address (JID)" %}:</label>
61-
<div class="col-md-8 col-lg-12">
60+
<label for="user" class="col-md-4 col-form-label fw-bold">{% trans "Chat address (JID)" %}:</label>
61+
<div class="col-md-8 col-12">
6262
<input type="text" class="form-control-plaintext" readonly value="{{ username }}@{{ domain }}">
6363
</div>
6464
</div>
6565
{% if password %}
6666
<div class="input-group">
67-
<label for="password" class="col-md-4 col-lg-12 col-form-label">{% trans "Password" %}:</label>
68-
<div class="col-md-8 col-lg-12">
67+
<label for="password" class="col-md-4 col-12 col-form-label fw-bold">{% trans "Password" %}:</label>
68+
<div class="col-md-8 col-12">
6969
<div class="input-group">
7070
<input type="password" readonly disabled aria-label="{% trans "Password" %}" class="form-control" value="{{ password }}">
7171
<div class="input-group-append">

‎priv/mod_invites/roster.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
<div class="bd-callout bd-callout-info col-12 col-md-8 mb-3">
1414
<svg class="svg-inline--fa fa-lightbulb fa-w-11 text-warning" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lightbulb" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg=""><path fill="currentColor" d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg>
1515
<strong class="text-warning-emphasis">{% trans 'Hint' %}:</strong> {% trans "If you don't have an XMPP client installed yet, here's a list of suitable clients for your platform." %}
16-
</p>
1716
</div>
1817
{% include "apps.html" %}
1918
{% endblock %}

0 commit comments

Comments
 (0)