Commit dcd1f56a by tady

flow design

parent 0bf532c9
......@@ -23,7 +23,7 @@ gem 'therubyracer', platforms: :ruby
# gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
# gem 'jbuilder'
gem 'jbuilder'
gem 'i18n_generators'
......@@ -97,6 +97,8 @@ group :development, :test do
gem 'dotenv-rails'
gem 'rubocop'
gem 'quiet_assets'
end
group :test do
......
......@@ -206,6 +206,9 @@ GEM
i18n_generators (1.2.1)
mechanize
rails (>= 3.0.0)
jbuilder (2.2.4)
activesupport (>= 3.0.0, < 5)
multi_json (~> 1.2)
jquery-rails (3.1.2)
railties (>= 3.0, < 5.0)
thor (>= 0.14, < 2.0)
......@@ -248,7 +251,7 @@ GEM
net-ssh (2.9.1)
netrc (0.8.0)
newrelic_rpm (3.9.6.257)
nokogiri (1.6.4)
nokogiri (1.6.4.1)
mini_portile (~> 0.6.0)
ntlm-http (0.1.1)
oauth (0.4.7)
......@@ -294,6 +297,8 @@ GEM
pusher-client (0.6.0)
json
websocket (~> 1.0)
quiet_assets (1.0.3)
railties (>= 3.1, < 5.0)
rack (1.5.2)
rack-contrib (1.2.0)
rack (>= 0.9.1)
......@@ -331,7 +336,7 @@ GEM
json (~> 1.4)
ref (1.0.5)
request_store (1.1.0)
responders (1.1.1)
responders (1.1.2)
railties (>= 3.2, < 4.2)
rest-client (1.7.2)
mime-types (>= 1.16, < 3.0)
......@@ -357,9 +362,9 @@ GEM
rspec-mocks (~> 3.1.0)
rspec-support (~> 3.1.0)
rspec-support (3.1.2)
rubocop (0.27.0)
rubocop (0.27.1)
astrolabe (~> 1.3)
parser (>= 2.2.0.pre.6, < 3.0)
parser (>= 2.2.0.pre.7, < 3.0)
powerpack (~> 0.0.6)
rainbow (>= 1.99.1, < 3.0)
ruby-progressbar (~> 1.4)
......@@ -480,6 +485,7 @@ DEPENDENCIES
guard-teaspoon
hipchat
i18n_generators
jbuilder
jquery-rails
jwt (= 0.1.11)
kaminari!
......@@ -493,6 +499,7 @@ DEPENDENCIES
poltergeist
premailer
pry-rails
quiet_assets
rack-contrib
rack-mini-profiler
rails (~> 4.1)
......
$ ->
# 上部の検索フォームのアニメーション
$('#app-search-form input')
.on 'focus', ->
$(this).parents('#app-search-form').animate({width: '400px'})
.on 'blur', ->
$(this).parents('#app-search-form').animate({width: '200px'})
# # 上部の検索フォームのアニメーション
# $('#app-search-form input')
# .on 'focus', ->
# $(this).parents('#app-search-form').animate({width: '400px'})
# .on 'blur', ->
# $(this).parents('#app-search-form').animate({width: '200px'})
# コードハイライト
# TODO
......
......@@ -12,9 +12,9 @@
// color: white;
}
#app-search-form {
width: 200px;
}
// #app-search-form {
// width: 200px;
// }
.container-main{
min-height: 400px;
......
@import 'values';
.panel {
border: 1px solid $main-color;
.panel-heading {
background-color: $main-color;
color: #fff;
}
.panel-body {
.list-group-item {
&:hover {
@include transition;
}
}
}
}
// @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;
}
.numbers-wrapper {
height: 150px;
.col-xs-4 {
// .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;
// }
// .numbers-wrapper {
// height: 150px;
// text-align: center;
// font-family: 'Quicksand';
// .large {
// font-size: 3em;
// font-weight: 300;
// color: #ec0160;
// }
// label {
// border-top: 5px solid #ec0160;
// font-weight: 500;
// }
// }
// }
.numbers-wrapper {
height: 100px;
text-align: center;
label {
border-bottom: 5px solid #ec0160;
font-weight: 300;
}
p {
font-size: 54px;
font-weight: 300;
font-family: 'Quicksand';
.large {
font-size: 3em;
font-weight: 300;
color: #ec0160;
}
}
label {
border-top: 5px solid #ec0160;
font-weight: 500;
}
}
.label-date {
background-color: #aaa;
padding-top: 3px;
font-family: 'Quicksand';
}
// .label-date {
// background-color: #aaa;
// padding-top: 3px;
// font-family: 'Quicksand';
// }
.label-tag {
// background-color: #e67e22;
padding-top: 4px;
// font-weight: 300;
background-color: transparent;
color: #75b3c8;
border: 1.5px solid #75b3c8;
padding: 4px 6px;
@include border_radius(20px);
}
// .label-tag {
// // background-color: #e67e22;
// padding-top: 4px;
// // font-weight: 300;
// background-color: transparent;
// color: #75b3c8;
// border: 1.5px solid #75b3c8;
// padding: 4px 6px;
// @include border_radius(20px);
// }
.post-show-wrapper {
margin-top: 40px;
}
// .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;
}
}
}
// .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;
}
// .watch-btn {
// height: 36px;
// }
.btn-watched {
background-color: $main-color;
color: #fff;
border: 2px solid $main-color;
}
// .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;
// }
}
// .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;
}
}
}
// .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;
}
}
// .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;
}
}
// .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;
}
}
// .fc-event-inner {
// padding: 5px;
// span {
// width: 85px;
// }
// &:HOVER {
// background-color: #f8f8f8;
// @include transition;
// }
// }
......@@ -21,19 +21,19 @@
}
}
.stock-wrapper {
margin-top: 15px;
.odometer {
position: relative;
bottom: 2px;
}
h1 {
color: #fff;
small {
color: #f8f8f8;
}
}
.list-group {
box-shadow: 0 0 0 #fff;
}
}
// .stock-wrapper {
// margin-top: 15px;
// .odometer {
// position: relative;
// bottom: 2px;
// }
// h1 {
// color: #fff;
// small {
// color: #f8f8f8;
// }
// }
// .list-group {
// box-shadow: 0 0 0 #fff;
// }
// }
@import 'values';
// 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/
.template-wrapper {
margin-top: 15px;
}
// /*************************************************************************
// * app_header
// *************************************************************************/
// @import 'values';
// @import url(https://fonts.googleapis.com/css?family=Flamenco:300,400);
// @import url(https://fonts.googleapis.com/css?family=Quicksand:300,400,700);
// $main-color: #75b3c8;
// .template-wrapper {
// margin-top: 15px;
// }
// .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;
// letter-spacing: 0;
// border: 1px solid #fff;
// padding: 4px 4px;
// margin-left: 5px;
// min-width: 20px;
// min-height: 20px;
// }
// .dropdown-menu {
// background-color: $main-color;
// a {
// color: #fff;
// }
// }
// }
// 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(https://fonts.googleapis.com/css?family=Flamenco:300,400);
@import url(https://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;
letter-spacing: 0;
border: 1px solid #fff;
padding: 4px 4px;
margin-left: 5px;
min-width: 20px;
min-height: 20px;
}
}
......@@ -12,4 +12,9 @@
class Footprint < ActiveRecord::Base
belongs_to :user
belongs_to :post
######################################################################
# Named scope
######################################################################
scope :today, -> { where(arel_table[:created_at].gt 1.days.ago) }
end
......@@ -82,6 +82,22 @@ class Post < ActiveRecord::Base
order(updated_at: :desc).limit(limit)
end)
scope :today, -> { where(arel_table[:updated_at].gt 1.day.ago) }
######################################################################
# Class method
######################################################################
def self.most_pv_in_this_week(limit)
posts_with_footprints = where(arel_table[:created_at].gt 1.week.ago).
select("posts.id, count(footprints.id) AS footprints_count").
joins(:footprints).
group("posts.id").
order("footprints_count DESC").
limit(limit)
posts = self.find(posts_with_footprints.map(&:id))
posts.to_a.zip posts_with_footprints.map(&:footprints_count)
end
######################################################################
# Instance method
######################################################################
......
......@@ -54,6 +54,11 @@ class User < ActiveRecord::Base
where('name LIKE ? OR nickname LIKE ?', "%#{query}%", "%#{query}%")
end)
scope :post_today, -> { joins(:posts).where('posts.updated_at > ?', 1.day.ago) }
scope :now_viewing, -> { joins(:footprints).where('footprints.updated_at > ?', 10.minutes.ago) }
######################################################################
# Validations
######################################################################
......
/! view:flow/show
.row.flow-wrapper
.col-xs-3
.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"
div
span.large = Post.today.count
span = "/ #{Post.count}"
label.numbers Today's Stocks
.col-xs-3
.numbers-wrapper
div
span.large = User.post_today.count
span = "/ #{User.count}"
label.numbers Today's Writers
.col-xs-3
.numbers-wrapper
div
span.large = Footprint.today.count
span = "/ #{Footprint.count}"
label.numbers Today's PVs
.col-xs-3
.numbers-wrapper
div
span.large = User.now_viewing.count
label.numbers Now Viewing
.col-xs-12.col-md-8 role="navigation"
.panel
.panel-heading
h1
......@@ -23,13 +37,23 @@
= render partial: 'posts/large_item', locals: { post: _post }
= paginate(@posts)
.col-xs-4
/ .panel.panel-default
/ .panel-heading
/ h2.panel-title この1週間で閲覧の多かった投稿(調整中)
/ .panel-body.list-group
/ - Post.limit(5).each do |_post|
/ = render partial: 'posts/small_item', locals: { post: _post }
.col-xs-12.col-md-4
.panel
.panel-heading
h2.panel-title この1週間で閲覧の多かった投稿
.panel-body.list-group
- Post.most_pv_in_this_week(5).each do |(post, footprints_count)|
a.list-group-item.post-list href=post_path(post)
span.label.label-default.pull-right = "#{footprints_count} PV"
= post.title
.panel
.panel-heading
h2.panel-title 最近あなたが投稿した記事
.panel-body.list-group
- current_user.posts.recent(10).each do |post|
= render partial: 'posts/small_item', locals: { post: post.decorate }
a.list-group-item href=search_path(q: "@#{current_user.nickname}") もっと見る
.panel
.panel-heading
......
......@@ -4,8 +4,8 @@ html lang="ja"
head
title Rendezvous
meta content="width=device-width, initial-scale=1.0" name="viewport" /
link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /
link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" /
link href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" /
link href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" /
link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css" rel="stylesheet" /
link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css" rel="stylesheet" /
link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"
......@@ -15,18 +15,18 @@ html lang="ja"
= stylesheet_link_tag "application", media: "all"
= render_style
= csrf_meta_tags
body class="rails-#{params[:controller]}-#{params[:action]}"
body class="rails-#{params[:controller]}-#{params[:action]}"
.body-padding
= render partial: 'partials/header_notifications'
- if params[:controller] != 'welcome'
= render partial: 'partials/app_header'
.container.container-main#yield
.container-fluid.container-main#yield
= yield
script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"
script src="//cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.3/underscore.string.min.js"
script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"
script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"
script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"
script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"
javascript:
......
nav.navbar.navbar-fixed-top.navbar-original role="navigation"
.container
nav.navbar.navbar-fixed-top.navbar-default.navbar-original role="navigation"
.container-fluid
.navbar-header
button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand href=root_path Rendezvous
.collapse.navbar-collapse
.collapse.navbar-collapse#bs-example-navbar-collapse-1
form#app-search-form.navbar-form.navbar-left action=search_path role="search"
.input-group
.form-group
input.form-control name="q" placeholder="Search" type="text" value=params[:q] /
span.input-group-btn
button.btn data-disable-with="Searching..." type="submit"
= image_tag 'search.png', class: 'search'
ul.nav.navbar-nav
li.stock class=('active' if current_page?(flow_path))
a href=flow_path title="Flow"
/ = image_tag "flow.png", class: 'nav-icon flow'
| Flow
li.stock class=('active' if current_page?(stock_path))
a href=stock_path title="Stock"
= image_tag "stock.png", class: 'nav-icon stock'
/ = image_tag "stock.png", class: 'nav-icon stock'
| Stock
li.flow class=('active' if current_page?(flow_path))
a href=flow_path title="Frow"
= image_tag "flow.png", class: 'nav-icon'
| Flow
li.template class=('active' if current_page?(templates_path))
a href=templates_path title="Templates"
= image_tag "template.png", class: 'nav-icon'
/ = image_tag "template.png", class: 'nav-icon'
| Templates
ul.nav.navbar-nav.navbar-right
li
a#notifications data-container="body" data-toggle="popover" data-placement="bottom"
span.glyphicon.glyphicon-flag
| &nbsp;
- if current_user.notifications.unread.any?
span.badge = current_user.notifications.unread.recent.count
- unless params[:action] == 'new' && params[:controller] == 'posts'
li.new-post-btn
form
a.btn.navbar-btn href=new_post_path
a.btn.btn-default.navbar-btn href=new_post_path
| 投稿する
= image_tag 'write.png', class: "write"
/ = image_tag 'write.png', class: "write"
li.dropdown
a.dropdown-toggle data-toggle="dropdown"
= current_user.name
| &nbsp;
span.badge = current_user.decorate.draft_count
b.caret
ul.dropdown-menu
......
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