Skip to content

R
rendezvous
Commit 841659f2 by tady
Options

Merge pull request #109 from tadyjp/kitakuni/design 

[WIP]デザインの変更
parents c964c9cc c9770264
Showing with 495 additions and 72 deletions
app/assets/stylesheets/_values.css.scss 0 → 100644
@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;
@mixin background_color($bg_value: $main-color) {
background-color: $bg_value;
color: #fff;
}
@mixin border_radius($br_value: 4px) {
@each $prefix in $set_prefix {
#{$prefix}border-radius: $br_value
}
}
@mixin transition($transition_value: 0.3s, $move_type: ease-in-out) {
@each $prefix in $set_prefix {
#{$prefix}transition: all $transition_value $move_type
}
}
app/assets/stylesheets/basic.css.scss 0 → 100644
@import 'values';
@import url(http://fonts.googleapis.com/css?family=Flamenco:300,400);
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
p, h1, h2, h3, h4, h5, h6, span {
font-family: 'メイリオ', 'meiryo', hiragino kaku go;
letter-spacing: 2pt;
line-height: 150%;
margin: 0;
padding: 0;
}
.badge {
background-color: transparent;
color: $main-color;
font-family: 'Quicksand';
font-weight: 300;
letter-spacing: 0;
border: 1px solid $main-color;
padding: 4px 6px;
}
app/assets/stylesheets/btn.css.scss 0 → 100644
$set_prefix: -webkit-, -moz-, -ms-, -o-, '';
$main-color: #75b3c8;
@mixin background_color($bg_value: $main-color) {
background-color: $bg_value;
color: #fff;
}
@mixin border_radius($br_value: 4px) {
@each $prefix in $set_prefix {
#{$prefix}border-radius: $br_value
}
}
@mixin transition($transition_value: 0.3s, $move_type: ease-in-out) {
@each $prefix in $set_prefix {
#{$prefix}transition: all $transition_value $move_type
}
}
@import url(http://fonts.googleapis.com/css?family=Flamenco:300,400);
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
.btn-original {
background: transparent!important;
border: 1px solid #fff;
font-family: 'Quicksand', sans-serif;
font-weight: 300;
font-size: 24px;
letter-spacing: 0em;
&:hover {
border: 1px solid #75b3c8;
background-color: #75b3c8!important;
@include transition;
}
}
app/assets/stylesheets/flow.css.scss 0 → 100644
@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
// Place all the styles related to the templates controller here. // Place all the styles related to the templates controller here.
// They will automatically be included in application.css. // They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/ // You can use Sass (SCSS) here: http://sass-lang.com/
/*************************************************************************
* app_header
*************************************************************************/
@import 'values';
@import url(http://fonts.googleapis.com/css?family=Flamenco:300,400);
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
$main-color: #75b3c8;
.navbar-original {
background-color: $main-color!important;
background-image: none!important;
li:hover {
cursor: pointer;
a {
color: $main-color;
}
}
li.new-post-btn:hover {
background-color: $main-color;
a {
color: #fff;
}
}
a {
color: #fff;
font-family: 'Quciksand', 'meiryo', 'メイリオ','sans-serif';
letter-spacing: .1em;
font-weight: 300;
@include transition;
}
.input-group {
input {
border: 1px solid transparent;
box-shadow: none;
}
button {
background-color: #fff;
border: 1px solid #fff;
.search {
width: 20px;
&:hover {
opacity: .7;
@include transition;
}
}
}
}
.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 {
position: relative;
background-color: #fafafa;
color: $main-color;
vertical-align: middle;
&:hover {
background-color: #ddd;
@include transition;
}
}
.write {
width: 17px;
vertical-align: middle;
position: relative;
bottom: 1px;
}
}
}
.badge {
background-color: transparent;
color: #fff;
font-family: 'Quicksand';
font-weight: 300;
letter-spacing: 0;
border: 1px solid #fff;
padding: 4px 6px;
margin-left: 5px;
}
}
app/assets/stylesheets/welcome.css.scss 0 → 100644
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
$main-color: #75b3c8;
.background-image {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-image: image-url("compass.jpg");
background-size: cover;
}
.background-mask {
width: 100%;
height: 100%;
background-color: rgba(#000, .6);
position: fixed;
top: 0;
left: 0;
}
.login {
.container.marketing {
h2.title {
font-family: 'Quicksand', sans-serif;
font-weight: 300;
font-size: 62px;
color: #fff;
}
p {
color: #fff;
}
}
.welcome-box {
text-align: center;
.btn-original {
margin-top: 140px;
}
.zigexn {
margin-top: 20px;
}
}
.featurette {
.featurette-heading {
margin-top: 0;
color: #ddd;
line-height: 150%;
font-family: 'Quicksand','メイリオ', 'meiryo', hiragino kaku go;
}
.text-muted {
color: #ccc;
font-family: 'Quicksand','メイリオ', 'meiryo', hiragino kaku go;
}
.featurette-image {
box-shadow: 1px 1px 1px #ccc;
border-radius: 5px;
}
}
}
app/views/flow/show.html.slim
/! view:flow/show /! view:flow/show
.row .row.flow-wrapper
h1
| Flow
small - 最近投稿された記事
.col-xs-8 role="navigation" .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) = paginate(@posts)
.col-xs-4 .col-xs-4
...@@ -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
nav.navbar.navbar-default.navbar-fixed-top role="navigation" nav.navbar.navbar-fixed-top.navbar-original role="navigation"
.container .container
.navbar-header .navbar-header
...@@ -9,17 +9,20 @@ nav.navbar.navbar-default.navbar-fixed-top role="navigation" ...@@ -9,17 +9,20 @@ nav.navbar.navbar-default.navbar-fixed-top role="navigation"
.input-group .input-group
input.form-control name="q" placeholder="Search" type="text" value=params[:q] / input.form-control name="q" placeholder="Search" type="text" value=params[:q] /
span.input-group-btn span.input-group-btn
button.btn.btn-default data-disable-with="Searching..." type="submit" button.btn data-disable-with="Searching..." type="submit"
span.glyphicon.glyphicon-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
...@@ -28,11 +31,11 @@ nav.navbar.navbar-default.navbar-fixed-top role="navigation" ...@@ -28,11 +31,11 @@ nav.navbar.navbar-default.navbar-fixed-top role="navigation"
span.glyphicon.glyphicon-flag span.glyphicon.glyphicon-flag
- if current_user.notifications.unread.any? - if current_user.notifications.unread.any?
span.badge = current_user.notifications.unread.count span.badge = current_user.notifications.unread.count
li li.new-post-btn
form form
a.btn.btn-primary.navbar-btn href=new_post_path a.btn.navbar-btn href=new_post_path
| New Post   | 投稿する
span.glyphicon.glyphicon-pencil = image_tag 'write.png', class: "write"
li.dropdown li.dropdown
a.dropdown-toggle data-toggle="dropdown" a.dropdown-toggle data-toggle="dropdown"
= current_user.name = current_user.name
......
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,30 +72,33 @@ ...@@ -72,30 +72,33 @@
= @post.comments.count = @post.comments.count
.row .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 /! Button trigger modal
/! /!
......
app/views/welcome/login.html.slim
/! view:welcome/login /! view:welcome/login
.background-image
.background-mask
.login .login
.container.marketing .container.marketing
.row style=("margin-top: 40px") .row style=("margin-top: 40px")
.col-lg-4 .col-lg-12.welcome-box
.col-lg-4 h2.title Rendezvous
img.img-circle alt=("Generic placeholder image") src="http://placehold.it/140x140&amp;text=Rendezvous" /
h2 Rendezvous
p p
| Rendezvousはチームの`Stock`と`Flow`の | RendezvousはチームのStockとFlowの
br>/
| 2種類の情報を蓄積・検索・共有する | 2種類の情報を蓄積・検索・共有する
br>/
| オープンソースのソフトウェアです。 | オープンソースのソフトウェアです。
p p
a.btn.btn-lg.btn-primary href=user_omniauth_authorize_path(:google_oauth2) role="button" Sign up with Google a.btn.btn-lg.btn-primary.btn-original href=user_omniauth_authorize_path(:google_oauth2) role="button" Sign up with Google
.col-lg-4 p.zigexn powerd by ZIGExN
hr.featurette-divider/ hr.featurette-divider/
.row.featurette .row.featurette
.col-md-7 .col-md-7
h2.featurette-heading h2.featurette-heading
| Stock all you have done. | Stock all you have done.
span.text-muted It may be priceless for others. span.text-muted It may be priceless for others.
p.lead Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
.col-md-5 .col-md-5
img.featurette-image.img-responsive alt="Stock" src="http://placehold.it/500x400&amp;text=Stock" / = image_tag "font.jpg", class: "featurette-image img-responsive"
hr.featurette-divider/ hr.featurette-divider/
.row.featurette .row.featurette
.col-md-5 .col-md-5
img.featurette-image.img-responsive alt="Flow" src="http://placehold.it/500x400&amp;text=Flow" / = image_tag "paper.jpg", class: "featurette-image img-responsive"
.col-md-7 .col-md-7
h2.featurette-heading h2.featurette-heading
| Flow anything member have come up with. | Flow anything member have come up with.
span.text-muted Which accelerate your PDCA. span.text-muted Which accelerate your PDCA.
p.lead Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
hr.featurette-divider/ hr.featurette-divider/
.row.featurette .row.featurette
.col-md-7 .col-md-7
h2.featurette-heading h2.featurette-heading
| Collaborate with other team on documents. | Collaborate with other team on documents.
span.text-muted Making more and more generic plans. span.text-muted Making more and more generic plans.
p.lead Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
.col-md-5 .col-md-5
img.featurette-image.img-responsive alt="Collaboration" src="http://placehold.it/500x400&amp;text=Collaboration" / = image_tag "pc.jpg", class: "featurette-image img-responsive"
hr.featurette-divider/ hr.featurette-divider/
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