mirror of
https://github.com/boostorg/website-v2.git
synced 2026-01-19 04:42:17 +00:00
Cancellation UI styling (#1454)
This commit is contained in:
Rob Beeston
GitHub
@@ -40,6 +40,41 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block css %}{% endblock css %}
|
||||
<style>
|
||||
.toast-text {
|
||||
display: flex;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.red-delete {
|
||||
display: inline;
|
||||
padding: .1rem .5rem;
|
||||
margin: 0 1rem;
|
||||
border: 2px solid #fff;
|
||||
border-radius: .3rem;
|
||||
color: #fff;
|
||||
font-size: .8rem;
|
||||
}
|
||||
.red-delete:hover {
|
||||
background-color: #fff;
|
||||
color: #f00;
|
||||
}
|
||||
.red-cancel {
|
||||
display:inline;
|
||||
padding: .1rem .5rem;
|
||||
margin-left: 2rem;
|
||||
border: 2px solid #fff;
|
||||
border-radius: .3rem;
|
||||
background-color: #fff;
|
||||
color: var(--text-color);
|
||||
font-size: .8rem;
|
||||
}
|
||||
.red-cancel:hover {
|
||||
color: #f00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body x-init="() => {const m = localStorage.getItem('colorMode');
|
||||
@@ -61,19 +96,19 @@
|
||||
</div>
|
||||
{% if request.user.is_authenticated and request.user.delete_permanently_at %}
|
||||
<div id="messages" class="w-full text-center transition-opacity" x-data="{show: true}">
|
||||
<div x-show="show" class="w-2/3 mx-auto text-left items-center text-slate dark:text-white rounded text-base px-3 py-2 bg-red-500 fade show">
|
||||
<div x-show="show" class="mx-auto text-left items-center text-white rounded text-base px-3 py-2 bg-red-500 fade show">
|
||||
<button type="button"
|
||||
class="float-right"
|
||||
data-dismiss="alert"
|
||||
aria-hidden="true"
|
||||
x-on:click="show = ! show"
|
||||
><i class="fas fa-times-circle"></i></button>
|
||||
<p>
|
||||
<div class="toast-text">
|
||||
Your account is scheduled for deletion at
|
||||
{{ request.user.delete_permanently_at|date:'N j, Y, P e' }}
|
||||
</p>
|
||||
<p><a href="{% url "profile-cancel-delete" %}">Cancel deletion</a></p>
|
||||
<p><a href="{% url "profile-delete-immediately" %}">Delete now</a></p>
|
||||
<button class="red-cancel"><a href="{% url "profile-cancel-delete" %}">Cancel Deletion</a></button>
|
||||
<button class="red-delete"><a href="{% url "profile-delete-immediately" %}">Delete Now</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,27 +1,23 @@
|
||||
{% load static %}
|
||||
{% load widget_tweaks %}
|
||||
|
||||
<label class="font-semibold pb-4">
|
||||
{{ field.label }}
|
||||
|
||||
<label class="font-semibold">{{ field.label }}
|
||||
{% if field.errors %}
|
||||
{% for error in field.errors %}
|
||||
<div class="py-1 px-3 text-white bg-red-600">{{ error }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if field.errors %}
|
||||
{% for error in field.errors %}
|
||||
<div class="py-1 px-3 text-white bg-red-600">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if field.field.widget.input_type == "file" %}
|
||||
{% render_field field class="text-sm text-grey-500 !border-0 file:mr-5 file:py-2 file:px-6 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-white file:text-slate hover:file:cursor-pointer hover:file:bg-orange hover:file:text-white"%}
|
||||
{% elif field.field.widget.input_type == "checkbox" %}
|
||||
{% render_field field %}
|
||||
{% else %}
|
||||
{% render_field field class="w-full bg-white rounded border-gray-300 dark:text-white text-slate dark:border-slate dark:bg-charcoal" placeholder="" %}
|
||||
{% endif %}
|
||||
{% if field.help_text %}
|
||||
<small>
|
||||
{{ field.help_text }}
|
||||
</small>
|
||||
{% endif %}
|
||||
{% if field.field.widget.input_type == 'file' %}
|
||||
{% render_field field class='text-sm text-grey-500 !border-0 file:mr-5 file:py-2 file:px-6 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-white file:text-slate hover:file:cursor-pointer hover:file:bg-orange hover:file:text-white' %}
|
||||
{% elif field.field.widget.input_type == 'checkbox' %}
|
||||
{% render_field field %}
|
||||
{% else %}
|
||||
{% render_field field class='w-full bg-white rounded border-gray-300 dark:text-white text-slate dark:border-slate dark:bg-charcoal' placeholder='' %}
|
||||
{% endif %}
|
||||
{% if field.help_text %}
|
||||
<small>{{ field.help_text }}</small>
|
||||
{% endif %}
|
||||
</label>
|
||||
|
||||
@@ -1,20 +1,18 @@
|
||||
{% extends "users/profile_base.html" %}
|
||||
{% extends 'users/profile_base.html' %}
|
||||
|
||||
{% load i18n %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<h2>{% trans "Cancel scheduled account deletion" %}</h2>
|
||||
<div class="container flex justify-center flex-col items-center rounded bg-white dark:bg-charcoal p-4 mt-6 w-1/2 m-auto mb-4">
|
||||
<h3 class="py-4">{% trans 'Cancel scheduled account deletion' %}</h3>
|
||||
<form method="POST">
|
||||
{% csrf_token %}
|
||||
{% for field in form %}
|
||||
<div>
|
||||
{% include "includes/_form_input.html" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include 'includes/_form_input.html' %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<button class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">
|
||||
{% trans 'Confirm' %}
|
||||
</button>
|
||||
<button class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">{% trans 'Confirm' %}</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
{% extends "users/profile_base.html" %}
|
||||
{% extends 'users/profile_base.html' %}
|
||||
|
||||
{% load i18n %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<h2>{% trans "Delete Account Immediately" %}</h2>
|
||||
<div class="container flex justify-center flex-col items-center rounded bg-white dark:bg-charcoal p-4 mt-6 w-1/2 m-auto mb-4">
|
||||
<h3>{% trans 'Delete Account Immediately' %}</h3>
|
||||
<form method="POST">
|
||||
{% csrf_token %}
|
||||
{% for field in form %}
|
||||
<div>
|
||||
{% include "includes/_form_input.html" %}
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
{% include 'includes/_form_input.html' %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<button class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">
|
||||
{% trans 'Confirm' %}
|
||||
</button>
|
||||
<button class="py-2 px-3 mr-4 text-sm text-white rounded bg-orange" type="submit">{% trans 'Confirm' %}</button>
|
||||
<a href="{% url 'profile-account' %}">{% trans 'Cancel' %}</a>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,81 +1,98 @@
|
||||
{% extends "users/profile_base.html" %}
|
||||
{% extends 'users/profile_base.html' %}
|
||||
|
||||
{% load static i18n widget_tweaks %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
.profile-delete {
|
||||
display: inline;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #f00;
|
||||
background-color: #fff;
|
||||
border-radius: 0.3rem;
|
||||
color: #f00;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.profile-delete:hover {
|
||||
background-color: #fff;
|
||||
color: #f00;
|
||||
}
|
||||
.profile-cancel {
|
||||
display: inline;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #f00;
|
||||
border-radius: 0.3rem;
|
||||
background-color: #f00;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.profile-cancel:hover {
|
||||
color: #f00;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="md:flex md:space-x-6 mt-6">
|
||||
<div class="md:w-1/2 space-y-3">
|
||||
<div class="rounded bg-white dark:bg-charcoal p-4">
|
||||
<h3>{% trans "Update Profile" %}</h3>
|
||||
<h3>{% trans 'Update Profile' %}</h3>
|
||||
|
||||
<form method="POST" action="." class="space-y-3">
|
||||
{% csrf_token %}
|
||||
{% for field in profile_form.visible_fields %}
|
||||
<div>
|
||||
{% include "includes/_form_input.html" with form=profile_form field=field %}
|
||||
{% include 'includes/_form_input.html' with form=profile_form field=field %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="mb-4">
|
||||
<button name="update_profile" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">
|
||||
Update Profile
|
||||
</button>
|
||||
<button name="update_profile" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">Update Profile</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="rounded bg-white dark:bg-charcoal p-4">
|
||||
<h3>{% trans "Update Preferences" %}</h3>
|
||||
<h3>{% trans 'Update Preferences' %}</h3>
|
||||
<form method="POST" action="." class="space-y-3">
|
||||
{% csrf_token %}
|
||||
<h5 class="font-bold mt-4">Notify me via email when:</h5>
|
||||
{{ profile_preferences_form.errors }}
|
||||
{% for field in profile_preferences_form.visible_fields %}
|
||||
<div>
|
||||
{% include "includes/_form_input.html" with form=profile_preferences_form field=field %}
|
||||
{% include 'includes/_form_input.html' with form=profile_preferences_form field=field %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="mt-4">
|
||||
<button name="update_preferences" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">
|
||||
Update Preferences
|
||||
</button>
|
||||
<button name="update_preferences" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">Update Preferences</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:w-1/2 space-y-3">
|
||||
|
||||
<div class="rounded bg-white dark:bg-charcoal p-4">
|
||||
<h3>{% trans "Update Profile Photo" %}</h3>
|
||||
<h3>{% trans 'Update Profile Photo' %}</h3>
|
||||
{% if can_update_image %}
|
||||
{% if user.github_username %}
|
||||
<form method="POST" action="." class="space-y-3 border-b border-slate py-3">
|
||||
{% csrf_token %}
|
||||
<button name="update_github_photo" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">
|
||||
Use My GitHub Photo
|
||||
</button>
|
||||
<button name="update_github_photo" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">Use My GitHub Photo</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<form method="POST" enctype="multipart/form-data" action="." class="space-y-3 py-3">
|
||||
{% csrf_token %}
|
||||
{% for field in profile_photo_form.visible_fields %}
|
||||
<div>
|
||||
{% if field.errors %}
|
||||
{% for error in field.errors %}
|
||||
<div class="py-1 px-3 text-white bg-red-600">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<div>
|
||||
{% if field.errors %}
|
||||
{% for error in field.errors %}
|
||||
<div class="py-1 px-3 text-white bg-red-600">{{ error }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if user.image %}
|
||||
<img src="{{ user.image.url }}" alt="user" class="ml-4 inline -mt-1 rounded bg-white dark:bg-slate w-[30px] mr-2" />
|
||||
{% endif %}
|
||||
|
||||
{% render_field field class="text-sm text-grey-500 !border-0 file:mr-5 file:py-2 file:px-6 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-white file:text-slate hover:file:cursor-pointer hover:file:bg-orange hover:file:text-white"%}
|
||||
{% if user.image %}
|
||||
<img src="{{ user.image.url }}" alt="user" class="ml-4 inline -mt-1 rounded bg-white dark:bg-slate w-[30px] mr-2" />
|
||||
{% endif %}
|
||||
|
||||
{% render_field field class='text-sm text-grey-500 !border-0 file:mr-5 file:py-2 file:px-6 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-white file:text-slate hover:file:cursor-pointer hover:file:bg-orange hover:file:text-white' %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="mt-4">
|
||||
@@ -88,42 +105,43 @@
|
||||
</div>
|
||||
|
||||
{% if not social_accounts %}
|
||||
<div class="rounded bg-white dark:bg-charcoal p-4">
|
||||
<h3>{% trans "Set Password" %}</h3>
|
||||
<form method="POST" action="." class="password_set space-y-3">
|
||||
{% csrf_token %}
|
||||
{% for field in change_password_form.visible_fields %}
|
||||
<div>
|
||||
{% include "includes/_form_input.html" with form=change_password_form field=field %}
|
||||
<div class="rounded bg-white dark:bg-charcoal p-4">
|
||||
<h3>{% trans 'Set Password' %}</h3>
|
||||
<form method="POST" action="." class="password_set space-y-3">
|
||||
{% csrf_token %}
|
||||
{% for field in change_password_form.visible_fields %}
|
||||
<div>
|
||||
{% include 'includes/_form_input.html' with form=change_password_form field=field %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="mt-4">
|
||||
<button name="change_password" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">Set Password</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="mt-4">
|
||||
<button name="change_password" class="py-2 px-3 text-sm text-white rounded bg-orange" type="submit">Set
|
||||
Password
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="rounded bg-white dark:bg-charcoal p-4">
|
||||
<h3>{% trans "Account Connections" %}</h3>
|
||||
<div class="mt-4">
|
||||
<a href="{% url 'socialaccount_connections' %}"><button class="py-2 px-3 text-sm text-white rounded bg-orange">{% trans 'Manage Account Connections' %}</button></a>
|
||||
</form>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="rounded bg-white dark:bg-charcoal p-4">
|
||||
<h3>{% trans 'Account Connections' %}</h3>
|
||||
<div class="mt-4">
|
||||
<a href="{% url 'socialaccount_connections' %}"><button class="py-2 px-3 text-sm text-white rounded bg-orange">{% trans 'Manage Account Connections' %}</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="rounded bg-white dark:bg-charcoal p-4">
|
||||
<h3>{% trans "Delete Account" %}</h3>
|
||||
<h3>{% trans 'Delete Account' %}</h3>
|
||||
{% if user.delete_permanently_at %}
|
||||
<p>
|
||||
{% blocktrans with at=request.user.delete_permanently_at|date:'N j, Y, P e' trimmed %}
|
||||
Your account is scheduled for deletion at {{ at }}
|
||||
{% endblocktrans %}
|
||||
</p>
|
||||
<p><a href="{% url "profile-cancel-delete" %}">{% trans 'Cancel deletion' %}</a></p>
|
||||
<p><a href="{% url "profile-delete-immediately" %}">{% trans 'Delete now' %}</a></p>
|
||||
<p>
|
||||
{% blocktrans with at=request.user.delete_permanently_at|date:'N j, Y, P e' trimmed %}Your account is scheduled for deletion at {{ at }}
|
||||
{% endblocktrans %}
|
||||
</p>
|
||||
<p>
|
||||
<button class="profile-cancel"><a href="{% url 'profile-cancel-delete' %}">Cancel Deletion</a></button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="profile-delete"><a href="{% url 'profile-delete-immediately' %}">Delete Now</a></button>
|
||||
</p>
|
||||
{% else %}
|
||||
<a href="{% url "profile-delete" %}">{% trans 'Delete account' %}</a>
|
||||
<a href="{% url 'profile-delete' %}">{% trans 'Delete account' %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
{% extends "base.html" %}
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% load static avatar_tags %}
|
||||
|
||||
{% block subnav %}
|
||||
<div class="flex items-center py-3 px-4 border-b md:px-0 md:border-0 border-slate">
|
||||
{% avatar user=user image_size="h-[80px] w-[80px]" icon_size="text-7xl" %}
|
||||
<div class="flex items-center pt-6 px-4 border-b md:px-0 md:border-0 border-slate">
|
||||
{% avatar user=user image_size='h-[80px] w-[80px]' icon_size='text-7xl' %}
|
||||
<div class="ml-4 text-base">
|
||||
<span class="block">{{ user.get_full_name }}</span>
|
||||
<span class="text-xs text-slate dark:text-white/60 ">Joined {{ user.date_joined }}</span>
|
||||
<span class="text-xs text-slate dark:text-white/60">Joined {{ user.date_joined }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user