From afdffb2fcac92c05955fe7808c754238c9e542eb Mon Sep 17 00:00:00 2001
From: Guilherme Borges Bastos <guilhermeborgesbastos@gmail.com>
Date: Thu, 21 May 2020 19:18:52 -0300
Subject: [PATCH] Adjustments to the navigation of the posts section.

- Adjustments to the navigation of the posts section for resolutions of 450px width os less.
---
 .../posts/posts.component responsivity.scss   | 20 +++++++++++++++++++
 src/app/posts/posts.component.html            | 14 ++++++++-----
 src/app/posts/posts.component.scss            |  2 +-
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/app/posts/posts.component responsivity.scss b/src/app/posts/posts.component responsivity.scss
index d27d5497c..151fd3642 100644
--- a/src/app/posts/posts.component responsivity.scss	
+++ b/src/app/posts/posts.component responsivity.scss	
@@ -69,6 +69,26 @@
                 span {
                     margin: 5px;
                 }
+
+                .divider {
+                    display: none;
+                }
+                
+                .molding {
+                    border: 3px solid #414c73;
+                    display: inline-block;
+                    padding: 0px 5px 5px 5px;
+                    border-radius: 10px;
+                    
+                    .icon {
+                        font-size: 16px;
+                    }
+                
+                    span {
+                        margin: 5px;
+                        font-size: 18px;
+                    }
+                }
             }
         }
     }
diff --git a/src/app/posts/posts.component.html b/src/app/posts/posts.component.html
index 3854d181f..83d60d6ab 100644
--- a/src/app/posts/posts.component.html
+++ b/src/app/posts/posts.component.html
@@ -6,13 +6,17 @@ <h1 i18n="nav@@posts">Posts</h1>
             </div>
             <div class="navigation">
                 <div class="previous" (click)="onClickPrevious()" [ngClass]="{'disabled': currentPage === 1}">
-                    <fa-icon [icon]="faChevronLeft" class="icon" i18n-title="exp.nav@@previous" title="Previous"></fa-icon>
-                    <span i18n="exp.nav@@previous">Previous</span>
+                    <div class="molding">
+                        <fa-icon [icon]="faChevronLeft" class="icon" i18n-title="exp.nav@@previous" title="Previous"></fa-icon>
+                        <span i18n="exp.nav@@previous">Previous</span>
+                    </div>
                 </div>
-                <div class="devider">|</div>
+                <div class="divider">|</div>
                 <div class="next" (click)="onClickNext()" [ngClass]="{'disabled': currentPage === ceil(posts?.length / resultsPerPage) }">
-                    <span i18n="exp.nav@@next">Next</span>
-                    <fa-icon [icon]="faChevronRight" class="icon" i18n-title="exp.nav@@next" title="Next"></fa-icon>
+                    <div class="molding">
+                        <span i18n="exp.nav@@next">Next</span>
+                        <fa-icon [icon]="faChevronRight" class="icon" i18n-title="exp.nav@@next" title="Next"></fa-icon>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/app/posts/posts.component.scss b/src/app/posts/posts.component.scss
index a8f3deb05..b7f64d043 100644
--- a/src/app/posts/posts.component.scss
+++ b/src/app/posts/posts.component.scss
@@ -56,7 +56,7 @@
                 }
             }
 
-            .devider {
+            .divider {
                 flex-grow: 1;
             }