Merge pull request #3276 from Andrew-Chen-Wang/bootstrap5

This commit is contained in:
Bruno Alla 2021-11-12 18:13:01 +00:00 committed by GitHub
commit 203b90b200
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 55 deletions

View File

@ -71,6 +71,7 @@ DJANGO_APPS = [
] ]
THIRD_PARTY_APPS = [ THIRD_PARTY_APPS = [
"crispy_forms", "crispy_forms",
"crispy_bootstrap5",
"allauth", "allauth",
"allauth.account", "allauth.account",
"allauth.socialaccount", "allauth.socialaccount",
@ -208,7 +209,8 @@ TEMPLATES = [
FORM_RENDERER = "django.forms.renderers.TemplatesSetting" FORM_RENDERER = "django.forms.renderers.TemplatesSetting"
# http://django-crispy-forms.readthedocs.io/en/latest/install.html#template-packs # http://django-crispy-forms.readthedocs.io/en/latest/install.html#template-packs
CRISPY_TEMPLATE_PACK = "bootstrap4" CRISPY_TEMPLATE_PACK = "bootstrap5"
CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
# FIXTURES # FIXTURES
# ------------------------------------------------------------------------------ # ------------------------------------------------------------------------------

View File

@ -32,8 +32,7 @@ function pathsConfig(appName) {
{%- if cookiecutter.custom_bootstrap_compilation == 'y' %} {%- if cookiecutter.custom_bootstrap_compilation == 'y' %}
bootstrapSass: `${vendorsRoot}/bootstrap/scss`, bootstrapSass: `${vendorsRoot}/bootstrap/scss`,
vendorsJs: [ vendorsJs: [
`${vendorsRoot}/jquery/dist/jquery.slim.js`, `${vendorsRoot}/@popperjs/core/dist/umd/popper.js`,
`${vendorsRoot}/popper.js/dist/umd/popper.js`,
`${vendorsRoot}/bootstrap/dist/js/bootstrap.js`, `${vendorsRoot}/bootstrap/dist/js/bootstrap.js`,
], ],
{%- endif %} {%- endif %}

View File

@ -5,10 +5,9 @@
"devDependencies": { "devDependencies": {
{% if cookiecutter.js_task_runner == 'Gulp' -%} {% if cookiecutter.js_task_runner == 'Gulp' -%}
{% if cookiecutter.custom_bootstrap_compilation == 'y' -%} {% if cookiecutter.custom_bootstrap_compilation == 'y' -%}
"bootstrap": "4.3.1", "bootstrap": "5.1.1",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"jquery": "3.3.1", "@popperjs/core": "2.9.2",
"popper.js": "1.14.3",
{% endif -%} {% endif -%}
"autoprefixer": "^9.4.7", "autoprefixer": "^9.4.7",
"browser-sync": "^2.14.0", "browser-sync": "^2.14.0",

View File

@ -34,6 +34,7 @@ django-environ==0.8.1 # https://github.com/joke2k/django-environ
django-model-utils==4.2.0 # https://github.com/jazzband/django-model-utils django-model-utils==4.2.0 # https://github.com/jazzband/django-model-utils
django-allauth==0.45.0 # https://github.com/pennersr/django-allauth django-allauth==0.45.0 # https://github.com/pennersr/django-allauth
django-crispy-forms==1.13.0 # https://github.com/django-crispy-forms/django-crispy-forms django-crispy-forms==1.13.0 # https://github.com/django-crispy-forms/django-crispy-forms
crispy-bootstrap5==0.5 # https://github.com/django-crispy-forms/crispy-bootstrap5
{%- if cookiecutter.use_compressor == "y" %} {%- if cookiecutter.use_compressor == "y" %}
django-compressor==2.4.1 # https://github.com/django-compressor/django-compressor django-compressor==2.4.1 # https://github.com/django-compressor/django-compressor
{%- endif %} {%- endif %}

View File

@ -66,17 +66,14 @@ window.addEventListener('DOMContentLoaded',function() {
const message = "{% translate 'Do you really want to remove the selected e-mail address?' %}"; const message = "{% translate 'Do you really want to remove the selected e-mail address?' %}";
const actions = document.getElementsByName('action_remove'); const actions = document.getElementsByName('action_remove');
if (actions.length) { if (actions.length) {
actions[0].addEventListener("click", function(e) { actions[0].addEventListener("click",function(e) {
if (!confirm(message)) { if (!confirm(message)) {
e.preventDefault(); e.preventDefault();
} }
}); });
} }
Array.from(document.getElementsByClassName('form-group')).forEach(x => x.classList.remove('row'));
}); });
document.addEventListener('DOMContentLoaded', function() {
$('.form-group').removeClass('row');
})
</script> </script>
{% endblock %} {% endblock %}
{%- endraw %} {%- endraw %}

View File

@ -8,17 +8,12 @@
<meta name="description" content="{% endraw %}{{ cookiecutter.description }}{% raw %}"> <meta name="description" content="{% endraw %}{{ cookiecutter.description }}{% raw %}">
<meta name="author" content="{% endraw %}{{ cookiecutter.author_name }}{% raw %}"> <meta name="author" content="{% endraw %}{{ cookiecutter.author_name }}{% raw %}">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<link rel="icon" href="{% static 'images/favicons/favicon.ico' %}"> <link rel="icon" href="{% static 'images/favicons/favicon.ico' %}">
{% block css %} {% block css %}
{%- endraw %}{% if cookiecutter.custom_bootstrap_compilation == "n" %}{% raw %} {%- endraw %}{% if cookiecutter.custom_bootstrap_compilation == "n" %}{% raw %}
<!-- Latest compiled and minified Bootstrap CSS --> <!-- Latest compiled and minified Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{%- endraw %}{% endif %}{% raw %} {%- endraw %}{% endif %}{% raw %}
<!-- Your stuff: Third-party CSS libraries go here --> <!-- Your stuff: Third-party CSS libraries go here -->
@ -41,11 +36,8 @@
<script defer src="{% static 'js/vendors.js' %}"></script> <script defer src="{% static 'js/vendors.js' %}"></script>
{%- endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %} {%- endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
{%- endraw %}{% else %}{% raw %} {%- endraw %}{% else %}{% raw %}
<!-- Bootstrap JS and its dependencies--> <!-- Bootstrap JS -->
<script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Your stuff: Third-party javascript libraries go here --> <!-- Your stuff: Third-party javascript libraries go here -->
{%- endraw %}{% endif %}{% raw %} {%- endraw %}{% endif %}{% raw %}
@ -62,39 +54,41 @@
<div class="mb-1"> <div class="mb-1">
<nav class="navbar navbar-expand-md navbar-light bg-light"> <nav class="navbar navbar-expand-md navbar-light bg-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <div class="container-fluid">
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
<a class="navbar-brand" href="{% url 'home' %}">{% endraw %}{{ cookiecutter.project_name }}{% raw %}</a> </button>
<a class="navbar-brand" href="{% url 'home' %}">{% endraw %}{{ cookiecutter.project_name }}{% raw %}</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="{% url 'home' %}">Home <span class="visually-hidden">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About</a>
</li>
{% if request.user.is_authenticated %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a class="nav-link" href="{% url 'users:detail' request.user.username %}">{% translate "My Profile" %}</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
{# URL provided by django-allauth/account/urls.py #} <a class="nav-link" href="{% url 'about' %}">About</a>
<a class="nav-link" href="{% url 'account_logout' %}">{% translate "Sign Out" %}</a>
</li> </li>
{% else %} {% if request.user.is_authenticated %}
<li class="nav-item"> <li class="nav-item">
{# URL provided by django-allauth/account/urls.py #} {# URL provided by django-allauth/account/urls.py #}
<a id="sign-up-link" class="nav-link" href="{% url 'account_signup' %}">{% translate "Sign Up" %}</a> <a class="nav-link" href="{% url 'users:detail' request.user.username %}">{% translate "My Profile" %}</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
{# URL provided by django-allauth/account/urls.py #} {# URL provided by django-allauth/account/urls.py #}
<a id="log-in-link" class="nav-link" href="{% url 'account_login' %}">{% translate "Sign In" %}</a> <a class="nav-link" href="{% url 'account_logout' %}">{% translate "Sign Out" %}</a>
</li> </li>
{% endif %} {% else %}
</ul> <li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="sign-up-link" class="nav-link" href="{% url 'account_signup' %}">{% translate "Sign Up" %}</a>
</li>
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="log-in-link" class="nav-link" href="{% url 'account_login' %}">{% translate "Sign In" %}</a>
</li>
{% endif %}
</ul>
</div>
</div> </div>
</nav> </nav>
@ -103,9 +97,12 @@
<div class="container"> <div class="container">
{% if messages %} {% if messages %}
{% for message in messages %} {% for message in messages %}
<div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">{{ message }}<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div> <div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
{% endfor %} {{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %} {% endif %}
{% block content %} {% block content %}
@ -117,7 +114,13 @@
{% block modal %}{% endblock modal %} {% block modal %}{% endblock modal %}
{% block inline_javascript %} {% block inline_javascript %}
{# Script tags with only code, no src (defer by default) #} {% comment %}
Script tags with only code, no src (defer by default). To run
with a "defer" so that you run run inline code:
<script>
window.addEventListener('DOMContentLoaded', () => {/* Run whatever you want */});
</script>
{% endcomment %}
{% endblock inline_javascript %} {% endblock inline_javascript %}
</body> </body>
</html> </html>