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-, '';
$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;
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 {
......
app/views/flow/show.html.slim
/! view:flow/show
.row
.row.flow-wrapper
.col-xs-8 role="navigation"
.panel
.panel-heading
h1
= image_tag 'flow.png'
| Flow
small - 最近投稿された記事
.col-xs-8 role="navigation"
.list-group
.panel-body.list-group
- @posts.each do |_post|
= render partial: 'posts/large_item', locals: { post: _post }
= paginate(@posts)
......@@ -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
......
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
......
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 
abbr.js-time-ago data-time-ago-at=post.updated_at
|.  
- post.tags.each do |tag|
span.label.label-success ##{tag.name}
span.label.label-success.label-tag ##{tag.name}
|  
.col-xs-4
small.pull-right
......
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
a.btn.btn-primary href=edit_post_path(@post)
.btn-group.post-edit-btn
a.btn href=edit_post_path(@post)
| 編集 
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,9 +72,12 @@
= @post.comments.count
.row
.panel.panel-success
.col-md-12
.panel.comment-wrapper
.panel-heading
h3.panel-title Comments
h3.panel-title
= image_tag 'comment_w.png'
| Comments
.panel-body
ul.media-list
- @post.comments.each do |comment|
......@@ -91,7 +94,7 @@
.media-body
h4.media-heading= current_user.name
= 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:
$("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