Skip to content

R
rendezvous
Commit 65c15adc by tady (Masato TADA)
Options

Merge pull request #115 from tadyjp/kitakuni/design_stocks 

[REVIEW] Stock、Post画面のデザイン
parents eb0bf3e7 85bf826f
Showing with 274 additions and 27 deletions
app/assets/stylesheets/basic.css.scss
......@@ -13,8 +13,7 @@ p, h1, h2, h3, h4, h5, h6, span {
background-color: transparent;
color: $main-color;
font-family: 'Quicksand';
font-weight: 300;
letter-spacing: 0;
border: 1px solid $main-color;
border: 1.5px solid $main-color;
padding: 4px 6px;
}
app/assets/stylesheets/flow.css.scss
......@@ -35,19 +35,34 @@
color: $main-color;
font-size: 12px;
}
.numbers-wrapper {
height: 150px;
.col-xs-4 {
text-align: center;
label {
border-bottom: 5px solid #ec0160;
font-weight: 300;
}
p {
font-size: 54px;
font-weight: 300;
font-family: 'Quicksand';
color: #ec0160;
}
}
}
}
.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;
font-weight: 300;
}
.post-show-wrapper {
......
app/assets/stylesheets/lib/mod-md-editor.css.scss
......@@ -16,7 +16,7 @@
.mod-mdEditor-textarea {
width: 100%;
min-height: 400px;
font-size: 9pt;
font-size: 12pt;
padding: 3px;
tab-size: 2;
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;
.odometer {
position: relative;
bottom: 2px;
}
h1 {
color: #fff;
small {
color: #f8f8f8;
}
}
.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/stock_controller.rb
class StockController < ApplicationController
def show
end
end
app/views/flow/show.html.slim
/! view:flow/show
.row.flow-wrapper
.numbers-wrapper
.col-xs-4
label.numbers Stocks
p = Post.count
.col-xs-4
label.numbers Users
p = User.count
.col-xs-4
label.numbers Tags
p = Tag.count
.col-xs-8 role="navigation"
.panel
.panel-heading
......
app/views/posts/_form.html.slim
......@@ -22,13 +22,6 @@
= hidden_field :post, :tags, class: 'mod-mdEditor-tags', style: 'width:300px', value: @post.tags.map{ |_tag| _tag.name }.join(',')
.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/
......@@ -57,11 +50,22 @@
/ i.fa.fa-link
.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
.box-text
.text-box.body.viewer.github.mod-mdEditor-preview
.panel.preview-wrapper
.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" /
......
app/views/stock/show.html.slim
/! view:stock/show
.row
h1
| Stock
small - 保存・蓄積された記事
#sidebar.col-xs-12 role="navigation"
#tab-tree.tab-pane
- cache('tag-tree', :expires_in => 1.hour) do
.list-group
= Tag.posts_exist.decorate.tree_view
.col-md-12
.panel.stock-wrapper
.panel-heading
h1
| &nbsp;Stocks
small - 保存・蓄積された記事
.panel-body
#sidebar role="navigation"
#tab-tree.tab-pane
- cache('tag-tree', :expires_in => 1.hour) do
.list-group
= Tag.posts_exist.decorate.tree_view
app/views/templates/show.html.slim
......@@ -5,7 +5,7 @@
| Templates
small - テンプレートから作成
.panel.panel-info
.panel.template-wrapper
.panel-heading
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