fix search view

app/assets/stylesheets/modules/_settings.css.scss

@@ -2,6 +2,9 @@
 @import url(https://fonts.googleapis.com/css?family=Quicksand:300,400,700);
 $set_prefix: -webkit-, -moz-, -ms-, -o-, '';
 
+$bg-base-color: #f0f0f0;
+$bg-main-color: #f0f0f0;
+
 $theme-color-dark: #3C5866;
 $theme-color-light: #F6FCFF;
 $theme-color-middle-light: #E4F3FF;
@@ -12,12 +15,9 @@ $theme-text-color: #ffffff;
 $theme-key-color: #ec0160;
 
 $theme-font-base: Verdana, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
-
-// $theme-color-main: #75b3c8;
-$bg-base-color: #f0f0f0;
-$bg-main-color: #f0f0f0;
 $text-deco-font: 'Quicksand', sans-serif;
 
+
 @mixin background_color($bg_value: $theme-color-main) {
   background-color: $bg_value;
   color: #fff;

app/assets/stylesheets/modules/layout.css.scss

+@import 'modules/settings';
+
+body {
+  padding-top: 60px;
+}

app/assets/stylesheets/modules/navbar.css.scss

 @import 'modules/settings';
 
 .navbar.navbar-default {
-  background-color: $theme-color-main;
+  background-color: $theme-color-middle-light;
   background-image: none;
   font-size: 1.2em;
   font-weight: 500;
@@ -12,17 +12,17 @@
 
   a {
     font-family: $text-deco-font;
-    color: $theme-color-light;
+    color: $theme-color-dark;
 
-    &:visited {
-      color: $theme-color-light;
-    }
+    // &:visited {
+    //   color: $theme-color-light;
+    // }
   }
 
   .badge {
     background-color: transparent;
-    color: $theme-color-light;
-    border: 1px solid $theme-color-light;
+    color: $theme-color-dark;
+    border: 1px solid $theme-color-dark;
   }
 
   .navbar-toggle {
@@ -38,11 +38,12 @@
 
   .navbar-nav li {
     a {
-      color: $theme-color-light;
+      color: $theme-color-dark;
 
-      &.btn-default {
-        background: $theme-color-light;
-        color: $theme-color-main;
+      &.btn {
+        text-shadow: none;
+        background: $theme-color-main;
+        color: $theme-color-light;
         border: none;
       }
     }
@@ -70,32 +71,32 @@
   }
 }
 
-.nav-icon {
-  position: relative;
-  padding-left: 25px!important;
-  text-indent: 5px;
-
-  &:before {
-    position: absolute;
-    left: 6px;
-    background-size: 20px 20px;
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    content:" ";
-  }
-
-  &.flow:before {
-    background-image: image-url('flow.png');
-  }
-
-  &.stock:before {
-    background-image: image-url('stock.png');
-  }
-
-  &.template:before {
-    background-image: image-url('template.png');
-  }
-}
+// .nav-icon {
+//   position: relative;
+//   padding-left: 25px!important;
+//   text-indent: 5px;
+
+//   &:before {
+//     position: absolute;
+//     left: 6px;
+//     background-size: 20px 20px;
+//     display: inline-block;
+//     height: 20px;
+//     width: 20px;
+//     content:" ";
+//   }
+
+//   &.flow:before {
+//     background-image: image-url('flow.png');
+//   }
+
+//   &.stock:before {
+//     background-image: image-url('stock.png');
+//   }
+
+//   &.template:before {
+//     background-image: image-url('template.png');
+//   }
+// }
 
 

app/assets/stylesheets/modules/panel.css.scss

 @import 'modules/settings';
 
 .panel-heading {
-  background-color: $theme-color-middle-light;
+  background-color: $theme-color-main;
+  color: $theme-color-light;
+}
+
+.panem-main {
+  .panel-heading {
+    background-color: $theme-color-dark;
+    color: $theme-color-light;
+
+    .small {
+      color: $theme-color-main;
+    }
+  }
+}
+
+.panel {
+  .label {
+    background-color: transparent;
     color: $theme-color-dark;
+    border: 1px solid $theme-color-dark;
+  }
+
+  .badge {
+    background-color: transparent;
+    color: $theme-color-main;
+    letter-spacing: 0;
+    border: 1px solid $theme-color-main;
+    padding: 4px 6px;
+  }
 }

app/assets/stylesheets/modules/tmp.css.scss

 @import 'modules/settings';
 
-.badge.badge-transparent {
-  background-color: transparent;
-  color: $theme-color-main;
-  // font-family: 'Quicksand';
-  letter-spacing: 0;
-  border: 1.5px solid $theme-color-main;
-  padding: 4px 6px;
-}
+
 
 
 .popover {
   max-width: 400px;
 }
 
-.navbar-default .navbar-brand {
-  background-color: #428bca;
-  color: #fff;
-}
+// .navbar-default .navbar-brand {
+//   background-color: #428bca;
+//   color: #fff;
+// }
 
-.navbar-default .navbar-brand,
-.label a {
-  // color: white;
-}
+// .navbar-default .navbar-brand,
+// .label a {
+//   // color: white;
+// }
 
-/* #app-search-form {
-   width: 200px;
- }
-*/
+// /* #app-search-form {
+//    width: 200px;
+//  }
+// */
 
-.container-main{
-  min-height: 400px;
-}
+// .container-main{
+//   min-height: 400px;
+// }
 
-.body-padding {
-  padding-top: 70px;
-}
+// .body-padding {
+//   padding-top: 70px;
+// }

app/decorators/posts_decorator.rb

 class PostsDecorator < Draper::CollectionDecorator
   def related_tags
-    tags = map(&:tags).flatten.uniq
+    tags = map(&:tags).flatten.uniq.take(10)
 
     TagDecorator.decorate_collection(tags)
   end

app/views/flow/show.html.slim

 /! view:flow/show
-.row.flow-wrapper
+
+.row.
   .col-xs-3
     .numbers-wrapper
       div
@@ -25,40 +26,49 @@
       label.numbers Now Viewing
 
   .col-xs-12.col-md-8 role="navigation"
-    .panel
+    .panel.panem-main
       .panel-heading
         h2.panel-title
-          | Flow
-          small  - 最近投稿された記事
+          i.fa.fa-rss
+          |  Flow
+          span.small - 最近投稿された記事
 
-      .panel-body
-        ul.list-group
-          - @posts.each do |_post|
+      ul.list-group.panel-body
+        - @posts.each do |post|
           li.list-group-item
-              = render partial: 'posts/large_item', locals: { post: _post }
+            = render partial: 'posts/large_item', locals: { post: post }
+
     = paginate(@posts)
 
   .col-xs-12.col-md-4
     .panel
       .panel-heading
-        h3.panel-title この1週間で閲覧の多かった投稿
+        h3.panel-title
+          i.fa.fa-history
+          |  この1週間で閲覧の多かった投稿
       .panel-body.list-group
         - Post.most_pv_in_this_week(5).each do |(post, footprints_count)|
           a.list-group-item.post-list href=post_path(post)
-            span.label.label-default.pull-right = "#{footprints_count} PV"
+            span.badge.pull-right = "#{footprints_count} PV"
             = post.title
 
     .panel
       .panel-heading
-        h3.panel-title 最近あなたが投稿した記事
+        h3.panel-title
+          i.fa.fa-smile-o
+          |  最近あなたが投稿した記事
       .panel-body.list-group
         - current_user.posts.recent(10).each do |post|
           = render partial: 'posts/small_item', locals: { post: post.decorate }
-        a.list-group-item href=search_path(q: "@#{current_user.nickname}") もっと見る
+        a.list-group-item href=search_path(q: "@#{current_user.nickname}")
+          i.fa.fa-plus-square
+          | もっと見る
 
     .panel
       .panel-heading
-        h3.panel-title 最近投稿されたタグ
+        h3.panel-title
+          i.fa.fa-tags
+          |  最近投稿されたタグ
       .panel-body.list-group
         - Tag.recent(10).each_with_index do |tag, i|
           a.list-group-item data-tag-id=tag.id href=search_path(q: "##{tag.name}")

app/views/layouts/application.html.slim

@@ -8,7 +8,7 @@ html lang="ja"
     link href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" /
     link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css" rel="stylesheet" /
     link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css" rel="stylesheet" /
-    link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"
+    link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"
     = favicon_link_tag 'favicon.ico'
     script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
     = render partial: 'partials/google_analytics'

app/views/partials/_app_header.html.slim

@@ -16,14 +16,17 @@ nav.navbar.navbar-default.navbar-fixed-top role="navigation"
 
       ul.nav.navbar-nav
         li
-          a.nav-icon.flow href=flow_path title="Flow"
-            | Flow
+          a href=flow_path title="Flow"
+            i.fa.fa-rss
+            |  Flow
         li
-          a.nav-icon.stock href=stock_path title="Stock"
-            | Stock
+          a href=stock_path title="Stock"
+            i.fa.fa-stack-overflow
+            |  Stock
         li
-          a.nav-icon.template href=templates_path title="Templates"
-            | Templates
+          a href=templates_path title="Templates"
+            i.fa.fa-copy
+            |  Templates
 
       ul.nav.navbar-nav.navbar-right
         li

app/views/posts/_large_item.html.slim

@@ -17,7 +17,7 @@
         abbr.js-time-ago data-time-ago-at=post.updated_at
         |.  
         - post.tags.each do |tag|
-          span.label.label-tag #{tag.name}
+          a.label.label-tag href=tag.decorate.show_path = tag.name
           |  
     .col-xs-4
       small.pull-right
@@ -33,4 +33,4 @@
   .row
     .col-xs-12
       small.text-shadow
-        = truncate post.body, length: 240
+        = truncate post.body, length: 140

app/views/search/show.html.slim

 /! view:search/show
+
 .row
 
-  h1
-    span "#{params[:q]}"
-    span.small - 検索結果
-    span.small #{@count}件
+  .col-xs-12.col-md-8 role="navigation"
+    .panel.panem-main
+      .panel-heading
+        h2.panel-title
+          i.fa.fa-search
+          |   "#{params[:q]}"
+          span.small - 検索結果#{@count}件
+
+      ul.list-group.panel-body
+        - @posts.each do |post|
+          li.list-group-item
+            = render partial: 'posts/large_item', locals: { post: post }
 
-  .col-xs-8 role="navigation"
-    .list-group
-      - @posts.each do |_post|
-        = render partial: 'posts/large_item', locals: { post: _post }
     = paginate(@posts)
 
-  .col-xs-4
-    .panel.panel-default
+  .col-xs-12.col-md-4
+    .panel
       .panel-heading
-        h2.panel-title "#{params[:q]}"に関連するタグ
+        h3.panel-title
+          i.fa.fa-tags
+          |  "#{params[:q]}"に関連する他のタグ
       .panel-body.list-group
-        - @posts.related_tags.each do |_tag|
-          a.list-group-item href=search_path(q: "##{_tag.name}") = _tag.name
+        - @posts.related_tags.each do |tag|
+          a.list-group-item href=search_path(q: "##{tag.name}") = tag.name
 
-    .panel.panel-default
+    .panel
       .panel-heading
-        h2.panel-title "#{params[:q]}"に関連するユーザー
+        h3.panel-title
+          i.fa.fa-users
+          |  "#{params[:q]}"に貢献しているユーザー
       .panel-body.list-group
-        - @posts.related_authors.each do |_author|
-          a.list-group-item href=search_path(q: "@#{_author.nickname}") = _author.name
+        - @posts.related_authors.each do |author|
+          a.list-group-item href=search_path(q: "@#{author.nickname}") = author.name
+
+
+
+
+  / h1
+  /   span "#{params[:q]}"
+  /   span.small - 検索結果
+  /   span.small #{@count}件
+
+  / .col-xs-8 role="navigation"
+  /   .list-group
+  /     - @posts.each do |post|
+  /       = render partial: 'posts/large_item', locals: { post: post }
+  /   = paginate(@posts)
 
+  / .col-xs-4
+  /   .panel.panel-default
+  /     .panel-heading
+  /       h2.panel-title "#{params[:q]}"に関連するタグ
+  /     .panel-body.list-group
+  /       - @posts.related_tags.each do |_tag|
+  /         a.list-group-item href=search_path(q: "##{_tag.name}") = _tag.name
 
+  /   .panel.panel-default
+  /     .panel-heading
+  /       h2.panel-title "#{params[:q]}"に関連するユーザー
+  /     .panel-body.list-group
+  /       - @posts.related_authors.each do |_author|
+  /         a.list-group-item href=search_path(q: "@#{_author.nickname}") = _author.name