Merge branch 'tempcss' into 'master'

[style|design].[sass|css]

See merge request !69

README.md

@@ -33,6 +33,14 @@ sudo apt install libmysqlclient-dev libssl-dev libjpeg-dev zlib1g-dev python3-de
 
 The development is done with sqlite, but it is advised to set a more robust DBMS for production (Postgresql for example)
 
+### Collecting statics for production:
+
+We use scss in the project. In development environment (DEBUG=True), scss is compiled every time the file is needed. For production, it assumes you have already compiled every files and to do so, you need to use the following commands : 
+
+```
+./manage.py collectstatic # To collect statics
+./manage.py compilestatic # To compile scss in those statics
+```
 
 ### Misc about development
 

core/management/commands/compilestatic.py

@@ -0,0 +1,81 @@
+#!/usr/bin/env python3
+# -*- coding:utf-8 -*
+#
+# Copyright 2017
+# - Sli <antoine@bartuccio.fr>
+#
+# Ce fichier fait partie du site de l'Association des Étudiants de l'UTBM,
+# http://ae.utbm.fr.
+#
+# This program is free software; you can redistribute it and/or modify it under
+# the terms of the GNU General Public License a published by the Free Software
+# Foundation; either version 3 of the License, or (at your option) any later
+# version.
+#
+# This program is distributed in the hope that it will be useful, but WITHOUT
+# ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+# FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more
+# details.
+#
+# You should have received a copy of the GNU General Public License along with
+# this program; if not, write to the Free Sofware Foundation, Inc., 59 Temple
+# Place - Suite 330, Boston, MA 02111-1307, USA.
+#
+#
+
+import os
+import sass
+from django.core.management.base import BaseCommand
+from django.conf import settings
+
+
+class Command(BaseCommand):
+    """
+        Compiles scss in static folder for production
+    """
+    help = "Compile scss files from static folder"
+
+    def compile(self, filename):
+        args = {
+            "filename": filename,
+            "include_paths": settings.STATIC_ROOT,
+        }
+        if settings.SASS_PRECISION:
+            args['precision'] = settings.SASS_PRECISION
+        return sass.compile(**args)
+
+
+    def is_compilable(self, file, ext_list):
+        path, ext = os.path.splitext(file)
+        return ext in ext_list
+
+    def exec_on_folder(self, folder, func):
+        to_exec = []
+        for file in os.listdir(folder):
+            file = os.path.join(folder, file)
+            if os.path.isdir(file):
+                self.exec_on_folder(file, func)
+            elif self.is_compilable(file, ['.scss']):
+                to_exec.append(file)
+
+        for file in to_exec:
+            func(file)
+
+    def compilescss(self, file):
+        print("compiling %s" % file)
+        with(open(file.replace('.scss', '.css'), "w")) as newfile:
+            newfile.write(self.compile(file))
+
+    def removescss(self, file):
+        print("removing %s" % file)
+        os.remove(file)
+
+    def handle(self, *args, **options):
+
+        if os.path.isdir(settings.STATIC_ROOT):
+            print("---- Compiling scss files ---")
+            self.exec_on_folder(settings.STATIC_ROOT, self.compilescss)
+            print("---- Removing scss files ----")
+            self.exec_on_folder(settings.STATIC_ROOT, self.removescss)
+        else:
+            print("No static folder avalaible, please use collectstatic before compiling scss")

core/scss/finder.py

@@ -0,0 +1,54 @@
+#!/usr/bin/env python3
+# -*- coding:utf-8 -*
+#
+# Copyright 2016,2017
+# - Sli <antoine@bartuccio.fr>
+#
+# Ce fichier fait partie du site de l'Association des Étudiants de l'UTBM,
+# http://ae.utbm.fr.
+#
+# This program is free software; you can redistribute it and/or modify it under
+# the terms of the GNU General Public License a published by the Free Software
+# Foundation; either version 3 of the License, or (at your option) any later
+# version.
+#
+# This program is distributed in the hope that it will be useful, but WITHOUT
+# ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+# FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more
+# details.
+#
+# You should have received a copy of the GNU General Public License along with
+# this program; if not, write to the Free Sofware Foundation, Inc., 59 Temple
+# Place - Suite 330, Boston, MA 02111-1307, USA.
+#
+#
+
+import os
+from collections import OrderedDict
+from django.conf import settings
+from django.contrib.staticfiles.finders import FileSystemFinder
+from django.core.files.storage import FileSystemStorage
+
+
+class ScssFinder(FileSystemFinder):
+    """
+    Find static *.css files compiled on the fly
+    """
+    locations = []
+
+    def __init__(self, apps=None, *args, **kwargs):
+        location = settings.STATIC_ROOT
+        if not os.path.isdir(location):
+            return
+        self.locations = [
+            ('', location),
+        ]
+        self.storages = OrderedDict()
+        filesystem_storage = FileSystemStorage(location=location)
+        filesystem_storage.prefix = self.locations[0][0]
+        self.storages[location] = filesystem_storage
+
+    def find(self, path, all=False):
+        if path.endswith('.css'):
+            return super(ScssFinder, self).find(path, all)
+        return []

core/scss/processor.py

@@ -0,0 +1,80 @@
+#!/usr/bin/env python3
+# -*- coding:utf-8 -*
+#
+# Copyright 2017
+# - Sli <antoine@bartuccio.fr>
+#
+# Ce fichier fait partie du site de l'Association des Étudiants de l'UTBM,
+# http://ae.utbm.fr.
+#
+# This program is free software; you can redistribute it and/or modify it under
+# the terms of the GNU General Public License a published by the Free Software
+# Foundation; either version 3 of the License, or (at your option) any later
+# version.
+#
+# This program is distributed in the hope that it will be useful, but WITHOUT
+# ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+# FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more
+# details.
+#
+# You should have received a copy of the GNU General Public License along with
+# this program; if not, write to the Free Sofware Foundation, Inc., 59 Temple
+# Place - Suite 330, Boston, MA 02111-1307, USA.
+#
+#
+
+import os
+import sass
+from django.utils.encoding import force_bytes, iri_to_uri
+from django.core.files.base import ContentFile
+from django.utils.six.moves.urllib.parse import urljoin
+from django.templatetags.static import static
+from django.conf import settings
+from core.scss.storage import ScssFileStorage, find_file
+
+
+class ScssProcessor(object):
+    """
+        If DEBUG mode enabled : compile the scss file
+        Else : give the path of the corresponding css supposed to already be compiled
+        Don't forget to use compilestatics to compile scss for production
+    """
+    prefix = iri_to_uri(getattr(settings, 'STATIC_URL', '/static/'))
+    storage = ScssFileStorage()
+    scss_extensions = [".scss"]
+
+    def __init__(self, path=None):
+        self.path = path
+
+    def _convert_scss(self):
+        basename, ext = os.path.splitext(self.path)
+        css_filename = self.path.replace(".scss", ".css")
+        url = urljoin(self.prefix, css_filename)
+
+        if not settings.DEBUG:
+            return url
+
+        if ext not in self.scss_extensions:
+            return static(self.path)
+
+        # Compilation on the fly
+        compile_args = {
+            "filename": find_file(self.path),
+            "include_paths": settings.SASS_INCLUDE_FOLDERS,
+        }
+        if settings.SASS_PRECISION:
+            compile_args['precision'] = settings.SASS_PRECISION
+        content = sass.compile(**compile_args)
+        content = force_bytes(content)
+
+        if self.storage.exists(css_filename):
+            self.storage.delete(css_filename)
+        self.storage.save(css_filename, ContentFile(content))
+
+        return url
+
+    def get_converted_scss(self):
+        if self.path:
+            return self._convert_scss()
+        else:
+            return ""

core/scss/storage.py

@@ -0,0 +1,44 @@
+#!/usr/bin/env python3
+# -*- coding:utf-8 -*
+#
+# Copyright 2017
+# - Sli <antoine@bartuccio.fr>
+#
+# Ce fichier fait partie du site de l'Association des Étudiants de l'UTBM,
+# http://ae.utbm.fr.
+#
+# This program is free software; you can redistribute it and/or modify it under
+# the terms of the GNU General Public License a published by the Free Software
+# Foundation; either version 3 of the License, or (at your option) any later
+# version.
+#
+# This program is distributed in the hope that it will be useful, but WITHOUT
+# ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+# FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more
+# details.
+#
+# You should have received a copy of the GNU General Public License along with
+# this program; if not, write to the Free Sofware Foundation, Inc., 59 Temple
+# Place - Suite 330, Boston, MA 02111-1307, USA.
+#
+#
+
+from django.conf import settings
+from django.contrib.staticfiles.finders import get_finders
+from django.core.files.storage import FileSystemStorage
+
+
+class ScssFileStorage(FileSystemStorage):
+    def __init__(self, location=None, base_url=None, *args, **kwargs):
+        if location is None:
+            location = settings.STATIC_ROOT
+        if base_url is None:
+            base_url = settings.STATIC_URL
+        super(ScssFileStorage, self).__init__(location, base_url, *args, **kwargs)
+
+
+def find_file(path):
+    for finder in get_finders():
+        result = finder.find(path)
+        if result:
+            return result

core/static/core/style.css

@@ -1,583 +0,0 @@
-/*--------------------------------GENERAL------------------------------*/
-body{
-    background-color:#EEE;
-    position: relative;
-    width: 100%;
-    font-family: sans-serif;
-}
-a {
-    text-decoration: none;
-    color: #265C83;
-}
-a:hover   { color: #7FDBFF; }
-a:active  { color: #007BE6; }
-.ib {
-    display: inline-block;
-    padding: 2px;
-    margin: 2px;
-}
-.w_big {
-    width: 75%;
-}
-.w_medium {
-    width: 45%;
-}
-.w_small {
-    width: 20%;
-}
-/*--------------------------------HEADER-------------------------------*/
-#logo {
-    margin-left: 5%;
-    display: inline-block;
-}
-header {
-    display: block;
-    position: absolute;
-    top : 0px;
-    right : 2%;
-    background-color:#DDD;
-    margin: 0 10px;
-    padding: 0 10px;
-    border-radius: 0 0 10px 10px;
-}
-header ul {
-    display: inline-block;
-    list-style-type: none;
-    margin: 0px;
-    padding-right: 3px;
-    vertical-align: middle;
-}
-header a {
-    display: inline-block;
-    color: inherit;
-    text-decoration: none;
-    padding: 1em;
-}
-header a:hover {
-    color: #265C83;
-}
-header form {
-    display: inline-block;
-    padding: 1em;
-    width: 150px;
-}
-#popupheader {
-    width: 88%;
-    margin: 0px auto;
-    padding: 0.3em 1%;
-}
-#language_chooser {
-    position: absolute;
-    text-align: center;
-    left: 5px;
-    top: 5px;
-}
-
-#language_chooser input {
-    margin: 2px;
-    width: 3em;
-    height: 2em;
-}
-#notif {
-    display: none;
-    position: absolute;
-    background: lightgrey;
-    text-align: center;
-    overflow: scroll;
-    max-height: 400px;
-}
-#notif li:hover {
-    background: #bcc;
-}
-
-#alert_box p, #info_box p {
-    margin: 0px;
-    padding: 0px;
-}
-#alert_box, #info_box {
-    font-size: smaller;
-    display: inline-block;
-    border: solid 1px grey;
-    vertical-align: top;
-    padding: 2px;
-    margin: 4px;
-    margin-top: 60px;
-    min-width: 10%;
-    max-width: 30%;
-    min-height: 20px;
-}
-#info_box {
-    background: cornsilk
-}
-#alert_box {
-    background: gold;
-}
-
-/*---------------------------------NAV---------------------------------*/
-nav {
-    display: block;
-    width: 90%;
-    margin: 0px auto;
-    background: grey;
-    color: white;
-}
-
-nav a {
-    color: white;
-    font-style: normal;
-    font-weight: bolder;
-    text-decoration: none;
-    display: inline-block;
-    padding: 20px;
-}
-nav a:hover {
-    background: #535353;
-    color: white;
-}
-
-/*--------------------------------CONTENT------------------------------*/
-#quick_notif {
-    width: 90%;
-    margin: 0px auto;
-    list-style-type: none;
-    background: lightblue;
-}
-#quick_notif li {
-    padding: 10px;
-}
-#content {
-    width: 88%;
-    margin: 0px auto;
-    padding: 1em 1%;
-    background: white;
-    overflow: auto;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    font-weight: bold;
-    margin-top: 0.5em;
-}
-
-h1 {
-    font-size: 160%;
-    margin-left: 50px;
-}
-
-h2 {
-    font-size: 150%;
-    margin-left: 40px;
-}
-
-h3 {
-    font-size: 140%;
-    margin-left: 30px;
-}
-
-h4 {
-    font-size: 130%;
-    margin-left: 20px;
-}
-
-h5 {
-    font-size: 120%;
-    margin-left: 10px;
-}
-
-h6 {
-    font-size: 110%;
-    margin-left: 0px;
-}
-
-p, pre {
-    margin-top: 1em;
-    margin-left: 0px;
-}
-
-ul, ol {
-    margin-top: 1em;
-    margin-bottom: 1em;
-    list-style-type: disc;
-    margin-left: 25px;
-}
-
-code {
-    font-family: monospace;
-}
-blockquote {
-    margin: 10px;
-    padding: 5px;
-    border: solid 1px black;
-}
-.edit-bar {
-    display: block;
-    margin: 4px;
-}
-.edit-bar a {
-    display: inline-block;
-    margin: 4px;
-}
-.important {
-    font-size: 1.2em;
-    font-weight: bold;
-    color: red;
-}
-table {
-    width: 100%;
-    font-size: 0.90em;
-}
-td {
-    padding: 4px;
-    margin: 5px;
-    border: solid 1px darkgrey;
-    border-collapse: collapse;
-    vertical-align: top;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-td>ul {
-    margin-top: 0px;
-}
-thead {
-    font-weight: bold;
-}
-tbody>tr:nth-child(even) {
-    background: lightgrey;
-}
-tbody>tr:hover {
-    background: darkgrey;
-    width: 100%;
-}
-em {
-    font-style: italic;
-}
-.highlight {
-    background: orange;
-    font-weight: bold;
-}
-.underline {
-    text-decoration: underline;
-}
-.tool-bar {
-    overflow: auto;
-    padding: 4px;
-}
-.tools {
-    float: right;
-    border: 1px solid grey;
-}
-.tools a {
-    padding: 10px;
-    display: inline-block;
-}
-.selected_tab {
-    background: lightgrey;
-}
-#basket {
-    width: 40%;
-    background: lightgrey;
-    float: right;
-    padding: 10px;
-}
-#products {
-    width: 90%;
-    margin: 0px auto;
-    overflow: auto;
-}
-#bar_ui {
-    float: left;
-    min-width: 57%;
-}
-#user_info_container {
-}
-#user_info {
-    float: right;
-    padding: 5px;
-    width: 40%;
-    margin: 0px auto;
-    background: lightgrey;
-}
-
-/*-----------------------------USER PROFILE----------------------------*/
-#user_profile_container {
-    width: 80%;
-    margin: 0px auto;
-}
-#user_profile {
-    width: 100%;
-    margin: 0px auto;
-    padding: 10px;
-    overflow: auto;
-}
-#user_profile h4 { border-bottom: 1px solid grey; max-width: 60%; }
-#user_profile #left_column {
-    width: 59%;
-}
-#user_profile #right_column {
-    width: 40%;
-    float: right;
-    font-style: italic;
-}
-#user_profile #pictures {
-    max-width: 250px;
-    max-height: 300px;
-    margin: 0px auto;
-}
-#user_profile #nickname {
-    font-style: italic;
-}
-#user_profile #pictures img {
-    max-width: 96%;
-    max-height: 96%;
-}
-#user_profile .promo_pict {
-    height: 45px;
-}
-.mini_profile_link {
-    display: block;
-    text-decoration: none;
-}
-.mini_profile_link span {
-    display: inline-block;
-    width: 50px;
-    vertical-align: middle;
-}
-.mini_profile_link em {
-    vertical-align: middle;
-}
-.mini_profile_link img {
-    max-width: 40px;
-    max-height: 60px;
-    margin: 2px auto;
-    display: block;
-}
-#notifications li {
-    padding: 5px;
-    margin: 2px;
-    list-style: none;
-}
-#moderation div {
-    margin: 2px;
-    padding: 2px;
-    border: solid 1px red;
-    text-align: center
-}
-#moderation img {
-    width: 500px;
-}
-#pict {
-    display: inline-block;
-    width: 80%;
-    background: #333;
-    border: solid #333 2px;
-}
-/*---------------------------------PAGE--------------------------------*/
-.page_content {
-    display: block;
-    margin: 10px;
-    padding: 10px;
-    background: white;
-}
-
-.page_content code {
-    font-family: monospace;
-    color: white;
-    background: black;
-    display: inline-block;
-    padding: 4px;
-    line-height: 120%;
-}
-textarea {
-    white-space: pre;
-    width: 98%;
-    margin-top: 10px;
-}
-/*---------------------------LAUNDERETTE-------------------------------*/
-#token_form label {
-    display: inline;
-}
-
-/*------------------------------FORUM----------------------------------*/
-.topic a, .forum a, .category a {
-    color: black;
-}
-.topic a:hover, .forum a:hover, .category a:hover {
-    color: #424242;
-    text-decoration: underline;
-}
-.topic {
-    border: solid skyblue 1px;
-    padding: 2px;
-    margin: 2px;
-}
-.forum {
-    background: lightblue;
-    padding: 2px;
-    margin: 2px;
-}
-.category {
-    background: skyblue;
-}
-.message {
-    padding: 2px;
-    margin: 2px;
-    background: #eff7ff;
-}
-.message:nth-child(odd) {
-    background: #fff;
-}
-.message h5 {
-    font-size: 100%;
-}
-.message.unread {
-    background: #d8e7f3;
-}
-.msg_author.deleted {
-    background: #ffcfcf;
-}
-.msg_content.deleted {
-    background: #ffefef;
-}
-.msg_content {
-    display: inline-block;
-    width: 80%;
-    vertical-align: top;
-}
-.msg_author {
-    display: inline-block;
-    width: 19%;
-    text-align: center;
-    background: #d8e7f3;
-}
-.msg_author img {
-    max-width: 70%;
-    margin: 0px auto;
-}
-.msg_meta {
-    font-size: small;
-    list-style-type: none;
-}
-.msg_meta li {
-    padding: 2px;
-    margin: 2px;
-}
-.forum_signature {
-    color: #C0C0C0;
-    border-top: 1px solid #C0C0C0;
-}
-.forum_signature a {
-    color: #C0C0C0;
-}
-.forum_signature a:hover {
-    text-decoration: underline;
-}
-/*------------------------------SAS------------------------------------*/
-.album {
-    display: inline-block;
-    border: solid 1px black;
-    text-align: center;
-    padding: 5px;
-    width: 200px;
-    height: 140px;
-    background: #eee;
-    box-shadow: black 2px 2px 10px;
-    margin: 10px;
-    vertical-align: top;
-}
-
-.album img {
-    max-height: 100px;
-}
-
-.picture {
-    display: inline-block;
-    border: solid 1px black;
-    width: 150px;
-    height: 100px;
-    margin: 5px;
-    background: #eee;
-    box-shadow: grey 2px 2px 5px;
-    padding: 2px;
-    vertical-align: middle;
-}
-
-.picture img {
-    max-width: 100%;
-    max-height: 100px;
-    display: block;
-    margin: auto;
-}
-.not_moderated {
-    border: solid 1px red;
-    box-shadow: red 2px 2px 10px;
-}
-
-/*--------------------------------FOOTER-------------------------------*/
-footer{
-    text-align: center;
-}
-
-footer div{
-    margin-top: 25px;
-    margin-bottom: 15px;
-}
-
-footer a{
-    margin: 1px 20px;
-}
-
-/*---------------------------------FORMS-------------------------------*/
-form {
-    margin: 0px auto;
-    width: 60%;
-}
-label {
-    display: block;
-}
-.choose_file_widget {
-    display: none;
-}
-.ui-dialog .ui-dialog-buttonpane {
-    bottom: 0px;
-    position: absolute;
-    width: 97%;
-}
-#user_edit * {
-    text-align: center;
-
-}
-#user_edit img {
-    width: 100px;
-}
-#cash_summary_form label {
-    display: inline;
-}
-.inline {
-    display: inline;
-}
-.form_button {
-    width: 150px;
-    height: 120px;
-    padding: 2px;
-    display: inline-block;
-    font-size: 0.8em;
-}
-.form_button span {
-    width: 70px;
-    float: right;
-}
-.form_button img {
-    max-width: 50px;
-    max-height: 50px;
-    float: left;
-}
-.form_button strong {
-    font-weight: bold;
-    font-size: 1.2em;
-}
-.form_button button {
-    width: 100%;
-    height: 100%;
-    vertical-align: middle;
-}
-
-

core/static/core/style.scss

@@ -0,0 +1,689 @@
+$first-color: hsl(220, 100%, 50%);
+$second-color: hsl(40, 100%, 50%);
+$primary-color: hsl(219.9, 53.7%, 50%);
+$secondary-color: hsl(40.1, 78.0%, 50%);
+$primary-color-text: hsl(0, 0%, 100%);
+$secondary-color-text: hsla(0, 0%, 0%, 0.87);
+
+$primary-light-color: hsl(219.8, 46.4%, 64.9%);
+$primary-dark-color: hsl(219.8, 46.4%, 35.1%);
+
+$secondary-light-color: hsl(40, 68%, 65%);
+$secondary-dark-color: hsl(40, 68%, 35%);
+
+
+$primary-neutral-color: hsl(219.6, 20.8%, 50%);
+$primary-neutral-light-color: hsl(219.6, 20.8%, 83%);
+$primary-neutral-dark-color: hsl(219.6, 20.8%, 17%);
+
+$secondary-neutral-color: hsl(40, 57.6%, 50%);
+$secondary-neutral-light-color: hsl(40, 57.6%, 83%);
+$secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
+
+$white-color: hsl(219.6, 20.8%, 98%);
+$black-color: hsl(40.0, 0%, 17%);
+
+
+
+
+/*--------------------------------GENERAL------------------------------*/
+
+body {
+  background-color: $primary-neutral-light-color;
+  position: relative;
+  width: 100%;
+  font-family: sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: $primary-dark-color;
+  &:hover {
+    color: $primary-light-color;
+  }
+  &:active {
+    color: $primary-color;
+  }
+}
+
+.ib {
+  display: inline-block;
+  padding: 2px;
+  margin: 2px;
+}
+
+.w_big {
+  width: 75%;
+}
+
+.w_medium {
+  width: 45%;
+}
+
+.w_small {
+  width: 20%;
+}
+
+/*--------------------------------HEADER-------------------------------*/
+
+#logo {
+  margin-left: 5%;
+  display: inline-block;
+}
+
+header {
+  display: block;
+  position: absolute;
+  top: 0px;
+  right: 2%;
+  background-color: $secondary-light-color;
+  margin: 0 10px;
+  padding: 0 10px;
+  border-radius: 0 0 10px 10px;
+  ul {
+    display: inline-block;
+    list-style-type: none;
+    margin: 0px;
+    padding-right: 3px;
+    vertical-align: middle;
+  }
+  a {
+    display: inline-block;
+    color: inherit;
+    text-decoration: none;
+    padding: 1em;
+    &:hover {
+      color: $primary-dark-color;
+    }
+  }
+  form {
+    display: inline-block;
+    padding: 1em;
+    width: 150px;
+  }
+}
+
+#popupheader {
+  width: 88%;
+  margin: 0px auto;
+  padding: 0.3em 1%;
+}
+
+#language_chooser {
+  position: absolute;
+  text-align: center;
+  left: 5px;
+  top: 5px;
+  input {
+    margin: 2px;
+    width: 3em;
+    height: 2em;
+  }
+}
+
+#notif {
+  display: none;
+  position: absolute;
+  background: lightgrey;
+  text-align: center;
+  overflow: scroll;
+  max-height: 400px;
+  li:hover {
+    background: #bcc;
+  }
+}
+
+#alert_box p, #info_box p {
+  margin: 0px;
+  padding: 0px;
+}
+
+#alert_box {
+  font-size: smaller;
+  display: inline-block;
+  border: solid 1px grey;
+  vertical-align: top;
+  padding: 2px;
+  margin: 4px;
+  margin-top: 60px;
+  min-width: 10%;
+  max-width: 30%;
+  min-height: 20px;
+}
+
+#info_box {
+  font-size: smaller;
+  display: inline-block;
+  border: solid 1px $primary-neutral-light-color;
+  vertical-align: top;
+  padding: 2px;
+  margin: 4px;
+  margin-top: 60px;
+  min-width: 10%;
+  max-width: 30%;
+  min-height: 20px;
+  background: $white-color;
+}
+
+#alert_box {
+  background: gold;
+}
+
+/*---------------------------------NAV---------------------------------*/
+
+nav {
+  display: block;
+  width: 90%;
+  margin: 0px auto;
+  background: $primary-color;
+  color: $white-color;
+  a {
+    color: $white-color;
+    font-style: normal;
+    font-weight: bolder;
+    text-decoration: none;
+    display: inline-block;
+    padding: 20px;
+    &:hover {
+      background: $primary-dark-color;
+      color: $white-color;
+    }
+  }
+}
+
+/*--------------------------------CONTENT------------------------------*/
+
+#quick_notif {
+  width: 90%;
+  margin: 0px auto;
+  list-style-type: none;
+  background: $primary-neutral-light-color;
+  li {
+    padding: 10px;
+  }
+}
+
+#content {
+  width: 88%;
+  margin: 0px auto;
+  padding: 1em 1%;
+  background: $white-color;
+  overflow: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+  margin-top: 0.5em;
+}
+
+h1 {
+  font-size: 160%;
+  margin-left: 50px;
+}
+
+h2 {
+  font-size: 150%;
+  margin-left: 40px;
+}
+
+h3 {
+  font-size: 140%;
+  margin-left: 30px;
+}
+
+h4 {
+  font-size: 130%;
+  margin-left: 20px;
+}
+
+h5 {
+  font-size: 120%;
+  margin-left: 10px;
+}
+
+h6 {
+  font-size: 110%;
+  margin-left: 0px;
+}
+
+p, pre {
+  margin-top: 1em;
+  margin-left: 0px;
+}
+
+ul, ol {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  list-style-type: disc;
+  margin-left: 25px;
+}
+
+code {
+  font-family: monospace;
+}
+
+blockquote {
+  margin: 10px;
+  padding: 5px;
+  border: solid 1px $black-color;
+}
+
+.edit-bar {
+  display: block;
+  margin: 4px;
+  a {
+    display: inline-block;
+    margin: 4px;
+  }
+}
+
+.important {
+  font-size: 1.2em;
+  font-weight: bold;
+  color: red;
+}
+
+table {
+  width: 100%;
+  font-size: 0.90em;
+}
+
+td {
+  padding: 4px;
+  margin: 5px;
+  border: solid 1px $primary-neutral-color;
+  border-collapse: collapse;
+  vertical-align: top;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  > ul {
+    margin-top: 0px;
+  }
+}
+
+thead {
+  font-weight: bold;
+}
+
+tbody > tr {
+  &:nth-child(even) {
+    background: $primary-neutral-light-color;
+  }
+  &:hover {
+    background: $secondary-neutral-light-color;
+    width: 100%;
+  }
+}
+
+em {
+  font-style: italic;
+}
+
+.highlight {
+  background: $second-color;
+  font-weight: bold;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.tool-bar {
+  overflow: auto;
+  padding: 4px;
+}
+
+.tools {
+  float: right;
+  border: 1px solid $primary-neutral-light-color;
+  a {
+    padding: 10px;
+    display: inline-block;
+  }
+}
+
+.selected_tab {
+  background: $primary-neutral-light-color;
+}
+
+#basket {
+  width: 40%;
+  background: $primary-neutral-light-color;
+  float: right;
+  padding: 10px;
+}
+
+#products {
+  width: 90%;
+  margin: 0px auto;
+  overflow: auto;
+}
+
+#bar_ui {
+  float: left;
+  min-width: 57%;
+}
+
+#user_info_container {}
+
+#user_info {
+  float: right;
+  padding: 5px;
+  width: 40%;
+  margin: 0px auto;
+  background: $secondary-neutral-light-color;
+}
+
+/*-----------------------------USER PROFILE----------------------------*/
+
+#user_profile_container {
+  width: 80%;
+  margin: 0px auto;
+}
+
+#user_profile {
+  width: 100%;
+  margin: 0px auto;
+  padding: 10px;
+  overflow: auto;
+  h4 {
+    border-bottom: 1px solid $primary-light-color;
+    max-width: 60%;
+  }
+  #left_column {
+    width: 59%;
+  }
+  #right_column {
+    width: 40%;
+    float: right;
+    font-style: italic;
+  }
+  #pictures {
+    max-width: 250px;
+    max-height: 300px;
+    margin: 0px auto;
+  }
+  #nickname {
+    font-style: italic;
+  }
+  #pictures img {
+    max-width: 96%;
+    max-height: 96%;
+  }
+  .promo_pict {
+    height: 45px;
+  }
+}
+
+.mini_profile_link {
+  display: block;
+  text-decoration: none;
+  span {
+    display: inline-block;
+    width: 50px;
+    vertical-align: middle;
+  }
+  em {
+    vertical-align: middle;
+  }
+  img {
+    max-width: 40px;
+    max-height: 60px;
+    margin: 2px auto;
+    display: block;
+  }
+}
+
+#notifications li {
+  padding: 5px;
+  margin: 2px;
+  list-style: none;
+}
+
+#moderation {
+  div {
+    margin: 2px;
+    padding: 2px;
+    border: solid 1px red;
+    text-align: center;
+  }
+  img {
+    width: 500px;
+  }
+}
+
+#pict {
+  display: inline-block;
+  width: 80%;
+  background: #333;
+  border: solid #333 2px;
+}
+
+/*---------------------------------PAGE--------------------------------*/
+
+.page_content {
+  display: block;
+  margin: 10px;
+  padding: 10px;
+  background: $white-color;
+  code {
+    font-family: monospace;
+    color: $white-color;
+    background: $black-color;
+    display: inline-block;
+    padding: 4px;
+    line-height: 120%;
+  }
+}
+
+textarea {
+  white-space: pre;
+  width: 98%;
+  margin-top: 10px;
+}
+
+/*---------------------------LAUNDERETTE-------------------------------*/
+
+#token_form label {
+  display: inline;
+}
+
+/*------------------------------FORUM----------------------------------*/
+
+.topic a, .forum a, .category a {
+  color: $black-color;
+}
+
+.topic a:hover, .forum a:hover, .category a:hover {
+  color: #424242;
+  text-decoration: underline;
+}
+
+.topic {
+  border: solid $secondary-color 1px;
+  padding: 2px;
+  margin: 2px;
+}
+
+.forum {
+  background: $secondary-light-color;
+  padding: 2px;
+  margin: 2px;
+}
+
+.category {
+  background: $second-color;
+}
+
+.message {
+  padding: 2px;
+  margin: 2px;
+  background: $white-color;
+  &:nth-child(odd) {
+    background: $secondary-neutral-light-color;
+  }
+  h5 {
+    font-size: 100%;
+  }
+  &.unread {
+    background: #d8e7f3;
+  }
+}
+
+.msg_author.deleted {
+  background: #ffcfcf;
+}
+
+.msg_content {
+  &.deleted {
+    background: #ffefef;
+  }
+  display: inline-block;
+  width: 80%;
+  vertical-align: top;
+}
+
+.msg_author {
+  display: inline-block;
+  width: 19%;
+  text-align: center;
+  background: $secondary-neutral-light-color;
+  img {
+    max-width: 70%;
+    margin: 0px auto;
+  }
+}
+
+.msg_meta {
+  font-size: small;
+  list-style-type: none;
+  li {
+    padding: 2px;
+    margin: 2px;
+  }
+}
+
+.forum_signature {
+  color: #C0C0C0;
+  border-top: 1px solid #C0C0C0;
+  a {
+    color: #C0C0C0;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+/*------------------------------SAS------------------------------------*/
+
+.album {
+  display: inline-block;
+  border: solid 1px $black-color;
+  text-align: center;
+  padding: 5px;
+  width: 200px;
+  height: 140px;
+  background: #eee;
+  box-shadow: black 2px 2px 10px;
+  margin: 10px;
+  vertical-align: top;
+  img {
+    max-height: 100px;
+  }
+}
+
+.picture {
+  display: inline-block;
+  border: solid 1px $black-color;
+  width: 150px;
+  height: 100px;
+  margin: 5px;
+  background: #eee;
+  box-shadow: grey 2px 2px 5px;
+  padding: 2px;
+  vertical-align: middle;
+  img {
+    max-width: 100%;
+    max-height: 100px;
+    display: block;
+    margin: auto;
+  }
+}
+
+.not_moderated {
+  border: solid 1px red;
+  box-shadow: red 2px 2px 10px;
+}
+
+/*--------------------------------FOOTER-------------------------------*/
+
+footer {
+  text-align: center;
+  div {
+    margin-top: 25px;
+    margin-bottom: 15px;
+  }
+  a {
+    margin: 1px 20px;
+  }
+}
+
+/*---------------------------------FORMS-------------------------------*/
+
+form {
+  margin: 0px auto;
+  width: 60%;
+}
+
+label {
+  display: block;
+}
+
+.choose_file_widget {
+  display: none;
+}
+
+.ui-dialog .ui-dialog-buttonpane {
+  bottom: 0px;
+  position: absolute;
+  width: 97%;
+}
+
+#user_edit {
+  * {
+    text-align: center;
+  }
+  img {
+    width: 100px;
+  }
+}
+
+#cash_summary_form label, .inline {
+  display: inline;
+}
+
+.form_button {
+  width: 150px;
+  height: 120px;
+  padding: 2px;
+  display: inline-block;
+  font-size: 0.8em;
+  span {
+    width: 70px;
+    float: right;
+  }
+  img {
+    max-width: 50px;
+    max-height: 50px;
+    float: left;
+  }
+  strong {
+    font-weight: bold;
+    font-size: 1.2em;
+  }
+  button {
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+  }
+}

core/templates/core/base.jinja

@@ -8,7 +8,7 @@
         <link rel="stylesheet" href="{{ static('core/jquery.datetimepicker.min.css') }}">
         <link rel="stylesheet" href="{{ static('core/js/ui/jquery-ui.min.css') }}">
         <link rel="stylesheet" href="{{ static('ajax_select/css/ajax_select.css') }}">
-        <link rel="stylesheet" href="{{ static('core/style.css') }}">
+        <link href="{{ scss('core/style.scss') }}" rel="stylesheet" type="text/css" />
         {% endblock %}
     </head>
 

core/templatetags/renderer.py

@@ -2,6 +2,7 @@
 #
 # Copyright 2016,2017
 # - Skia <skia@libskia.so>
+# - Sli <antoine@bartuccio.fr>
 #
 # Ce fichier fait partie du site de l'Association des Étudiants de l'UTBM,
 # http://ae.utbm.fr.
@@ -25,6 +26,7 @@
 from django import template
 from django.template.defaultfilters import stringfilter
 from django.utils.safestring import mark_safe
+from core.scss.processor import ScssProcessor
 from django.utils.html import escape
 
 from core.markdown import markdown as md
@@ -49,4 +51,10 @@ def datetime_format_python_to_PHP(python_format_string):
         php_format_string = php_format_string.replace(py, php)
     return php_format_string
 
-
+@register.simple_tag()
+def scss(path):
+    """
+        Return path of the corresponding css file after compilation
+    """
+    processor = ScssProcessor(path)
+    return processor.get_converted_scss()

requirements.txt

@@ -12,5 +12,5 @@ reportlab
 django-haystack
 whoosh
 django-debug-toolbar
+libsass
 # mysqlclient
-

sith/settings.py

@@ -147,6 +147,7 @@ TEMPLATES = [
                 "ProductType": "counter.models.ProductType",
                 "timezone": "django.utils.timezone",
                 "get_sith": "com.views.sith",
+                "scss": "core.templatetags.renderer.scss",
             },
             "bytecode_cache": {
                 "name": "default",
@@ -182,6 +183,8 @@ HAYSTACK_CONNECTIONS = {
 
 HAYSTACK_SIGNAL_PROCESSOR = 'core.search_indexes.UserOnlySignalProcessor'
 
+SASS_PRECISION = 8
+
 WSGI_APPLICATION = 'sith.wsgi.application'
 
 
@@ -230,6 +233,13 @@ MEDIA_URL = '/data/'
 STATIC_URL = '/static/'
 STATIC_ROOT = './static/'
 
+# Static files finders which allow to see static folder in all apps
+STATICFILES_FINDERS = [
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'core.scss.finder.ScssFinder',
+]
+
 # Auth configuration
 AUTH_USER_MODEL = 'core.User'
 AUTH_ANONYMOUS_MODEL = 'core.models.AnonymousUser'
@@ -552,3 +562,6 @@ if DEBUG:
         'debug_toolbar.panels.logging.LoggingPanel',
         'debug_toolbar.panels.redirects.RedirectsPanel',
     ]
+    SASS_INCLUDE_FOLDERS = [
+        'core/static/',
+    ]

sith/toolbar_debug.py

@@ -1,7 +1,7 @@
 # -*- coding:utf-8 -*
 #
 # Copyright 2016,2017
-# - Skia <skia@libskia.so>
+# - Sli <antoine@bartuccio.fr>
 #
 # Ce fichier fait partie du site de l'Association des Étudiants de l'UTBM,
 # http://ae.utbm.fr.