Skip to content

R
rendezvous
Commit c9770264 by kiiita
Options

Flowページのデザイン

parent 5830663b
Showing with 241 additions and 23 deletions
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-, ''; $set_prefix: -webkit-, -moz-, -ms-, -o-, '';
$main-color: #75b3c8; $main-color: #75b3c8;
......
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;
}
}
app/assets/stylesheets/templates.css.scss
...@@ -14,7 +14,7 @@ $main-color: #75b3c8; ...@@ -14,7 +14,7 @@ $main-color: #75b3c8;
background-color: $main-color!important; background-color: $main-color!important;
background-image: none!important; background-image: none!important;
li:hover { li:hover {
background-color: #ddd; cursor: pointer;
a { a {
color: $main-color; color: $main-color;
} }
...@@ -39,6 +39,7 @@ $main-color: #75b3c8; ...@@ -39,6 +39,7 @@ $main-color: #75b3c8;
} }
button { button {
background-color: #fff; background-color: #fff;
border: 1px solid #fff;
.search { .search {
width: 20px; width: 20px;
&:hover { &:hover {
...@@ -48,6 +49,25 @@ $main-color: #75b3c8; ...@@ -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 { .navbar-right {
.new-post-btn { .new-post-btn {
.btn { .btn {
......
app/views/flow/show.html.slim
/! view:flow/show /! view:flow/show
.row .row.flow-wrapper
.col-xs-8 role="navigation"
.panel
.panel-heading
h1 h1
= image_tag 'flow.png'
| Flow | Flow
small - 最近投稿された記事 small - 最近投稿された記事
.col-xs-8 role="navigation" .panel-body.list-group
.list-group
- @posts.each do |_post| - @posts.each do |_post|
= render partial: 'posts/large_item', locals: { post: _post } = render partial: 'posts/large_item', locals: { post: _post }
= paginate(@posts) = paginate(@posts)
...@@ -19,7 +21,7 @@ ...@@ -19,7 +21,7 @@
/ - Post.limit(5).each do |_post| / - Post.limit(5).each do |_post|
/ = render partial: 'posts/small_item', locals: { post: _post } / = render partial: 'posts/small_item', locals: { post: _post }
.panel.panel-default .panel
.panel-heading .panel-heading
h2.panel-title 最近投稿されたタグ h2.panel-title 最近投稿されたタグ
.panel-body.list-group .panel-body.list-group
......
app/views/partials/_app_header.html.slim
...@@ -12,14 +12,17 @@ nav.navbar.navbar-fixed-top.navbar-original role="navigation" ...@@ -12,14 +12,17 @@ nav.navbar.navbar-fixed-top.navbar-original role="navigation"
button.btn data-disable-with="Searching..." type="submit" button.btn data-disable-with="Searching..." type="submit"
= image_tag 'search.png', class: 'search' = image_tag 'search.png', class: 'search'
ul.nav.navbar-nav 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" a href=stock_path title="Stock"
= image_tag "stock.png", class: 'nav-icon stock'
| 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" a href=flow_path title="Frow"
= image_tag "flow.png", class: 'nav-icon'
| Flow | Flow
li class=('active' if current_page?(templates_path)) li.template class=('active' if current_page?(templates_path))
a href=templates_path title="Templates" a href=templates_path title="Templates"
= image_tag "template.png", class: 'nav-icon'
| Templates | Templates
ul.nav.navbar-nav.navbar-right ul.nav.navbar-nav.navbar-right
......
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 ...@@ -7,16 +7,16 @@ a.list-group-item.post-list.mod-hover-hidden data-post-id=post.id href=post_path
.col-xs-9 .col-xs-9
h4.text-link #{post.title} h4.text-link #{post.title}
.col-xs-3 .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} small.pull-right ##{post.id}
.row .row
.col-xs-8 .col-xs-8
small.text-success small.text-success.posted-name
| #{post.author.name} posted  | #{post.author.name} posted 
abbr.js-time-ago data-time-ago-at=post.updated_at abbr.js-time-ago data-time-ago-at=post.updated_at
|.   |.  
- post.tags.each do |tag| - post.tags.each do |tag|
span.label.label-success ##{tag.name} span.label.label-success.label-tag ##{tag.name}
|   |  
.col-xs-4 .col-xs-4
small.pull-right small.pull-right
......
app/views/posts/show.html.slim
.row .row.post-show-wrapper
.col-xs-9 .col-xs-9
.panel.panel-info .panel
.panel-heading .panel-heading
h3.panel-title h3.panel-title
a href=post_path(@post) = @post.title a href=post_path(@post) = @post.title
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
= MarkdownRenderer.new(@post.body).render = MarkdownRenderer.new(@post.body).render
.col-xs-3 .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)
| 編集  | 編集 
span.glyphicon.glyphicon-pencil span.glyphicon.glyphicon-pencil
button.btn.btn-default.dropdown-toggle data-toggle="dropdown" type="button" button.btn.btn-default.dropdown-toggle data-toggle="dropdown" type="button"
...@@ -32,11 +32,11 @@ ...@@ -32,11 +32,11 @@
.btn-group .btn-group
- if current_user.watching?(post: @post) - 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 - 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 dl
dt 作成者 dt 作成者
dd dd
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
dt タグ dt タグ
dd dd
- @post.tags.each do |tag| - @post.tags.each do |tag|
span.label.label-success span.label.label-tag
a href=tag.decorate.show_path a href=tag.decorate.show_path
| ##{tag.name} | ##{tag.name}
| &nbsp; | &nbsp;
...@@ -72,9 +72,12 @@ ...@@ -72,9 +72,12 @@
= @post.comments.count = @post.comments.count
.row .row
.panel.panel-success .col-md-12
.panel.comment-wrapper
.panel-heading .panel-heading
h3.panel-title Comments h3.panel-title
= image_tag 'comment_w.png'
| Comments
.panel-body .panel-body
ul.media-list ul.media-list
- @post.comments.each do |comment| - @post.comments.each do |comment|
...@@ -91,7 +94,7 @@ ...@@ -91,7 +94,7 @@
.media-body .media-body
h4.media-heading= current_user.name h4.media-heading= current_user.name
= text_area :comment, :body, class: 'form-control', placeholder: 'コメントする...' = text_area :comment, :body, class: 'form-control', placeholder: 'コメントする...'
= submit_tag 'Comment', class: 'btn btn-primary', data: { 'disable-with' => '...' } = submit_tag "Comment", class: 'btn comment-btn', data: { 'disable-with' => '...' }
javascript: javascript:
$("form[data-form-id='comment_#{@post.id}']").on('ajax:success', function(event, data, xhr) { $("form[data-form-id='comment_#{@post.id}']").on('ajax:success', function(event, data, xhr) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment