new articles

static/client/css/main.css

@@ -9838,6 +9838,52 @@ hr+.rq-note {
     color: #a2a2a2;
     padding: 0 32px 0 0
 }
+.article_author .author img{
+    float: left;
+    margin-right: 50px;
+}
+
+.article_author .author:after{
+    content: '';
+    display: block;
+    clear: both;
+}
+
+.article_author .author h4{
+    font-size: 40px;
+    font-weight: 100;
+    color: #333333;
+    margin-bottom: 15px;
+    padding-top: 25px;
+}
+
+.article_author .author li{
+    display: inline-block;
+    list-style: none;
+}
+
+.article_author .author li + li{
+    margin-left: 20px;
+}
+
+.article_author .fa-rss-square{
+    color: #ff6601;
+}
+
+.article_author .fa-facebook-square{
+    color: #3b5998;
+}
+
+.article_author .fa-linkedin-square{
+    color: #006699;
+}
+
+.article_author .author_about{
+    font-size: 16px;
+    color: #333333;
+    line-height: 1.5;
+}
+
 .blog_link {
     position: relative
 }
@@ -13320,6 +13366,139 @@ blockquote{
     font-weight: 500;
 }
 
+.recommended_articles{
+    padding: 33px 20px;
+    border-top: 1px dashed #ccc;
+    margin-left: -20px;
+    margin-right: -20px;
+}
+
+.recommended_articles h2{
+    font-size: 40px;
+    font-weight: 100;
+    line-height: 1;
+    color: #333333;
+    margin-bottom: 30px;
+}
+
+.recommended_articles .articles{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+       -moz-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+}
+
+.recommended_articles .article{
+    width: 217px;
+}
+
+.recommended_articles img{
+    margin-bottom: 25px;
+}
+
+.recommended_articles a{
+    font-size: 14px;
+    font-weight: bold;
+    color: #333333;
+    text-decoration: none;
+}
+
+.recommended_articles a:hover{
+    text-decoration: underline;
+    color: #FF6600;
+}
+
+.recommended_articles time{
+    display: block;
+    padding-top: 7px;
+}
+
+.recommended_articles time i{
+    color: #FF6600;
+}
+
+.article_comments{
+    padding: 33px 20px 0;
+    border-top: 1px dashed #ccc;
+    margin-left: -20px;
+    margin-right: -20px;
+}
+
+.article_comments h2{
+    font-size: 40px;
+    font-weight: 100;
+    line-height: 1;
+    color: #333333;
+    margin-bottom: 30px;
+}
+
+.article_comments .comment{
+    padding: 20px;
+}
+
+.article_comments .comment_author{
+    font-size: 18px;
+    color: #FF6600;
+    margin-bottom: 8px;
+}
+
+.article_comments .comment_author time{
+    margin-left: 20px;
+    border-left: 1px solid #ccc;
+    padding-left: 20px;
+    line-height: inherit;
+    font-size: 13px;
+    color: #666666;
+}
+
+.article_comments .comment_author time i{
+    color: #FF6600;
+}
+
+.article_comments .comment_text{
+    font-size: 14px;
+    color: #333333;
+    line-height: 1.3;
+    margin-bottom: 10px;
+}
+
+.article_comments a{
+    text-decoration: none;
+}
+
+.article_comments a span{
+    color: #333333;
+}
+
+.article_comments a:hover span{
+    color: #FF6600;
+    text-decoration: underline;
+}
+
+.article_comments .comment > .comment{
+    margin: 45px 0 0 100px;
+    border: 1px solid #f4f4f3;
+    background-color: #f8faf9;
+    border-radius: 3px;
+    position: relative;
+}
+
+.article_comments .comment > .comment:before{
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background: url(../../img/comment_arrow.png);
+    position: absolute;
+    left: 20px;
+    top: -19px;
+}
 
 
 

templates/client/article/article.html

@@ -100,8 +100,8 @@
             <ul>
                 <li><i class="fa fa-envelope"></i> <a href="mailto:manykovskaj@gmail.com">manykovskaj@gmail.com</a></li>
                 <li>
-                    <a href="#"><i class="fa-rss-square"></i></a>
+                    <a href="#"><i class="fa fa-rss-square"></i></a>
-                    <a href="#"><i class="fa-facebook-square"></i></a>
+                    <a href="#"><i class="fa fa-facebook-square"></i></a>
                     <a href="#"><i class="fa fa-linkedin-square"></i></a>
                 </li>
             </ul>
@@ -112,7 +112,98 @@
         </div>
     </div>
 
+
+    <div class="recommended_articles">
+        <h2>{% trans 'Рекомендуемые статьи' %}</h2>
+        <div class="articles">
+            <div class="article">
+                {# thumbnail '217x148' crop="center" #}
+                <img src="{% static 'img/temp_article.jpg' %}" alt="">
+                <a href="#">Освоить системы аналитики системы аналитики</a>
+                <time><i class="fa fa-calendar"></i> 13 апреля 2016</time>
+                <p>Сайт рыбатекст поможет вебмастеру сгенерировать несколько абзацев более менее</p>
+            </div>
+
+            <div class="article">
+                {# thumbnail '217x148' crop="center" #}
+                <img src="{% static 'img/temp_article.jpg' %}" alt="">
+                <a href="#">Освоить системы аналитики системы аналитики</a>
+                <time><i class="fa fa-calendar"></i> 13 апреля 2016</time>
+                <p>Сайт рыбатекст поможет вебмастеру сгенерировать несколько абзацев более менее</p>
+            </div>
+
+            <div class="article">
+                {# thumbnail '217x148' crop="center" #}
+                <img src="{% static 'img/temp_article.jpg' %}" alt="">
+                <a href="#">Освоить системы аналитики системы аналитики</a>
+                <time><i class="fa fa-calendar"></i> 13 апреля 2016</time>
+                <p>Сайт рыбатекст поможет вебмастеру сгенерировать несколько абзацев более менее</p>
+            </div>
+
+            <div class="article">
+                {# thumbnail '217x148' crop="center" #}
+                <img src="{% static 'img/temp_article.jpg' %}" alt="">
+                <a href="#">Освоить системы аналитики системы аналитики</a>
+                <time><i class="fa fa-calendar"></i> 13 апреля 2016</time>
+                <p>Сайт рыбатекст поможет вебмастеру сгенерировать несколько абзацев более менее</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="article_comments">
+        <h2>{% trans 'Комментарии' %}</h2>
+
+        <div class="comment">
+            <div class="comment_author">
+                John Smith <time><i class="fa fa-calendar"></i> 13 апреля 2016</time>
+            </div>
+
+            <div class="comment_text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезызвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.</div>
+
+            <a href="#"><i class="fa fa-comment"></i> <span>Ответить на комментарий</span></a>
+        </div>
+
+        <div class="comment">
+            <div class="comment_author">
+                John Smith <time><i class="fa fa-calendar"></i> 13 апреля 2016</time>
+            </div>
+
+            <div class="comment_text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезызвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.</div>
+
+            <a href="#"><i class="fa fa-comment"></i> <span>Ответить на комментарий</span></a>
+        </div>
+
+        <div class="comment">
+            <div class="comment_author">
+                John Smith <time><i class="fa fa-calendar"></i> 13 апреля 2016</time>
+            </div>
+            <div class="comment_text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезызвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.</div>
+            <a href="#"><i class="fa fa-comment"></i> <span>Ответить на комментарий</span></a>
+
+            <div class="comment">
+                <div class="comment_author">
+                    John Smith <time><i class="fa fa-calendar"></i> 13 апреля 2016</time>
                 </div>
+
+                <div class="comment_text">Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезызвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.</div>
+                <a href="#"><i class="fa fa-comment"></i> <span>Ответить на комментарий</span></a>
+            </div>
+        </div>
+
+        {% if user.is_authenticated %}
+            <div class="сomment_form">
+                <form action="." method="post">
+                    {% csrf_token %}
+                    {{ commentform.as_p }}
+                    <button type="submit">Отправить</button>
+                </form>
+            </div>
+        {% else %}
+            <p>{% trans 'Для отправки комментариев авторизуйтесь.' %}</p>
+        {% endif %}
+    </div>
+</div>
+
 {% with blogs=object.similars  %}
     {% if blogs %}
         <div class="rq-to-hide">
@@ -135,15 +226,5 @@
     {% endif %}
 {% endwith %}
 
-<div class="rq-to-hide">
-    <div class="s-comments">
-        <form action="." method="post">
-            {% csrf_token %}
-            {{ commentform.as_p }}
-            <button type="submit">Отправить</button>
-        </form>
-    </div>
-</div>
-
 
 {% endblock %}