Skip to content

R
rendezvous
Commit 53f76cef by kiiita
Options

Stock、Post画面のデザイン

parent c9770264
Showing with 282 additions and 22 deletions
app/assets/stylesheets/flow.css.scss
...@@ -35,6 +35,22 @@ ...@@ -35,6 +35,22 @@
color: $main-color; color: $main-color;
font-size: 12px; font-size: 12px;
} }
.numbers-wrapper {
height: 150px;
.col-xs-4 {
text-align: center;
label {
border-bottom: 5px solid $main-color;
font-weight: 300;
}
p {
font-size: 54px;
font-weight: 300;
font-family: 'Quicksand';
color: $main-color;
}
}
}
} }
.label-date { .label-date {
......
app/assets/stylesheets/lib/mod-md-editor.css.scss
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
.mod-mdEditor-textarea { .mod-mdEditor-textarea {
width: 100%; width: 100%;
min-height: 400px; min-height: 400px;
font-size: 9pt; font-size: 12pt;
padding: 3px; padding: 3px;
tab-size: 2; tab-size: 2;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Ricty', monospace; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'Ricty', monospace;
......
app/assets/stylesheets/lib/odometer-theme-default.css 0 → 100755
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
position: relative;
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
*display: inline;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
*display: inline;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
*display: inline;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
text-align: left;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
display: block;
-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {
display: block;
-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-ms-transition: -ms-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
font-family: "Helvetica Neue", sans-serif;
line-height: 1.1em;
}
.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value {
text-align: center;
}
app/assets/stylesheets/posts.css.scss 0 → 100644
@import 'values';
#post-form {
.row {
margin-top: 20px;
.col-xs-9 {
.field {
margin-bottom: 10px;
.input-group-addon {
background-color: #fff;
border-top: 1px solid $main-color;
border-left: 1px solid $main-color;
border-bottom: 1px solid $main-color;
color: $main-color;
label {
margin-bottom: 0;
font-weight: 300;
}
}
.form-control {
border: 1px solid $main-color;
padding: 10px!important;
height: 50px;
}
.select2-choices {
box-shadow: 0 0 0 #fff;
border: 1px solid $main-color;
background-image: none;
padding: 5px;
}
}
}
}
.btn-toolbar {
> .btn-group > .btn {
color: $main-color;
background-color: #fff;
box-shadow: 0 0 0 #fff;
}
}
textarea {
padding: 10px;
border-top: 0px solid #fff;
&:focus {
box-shadow: 0 0 0 #fff!important;
background-color: #fff;
}
}
.mod-mdEditor-textarea {
&:focus {
box-shadow: 0 0 0 #fff!important;
}
}
.preview-wrapper {
.mod-mdEditor-preview {
}
.panel-body {
padding: 10px;
padding-top: 0;
}
}
#save_button {
margin-bottom: 10px;
}
}
input,
textarea {
border: 1px solid $main-color;
&:focus {
border: 1px solid $main-color;
background-color: #f8f8f8;
box-shadow: 0 0 0 #fff!important;
@include transition;
}
}
app/assets/stylesheets/stock.css.scss 0 → 100644
@import 'values';
.mod-tag-tree {
.mod-tag-tree-filter {
margin-bottom: 20px;
width: 400px!important;
&:focus {
border: 1px solid $main-color;
box-shadow: 0 0 0 #fff!important;
background-color: #f8f8f8;
@include transition;
}
}
li {
padding: 6px 0!important;
margin-right: 4px!important;
span {
min-height: 10px!important;
min-width: 10px!important;
}
}
}
.stock-wrapper {
margin-top: 15px;
h1 {
color: #fff;
small {
color: #f8f8f8;
}
.odometer {
position: relative;
bottom: 2px;
}
}
.list-group {
box-shadow: 0 0 0 #fff;
}
}
app/assets/stylesheets/template.css.scss 0 → 100644
@import 'values';
.template-wrapper {
margin-top: 15px;
}
app/controllers/flow_controller.rb
...@@ -2,5 +2,7 @@ class FlowController < ApplicationController ...@@ -2,5 +2,7 @@ class FlowController < ApplicationController
def show def show
@posts = Post.includes(:tags, :author).where(is_draft: false).order(updated_at: :desc).page(params[:page]).decorate @posts = Post.includes(:tags, :author).where(is_draft: false).order(updated_at: :desc).page(params[:page]).decorate
@users = User.all
@tags = Tag.all
end end
end end
app/controllers/stock_controller.rb
class StockController < ApplicationController class StockController < ApplicationController
def show def show
@posts = Post.all.count
end end
end end
app/views/flow/show.html.slim
/! view:flow/show /! view:flow/show
.row.flow-wrapper .row.flow-wrapper
.numbers-wrapper
.col-xs-4
label.numbers Posts
p = @posts.count
.col-xs-4
label.numbers Users
p = @users.count
.col-xs-4
label.numbers Tags
p = @tags.count
.col-xs-8 role="navigation" .col-xs-8 role="navigation"
.panel .panel
.panel-heading .panel-heading
......
app/views/posts/_form.html.slim
...@@ -22,13 +22,6 @@ ...@@ -22,13 +22,6 @@
= hidden_field :post, :tags, class: 'mod-mdEditor-tags', style: 'width:300px', value: @post.tags.map{ |_tag| _tag.name }.join(',') = hidden_field :post, :tags, class: 'mod-mdEditor-tags', style: 'width:300px', value: @post.tags.map{ |_tag| _tag.name }.join(',')
.col-xs-3 .col-xs-3
p.actions
= f.submit class: 'btn btn-primary js-disable-confirm-unload', id: 'save_button'
p.actions
= f.check_box :is_draft
= f.label :is_draft, "下書き保存"
p.actions
= f.date_select :specified_date
br/ br/
...@@ -57,11 +50,22 @@ ...@@ -57,11 +50,22 @@
/ i.fa.fa-link / i.fa.fa-link
.panel-body.panel-body-nopadding .panel-body.panel-body-nopadding
= f.text_area :body, class: 'mod-mdEditor-textarea' = f.text_area :body, class: 'mod-mdEditor-textarea', placehoder: 'type your text....'
p.actions
= f.submit class: 'btn btn-lg js-disable-confirm-unload', id: 'save_button'
p.actions
= f.check_box :is_draft
= f.label :is_draft, "下書き保存"
p.actions
= f.date_select :specified_date
.col-xs-6 .col-xs-6
.box-text .panel.preview-wrapper
.text-box.body.viewer.github.mod-mdEditor-preview .panel-heading
h5 Preview - 入力した内容がここに表示されます
.panel-body
.box-text
.text-box.body.viewer.github.mod-mdEditor-preview
input#fileupload data-url="/apis/file_receiver" multiple="" name="files[]" style="display:none" type="file" / input#fileupload data-url="/apis/file_receiver" multiple="" name="files[]" style="display:none" type="file" /
......
app/views/stock/show.html.slim
/! view:stock/show /! view:stock/show
.row .row
.col-md-12
h1 .panel.stock-wrapper
| Stock .panel-heading
small - 保存・蓄積された記事 h1
#odometer.odometer 123
#sidebar.col-xs-12 role="navigation" | Stocks
#tab-tree.tab-pane small - 保存・蓄積された記事
- cache('tag-tree', :expires_in => 1.hour) do .panel-body
.list-group #sidebar role="navigation"
= Tag.posts_exist.decorate.tree_view #tab-tree.tab-pane
- cache('tag-tree', :expires_in => 1.hour) do
.list-group
= Tag.posts_exist.decorate.tree_view
javascript:
$(document).ready(function() {
setTimeout(function(){
$('.odometer').html(#{@posts}); //数字は最後の数値
}, 1000);
});
app/views/templates/show.html.slim
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
| Templates | Templates
small - テンプレートから作成 small - テンプレートから作成
.panel.panel-info .panel.template-wrapper
.panel-heading .panel-heading
span.glyphicon.glyphicon-info-sign span.glyphicon.glyphicon-info-sign
| テンプレートの使い方 | テンプレートの使い方
......
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