Flowページのデザイン

c9770264 · kiiita · 5830663b · c9770264 · c9770264 · c9770264
Commit c9770264 authored Jul 28, 2014 by kiiita
12 changed files
--- a/app/assets/images/comment_b.png
+++ b/app/assets/images/comment_b.png
--- a/app/assets/images/comment_w.png
+++ b/app/assets/images/comment_w.png
--- a/app/assets/images/flow.png
+++ b/app/assets/images/flow.png
--- a/app/assets/images/stock.png
+++ b/app/assets/images/stock.png
--- a/app/assets/images/template.png
+++ b/app/assets/images/template.png
--- a/app/assets/stylesheets/_values.css.scss
+++ b/app/assets/stylesheets/_values.css.scss
+@import url(http://fonts.googleapis.com/css?family=Flamenco:300,400);
+@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
 $set_prefix: -webkit-, -moz-, -ms-, -o-, '';
 $main-color: #75b3c8;

--- a/app/assets/stylesheets/flow.css.scss
+++ b/app/assets/stylesheets/flow.css.scss
+@import 'values';
+.panel {
+  border: 1px solid $main-color;
+  .panel-heading {
+    background-color: $main-color;
+    color: #fff;
+  }
+  .panel-body {
+    .list-group-item {
+      &:hover {
+        @include transition;
+      }
+    }
+  }
+}
+.flow-wrapper {
+  margin-top: 40px;
+  h1 {
+    img {
+      height: 18px;
+      margin-right: 10px;
+      position: relative;
+      bottom: 2px;
+    }
+    font-size: 20px;
+    small {
+      color: #f6f6f6;
+    }
+  }
+  h4 {
+    color: #333!important;
+  }
+  .posted-name {
+    color: $main-color;
+    font-size: 12px;
+  }
+}
+.label-date {
+  background-color: #aaa;
+  padding-top: 3px;
+  font-family: 'Quicksand';
+  font-weight: 300;
+}
+.label-tag {
+  background-color: #e67e22;
+  padding-top: 4px;
+  font-weight: 100;
+}
+.post-show-wrapper {
+  margin-top: 40px;
+}
+.post-edit-btn,
+.watch-btn,
+.btn-watched {
+  @include border_radius;
+  color: $main-color;
+  border: 1px solid $main-color;
+  &:hover {
+    @include transition;
+    background-color: #eee;
+  }
+  a {
+    color: $main-color;
+  }
+  .dropdown-toggle {
+    background-color: $main-color;
+    @include border_radius(0px);
+    color: #fff;
+    background-image: none!important;
+    border: 1px solid transparent;
+    .caret {
+      font-size: 20px;
+    }
+  }
+}
+.watch-btn {
+  height: 36px;
+}
+.btn-watched {
+  background-color: $main-color;
+  color: #fff;
+  border: 2px solid $main-color;
+}
+.detail-wrapper {
+  dt {
+    padding: 2px 0;
+  }
+  dd {
+    margin-bottom: 10px;
+  }
+  .label-tag {
+    background-color: #e67e22;
+    padding-top: 4px;
+    font-weight: 100;
+  }
+}
+.comment-wrapper {
+  .panel-title {
+    img {
+      height: 25px;
+      margin-right: 10px;
+      position: relative;
+      bottom: 2px;
+    }
+  }
+  textarea {
+    border: 1px solid #f6f6f6;
+    margin: 10px 0;
+    padding: 10px 15px;
+    line-height: 1.428571429;
+    vertical-align: middle;
+    border: 1px solid #dce4ec;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -o-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+    &:focus {
+      border: 1px solid $main-color;
+      box-shadow: 0px 0px 0px $main-color;
+      background-color: #f8f8f8;
+    }
+  }
+  .comment-btn {
+    background-color: transparent;
+    color: $main-color;
+    border: 1px solid $main-color;
+    &:hover {
+      color: #fff;
+      background-color: $main-color;
+      @include transition;
+    }
+    &:focus {
+      background-color: #f8f8f8;
+      @include transition;
+      box-shadow: 0px 0px 0px $main-color;
+    }
+  }
+}
+.panel-default {
+  .panel-heading {
+    background-color: $main-color;
+    color: #fff;
+    background-image: none;
+  }
+}
+.btn {
+  background-color: transparent;
+  background-image: none;
+  color: $main-color;
+  border: 1px solid $main-color;
+  &:hover {
+    color: #fff;
+    background-color: $main-color;
+    @include transition;
+    border: 1px solid $main-color;
+  }
+  &:focus {
+    background-color: #f8f8f8;
+    @include transition;
+    box-shadow: 0px 0px 0px $main-color;
+  }
+}
+.fc-event-inner {
+  padding: 5px;
+  span {
+    width: 85px;
+  }
+  &:HOVER {
+    background-color: #f8f8f8;
+    @include transition;
+  }
+}
--- a/app/assets/stylesheets/templates.css.scss
+++ b/app/assets/stylesheets/templates.css.scss
@@ -14,7 +14,7 @@ $main-color: #75b3c8;
  background-color: $main-color!important;
  background-image: none!important;
  li:hover {
-    background-color: #ddd;
+    cursor: pointer;
    a {
    color: $main-color;
    }
@@ -39,6 +39,7 @@ $main-color: #75b3c8;
    }
    button {
      background-color: #fff;
+      border: 1px solid #fff;
      .search {
        width: 20px;
        &:hover {
@@ -48,6 +49,25 @@ $main-color: #75b3c8;
      }
    }
  }
+  .nav-icon {
+    width: 20px;
+    margin-right: 5px;
+  }
+  li.stock img {
+    width: 25px;
+    position: relative;
+    bottom: 2px;
+  }
+  li.flow {
+    a {
+      position: relative;
+      top: 2px;
+    }
+    img {
+      position: relative;
+      bottom: 2px;
+    }
+  }
  .navbar-right {
    .new-post-btn {
      .btn {

--- a/app/views/flow/show.html.slim
+++ b/app/views/flow/show.html.slim
 /! view:flow/show
-.row
+.row.flow-wrapper
-  h1
-    | Flow
-    small  - 最近投稿された記事
  .col-xs-8 role="navigation"
-    .list-group
+    .panel
-      - @posts.each do |_post|
+      .panel-heading
-        = render partial: 'posts/large_item', locals: { post: _post }
+        h1
+          = image_tag 'flow.png'
+          | Flow
+          small  - 最近投稿された記事
+      .panel-body.list-group
+        - @posts.each do |_post|
+          = render partial: 'posts/large_item', locals: { post: _post }
    = paginate(@posts)
  .col-xs-4
@@ -19,7 +21,7 @@
    /     - Post.limit(5).each do |_post|
    /       = render partial: 'posts/small_item', locals: { post: _post }
-    .panel.panel-default
+    .panel
      .panel-heading
        h2.panel-title 最近投稿されたタグ
      .panel-body.list-group

--- a/app/views/partials/_app_header.html.slim
+++ b/app/views/partials/_app_header.html.slim
@@ -12,14 +12,17 @@ nav.navbar.navbar-fixed-top.navbar-original role="navigation"
            button.btn data-disable-with="Searching..." type="submit"
              = image_tag 'search.png', class: 'search'
      ul.nav.navbar-nav
-        li class=('active' if current_page?(stock_path))
+        li.stock class=('active' if current_page?(stock_path))
          a href=stock_path title="Stock"
+            = image_tag "stock.png", class: 'nav-icon stock'
            | Stock
-        li class=('active' if current_page?(flow_path))
+        li.flow class=('active' if current_page?(flow_path))
          a href=flow_path title="Frow"
+            = image_tag "flow.png", class: 'nav-icon'
            | Flow
-        li class=('active' if current_page?(templates_path))
+        li.template class=('active' if current_page?(templates_path))
          a href=templates_path title="Templates"
+            = image_tag "template.png", class: 'nav-icon'
            | Templates
      ul.nav.navbar-nav.navbar-right

--- a/app/views/posts/_large_item.html.slim
+++ b/app/views/posts/_large_item.html.slim
@@ -7,16 +7,16 @@ a.list-group-item.post-list.mod-hover-hidden data-post-id=post.id href=post_path
      .col-xs-9
        h4.text-link #{post.title}
      .col-xs-3
-        span.label.label-danger = post.display_specified_date if post.specified_date
+        span.label.label-danger.label-date = post.display_specified_date if post.specified_date
        small.pull-right ##{post.id}
    .row
      .col-xs-8
-        small.text-success
+        small.text-success.posted-name
          | #{post.author.name} posted&nbsp;
          abbr.js-time-ago data-time-ago-at=post.updated_at
          |.&nbsp;&nbsp;
          - post.tags.each do |tag|
-            span.label.label-success ##{tag.name}
+            span.label.label-success.label-tag ##{tag.name}
            | &nbsp;
      .col-xs-4
        small.pull-right

--- a/app/views/posts/show.html.slim
+++ b/app/views/posts/show.html.slim
-.row
+.row.post-show-wrapper
  .col-xs-9
-    .panel.panel-info
+    .panel
      .panel-heading
        h3.panel-title
          a href=post_path(@post) = @post.title
@@ -8,8 +8,8 @@
        = MarkdownRenderer.new(@post.body).render
  .col-xs-3
-    .btn-group
+    .btn-group.post-edit-btn
-      a.btn.btn-primary href=edit_post_path(@post)
+      a.btn href=edit_post_path(@post)
        | 編集&nbsp;
        span.glyphicon.glyphicon-pencil
      button.btn.btn-default.dropdown-toggle data-toggle="dropdown" type="button"
@@ -32,11 +32,11 @@
    .btn-group
      - if current_user.watching?(post: @post)
-        = link_to 'Watching <span class="glyphicon glyphicon-eye-open"></span>'.html_safe, watch_post_path, :remote => true, :'data-type' => :html, :class => 'btn btn-warning ajax_link'
+        = link_to 'Watching <span class="glyphicon glyphicon-eye-open"></span>'.html_safe, watch_post_path, :remote => true, :'data-type' => :html, :class => 'btn ajax_link btn-watched'
      - else
-        = link_to 'Watch <span class="glyphicon glyphicon-eye-open"></span>'.html_safe, watch_post_path, :remote => true, :'data-type' => :html, :class => 'btn btn-default ajax_link'
+        = link_to 'Watch <span class="glyphicon glyphicon-eye-open"></span>'.html_safe, watch_post_path, :remote => true, :'data-type' => :html, :class => 'btn ajax_link watch-btn'
-    .well style="margin-top:20px"
+    .well.detail-wrapper style="margin-top:20px"
      dl
        dt 作成者
        dd
@@ -46,7 +46,7 @@
        dt タグ
        dd
          - @post.tags.each do |tag|
-            span.label.label-success
+            span.label.label-tag
              a href=tag.decorate.show_path
                | ##{tag.name}
            | &nbsp;
@@ -72,30 +72,33 @@
          = @post.comments.count
 .row
-  .panel.panel-success
+  .col-md-12
-    .panel-heading
+    .panel.comment-wrapper
-      h3.panel-title Comments
+      .panel-heading
-    .panel-body
+        h3.panel-title
-      ul.media-list
+          = image_tag 'comment_w.png'
-        - @post.comments.each do |comment|
+          | Comments
-          li.media
+      .panel-body
-            a.pull-left href="#"
+        ul.media-list
-              img.media-object src=comment.author.image_url /
+          - @post.comments.each do |comment|
-            .media-body
+            li.media
-              h4.media-heading= comment.author.name
+              a.pull-left href="#"
-              = comment.body
+                img.media-object src=comment.author.image_url /
-        = form_tag(comment_post_path, method: :post, data: { 'form-id' => "comment_#{@post.id}" }) do
+              .media-body
-          li.media
+                h4.media-heading= comment.author.name
-            a.pull-left href="#"
+                = comment.body
-              img.media-object src=current_user.image_url /
+          = form_tag(comment_post_path, method: :post, data: { 'form-id' => "comment_#{@post.id}" }) do
-            .media-body
+            li.media
-              h4.media-heading= current_user.name
+              a.pull-left href="#"
-              = text_area :comment, :body, class: 'form-control', placeholder: 'コメントする...'
+                img.media-object src=current_user.image_url /
-              = submit_tag 'Comment', class: 'btn btn-primary', data: { 'disable-with' => '...' }
+              .media-body
-      javascript:
+                h4.media-heading= current_user.name
-        $("form[data-form-id='comment_#{@post.id}']").on('ajax:success', function(event, data, xhr) {
+                = text_area :comment, :body, class: 'form-control', placeholder: 'コメントする...'
+                = submit_tag "Comment", class: 'btn comment-btn', data: { 'disable-with' => '...' }
+        javascript:
+          $("form[data-form-id='comment_#{@post.id}']").on('ajax:success', function(event, data, xhr) {
-        });
+          });
 /! Button trigger modal
 /!