#91 Refactoring Page-figures

oodies · Apr 17, 2018 · 76f29a3 · 76f29a3
1 parent 2ba5eeb
commit 76f29a3
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 69 deletions.
diff --git a/app/Resources/views/layout.html.twig b/app/Resources/views/layout.html.twig
@@ -16,6 +16,7 @@
     <meta name="robots" content="none, nofollow"/>
     <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
     <link rel="stylesheet" href="{{ asset('css/font-awesome/css/font-awesome.min.css') }}">
+    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
     <link rel="stylesheet" href="{{ asset('build/global.css') }}">
     <script src="{{ asset('js/jquery.min.js') }}"></script>
     <script src="{{ asset('js/bootstrap.min.js') }}"></script>
@@ -34,7 +35,7 @@
     </div>
 </main>
 <footer>
-<div class="i-container">
+    <div class="i-container">
 {{ include('layout.footer.html.twig') }}
 </div>
 </footer>

diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -11,7 +11,7 @@ html {
 
 body {
   display: grid;
-  grid-template-rows: 56px 1fr 60px;
+  grid-template-rows: 56px 1fr 1px;
   grid-template-areas: "header" "main" "footer";
   min-height: 100%;
   width: 100%;
@@ -33,8 +33,14 @@ footer {
   grid-row-start: 3;
   grid-row-end: 4;
   > .i-container {
-    padding: 15px;
-    vertical-align: bottom;
+    background-color: #343e40;
+    > .container {
+      padding: 15px;
+      vertical-align: bottom;
+    }
+  }
+  a {
+    color: #343e40;
   }
 }
 
@@ -273,9 +279,10 @@ section#form {
 #infiniteScroll {
   > a {
     display: inline-block;
+    text-decoration: none;
     > span {
-      display: block;
-      text-align: center;
+      display: inline-block;
+      vertical-align: middle;
     }
   }
 }
@@ -342,6 +349,7 @@ section#form {
   section {
     display: grid;
     width: 100%;
+    height: 100%;
     grid-template-rows: 1fr 70px;
     grid-template-areas: 'content' 'gutter';
     > .content {
@@ -350,17 +358,36 @@ section#form {
     > .gutter {
       grid-area: gutter;
       display: flex;
-      justify-content: center;
-      align-items: flex-start;
+      justify-content: flex-end;
+      align-items: center;
+      padding-right: 1rem;
+    }
+    a {
+      color: #343a40;
     }
   }
 
   section#head {
-    background: url("../images/wintry.jpg") no-repeat;
-    background-color: #66afe9;
-    background-origin: border-box;
-    background-position: center center;
-    background-size: cover;
+      background: url("../images/wintry.jpg") no-repeat;
+      background-color: #cdcdcd;
+      background-origin: border-box;
+      background-position: center center;
+      background-size: cover;
+      height: 100%;
+      h2 {
+        font-family: 'Lobster', cursive;
+        font-size: 4rem;
+        color: chocolate;
+      }
+  }
+
+  #nav-up {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 1030;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
   }
 
   // Override
@@ -394,7 +421,7 @@ section#form {
  */
 #page-resetting {
   main {
-    background-color: rgba(205, 205, 205, 0.73);
+    background-color: #f7f7f7;
   }
   .segment {
     max-width: 360px;
@@ -406,6 +433,6 @@ section#form {
  */
 #page-registration {
   main {
-    background-color: rgba(205, 205, 205, 0.73);
+    background-color: #f7f7f7;
   }
 }
diff --git a/src/Ood/AppBundle/Resources/translations/application.fr.yml b/src/Ood/AppBundle/Resources/translations/application.fr.yml
@@ -37,6 +37,7 @@ menu_admin:
 ## Type         : Page
 homepage:
   title : "Snowtricks"
+  head-title: "Bienvenue sur \n Snow Tricks !"
 
 ## ************************************
 ## Title        : Snowtricks admin

diff --git a/src/Ood/BlogBundle/Resources/views/Post/list.html.twig b/src/Ood/BlogBundle/Resources/views/Post/list.html.twig
@@ -10,57 +10,61 @@
 
 {% trans_default_domain 'application' %}
 {% block main %}
+    <section id="head">
+        <div class="content d-flex justify-content-center align-items-center text-center">
+            <h2>{{ 'homepage.head-title'|trans|nl2br }}</h2>
+        </div>
+        <div class="gutter">
+            <a href="#figures">
+                <i class="fa fa-arrow-down fa-3x"></i>
+            </a>
+        </div>
+    </section>
 
-<section id="head">
-    <div class="content">
-    </div>
-    <div class="gutter">
-        <a href="#figures">
-            <i class="fa fa-angle-down fa-4x"></i>
-        </a>
-    </div>
-</section>
-
-<section id="figures" class="medias">
-    <div class="content">
-        {% if posts == false %}
-        {# View with nothing posts #}
-        <div id="msgNoResult">Aucun résultat</div>
-        {% else %}
-        {# View with posts list #}
-        <div class="postsListContainer p-2">
-            <form id="searchPostsForm" action="{{ path(vURL) }}">
-                <input type="hidden" value="{{ paginator.current_page }}" name="page" id="searchPostsForm_page">
-            </form>
-            <div class="cards postsList d-flex flex-wrap justify-content-center justify-content-md-start">
+    <section id="figures" class="medias" style="display: none;">
+        <div class="content">
+            {% if posts == false %}
+                {# View with nothing posts #}
+                <div id="msgNoResult">Aucun résultat</div>
+            {% else %}
+                {# View with posts list #}
+                <div class="postsListContainer p-2">
+                    <form id="searchPostsForm" action="{{ path(vURL) }}">
+                        <input type="hidden" value="{{ paginator.current_page }}" name="page" id="searchPostsForm_page">
+                    </form>
+                    <div class="cards postsList d-flex flex-wrap justify-content-center justify-content-md-start">
                 {{ include ('@OodBlog/Post/list_content.html.twig') }}
             </div>
-        </div>
-        {% endif %}
-    </div>
-    <div class="gutter">
-        {# view Button + Arrow infinite scroll #}
-        <div id="infiniteScroll" class="d-flex justify-content-around w-100">
-            <a href="#head">
-                <i class="fa fa-4x fa-angle-up"></i>
-            </a>
-            {% if paginator.remaining_results > 0 %}
-                <a class="js-infiniteScroll" href="{{ path(vURL) }}"
-                   data-restof="{{ paginator.remaining_results }}"
-                   data-total="{{ paginator.nb_results }}"
-                   data-item-by-page="{{ paginator.max_per_page }}">
-                    <i class="fa fa-4x fa-angle-down"></i>
-                </a>
+                </div>
             {% endif %}
         </div>
-    </div>
-</section>
-<script>
-  $(document).ready(function() {
-        infinite_scroll.init();
-        post_remove.init();
-  });
-</script>
+        <div class="gutter">
+            {# view Button + Arrow infinite scroll #}
+            <div id="infiniteScroll" class="d-flex justify-content-around w-100">
+                {% if paginator.remaining_results > 0 %}
+                    <a class="js-infiniteScroll border p-2 m-2" href="{{ path(vURL) }}"
+                       data-restof="{{ paginator.remaining_results }}"
+                       data-total="{{ paginator.nb_results }}"
+                       data-item-by-page="{{ paginator.max_per_page }}">
+                        <span><i class="fa fa-2x fa-spinner"></i></span>
+                        <span>Load more</span>
+                    </a>
+                {% endif %}
+            </div>
+        </div>
+    </section>
+    <nav id="nav-up" style="display: none;">
+        <a href="#head">
+            <i class="fa fa-arrow-up fa-3x text-secondary"></i>
+        </a>
+    </nav>
+    <script>
+      $(document).ready(function () {
+        swap_head_figures.init()
+        infinite_scroll.init()
+        post_remove.init()
+      })
+    </script>
 {% endblock main %}
 
 {% block title %}{{ 'posts_list.page_title'|trans }}{% endblock title %}

diff --git a/web/build/global.css b/web/build/global.css
@@ -22,7 +22,7 @@ html {
 
 body {
   display: grid;
-  grid-template-rows: 56px 1fr 60px;
+  grid-template-rows: 56px 1fr 1px;
   grid-template-areas: "header" "main" "footer";
   min-height: 100%;
   width: 100%;
@@ -47,10 +47,18 @@ footer {
 }
 
 footer > .i-container {
+  background-color: #343e40;
+}
+
+footer > .i-container > .container {
   padding: 15px;
   vertical-align: bottom;
 }
 
+footer a {
+  color: #343e40;
+}
+
 :root {
   --input-padding-x: .75rem;
   --input-padding-y: .75rem;
@@ -310,11 +318,12 @@ section#form {
 
 #infiniteScroll > a {
   display: inline-block;
+  text-decoration: none;
 }
 
 #infiniteScroll > a > span {
-  display: block;
-  text-align: center;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 /** ***********************************
@@ -384,6 +393,7 @@ section#form {
 #page-figures section {
   display: grid;
   width: 100%;
+  height: 100%;
   grid-template-rows: 1fr 70px;
   grid-template-areas: 'content' 'gutter';
 }
@@ -395,16 +405,37 @@ section#form {
 #page-figures section > .gutter {
   grid-area: gutter;
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 1rem;
+}
+
+#page-figures section a {
+  color: #343a40;
 }
 
 #page-figures section#head {
   background: url(../img/wintry.jpg) no-repeat;
-  background-color: #66afe9;
+  background-color: #cdcdcd;
   background-origin: border-box;
   background-position: center center;
   background-size: cover;
+  height: 100%;
+}
+
+#page-figures section#head h2 {
+  font-family: 'Lobster', cursive;
+  font-size: 4rem;
+  color: chocolate;
+}
+
+#page-figures #nav-up {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 1030;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
 }
 
 #page-figures .st_card img {
@@ -434,7 +465,7 @@ section#form {
  */
 
 #page-resetting main {
-  background-color: rgba(205, 205, 205, 0.73);
+  background-color: #f7f7f7;
 }
 
 #page-resetting .segment {
@@ -446,5 +477,5 @@ section#form {
  */
 
 #page-registration main {
-  background-color: rgba(205, 205, 205, 0.73);
+  background-color: #f7f7f7;
 }
diff --git a/web/js/application.js b/web/js/application.js
@@ -1,3 +1,37 @@
+/* ####################################
+ *  SWAP HEAD / FIGURES HOMEPAGE
+ */
+var swap_head_figures = swap_head_figures || {};
+(function (publics) {
+  'use strict';
+
+  /**
+   * Privates function
+   */
+  var privates = {};
+
+  privates.onClickFigures = function () {
+    $("a[href='#figures']").click( function (event) {
+      $("#head").hide();
+      $("#figures").show();
+      $("a[href='#head']").parent('nav').show();
+    });
+  }
+
+  privates.onClickHead = function () {
+    $("a[href='#head']").click( function (event) {
+      $("#head").show();
+      $("#figures").hide();
+      $(this).parent('nav').hide();
+    });
+  }
+
+  publics.init = function () {
+    privates.onClickFigures();
+    privates.onClickHead();
+  }
+} (swap_head_figures) );
+
 /* ####################################
  *  IMAGE AND VIDEO UPLOAD
  */