From 36076dbc40094d287126db07956c7dd1a69b79c5 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyba871@gmail.com>
Date: Sun, 2 Feb 2020 15:43:37 +0100
Subject: [PATCH] Some style changes

---
 .../accounts/templates/accounts/login.html    |  2 +-
 .../js/pages/homepage/components/PostModal.js | 12 +++++------
 .../homepage/components/feedlist/PostItem.js  | 16 ++++++++-------
 .../scss/components/card/_card.scss           |  2 +-
 .../scss/components/form/_form.scss           |  3 ++-
 .../scss/pages/homepage/components/index.scss |  1 +
 .../components/post-block/_post-block.scss    |  1 -
 .../pages/homepage/components/post/_post.scss | 20 +++++++++++++------
 .../posts-header/_posts-header.scss           | 12 ++---------
 .../components/posts-info/_posts-info.scss    | 14 +++++++++++++
 .../homepage/components/posts-info/index.scss |  1 +
 .../posts-section/_post-section.scss          | 19 ++++++++++++++++++
 .../components/posts-section/index.scss       | 13 +-----------
 .../homepage/components/posts/_posts.scss     |  3 ++-
 14 files changed, 73 insertions(+), 46 deletions(-)
 create mode 100644 src/newsreader/scss/pages/homepage/components/posts-info/_posts-info.scss
 create mode 100644 src/newsreader/scss/pages/homepage/components/posts-info/index.scss
 create mode 100644 src/newsreader/scss/pages/homepage/components/posts-section/_post-section.scss

diff --git a/src/newsreader/accounts/templates/accounts/login.html b/src/newsreader/accounts/templates/accounts/login.html
index f98a216..00b248e 100644
--- a/src/newsreader/accounts/templates/accounts/login.html
+++ b/src/newsreader/accounts/templates/accounts/login.html
@@ -8,7 +8,7 @@
 
 {% block content %}
   <main class="main">
-    <form class="login-form" method="POST" action="{% url 'accounts:login' %}">
+    <form class="form login-form" method="POST" action="{% url 'accounts:login' %}">
       {% csrf_token %}
       <div class="form__header">
         <h1 class="form__title">Login</h1>
diff --git a/src/newsreader/js/pages/homepage/components/PostModal.js b/src/newsreader/js/pages/homepage/components/PostModal.js
index b077230..a0fd0a1 100644
--- a/src/newsreader/js/pages/homepage/components/PostModal.js
+++ b/src/newsreader/js/pages/homepage/components/PostModal.js
@@ -44,20 +44,20 @@ class PostModal extends React.Component {
             </span>
           </button>
           <div className="post__header">
-            <h1 className={titleClassName}>
-              {`${post.title} `}
+            <h1 className={titleClassName}>{`${post.title} `}</h1>
+            <div className="post__meta-info">
+              <span className="post__date">{publicationDate}</span>
               <a
                 className="post__link"
                 href={post.url}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <img src="/static/link.svg" width="45" />
+                <img src="/static/link.svg" />
               </a>
-            </h1>
-            <span className="post__date">{publicationDate}</span>
+            </div>
           </div>
-          <aside className="post__meta-info">
+          <aside className="post__section-info">
             {this.props.category && (
               <h5 title={this.props.category.name}>{this.props.category.name}</h5>
             )}
diff --git a/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js b/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
index 47d4832..1f15a7c 100644
--- a/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
+++ b/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
@@ -20,21 +20,23 @@ class PostItem extends React.Component {
           this.props.selectPost(post);
         }}
       >
-        <div className="posts-header">
-          <h5 className={titleClassName} title={post.title}>
-            {post.title}
-          </h5>
+        <h5 className={titleClassName} title={post.title}>
+          {post.title}
+        </h5>
 
+        <div className="posts-info">
+          <span className="posts-info__date" title={publicationDate}>
+            {publicationDate}
+          </span>
           <a
-            className="posts-header__link"
+            className="posts-info__link"
             href={post.url}
             target="_blank"
             rel="noopener noreferrer"
           >
-            <img src="/static/link.svg" width="20" />
+            <img src="/static/link.svg" />
           </a>
         </div>
-        <span title={publicationDate}>{publicationDate}</span>
       </li>
     );
   }
diff --git a/src/newsreader/scss/components/card/_card.scss b/src/newsreader/scss/components/card/_card.scss
index 23a8079..6e544f6 100644
--- a/src/newsreader/scss/components/card/_card.scss
+++ b/src/newsreader/scss/components/card/_card.scss
@@ -6,7 +6,7 @@
   padding: 15px;
 
   width: 50%;
-  border-radius: 2px;
+  border-radius: 5px;
 
   background-color: $white;
 
diff --git a/src/newsreader/scss/components/form/_form.scss b/src/newsreader/scss/components/form/_form.scss
index 8c51866..d99c246 100644
--- a/src/newsreader/scss/components/form/_form.scss
+++ b/src/newsreader/scss/components/form/_form.scss
@@ -3,8 +3,9 @@
   flex-direction: column;
 
   width: 70%;
-  font-family: $form-font;
+  border-radius: 5px;
 
+  font-family: $form-font;
   background-color: $white;
 
   &__fieldset {
diff --git a/src/newsreader/scss/pages/homepage/components/index.scss b/src/newsreader/scss/pages/homepage/components/index.scss
index b3891f8..2a0a85e 100644
--- a/src/newsreader/scss/pages/homepage/components/index.scss
+++ b/src/newsreader/scss/pages/homepage/components/index.scss
@@ -12,6 +12,7 @@
 @import "posts-section/index";
 @import "posts/index";
 @import "posts-header/index";
+@import "posts-info/index";
 @import "post/index";
 @import "post-message/index";
 @import "read-button/index";
diff --git a/src/newsreader/scss/pages/homepage/components/post-block/_post-block.scss b/src/newsreader/scss/pages/homepage/components/post-block/_post-block.scss
index ee30eb4..e694de0 100644
--- a/src/newsreader/scss/pages/homepage/components/post-block/_post-block.scss
+++ b/src/newsreader/scss/pages/homepage/components/post-block/_post-block.scss
@@ -8,5 +8,4 @@
   font-family: $article-font;
 
   border-radius: 2px;
-  background-color: $white;
 }
diff --git a/src/newsreader/scss/pages/homepage/components/post/_post.scss b/src/newsreader/scss/pages/homepage/components/post/_post.scss
index 51ac564..35c557e 100644
--- a/src/newsreader/scss/pages/homepage/components/post/_post.scss
+++ b/src/newsreader/scss/pages/homepage/components/post/_post.scss
@@ -5,11 +5,11 @@
   position: relative;
 
   width: 80%;
-  max-height: 90%;
+  height: 90%;
 
   margin: 2% auto 5% auto;
 
-  border-radius: 2px;
+  border-radius: 5px;
 
   overflow-y: auto;
 
@@ -18,7 +18,7 @@
   &__header {
     display: flex;
     flex-direction: column;
-    padding: 20px 0 20px 0;
+    padding: 20px 0 10px 0;
     width: 75%;
 
     font-family: $article-header-font;
@@ -33,15 +33,16 @@
   }
 
   &__link {
-    height: 100%;
+    display: inline-flex;
+    padding: 0 10px;
 
     & img {
-      height: 50%;
+      width: 30px;
     }
   }
 
   &__date {
-    margin: 10px 0 0 0;
+    align-self: center;
     font-size: small;
   }
 
@@ -91,6 +92,13 @@
   }
 
   &__meta-info {
+    display: flex;
+    flex-direction: row;
+
+    margin: 15px 0;
+  }
+
+  &__section-info {
     display: flex;
     flex-direction: column;
 
diff --git a/src/newsreader/scss/pages/homepage/components/posts-header/_posts-header.scss b/src/newsreader/scss/pages/homepage/components/posts-header/_posts-header.scss
index c0ea036..be0dac8 100644
--- a/src/newsreader/scss/pages/homepage/components/posts-header/_posts-header.scss
+++ b/src/newsreader/scss/pages/homepage/components/posts-header/_posts-header.scss
@@ -1,16 +1,8 @@
 .posts-header {
-  display: flex;
-  align-items: center;
-  padding: 0 5px 0 0;
-
-  width: 80%;
-
-  &__link {
-    display: flex;
-    padding: 0 0 0 5px;
-  }
 
   &__title {
+    width: 80%;
+
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/newsreader/scss/pages/homepage/components/posts-info/_posts-info.scss b/src/newsreader/scss/pages/homepage/components/posts-info/_posts-info.scss
new file mode 100644
index 0000000..7141576
--- /dev/null
+++ b/src/newsreader/scss/pages/homepage/components/posts-info/_posts-info.scss
@@ -0,0 +1,14 @@
+.posts-info {
+  display: flex;
+  justify-content: space-between;
+
+  width: 20%;
+
+  &__date {
+    align-self: center;
+  }
+
+  &__link {
+    display: inline-flex;
+  }
+}
diff --git a/src/newsreader/scss/pages/homepage/components/posts-info/index.scss b/src/newsreader/scss/pages/homepage/components/posts-info/index.scss
new file mode 100644
index 0000000..2a7a495
--- /dev/null
+++ b/src/newsreader/scss/pages/homepage/components/posts-info/index.scss
@@ -0,0 +1 @@
+@import "posts-info";
diff --git a/src/newsreader/scss/pages/homepage/components/posts-section/_post-section.scss b/src/newsreader/scss/pages/homepage/components/posts-section/_post-section.scss
new file mode 100644
index 0000000..902e1a2
--- /dev/null
+++ b/src/newsreader/scss/pages/homepage/components/posts-section/_post-section.scss
@@ -0,0 +1,19 @@
+.posts-section {
+  display: flex;
+  flex-direction: column;
+
+  margin: 20px;
+  padding: 10px;
+  border-radius: 5px;
+
+  background-color: $white;
+
+  &:first-child {
+    padding: 0 10px 10px 10px;
+    margin: 0 20px 20px 20px;
+  }
+
+  &__name {
+    padding: 20px 0 10px 0;
+  }
+}
diff --git a/src/newsreader/scss/pages/homepage/components/posts-section/index.scss b/src/newsreader/scss/pages/homepage/components/posts-section/index.scss
index dc0e29b..945ed28 100644
--- a/src/newsreader/scss/pages/homepage/components/posts-section/index.scss
+++ b/src/newsreader/scss/pages/homepage/components/posts-section/index.scss
@@ -1,12 +1 @@
-.posts-section {
-  display: flex;
-  flex-direction: column;
-
-  padding: 10px;
-
-  &__name {
-    padding: 20px 0 10px 0;
-
-    border-top: 4px solid $azureish-white;
-  }
-}
+@import "post-section";
diff --git a/src/newsreader/scss/pages/homepage/components/posts/_posts.scss b/src/newsreader/scss/pages/homepage/components/posts/_posts.scss
index 9329a85..9a3525b 100644
--- a/src/newsreader/scss/pages/homepage/components/posts/_posts.scss
+++ b/src/newsreader/scss/pages/homepage/components/posts/_posts.scss
@@ -4,9 +4,10 @@
 
   list-style: none;
 
+  padding: 0;
+
   &__item {
     display: flex;
-    justify-content: space-between;
     align-items: center;
 
     padding: 10px 0 10px 0;