some kind of неужто новость сверстана наконец?!

ulmic · Jun 14, 2015 · 721bd38 · 721bd38
1 parent 61b6f5a
commit 721bd38
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 77 deletions.
diff --git a/app/assets/images/arrow.png b/app/assets/images/arrow.png
diff --git a/app/assets/stylesheets/web/elements.scss b/app/assets/stylesheets/web/elements.scss
@@ -227,6 +227,52 @@ hr.orange {
     }
 }
 
+.mic-one-news2 {
+	@extend %mic-element;
+	.min-one-news2-image-link {
+		height: rem-calc(124);
+        @include image-on-bg();
+	}
+	section {
+		text-align: justify;
+        margin: 0;
+        @include clearfix();
+        line-height: 1.9; // FIXME wtf
+	}
+	.min-one-news2-date {
+        background-color: #ffa531;
+        color: white;
+        padding: 7px;
+        font-family: mic-bold;
+		font-size: rem-calc(16);
+        text-align: center;
+	}
+    .one-news2-comments-views {
+        color: #616161;
+        font-family: mic-square-reg;
+        font-size: 14px;
+        float: right;
+        margin-top: 5px;
+        .view-text {
+            margin-right: 10px;
+        }
+    }
+    p.min-one-news2-text {
+        margin-top: 10px;
+        text-align: center;
+        line-height: 1.4;
+        a.min-one-news2-link {
+            font-size: rem-calc(16);
+            font-family: mic-bold;
+            color: black;
+            transition: color 0.1s;
+            &:hover {
+                color: #ffa531;
+            }
+        }
+    }
+}
+
 .mic-article {
 	@extend %mic-element;
 	.article-title {

diff --git a/app/assets/stylesheets/web/news.scss b/app/assets/stylesheets/web/news.scss
@@ -20,7 +20,7 @@ $orange: #ffa531;
 }
 .news.row {
     max-width: inherit;
-	.big-column a {
+	.main-news-content a {
 		color: $orange;
 	}
 	%img {
@@ -41,10 +41,12 @@ $orange: #ffa531;
 		}
 	}
 	.big-column {
-	    border: solid 1px #ebebeb;
 	    padding: 0px;
 		width: 54%;
 		@extend .columns;
+        .main-news-content {
+	        border: solid 1px #ebebeb;
+        }
 		h1 {
 			font: 300 28px 'mic';
       		color: #131313;
@@ -268,7 +270,7 @@ $orange: #ffa531;
 		margin-right: 10px;
 	}
 }
-.news.row .big-column .news-footer {
+.news.row .main-news-content .news-footer {
 	border-top: 2px solid #e2e2e2;
 	min-height: 145px;
 	color:#656565;
@@ -317,4 +319,44 @@ $orange: #ffa531;
 		}
 
 	}
+}
+.big-column {
+    .news-comments {
+        margin-top: 30px;
+    }
+    .best-related-news {
+        margin-top: 30px;
+        .tabs {
+            .left-tab, .right-tab {
+                border: solid #ddd;
+                border-width: 1px 1px 1px 1px;
+            }
+            .right-tab {
+                margin-left: 10px;
+            }
+            .tab-title {
+                background-color: #fff;
+                & > a {
+                    font-size: 18px;
+                    font-family: mic-square-reg;
+                    background-color: #fff;
+                    border-top: 3px solid #fff;
+                    padding: 12px;
+                }
+                &.active {
+                    border-bottom-color: #fff;
+                    & > a {
+                        font-weight: bold;
+                        border-top: 3px solid #ffa911;
+                    }
+                }
+            }
+        }
+        .tabs-content {
+            border: 1px solid #ddd;
+            padding: 24px;
+            padding-bottom: 0;
+            margin-top: -1px;
+        }
+    }
 }
diff --git a/app/assets/stylesheets/web/welcome.scss b/app/assets/stylesheets/web/welcome.scss
@@ -17,10 +17,11 @@
 						z-index: 1;
 						top: $slider-height/2 - $arrow-height/2;
 						width: $arrow-height;
-						height: $arrow-height;
+						height: $arrow-height + rem-calc(5);
 						display: inline-block !important;
 						background-image: image-url('arrow.png');
-						background-size: cover;
+						background-size: contain;
+                        background-repeat: no-repeat;
 				}
 				.right-arrow {
 						right: 9%;

diff --git a/app/views/layouts/web/elements/_mic_one_news.html.haml b/app/views/layouts/web/elements/_mic_one_news.html.haml
@@ -9,9 +9,9 @@
   .one-news-comments-views
     %span.icon-eye
     %span.view-text
-      = @news.views
+      = views
     %span.icon-comment
     %span.comment-text
-      5
+      = comments
 %a.one-news-title{ href: link }
   = title
diff --git a/app/views/layouts/web/elements/_mic_one_news2.html.haml b/app/views/layouts/web/elements/_mic_one_news2.html.haml
@@ -0,0 +1,14 @@
+%a.min-one-news2-image-link{ href: link, style: "background-image: url(#{img_src})" }
+%section
+  %span.min-one-news2-date
+    = "#{date}"
+  %span.one-news2-comments-views
+    %span.icon-eye
+    %span.view-text
+      = views
+    %span.icon-comment
+    %span.comment-text
+      = comments
+%p.min-one-news2-text
+  %a.min-one-news2-link{ href: link }
+    = text
diff --git a/app/views/web/news/show.html.haml b/app/views/web/news/show.html.haml
@@ -29,76 +29,122 @@
                                             date: @event.full_date_duration, |
                                             text: @event.lead
   %main.big-column
-    .slider-wrap
-      .slider
-        -#= image_tag @news.photo -# FIXME
-        %img{:src => "/system/uploads/member/avatar/2/2165339.jpg"}
-        %img{:src => "/system/uploads/member/avatar/2/2165339.jpg"}
-        %img{:src => "/system/uploads/member/avatar/2/2165339.jpg"}
-      .slider-arrow.left
-      .slider-arrow.right
-    .row
-      %section.author.columns.small-5
-        - if @news.user.present?
-          = image_tag  "/system/uploads/member/avatar/2/2165339.jpg", class: 'human-photo'
-          -#= image_tag @news.user.avatar, class: 'human-photo' -# FIXME
-          .author-name
-            = "#{t('activerecord.attributes.news.user_id')}:"
-            = @news.user.decorate.short_name
-        - else
-          = image_tag '', class: 'human-photo'
-          .author-name
-            = "#{t('activerecord.attributes.news.user_id')}:"
-            Пресс-служба МИЦ
-        .date-text
-          = @news.publish_date_time
-        .row
-          .comments-views
-            %span.icon-eye
-            %span.view-text
-              = @news.views
-            %span.icon-comment.fa.fa-comment
-            %span.comment-text
-              5
-      %section.about.columns.small-6
-        .category-wrap
-          .category
-            Всякое разное
-    %article.news-info
-      %h1
-        = @news.title
-      %p.news-lead
-        = @news.lead
-      %p.text
-        = raw(@news.body)
-        - @news.attachments.each do |document|
-          = render_element 'mic_document', document: document
-      .news-footer.row
-        .tags.columns.small-9
-          %span.icon-fa-tags
-          %a.tag
-            дизайн,
-          %a.tag
-            мастеркласс
-        .share.columns.small-3
-          .social.row
-            .icons.right
-              %a{ href: configus.social_networks_pages.vkontakte }
-                .min-icon.icon-vk
-              %a{ href: configus.social_networks_pages.twitter }
-                .min-icon.icon-twitter
-              %a{ href: configus.social_networks_pages.facebook }
-                .min-icon.icon-facebook
-              %a{ href: configus.social_networks_pages.google_plus }
-                .min-icon.icon-google
-        .people.colunms.row
-          %span.columns.small-2
-            упомянуты в статье:
-          .people-img.columns.small-10
-            %img.human-photo{:src => "/system/uploads/member/avatar/2/2165339.jpg"}
-            %img.human-photo{:src => "/system/uploads/member/avatar/2/2165339.jpg"}
-            %a.show-all
-              посмотреть всех
+    .main-news-content
+      .slider-wrap
+        .slider
+          -#= image_tag @news.photo -# FIXME
+          %img{:src => "/system/uploads/member/avatar/2/2165339.jpg"}
+          %img{:src => "/system/uploads/member/avatar/2/2165339.jpg"}
+          %img{:src => "/system/uploads/member/avatar/2/2165339.jpg"}
+        .slider-arrow.left
+        .slider-arrow.right
+      .row
+        %section.author.columns.small-5
+          - if @news.user.present?
+            = image_tag  "/system/uploads/member/avatar/2/2165339.jpg", class: 'human-photo'
+            -#= image_tag @news.user.avatar, class: 'human-photo' -# FIXME
+            .author-name
+              = "#{t('activerecord.attributes.news.user_id')}:"
+              = @news.user.decorate.short_name
+          - else
+            = image_tag '', class: 'human-photo'
+            .author-name
+              = "#{t('activerecord.attributes.news.user_id')}:"
+              Пресс-служба МИЦ
+          .date-text
+            = @news.publish_date_time
+          .row
+            .comments-views
+              %span.icon-eye
+              %span.view-text
+                = @news.views
+              %span.icon-comment.fa.fa-comment
+              %span.comment-text
+                5
+        %section.about.columns.small-6
+          .category-wrap
+            .category
+              Всякое разное
+      %article.news-info
+        %h1
+          = @news.title
+        %p.news-lead
+          = @news.lead
+        %p.text
+          = raw(@news.body)
+          - @news.attachments.each do |document|
+            = render_element 'mic_document', document: document
+        .news-footer.row
+          .tags.columns.small-9
+            %span.icon-fa-tags
+            %a.tag
+              дизайн,
+            %a.tag
+              мастеркласс
+          .share.columns.small-3
+            .social.row
+              .icons.right
+                %a{ href: configus.social_networks_pages.vkontakte }
+                  .min-icon.icon-vk
+                %a{ href: configus.social_networks_pages.twitter }
+                  .min-icon.icon-twitter
+                %a{ href: configus.social_networks_pages.facebook }
+                  .min-icon.icon-facebook
+                %a{ href: configus.social_networks_pages.google_plus }
+                  .min-icon.icon-google
+          .people.colunms.row
+            %span.columns.small-2
+              упомянуты в статье:
+            .people-img.columns.small-10
+              %img.human-photo{:src => "/system/uploads/member/avatar/2/2165339.jpg"}
+              %img.human-photo{:src => "/system/uploads/member/avatar/2/2165339.jpg"}
+              %a.show-all
+                посмотреть всех
+    .news-comments
+      #disqus_thread
+        :javascript
+          /* * * CONFIGURATION VARIABLES * * */
+          var disqus_shortname = 'ulmicru';
+          /* * * DON'T EDIT BELOW THIS LINE * * */
+          (function() {
+              var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+              dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+              (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+          })();
+        %noscript
+          Please enable JavaScript to view the
+          %a{:href => "https://disqus.com/?ref_noscript", :rel => "nofollow"} comments powered by Disqus.
+    .best-related-news
+      %ul.tabs{'data-tab' => ''}
+        %li.tab-title.left-tab.active
+          %a{href: "#best-by-comments", tabindex: "0"}
+            Самое комментируемое
+        %li.tab-title.right-tab
+          %a{href: "#best-by-views", tabindex: "0"}
+            Самое популярное
+      .tabs-content
+        #best-by-comments.content.active
+          %ul.small-block-grid-3
+            - 4.times do
+              -# FIXME мб класс тоже засунуть в темплейт
+              %li.mic-one-news2
+                = render_element 'mic_one_news2', img_src:  "/system/uploads/member/avatar/2/2165339.jpg", |
+                                              link: "#", |
+                                              date: "22 февраля", |
+                                              views: 3, |
+                                              comments: 5, |
+                                              text: "Мицевские волонтеры собираются отдыхать в турцию"
+        #best-by-views.content
+          %ul.small-block-grid-3
+            - 5.times do
+              -# FIXME мб класс тоже засунуть в темплейт
+              %li.mic-one-news2
+                = render_element 'mic_one_news2', img_src:  "/system/uploads/member/avatar/2/2165339.jpg", |
+                                              link: "#", |
+                                              date: "22 февраля", |
+                                              views: 3, |
+                                              comments: 5, |
+                                              text: "Мицевские волонтеры собираются отдыхать в турцию"
   %aside.news-sidebar
     %a.prev-next-link.next
       .link-info
@@ -116,6 +162,8 @@
                                              link: "#", |
                                              category: "Категория", |
                                              title: "Мицевские волонтеры едут на тракторе в Сербию. Мицевские волонтеры едут на тракторе в Сербию. Мицевские волонтеры едут на тракторе в Сербию", |
+                                             views: 4, |
+                                             comments: 7, |
                                              date: "23 февраля 2015"
             - if index != (3 - 1)
               %hr