almet/la-chariotte
1
0
Fork 0
mirror of https://framagit.org/la-chariotte/la-chariotte.git synced 2025-04-29 10:22:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: use django-compressor for sass files

Browse source 
Rather than doing the compilation manually, use
django-compressor to automate the process.
This commit is contained in:
Alexis Métaireau 2023-12-22 00:23:09 +01:00
parent 0d3496ade1
commit 193a11f2d4
6 changed files with 162 additions and 10667 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -10,3 +10,4 @@ local_settings.py
mails.sqlite mails.sqlite
package-lock.json package-lock.json
package.json package.json
static

22
docs/install.md
View file

@ -89,28 +89,6 @@ DATABASES = {
} }
``` ```
## Compile the CSS files
We use bulma as a CSS framework.
Make sure you are using the correct version of sass:
```bash
sass --version
# used for development: 1.59.3 compiled with dart2js 2.19.4
```
Recompile as soon as changes are detected in scss files.
```bash
sass --watch --no-source-map ./la_chariotte/static/sass/style.sass:./la_chariotte/static/css/app.css
```
Or prefer to compile to CSS on a per-occurrence basis:
```bash
sass --no-source-map ./la_chariotte/static/sass/style.sass:./la_chariotte/static/css/app.css
```
## Start the server ## Start the server
Everything should now be ready to start the server: Everything should now be ready to start the server:

10
la_chariotte/settings.py
View file

@ -36,6 +36,7 @@ INSTALLED_APPS = [
"django.contrib.staticfiles", "django.contrib.staticfiles",
"crispy_forms", "crispy_forms",
"crispy_bulma", "crispy_bulma",
"sass_processor",
] ]
MIDDLEWARE = [ MIDDLEWARE = [
@ -132,6 +133,15 @@ USE_TZ = True
STATIC_URL = "static/" STATIC_URL = "static/"
STATICFILES_DIRS = ["la_chariotte/static"] STATICFILES_DIRS = ["la_chariotte/static"]
STATICFILES_FINDERS = [
"django.contrib.staticfiles.finders.FileSystemFinder",
"django.contrib.staticfiles.finders.AppDirectoriesFinder",
"sass_processor.finders.CssFinder",
]
SASS_PROCESSOR_INCLUDE_DIRS = [
BASE_DIR / "node_modules",
]
SASS_PROCESSOR_INCLUDE_FILE_PATTERN = r"^.+\.sass$"
STATIC_ROOT = os.getenv("STATIC_ROOT", BASE_DIR / "static") STATIC_ROOT = os.getenv("STATIC_ROOT", BASE_DIR / "static")

10497
la_chariotte/static/css/app.css
View file

File diff suppressed because it is too large Load diff

296
la_chariotte/templates/base.html
View file

@ -1,165 +1,166 @@
{% load static %} {% load static %}
{% load settings %} {% load settings %}
{% load sass_tags %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:type" content="website">
<meta property="og:type" content="website"> <meta property="og:locale" content="fr_FR" />
<meta property="og:locale" content="fr_FR" /> <meta property="og:site_name" content="La chariotte">
<meta property="og:site_name" content="La chariotte"> <meta property="og:url" content="{{ BASE_URL }}{{ request.path }}">
<meta property="og:url" content="{{ BASE_URL }}{{ request.path }}"> <title>
{% block title %}{% endblock %}
<title>{% block title %}{% endblock %} - La Chariotte</title> - La Chariotte</title>
{% block css %} {% block css %}
<link rel="stylesheet" href="{% static 'css/app.css' %}"> <link href="{% sass_src 'sass/style.sass' %}"
<link rel="stylesheet" href="{% static 'fork-awesome/css/fork-awesome.min.css' %}"> rel="stylesheet"
{% block extra_css %}{% endblock extra_css %} type="text/css" />
{% endblock css %} <link rel="stylesheet"
<link rel="shortcut icon" href="{% static 'img/icons/chariotte.ico' %}"> href="{% static 'fork-awesome/css/fork-awesome.min.css' %}">
</head> {% block extra_css %}
{% endblock extra_css %}
<body> {% endblock css %}
<main> <link rel="shortcut icon" href="{% static 'img/icons/chariotte.ico' %}">
<!-- Top navbar --> </head>
<nav class="top-nav navbar"> <body>
<!-- Navbar brand : always visible (all screen sizes)--> <main>
<div class="navbar-brand"> <!-- Top navbar -->
<p class="navbar-item is-size-4 has-text-weight-semibold"> <nav class="top-nav navbar">
{% block content_title %}Bienvenue :){% endblock %} <!-- Navbar brand : always visible (all screen sizes)-->
</p> <div class="navbar-brand">
</div> <p class="navbar-item is-size-4 has-text-weight-semibold">
<div class="navbar-menu"> {% block content_title %}Bienvenue :){% endblock %}
<div class="navbar-end"> </p>
<div class="navbar-item"> </div>
<div class="navbar-menu">
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
{% if user.is_authenticated %}
<p class="mr-4">{{ user.get_full_name }}</p>
<a class="button is-light" href="{% url 'accounts:logout' %}">
<i class="fa fa-sign-out mr-3" aria-hidden="true"></i>Se déconnecter
</a>
{% else %}
<a class="button is-light" href="{% url 'accounts:signup' %}">
<i class="fa fa-user-plus mr-3" aria-hidden="true"></i><strong>Créer un compte</strong>
</a>
<a class="button is-primary" href="{% url 'accounts:login' %}">
<i class="fa fa-sign-in mr-3" aria-hidden="true"></i>Se connecter
</a>
{% endif %}
</div>
</div>
</div>
</div>
</nav>
<!-- End Top navbar -->
<!-- Side navbar -->
<nav class="side-nav navbar is-fixed-top is-flex-desktop"
role="navigation"
aria-label="main navigation">
<!-- Navbar brand : always visible (all screen sizes)-->
<div class="navbar-brand">
<a class="navbar-item" href="{% url 'dashboard' %}">
<img src="{% static 'img/logos/logo_la_chariotte.png' %}">
</a>
<a role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<!-- Navbar menu : only visible on desktop-->
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{% url 'dashboard' %}">
<i class="fa fa-home mr-3" aria-hidden="true"></i>Tableau de bord
</a>
{% if user.is_authenticated %}
<a class="navbar-item" href="{% url 'order:index' %}">
<i class="fa fa-shopping-basket mr-3" aria-hidden="true"></i>Mes commandes groupées
</a>
{% endif %}
<a class="navbar-item" href="{% url 'about_chariotte' %}">
<i class="fa fa-info-circle mr-3" aria-hidden="true"></i>La Chariotte, c'est quoi&nbsp;?
</a>
<a class="navbar-item" href="{% url 'notice' %}">
<i class="fa fa-cog mr-3" aria-hidden="true"></i>Comment ça marche&nbsp;?
</a>
<a class="navbar-item" href="https://blog.chariotte.fr/last">
<i class="fa fa-newspaper-o mr-3" aria-hidden="true"></i>Actualités</a>
</div>
<hr>
<div class="navbar-item desktop-hidden">
<div class="buttons"> <div class="buttons">
{% if user.is_authenticated %} {% if user.is_authenticated %}
<p class="mr-4">{{ user.get_full_name }}</p> <a class="button is-light" href="{% url 'accounts:logout' %}">
<a class="button is-light" href="{% url 'accounts:logout' %}"> <i class="fa fa-sign-out mr-3" aria-hidden="true"></i>Se déconnecter
<i class="fa fa-sign-out mr-3" aria-hidden="true"></i>Se déconnecter </a>
</a>
{% else %} {% else %}
<a class="button is-light" href="{% url 'accounts:signup' %}"> <a class="button is-light" href="{% url 'accounts:signup' %}">
<i class="fa fa-user-plus mr-3" aria-hidden="true"></i><strong>Créer un compte</strong> <strong>Créer un compte</strong>
</a> </a>
<a class="button is-primary" href="{% url 'accounts:login' %}"> <a class="button is-primary" href="{% url 'accounts:login' %}">
<i class="fa fa-sign-in mr-3" aria-hidden="true"></i>Se connecter <i class="fa fa-sign-in mr-3" aria-hidden="true"></i>Se connecter
</a> </a>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
</nav>
<!-- End Navbar -->
<div class="content">
{% block content %}{% endblock %}
</div> </div>
</nav> </main>
<!-- End Top navbar --> <footer class="footer">
<div class="content columns has-text-centered">
<!-- Side navbar --> <div class="column margin-auto">
<nav class="side-nav navbar is-fixed-top is-flex-desktop" role="navigation" aria-label="main navigation"> <p>
<!-- Navbar brand : always visible (all screen sizes)--> <strong>La Chariotte</strong> | version {{ version }}
<div class="navbar-brand"> </p>
<a class="navbar-item" href="{% url 'dashboard' %}"> <p>
<img src="{% static 'img/logos/logo_la_chariotte.png' %}"> <a href="{% url 'legal_notice' %}">Mentions légales</a>
</a> </p>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<!-- Navbar menu : only visible on desktop-->
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{% url 'dashboard' %}">
<i class="fa fa-home mr-3" aria-hidden="true"></i>Tableau de bord
</a>
{% if user.is_authenticated %}
<a class="navbar-item" href="{% url 'order:index' %}">
<i class="fa fa-shopping-basket mr-3" aria-hidden="true"></i>Mes commandes groupées
</a>
{% endif %}
<a class="navbar-item" href="{% url 'about_chariotte' %}">
<i class="fa fa-info-circle mr-3" aria-hidden="true"></i>La Chariotte, c'est quoi&nbsp;?
</a>
<a class="navbar-item" href="{% url 'notice' %}">
<i class="fa fa-cog mr-3" aria-hidden="true"></i>Comment ça marche&nbsp;?
</a>
<a class="navbar-item" href="https://blog.chariotte.fr/last">
<i class="fa fa-newspaper-o mr-3" aria-hidden="true"></i>Actualités</a>
</div> </div>
<hr> <div class="column is-size-6 columns">
<div class="navbar-item desktop-hidden"> <div class="column margin-auto">
<div class="buttons"> <p>Contact : <a href="mailto:{% settings_value "CONTACT_MAIL" %}">{% settings_value "CONTACT_MAIL" %}</a>
{% if user.is_authenticated %} <p>Suivez <strong>la Chariotte</strong> sur :</p>
<a class="button is-light" href="{% url 'accounts:logout' %}"> </div>
<i class="fa fa-sign-out mr-3" aria-hidden="true"></i>Se déconnecter <div class="column">
</a> <a href="https://www.facebook.com/profile.php?id=100091984176981"
{% else %} target="_blank"
<a class="button is-light" href="{% url 'accounts:signup' %}"> rel="noopener">
<strong>Créer un compte</strong> <i class="fa fa-facebook-square mr-2" aria-hidden="true"></i>Facebook
</a> </a>
<a class="button is-primary" href="{% url 'accounts:login' %}"> <br>
<i class="fa fa-sign-in mr-3" aria-hidden="true"></i>Se connecter <a href="https://www.linkedin.com/company/la-chariotte-commandes-groupees/"
</a> target="_blank"
{% endif %} rel="noopener">
<i class="fa fa-linkedin-square mr-3" aria-hidden="true"></i>Linkedin
</a>
<br>
<a href="https://mastodon.scop.coop/@la_chariotte"
target="_blank"
rel="noopener">
<i class="fa fa-mastodon-square mr-3" aria-hidden="true"></i>Mastodon
</a>
</div>
</div> </div>
</div> </div>
</div> </footer>
</nav> </body>
<!-- End Navbar --> </html>
<div class="content"> <script>
{% block content %}
{% endblock %}
</div>
</main>
<footer class="footer">
<div class="content columns has-text-centered">
<div class="column margin-auto">
<p>
<strong>La Chariotte</strong> | version {{ version }}
</p>
<p>
<a href="{% url 'legal_notice' %}">Mentions légales</a>
<br>
<a href="https://gitlab.com/la-chariotte/la_chariotte/" target="_blank" rel="noopener">
<i class="fa fa-gitlab mr-2" aria-hidden="true"></i>GitLab
</a><br>
<a href="https://docs.chariotte.fr/" target="_blank" rel="noopener">
<i class="fa fa-book mr-2" aria-hidden="true"></i>Documentation
</a><br>
</p>
</div>
<div class="column is-size-6 columns">
<div class="column margin-auto">
<p>Contact : <a href="mailto:{% settings_value "CONTACT_MAIL" %}">{% settings_value "CONTACT_MAIL" %}</a>
<p>Suivez <strong>la Chariotte</strong> sur :</p>
</div>
<div class="column">
<a href="https://www.facebook.com/profile.php?id=100091984176981" target="_blank" rel="noopener">
<i class="fa fa-facebook-square mr-2" aria-hidden="true"></i>Facebook
</a><br>
<a href="https://www.linkedin.com/company/la-chariotte-commandes-groupees/" target="_blank" rel="noopener">
<i class="fa fa-linkedin-square mr-3" aria-hidden="true"></i>Linkedin
</a><br>
<a href="https://mastodon.scop.coop/@la_chariotte" target="_blank" rel="noopener">
<i class="fa fa-mastodon-square mr-3" aria-hidden="true"></i>Mastodon
</a>
</div>
</div>
</div>
</footer>
</body>
</html>
<script>
// For responsive menu // For responsive menu
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@ -180,7 +181,6 @@
}); });
}); });
}); });
{% block extra_js %} {% endblock %} {% block extra_js %} {% endblock %}
</script> </script>

3
pyproject.toml
View file

@ -19,6 +19,9 @@ dependencies = [
"html2text>=2020.1.16", "html2text>=2020.1.16",
"django-crispy-forms>=2.0,<3", "django-crispy-forms>=2.0,<3",
"crispy-bulma>=0.11.0,<1", "crispy-bulma>=0.11.0,<1",
"django-compressor>=4.4,<5",
"django-sass-processor>=1.4,<2",
"libsass>=0.22.0,<1",
] ]
[tool.setuptools] [tool.setuptools]