almet/la-chariotte
1
0
Fork 0
mirror of https://framagit.org/la-chariotte/la-chariotte.git synced 2025-04-29 02:12: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

66
la_chariotte/templates/base.html
View file

@ -1,9 +1,9 @@
{% 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">
@ -11,16 +11,20 @@
<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>
<title>{% block title %}{% endblock %} - La Chariotte</title> {% block title %}{% endblock %}
- 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" />
<link rel="stylesheet"
href="{% static 'fork-awesome/css/fork-awesome.min.css' %}">
{% block extra_css %}
{% endblock extra_css %}
{% endblock css %} {% endblock css %}
<link rel="shortcut icon" href="{% static 'img/icons/chariotte.ico' %}"> <link rel="shortcut icon" href="{% static 'img/icons/chariotte.ico' %}">
</head> </head>
<body> <body>
<main> <main>
<!-- Top navbar --> <!-- Top navbar -->
@ -54,43 +58,42 @@
</div> </div>
</nav> </nav>
<!-- End Top navbar --> <!-- End Top navbar -->
<!-- Side navbar --> <!-- Side navbar -->
<nav class="side-nav navbar is-fixed-top is-flex-desktop" role="navigation" aria-label="main navigation"> <nav class="side-nav navbar is-fixed-top is-flex-desktop"
role="navigation"
aria-label="main navigation">
<!-- Navbar brand : always visible (all screen sizes)--> <!-- Navbar brand : always visible (all screen sizes)-->
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="{% url 'dashboard' %}"> <a class="navbar-item" href="{% url 'dashboard' %}">
<img src="{% static 'img/logos/logo_la_chariotte.png' %}"> <img src="{% static 'img/logos/logo_la_chariotte.png' %}">
</a> </a>
<a role="button"
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> 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> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
<!-- Navbar menu : only visible on desktop--> <!-- Navbar menu : only visible on desktop-->
<div id="navbarBasicExample" class="navbar-menu"> <div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start"> <div class="navbar-start">
<a class="navbar-item" href="{% url 'dashboard' %}"> <a class="navbar-item" href="{% url 'dashboard' %}">
<i class="fa fa-home mr-3" aria-hidden="true"></i>Tableau de bord <i class="fa fa-home mr-3" aria-hidden="true"></i>Tableau de bord
</a> </a>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<a class="navbar-item" href="{% url 'order:index' %}"> <a class="navbar-item" href="{% url 'order:index' %}">
<i class="fa fa-shopping-basket mr-3" aria-hidden="true"></i>Mes commandes groupées <i class="fa fa-shopping-basket mr-3" aria-hidden="true"></i>Mes commandes groupées
</a> </a>
{% endif %} {% endif %}
<a class="navbar-item" href="{% url 'about_chariotte' %}"> <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;? <i class="fa fa-info-circle mr-3" aria-hidden="true"></i>La Chariotte, c'est quoi&nbsp;?
</a> </a>
<a class="navbar-item" href="{% url 'notice' %}"> <a class="navbar-item" href="{% url 'notice' %}">
<i class="fa fa-cog mr-3" aria-hidden="true"></i>Comment ça marche&nbsp;? <i class="fa fa-cog mr-3" aria-hidden="true"></i>Comment ça marche&nbsp;?
</a> </a>
<a class="navbar-item" href="https://blog.chariotte.fr/last"> <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> <i class="fa fa-newspaper-o mr-3" aria-hidden="true"></i>Actualités</a>
</div> </div>
@ -115,8 +118,7 @@
</nav> </nav>
<!-- End Navbar --> <!-- End Navbar -->
<div class="content"> <div class="content">
{% block content %} {% block content %}{% endblock %}
{% endblock %}
</div> </div>
</main> </main>
<footer class="footer"> <footer class="footer">
@ -127,13 +129,6 @@
</p> </p>
<p> <p>
<a href="{% url 'legal_notice' %}">Mentions légales</a> <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> </p>
</div> </div>
<div class="column is-size-6 columns"> <div class="column is-size-6 columns">
@ -142,13 +137,21 @@
<p>Suivez <strong>la Chariotte</strong> sur :</p> <p>Suivez <strong>la Chariotte</strong> sur :</p>
</div> </div>
<div class="column"> <div class="column">
<a href="https://www.facebook.com/profile.php?id=100091984176981" target="_blank" rel="noopener"> <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 <i class="fa fa-facebook-square mr-2" aria-hidden="true"></i>Facebook
</a><br> </a>
<a href="https://www.linkedin.com/company/la-chariotte-commandes-groupees/" target="_blank" rel="noopener"> <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 <i class="fa fa-linkedin-square mr-3" aria-hidden="true"></i>Linkedin
</a><br> </a>
<a href="https://mastodon.scop.coop/@la_chariotte" target="_blank" rel="noopener"> <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 <i class="fa fa-mastodon-square mr-3" aria-hidden="true"></i>Mastodon
</a> </a>
</div> </div>
@ -156,9 +159,7 @@
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>
<script> <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]