borne-accueil: donner un peu plus de clarté aux boutons

Aux grains de sel, les utilisateurs semblent avoir du mal à vraiment
comprendre la borne d'accueil tout seul. Mauvaise volonté ? Manque de
lisibilité ? On ne sait pas.

Ce changement permet d'essayer de clarifier encore plus les deux
boutons de la borne d'accueil en :
- raccourcissant les phrases sur les boutons
- styliser les boutons un peu plus comme des véritables boutons
- Avoir la possibilité d'ajouté un sous-titre à la page

members/static/css/member.css

@@ -17,7 +17,15 @@ video {max-width:none;}
 #photo_advice, #photo_studio,
 #service_entry_success .compteur
 {display:none;}
-#first_page .btn {height:50px; font-size: xx-large; margin-top:150px;}
+#first_page .btn {
+    height: auto;
+    font-size: xx-large;
+    margin-top: 150px;
+    border-radius: 5px;
+    border: 1px solid;
+    padding: 15px;
+    box-shadow: 1px 1px 2px #555;
+}
 #post_take_buttons .btn--primary,#post_take_buttons .btn--inverse {margin-bottom:15px;}
 
 #shopping_entry .btn--primary,  #service_entry .btn--primary,
@@ -66,4 +74,4 @@ h1 .member_name {font-weight: bold;}
 
 .msg-big {font-size: xx-large; background: #fff; padding:25px; text-align: center;}
 
-#member_advice {background: #FFF; color: red;}
\ No newline at end of file
+#member_advice {background: #FFF; color: red;}

members/views.py

@@ -18,8 +18,11 @@ def index(request):
     from outils.common import MConfig
     template = loader.get_template('members/index.html')
 
-    context = {'form': '', 'title': 'Coopérateurs',
-               'WELCOME_ENTRANCE_MSG': settings.WELCOME_ENTRANCE_MSG}
+    context = {
+        'form': '', 'title': 'Coopérateurs',
+        'WELCOME_ENTRANCE_MSG': settings.WELCOME_ENTRANCE_MSG,
+        'WELCOME_SUBTITLE_ENTRANCE_MSG': getattr(settings, 'WELCOME_SUBTITLE_ENTRANCE_MSG', '')
+    }
     for_shoping_msg = getattr(settings, 'ENTRANCE_COME_FOR_SHOPING_MSG', '')
 
     msettings = MConfig.get_settings('members')
@@ -133,7 +136,8 @@ def validation_inscription(request, email):
                    'ask_for_street2': getattr(settings, 'SUBSCRIPTION_ADD_STREET2', False),
                    'ask_for_second_phone': getattr(settings, 'SUBSCRIPTION_ADD_SECOND_PHONE', False),
                    'em_url': settings.EM_URL,
-                   'WELCOME_ENTRANCE_MSG': settings.WELCOME_ENTRANCE_MSG}
+                   'WELCOME_ENTRANCE_MSG': settings.WELCOME_ENTRANCE_MSG,
+                   'WELCOME_SUBTITLE_ENTRANCE_MSG': getattr(settings, 'WELCOME_SUBTITLE_ENTRANCE_MSG', '')}
 
     # with_addr_complement
     response = HttpResponse(template.render(context, request))

outils/config.example.py

@@ -16,7 +16,9 @@ SUBSCRIPTION_PAYMENT_MEANINGS = [
 ]
 
 # Borne d'accueil /members/
-WELCOME_ENTRANCE_MSG="coucou"
+WELCOME_ENTRANCE_MSG="Bienvenue dans ce super-marché"
+# Sous-titre optionel
+#WELCOME_SUBTITLE_ENTRANCE_MSG="Vous êtes venu aujourd'hui pour…"
 
 # Shop
 COMPANY_NAME = "Demo interfoodcoop"

templates/members/index.html

@@ -26,12 +26,15 @@
 {% endblock %}
 {% block content %}
 <section class="grid-6 has-gutter" id="first_page">
-    <h1 class="col-6 txtcenter">{{WELCOME_ENTRANCE_MSG}}</h1>
+  <h1 class="col-6 txtcenter">{{WELCOME_ENTRANCE_MSG}}</h1>
+  {% if WELCOME_SUBTITLE_ENTRANCE_MSG %}
+    <h4 class="col-6 txtcenter">{{WELCOME_SUBTITLE_ENTRANCE_MSG|safe}}</h4>
+  {% endif %}
     <div class="col-1"></div>
-    <a class="col-4 row-2 btn txtcenter b_yellow" data-next="shopping_entry">Je viens faire mes courses</a>
+    <a class="col-4 row-2 btn txtcenter b_yellow" data-next="shopping_entry">…faire <b>mes courses 🛒</b></a>
     <div class="col-1 row-2"></div>
     <div class="col-1 row-2"></div>
-    <a class="col-4 row-2 btn txtcenter b_green" data-next="service_entry">Je viens faire mon service</a>
+    <a class="col-4 row-2 btn txtcenter b_green" data-next="service_entry">…faire <b>mon service 🤝</b></a>
     <div class="col-1 row-2"></div>
 </section>
 <section class="grid-6 has-gutter" id="shopping_entry">
@@ -225,4 +228,4 @@
 </section>
 <script src="{% static "js/all_common.js" %}?v="></script>
 <script src="{% static "js/members.js" %}?v="></script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}

website/views.py

@@ -61,7 +61,8 @@ def index(request):
                        'max_begin_hour': settings.MAX_BEGIN_HOUR,
                        'payment_meanings': settings.SUBSCRIPTION_PAYMENT_MEANINGS,
                        'em_url': settings.EM_URL,
-                       'WELCOME_ENTRANCE_MSG': settings.WELCOME_ENTRANCE_MSG}
+                       'WELCOME_ENTRANCE_MSG': settings.WELCOME_ENTRANCE_MSG,
+                       'WELCOME_SUBTITLE_ENTRANCE_MSG': getattr(settings, 'WELCOME_SUBTITLE_ENTRANCE_MSG', '')}
             if hasattr(settings, 'SUBSCRIPTION_ASK_FOR_SEX'):
                 context['ask_for_sex'] = settings.SUBSCRIPTION_ASK_FOR_SEX
             if hasattr(settings, 'SUBSCRIPTION_ADD_STREET2'):