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.
// They will automatically be included in application.css.
// 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
.row
h1
| Flow
small - 最近投稿された記事
.row.flow-wrapper
.col-xs-8 role="navigation"
.list-group
- @posts.each do |_post|
= render partial: 'posts/large_item', locals: { post: _post }
.panel
.panel-heading
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)
.col-xs-4
......@@ -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
nav.navbar.navbar-default.navbar-fixed-top role="navigation"
nav.navbar.navbar-fixed-top.navbar-original role="navigation"
.container
.navbar-header
......@@ -9,17 +9,20 @@ nav.navbar.navbar-default.navbar-fixed-top role="navigation"
.input-group
input.form-control name="q" placeholder="Search" type="text" value=params[:q] /
span.input-group-btn
button.btn.btn-default data-disable-with="Searching..." type="submit"
span.glyphicon.glyphicon-search
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
......@@ -28,11 +31,11 @@ nav.navbar.navbar-default.navbar-fixed-top role="navigation"
span.glyphicon.glyphicon-flag
- if current_user.notifications.unread.any?
span.badge = current_user.notifications.unread.count
li
li.new-post-btn
form
a.btn.btn-primary.navbar-btn href=new_post_path
| New Post  
span.glyphicon.glyphicon-pencil
a.btn.navbar-btn href=new_post_path
| 投稿する
= image_tag 'write.png', class: "write"
li.dropdown
a.dropdown-toggle data-toggle="dropdown"
= 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
.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,30 +72,33 @@
= @post.comments.count
.row
.panel.panel-success
.panel-heading
h3.panel-title Comments
.panel-body
ul.media-list
- @post.comments.each do |comment|
li.media
a.pull-left href="#"
img.media-object src=comment.author.image_url /
.media-body
h4.media-heading= comment.author.name
= comment.body
= form_tag(comment_post_path, method: :post, data: { 'form-id' => "comment_#{@post.id}" }) do
li.media
a.pull-left href="#"
img.media-object src=current_user.image_url /
.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' => '...' }
javascript:
$("form[data-form-id='comment_#{@post.id}']").on('ajax:success', function(event, data, xhr) {
.col-md-12
.panel.comment-wrapper
.panel-heading
h3.panel-title
= image_tag 'comment_w.png'
| Comments
.panel-body
ul.media-list
- @post.comments.each do |comment|
li.media
a.pull-left href="#"
img.media-object src=comment.author.image_url /
.media-body
h4.media-heading= comment.author.name
= comment.body
= form_tag(comment_post_path, method: :post, data: { 'form-id' => "comment_#{@post.id}" }) do
li.media
a.pull-left href="#"
img.media-object src=current_user.image_url /
.media-body
h4.media-heading= current_user.name
= 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
/!
......
app/views/welcome/login.html.slim
/! view:welcome/login
.background-image
.background-mask
.login
.container.marketing
.row style=("margin-top: 40px")
.col-lg-4
.col-lg-4
img.img-circle alt=("Generic placeholder image") src="http://placehold.it/140x140&amp;text=Rendezvous" /
h2 Rendezvous
.col-lg-12.welcome-box
h2.title Rendezvous
p
| Rendezvousはチームの`Stock`と`Flow`の
br>/
| RendezvousはチームのStockとFlowの
| 2種類の情報を蓄積・検索・共有する
br>/
| オープンソースのソフトウェアです。
p
a.btn.btn-lg.btn-primary href=user_omniauth_authorize_path(:google_oauth2) role="button" Sign up with Google
.col-lg-4
a.btn.btn-lg.btn-primary.btn-original href=user_omniauth_authorize_path(:google_oauth2) role="button" Sign up with Google
p.zigexn powerd by ZIGExN
hr.featurette-divider/
.row.featurette
.col-md-7
h2.featurette-heading
| Stock all you have done.
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.
span.text-muted It may be priceless for others.
.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/
.row.featurette
.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
h2.featurette-heading
| Flow anything member have come up with.
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.
span.text-muted Which accelerate your PDCA.
hr.featurette-divider/
.row.featurette
.col-md-7
h2.featurette-heading
| Collaborate with other team on documents.
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.
span.text-muted Making more and more generic plans.
.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/
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