styling improvements
This commit is contained in:
Stefan Strigler
@@ -1,9 +1,9 @@
|
||||
<div class="container">
|
||||
<div class="container mb-0">
|
||||
<div class="row">
|
||||
{% for item in apps %}
|
||||
<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">
|
||||
<div class="row no-gutters h-100">
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 pt-2 mt-1">
|
||||
<img src="{{ static }}/{{ item.image }}" class="p-2 img-fluid" alt="{{ item.alttext }}">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
@@ -21,6 +21,6 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div id="show-all-clients-button-container" class="d-none alert alert-info">
|
||||
<div id="show-all-clients-button-container" class="d-none alert alert-info mb-0">
|
||||
{% 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 %}
|
||||
</div>
|
||||
|
||||
@@ -9,15 +9,18 @@
|
||||
{% blocktrans %}You have been invited to chat on {{ site_name }}, part of the XMPP secure and decentralized messaging network.{% endblocktrans %}
|
||||
{% endif %}</p>
|
||||
|
||||
<h2 class="h5">{% blocktrans with app_name=app.name %}You can start chatting right away with {{ app_name }}. Let's get started!{% endblocktrans %}</h2>
|
||||
<div class="bd-callout bd-callout-info col-12 col-md-8">
|
||||
<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>
|
||||
{% blocktrans with app_name=app.name %}You can start chatting right away with {{ app_name }}. Let's get started!{% endblocktrans %}
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<div class="row no-gutters h-100">
|
||||
<div class="col-md-4">
|
||||
<img src="{{ static }}/{{ app.image }}" class="p-2 img-fluid" alt="{{ app.alttext }}">
|
||||
<img src="{{ static }}/{{ app.image }}" class="img-fluid" alt="{{ app.alttext }}">
|
||||
</div>
|
||||
<div class="col-md-8 h-100">
|
||||
<div class="card-body d-flex flex-column h-100">
|
||||
<div class="col-md-8 h-100 ps-md-1">
|
||||
<div class="card-body d-flex flex-column h-100 pb-0 p-md-0">
|
||||
<h3 class="card-title text-nowrap mb-1 h5">{{ app.name }}</h3>
|
||||
<div>
|
||||
{% 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 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="h3 clear-both">{% blocktrans with app_name=app.name %}Step 1: Install {{ app_name }}{% endblocktrans %}</h2>
|
||||
<h2 class="h3 alert alert-info p-2" clear-both">{% blocktrans with app_name=app.name %}Step 1: Install {{ app_name }}{% endblocktrans %}</h2>
|
||||
|
||||
<p>{% if app.download.text %}{{ app.download.text }}{% else %}{% blocktrans with app_name=app.name %}Download and install {{ app_name }} below:{% endblocktrans %}{% endif %}</p>
|
||||
|
||||
@@ -49,22 +52,21 @@
|
||||
|
||||
<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>
|
||||
|
||||
<h2 class="h3">{% trans "Step 2: Activate your account" %}</h2>
|
||||
<h2 class="h3 alert alert-info p-2">{% trans "Step 2: Activate your account" %}</h2>
|
||||
|
||||
<p>{% trans "Installed ok? Great! <strong>Click or tap the button below</strong> to accept your invite and continue with your account setup:" %}</p>
|
||||
|
||||
<div>
|
||||
<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/>
|
||||
<div class="w-100 text-center text-md-start">
|
||||
<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/>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<nav aria-label="{% trans 'Page navigation' %}">
|
||||
<ul class="pagination">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item"><a tabindex="6" class="page-link" href="/{{ base }}/{{ token }}" aria-label="{% trans 'Previous' %}">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span>{% trans "Previous" %}</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -11,6 +11,6 @@
|
||||
|
||||
{% include "apps.html" %}
|
||||
|
||||
<h2 class="h5">{% trans "Other software" %}</h2>
|
||||
<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>
|
||||
<h2 class="h5 mt-3">{% trans "Other software" %}</h2>
|
||||
<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>
|
||||
{% endblock %}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
{%if error and error.class == 'undefined' %}<div class="alert alert-danger" role="alert">{{ error.text }}</div>{% endif %}
|
||||
<form method="post" class="needs-validation" novalidate>
|
||||
<div class="input-group mb-3">
|
||||
<label for="user" class="col-md-4 col-lg-12 form-label">{% trans "Username" %}:</label>
|
||||
<label for="user" class="col-md-4 col-lg-12 form-label fw-bold">{% trans "Username" %}:</label>
|
||||
<div class="col-md-8 col-lg-12">
|
||||
<div class="input-group">
|
||||
<input
|
||||
@@ -43,7 +43,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<label for="password" class="col-md-4 col-lg-12 form-label col-form-label">{% trans "Password" %}:</label>
|
||||
<label for="password" class="col-md-4 col-lg-12 form-label col-form-label fw-bold">{% trans "Password" %}:</label>
|
||||
<div class="col-md-8 col-lg-12">
|
||||
<input type="password" name="password" class="form-control {% if error.class == 'password' %}is-invalid{% endif %}" aria-describedby="passwordHelp" tabindex="2"
|
||||
autocomplete="new-password" required minlength="{{ password_min_length }}">
|
||||
@@ -58,11 +58,11 @@
|
||||
<input type="hidden" name="token" value="{{ token }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||
{% if app %}<input type="hidden" name="app_id" value="{{ app.id }}">{% endif %}
|
||||
<button type="submit" tabindex="3" class="btn btn-primary btn-lg">{% trans "Submit" %}</button>
|
||||
<button type="submit" tabindex="3" class="btn btn-primary float-end">{% trans "Submit" %}</button>
|
||||
</div>
|
||||
</form>
|
||||
<nav aria-label="{% trans 'Page navigation' %}">
|
||||
<ul class="pagination mt-3">
|
||||
<ul class="pagination mt-3 mb-0">
|
||||
<li class="page-item"><a tabindex="4" class="page-link" href="/{{ base }}/{{ token }}" aria-label="{% trans 'Previous' %}">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span>{% trans "Previous" %}</span>
|
||||
|
||||
@@ -10,13 +10,13 @@
|
||||
<p>{% trans "To start chatting, you need to enter your new account credentials into your chosen XMPP software." %}</p>
|
||||
|
||||
{% if webchat_url %}
|
||||
<div class="alert alert-success">
|
||||
<div class="bd-callout bd-callout-info col-12">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-9">
|
||||
<p>{% trans "<strong>No suitable software installed right now?</strong> You can also log in to your account through our online web chat!" %}</p>
|
||||
<div class="col-12 col-md-9">
|
||||
<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!" %}
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col text-end mt-3 mt-md-0">
|
||||
<a class="btn btn-primary" href="{{ webchat_url }}" target="_blank" noopener>{% trans "Log in via web" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,7 +27,7 @@
|
||||
{% if app %}
|
||||
<p>{% blocktrans with app_name=app.name %}You can now set up {{ app_name }} and connect it to your new account.{% endblocktrans %}</p>
|
||||
|
||||
<h2 class="h5">{% blocktrans with app_name=app.name %}Step 1: Download and install {{ app_name }}{% endblocktrans %}</h2>
|
||||
<h2 class="h5 alert alert-info p-2">{% blocktrans with app_name=app.name %}Step 1: Download and install {{ app_name }}{% endblocktrans %}</h2>
|
||||
|
||||
<p>{% if app.download.text %}{{ app.download.text }}{% else %}{% blocktrans with app_name=app.name %}Download and install {{ app_name }} below:{% endblocktrans %}{% endif %}</p>
|
||||
|
||||
@@ -48,24 +48,24 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<h2 class="h5">{% blocktrans with app_name=app.name %}Step 2: Connect {{ app_name }} to your new account{% endblocktrans %}</h2>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{% endif %}
|
||||
|
||||
<p>{% trans "As a final reminder, your account details are shown below:" %}</p>
|
||||
|
||||
<form class="account-details col-12 col-lg-6 mx-auto">
|
||||
<form class="account-details col-12 mx-auto">
|
||||
<div class="input-group">
|
||||
<label for="user" class="col-md-4 col-lg-12 col-form-label">{% trans "Chat address (JID)" %}:</label>
|
||||
<div class="col-md-8 col-lg-12">
|
||||
<label for="user" class="col-md-4 col-form-label fw-bold">{% trans "Chat address (JID)" %}:</label>
|
||||
<div class="col-md-8 col-12">
|
||||
<input type="text" class="form-control-plaintext" readonly value="{{ username }}@{{ domain }}">
|
||||
</div>
|
||||
</div>
|
||||
{% if password %}
|
||||
<div class="input-group">
|
||||
<label for="password" class="col-md-4 col-lg-12 col-form-label">{% trans "Password" %}:</label>
|
||||
<div class="col-md-8 col-lg-12">
|
||||
<label for="password" class="col-md-4 col-12 col-form-label fw-bold">{% trans "Password" %}:</label>
|
||||
<div class="col-md-8 col-12">
|
||||
<div class="input-group">
|
||||
<input type="password" readonly disabled aria-label="{% trans "Password" %}" class="form-control" value="{{ password }}">
|
||||
<div class="input-group-append">
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
<div class="bd-callout bd-callout-info col-12 col-md-8 mb-3">
|
||||
<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>
|
||||
<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." %}
|
||||
</p>
|
||||
</div>
|
||||
{% include "apps.html" %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user