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>

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}>
+            <h1 className={titleClassName}>{`${post.title} `}</h1>
-              {`${post.title} `}
+            <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>
+            </div>
-            <span className="post__date">{publicationDate}</span>
           </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>
             )}

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}>
-          <h5 className={titleClassName} title={post.title}>
+          {post.title}
-            {post.title}
+        </h5>
-          </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>
     );
   }

src/newsreader/scss/components/card/_card.scss

@@ -6,7 +6,7 @@
   padding: 15px;
 
   width: 50%;
-  border-radius: 2px;
+  border-radius: 5px;
 
   background-color: $white;
 

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 {

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";

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;
 }

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;
 

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;

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;
+  }
+}

src/newsreader/scss/pages/homepage/components/posts-info/index.scss

@@ -0,0 +1 @@
+@import "posts-info";

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;
+  }
+}

src/newsreader/scss/pages/homepage/components/posts-section/index.scss

@@ -1,12 +1 @@
-.posts-section {
+@import "post-section";
-  display: flex;
-  flex-direction: column;
-
-  padding: 10px;
-
-  &__name {
-    padding: 20px 0 10px 0;
-
-    border-top: 4px solid $azureish-white;
-  }
-}

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;