Improve footer

app/styles/_commons.scss

@@ -3,7 +3,6 @@
 @import 'bootstrap-sass-official/assets/stylesheets/bootstrap';
 @import 'font-open-sans';
 @import 'theme';
-@import "font-awesome/scss/font-awesome";
 
 .btn {
   white-space: normal;

app/styles/_theme-variables.scss

@@ -511,12 +511,10 @@ $list-group-link-heading-color: #333;
 $panel-bg:                    #fff;
 $panel-body-padding:          15px;
 $panel-heading-padding:       10px 15px;
-$panel-footer-padding:        $panel-heading-padding;
 $panel-border-radius:         $border-radius-base;
 
 //** Border color for elements within panels
 $panel-inner-border:          #ddd;
-$panel-footer-bg:             #f5f5f5;
 
 $panel-default-text:          $gray-dark;
 $panel-default-border:        #ddd;

app/styles/_theme.scss

@@ -313,8 +313,7 @@ label,
 }
 
 .panel {
-  &.panel-heading,
-  &.panel-footer {
+  &.panel-heading {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
   }

app/styles/_variables.scss

@@ -11,5 +11,3 @@ $font-size-h6:            ceil(($font-size-base * 0.85));
 
 $color-background: whitesmoke;
 $btn-default-bg: $color-background;
-
-$fa-font-path: "/bower_components/font-awesome/fonts";

app/styles/footer.css

@@ -0,0 +1,21 @@
+footer {
+  background-color: #333;
+  color: #FFF;
+  width: 100%;
+
+  margin-top: 3em;
+  padding-top: 2em;
+  padding-bottom: 1.5em;
+}
+
+footer ul {
+  margin-bottom: 0;
+}
+
+footer li {
+  margin-bottom: .5em;
+}
+
+footer a, footer a:hover, footer a:focus {
+  color: inherit;
+}

app/styles/front.scss

@@ -1,20 +1,12 @@
 @import 'commons';
 
-html {
-  overflow-y: scroll;
-  position: relative;
-  min-height: 100%;
-}
-
-$main-footer-height: 220px;
 $body-front-base-padding: 45px;  // .navbar's min-height
 
 h1[tabindex="-1"] {
   outline: none;
 }
 
 .body-front {
-  margin-bottom: $main-footer-height;
   padding-top: $body-front-base-padding;
   background-color: $color-background;
 }
@@ -39,23 +31,6 @@ h1[tabindex="-1"] {
   vertical-align: middle;
 }
 
-.main-footer {
-  background-color: $navbar-default-bg;
-  color: $navbar-default-color;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: $main-footer-height;
-
-  padding-top: 30px;
-  padding-bottom: 30px;
-
-  & ul li a {
-    color: white;
-    font-size: 12px;
-  }
-}
-
 .form-foyer {
   padding-bottom: 5px;
 }

app/styles/main.css

@@ -0,0 +1,19 @@
+html, body {
+	height: 100%;
+}
+
+body {
+	position: relative;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+header, footer {
+	flex: none;
+}
+
+.content {
+	flex: 1 0 auto;
+	width: 100%;
+}

app/styles/text-container.css

@@ -2,7 +2,6 @@
 	font-size: 140%;
 	line-height: 1.6;
 	max-width: 40em;
-	padding-bottom: 3em;
 
 	text-rendering: optimizeLegibility;
 }

app/views/front.html

@@ -24,14 +24,16 @@
 
     <meta name="fragment" content="!" />
 
-
+    <link rel="stylesheet" href="/styles/main.css">
     <link rel="stylesheet" href="/styles/header.css">
     <link rel="stylesheet" href="/styles/front.css">
+    <link rel="stylesheet" href="/styles/footer.css">
     <link rel="stylesheet" href="/styles/homepage.css">
     <link rel="stylesheet" href="/styles/individu-form.css">
     <link rel="stylesheet" href="/styles/resources.css">
     <link rel="stylesheet" href="/styles/logement.css">
     <link rel="stylesheet" href="/styles/resultat.css">
+    <link rel="stylesheet" href="/js/lib/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="/styles/text-container.css">
 
     <base href="/">
@@ -82,35 +84,23 @@
       </ui-view>
     </div>
 
-    <footer class="main-footer" role="contentinfo">
+    <footer>
       <nav class="container">
-        <div class="col-md-3">
-          <h4>Mes aides</h4>
-          <ul class="list-unstyled">
-            <li><a ui-sref="a-propos">À propos</a></li>
-            <li><a ui-sref="cgu">Conditions d'utilisation</a></li>
-            <li><a ui-sref="sos">SOS</a></li>
-            <li><a ui-sref="communication">Supports de communication</a></li>
-            <li><a ui-sref="ameliorer">Améliorer ce site</a></li>
-            <li><a href="mailto:[email protected] ">Contact</a></li>
-          </ul>
-        </div>
-        <div class="col-md-2 hidden-sm hidden-xs">
-          <h4>Partenaires</h4>
-          <ul class="list-unstyled">
-            <li><a target="_blank" rel="noopener" href="http://service-public.fr/" title="service-public.fr - nouvelle fenêtre">service-public.fr</a></li>
-            <li><a target="_blank" rel="noopener" href="http://ameli.fr/" title="ameli.fr - nouvelle fenêtre">ameli.fr</a></li>
-            <li><a target="_blank" rel="noopener" href="http://www.caf.fr/" title="caf.fr - nouvelle fenêtre">caf.fr</a></li>
-            <li><a target="_blank" rel="noopener" href="https://www.lassuranceretraite.fr/" title="lassuranceretraite.fr - nouvelle fenêtre">lassuranceretraite.fr</a></li>
-            <li><a target="_blank" rel="noopener" href="http://www.modernisation.gouv.fr/le-sgmap" title="SGMAP - nouvelle fenêtre">SGMAP</a></li>
-            <li><a target="_blank" rel="noopener" href="http://www.openfisca.fr/" title="OpenFisca - nouvelle fenêtre">OpenFisca</a></li>
-          </ul>
-        </div>
-        <div class="col-md-offset-4 col-md-3">
-          <ul class="list-unstyled">
-            <li><a target="_blank" rel="noopener" href="https://twitter.com/mesaides" title="Suivez nous sur Twitter - nouvelle fenêtre"><i class="fa fa-twitter" aria-hidden="true" role="presentation"></i> Suivez-nous sur Twitter</a></li>
-          </ul>
-        </div>
+        <ul class="col-md-4 list-unstyled">
+          <li><span class="fa fa-fw fa-life-ring" aria-hidden="true"></span>&nbsp;<a ui-sref="sos">SOS</a></li>
+          <li><span class="fa fa-fw fa-paperclip" aria-hidden="true"></span>&nbsp;<a ui-sref="cgu">Conditions d'utilisation</a></li>
+          <li><span class="fa fa-fw fa-envelope" aria-hidden="true"></span>&nbsp;<a href="mailto:[email protected] ">Contact</a></li>
+        </ul>
+        <ul class="col-md-4 list-unstyled">
+          <li><span class="fa fa-fw fa-question-circle" aria-hidden="true"></span>&nbsp;<a ui-sref="a-propos">À propos</a></li>
+          <li><span class="fa fa-fw fa-bullhorn" aria-hidden="true"></span>&nbsp;<a ui-sref="communication">Supports de communication</a></li>
+          <li><span class="fa fa-fw fa-building-o" aria-hidden="true"></span>&nbsp;<a href="http://les-aides.fr">Les aides pour les entreprises</a></li>
+        </ul>
+        <ul class="col-md-4 list-unstyled">
+          <li><span class="fa fa-fw fa-newspaper-o" aria-hidden="true"></span>&nbsp;<a target="_blank" rel="noopener" href="http://eepurl.com/bD9PNP">Abonnez-vous à nos informations</a></li>
+          <li><span class="fa fa-fw fa-twitter" aria-hidden="true"></span>&nbsp;<a target="_blank" rel="noopener" href="https://twitter.com/mesaides">Suivez-nous sur Twitter</a></li>
+          <li><span class="fa fa-fw fa-pencil" aria-hidden="true"></span>&nbsp;<a ui-sref="ameliorer">Améliorez ce site</a></li>
+        </ul>
       </nav>
     </footer>
 

bower.json

@@ -30,8 +30,7 @@
     "bootstrap-sass-official": "~3.3.1",
     "ngstorage": "~0.3.0",
     "moment": "~2.7.0",
-    "lodash": "~2.4.1",
-    "font-awesome": "~4.2"
+    "lodash": "~2.4.1"
   },
   "devDependencies": {
     "angular-mocks": "~1.4"

package.json

@@ -9,6 +9,7 @@
     "cleave.js": "^0.6.2",
     "errorhandler": "~1.3.0",
     "express": "~4.12.0",
+    "font-awesome": "^4.7.0",
     "ludwig-ui": "^1.5.0",
     "morgan": "~1.5.0",
     "prerender-node": "^1.1.1",
@@ -76,7 +77,7 @@
     "db": "mongod --dbpath db",
     "db-update": "./import-tests.sh",
     "install-openfisca": "pip install --user --upgrade -r openfisca/requirements.txt",
-    "openfisca":"paster serve openfisca/api_config.ini"
+    "openfisca": "paster serve openfisca/api_config.ini"
   },
   "license": "AGPL-3.0"
 }