boost/website-v2
2
0
Fork 0
mirror of https://github.com/boostorg/website-v2.git synced 2026-02-27 17:42:08 +00:00
Code Issues Projects Releases Wiki Activity

✨ styles providers with logos

Browse Source 
* Adds logos for GitHub and Google to the providers available for login.
* Cleans up layout for Login and provider confirmation
This commit is contained in:
Greg Newman
2023-01-05 16:07:45 -05:00
parent 46c2d67843
commit 37b69e44c1
3 changed files with 43 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
static/css/styles.css
View File

@@ -882,10 +882,6 @@ input[type=file] {
right: 0.75rem;
}
.top-20 {
top: 5rem;
}
.top-14 {
top: 3.5rem;
}
@@ -1388,18 +1384,18 @@ input[type=file] {
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1527,6 +1523,16 @@ input[type=file] {
background-color: rgb(23 42 52 / 0.6);
}
.bg-orange {
--tw-bg-opacity: 1;
background-color: rgb(255 159 0 / var(--tw-bg-opacity));
}
.bg-slate {
--tw-bg-opacity: 1;
background-color: rgb(49 74 87 / var(--tw-bg-opacity));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

28
templates/socialaccount/login.html
View File

@@ -4,18 +4,20 @@
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
{% if process == "connect" %}
<h1>{% blocktrans with provider.name as provider %}Connect {{ provider }}{% endblocktrans %}</h1>
<div class="text-center my-6">
<div class="py-6">
{% if process == "connect" %}
<h1 class="text-4xl">{% blocktrans with provider.name as provider %}Connect {{ provider }}{% endblocktrans %}</h1>
<p>{% blocktrans with provider.name as provider %}You are about to connect a new third party account from {{ provider }}.{% endblocktrans %}</p>
{% else %}
<h1 class="text-4xl">{% blocktrans with provider.name as provider %}Sign In Via {{ provider }}{% endblocktrans %}</h1>
<p>{% blocktrans with provider.name as provider %}You are about to sign in using a third party account from {{ provider }}.{% endblocktrans %}</p>
{% endif %}
</div>
<p>{% blocktrans with provider.name as provider %}You are about to connect a new third party account from {{ provider }}.{% endblocktrans %}</p>
{% else %}
<h1>{% blocktrans with provider.name as provider %}Sign In Via {{ provider }}{% endblocktrans %}</h1>
<p>{% blocktrans with provider.name as provider %}You are about to sign in using a third party account from {{ provider }}.{% endblocktrans %}</p>
{% endif %}
<form method="post">
{% csrf_token %}
<button type="submit">{% trans "Continue" %}</button>
</form>
<form method="post">
{% csrf_token %}
<button type="submit" class="border border-orange py-3 px-4 rounded text-orange uppercase">{% trans "Continue" %}</button>
</form>
</div>
{% endblock %}

14
templates/socialaccount/snippets/provider_list.html
View File

@@ -11,6 +11,16 @@
>{{brand.name}}</a>
{% endfor %}
{% endif %}
<a title="{{provider.name}}" class="px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10 {{provider.id}}"
href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{{provider.name}}</a>
<a title="{{provider.name}}"
class="px-8 py-3 text-base font-medium rounded-md border border-orange text-white bg-slate md:py-4 md:text-lg md:px-10 {{provider.id}}"
href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}"
>
{% if provider.name == "GitHub" %}
<i class="fab fa-github mr-3"></i>
{% endif %}
{% if provider.name == "Google" %}
<i class="fab fa-google mr-3"></i>
{% endif %}
Login with {{provider.name}}
</a>
{% endfor %}