From 3da8f89d3cb35be4dd7bdbdbf086428d116fcbdc Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sat, 20 Mar 2021 23:30:29 +0100
Subject: [PATCH] bootstrap footer and homepage

---
 .../public/modules/bootstrap/_custom.scss     | 67 ++++++++++++++++---
 .../modules/bootstrap/custom/_variables.scss  | 18 ++---
 .../Resources/views/Layout/_footer.html.twig  |  2 +-
 .../Resources/views/layout.html.twig          | 14 ++--
 .../Widget/homepage_add_a_person.html.twig    |  4 +-
 5 files changed, 76 insertions(+), 29 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
index 47a769752..3bedae2be 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
@@ -2,19 +2,15 @@
  *  These custom styles will override bootstrap enabled stylesheets
  */
 
-
-// hack hérité de scratch: contraindre le footer en bas de page
-.container-fluid::after {
-  content: "";
-  display: table;
-  clear: both;
-  border-spacing: 0;
-}
-
 h1, h2, .h1, .h2 {
   font-weight: $headings-font-weight + 200;
 }
 
+html, body {
+  min-height: 100%;
+  height: 100%;
+}
+
 nav.navbar {
   .navbar-brand {
     img {
@@ -23,7 +19,9 @@ nav.navbar {
     }
   }
   .navbar-toggler,
-  .navbar-collapse { float: right; }
+  .navbar-collapse {
+    float: right;
+  }
   .navbar-nav {
     display: flex;
     align-items: center;
@@ -35,4 +33,53 @@ nav.navbar {
       }
     }
   }
+}
+
+#content_conainter {
+  position: relative;
+  min-height: calc(100% - 195px);
+
+  &::before {
+    bottom: 0;
+    content: "";
+    left: 0;
+    opacity: .1;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: -1;
+    background-image: url(/build/images/desert.2a25b6fc.jpg);
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 50%;
+  }
+}
+
+.container-fluid::after {
+  content: "";
+  display: table;
+  clear: both;
+  border-spacing: 0;
+}
+
+.footer {
+  background: $dark;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  width: 100%;
+  p {
+    font-family: Open Sans;
+    font-weight: 300;
+    clear: both;
+    color: #fff;
+    font-size: .9em;
+    line-height: 1.5em;
+    margin: auto;
+    max-width: 35em;
+    text-align: center;
+    a, a:hover {
+      text-decoration: underline;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss
index 3e353c790..15bfedd3a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss
@@ -11,27 +11,27 @@
 
 $white:    #fff !default;
 $gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
+$gray-200: #e6e6e6 !default;
 $gray-300: #dee2e6 !default;
 $gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
+$gray-500: #b2b2b2 !default;
 $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
-$gray-800: #343a40 !default;
+$gray-800: #333333 !default;
 $gray-900: #212529 !default;
-$black:    #000 !default;
+$black:    #111 !default;
 
 $grays: () !default;
 $grays: map-merge(
   (
     "100": $gray-100,
-    "200": $gray-200,   /* ~= $chill-llight-gray, $chill-gray */
+    "200": $gray-200,   /* = $chill-llight-gray, $chill-gray */
     "300": $gray-300,
     "400": $gray-400,
-    "500": $gray-500,   /* ~= $chill-light-gray */
+    "500": $gray-500,   /* = $chill-light-gray */
     "600": $gray-600,
     "700": $gray-700,
-    "800": $gray-800,   /* ~= $chill-dark-gray */
+    "800": $gray-800,   /* = $chill-dark-gray */
     "900": $gray-900
   ),
   $grays
@@ -72,8 +72,8 @@ $colors: map-merge(
 $primary:       $blue;
 $secondary:     $gray-600;
 $success:       $green;
-$info:          $gray-300;
-$warning:       $yellow;
+$info:          $yellow;
+$warning:       $orange;
 $danger:        $red;
 $light:         $gray-100;
 $dark:          $gray-800;
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Layout/_footer.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Layout/_footer.html.twig
index 0d23d499d..2a1ed91d1 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Layout/_footer.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Layout/_footer.html.twig
@@ -1,4 +1,4 @@
 <footer class="footer">
     <p>{{ 'This program is free software: you can redistribute it and/or modify it under the terms of the <strong>GNU Affero General Public License</strong>'|trans|raw }}
-        <br/> <a name="bottom" href="https://{{ app.request.locale }}.wikibooks.org/wiki/Chill" target="_blank">{{ 'User manual'|trans }}</a></p>
+        <br/> <a name="bottom" class="btn text-white" href="https://{{ app.request.locale }}.wikibooks.org/wiki/Chill" target="_blank">{{ 'User manual'|trans }}</a></p>
 </footer>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
index 49571e358..5fa02d260 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
@@ -67,7 +67,7 @@
                             <li class="nav-item navigation-search">
                                 <form class="form-inline my-2 my-sm-0" action="{{ path('chill_main_search') }}" method="get">
                                     <input class="form-control mr-sm-2" name="q" type="search" placeholder="{{ 'Search'|trans }}" {% if _search_pattern is defined %}value="{{ _search_pattern }}"{% endif %}/>
-                                    <button class="btn my-2 my-sm-0"  type="submit"><i class="fa fa-search fa-flip-horizontal"></i></button>
+                                    <button class="btn text-white-50 my-2 my-sm-0"  type="submit"><i class="fa fa-lg fa-search fa-flip-horizontal"></i></button>
                                 </form>
                             </li>
                         {% endblock  %}
@@ -83,8 +83,8 @@
                         }) }}
 
                         {% if  available_languages|length == 1 %}
-                            <li class="nav-item">
-                                <a class="btn btn-primary" href="">{{ available_languages[0] | capitalize }}</a>
+                            <li class="nav-item btn btn-primary">
+                                <a class="text-white-50" href="">{{ available_languages[0] | capitalize }}</a>
                             </li>
                         {% else %}
                             <li class="nav-item dropdown btn btn-primary">
@@ -137,14 +137,14 @@
                 {% endfor %}
 
                 {% block content %}
-                    <div class="container-fluid">
-                        <div class="grid-8 centered flash_message">
+                    <div class="row justify-content-center">
+                        <div class="col-8 mt-5 flash_message">
                             <h2>{{ 'Search'|trans }}</h2>
 
                             <form action="{{ path('chill_main_search') }}" method="get">
-                                <input name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
+                                <input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
                                 <center>
-                                    <button type="submit" class="sc-button orange"><i class="fa fa-search"></i> {{ 'Search'|trans }}</button>
+                                    <button type="submit" class="btn btn-lg btn-warning mt-2"><i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }}</button>
                                 </center>
                             </form>
                         </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Widget/homepage_add_a_person.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Widget/homepage_add_a_person.html.twig
index 3849974c4..d9244dad2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Widget/homepage_add_a_person.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Widget/homepage_add_a_person.html.twig
@@ -1,7 +1,7 @@
 {% if is_granted('CHILL_PERSON_CREATE') %}
-<div class="grid-8 centered" style="text-align:center; margin-top: 1.5em;">
+<div class="grid-8 mb-5 text-center">
     <a href="{{ path('chill_person_new') }}">
-        <div class="sc-button blue" style="float: inherit;">
+        <div class="btn btn-lg btn-primary mt-4" style="float: inherit;">
             {{ 'Add a person'|trans }}
         </div>
     </a>