Permalink
Browse files

add アイコンの追加

  • Loading branch information...
motikan2010 committed Jun 30, 2018
1 parent e5f8ac4 commit 714a89f5de7c3e63d3fa7d242dbb203034857c46
@@ -1,5 +1,5 @@
$(document).ready ->
$('.message-div').scrollTop($('.message-div')[0].scrollHeight);
$('.message-div > div').scrollTop($('.message-div > div')[0].scrollHeight);
messages = $('#messages')
App.room = App.cable.subscriptions.create { channel: "RoomChannel", room_id: messages.data('room_id') },
connected: ->
@@ -14,14 +14,15 @@ $(document).ready ->
received: (data) ->
$('#messages').append(data['message'])
# コメント欄末尾にスクロール
$(".message-div").scrollTop($(".message-div")[0].scrollHeight);
$(".message-div > div").scrollTop($(".message-div > div")[0].scrollHeight);
# コメントの送信 Enter
$(document).on 'keypress', '[data-behavior~=room_speaker]', (event) ->
if (event.keyCode is 13) and (event.target.value isnt '')
App.room.speak(event.target.value, $('#room_id').val())
event.target.value = ''
event.preventDefault()
$(document).on 'keypress', '[data-behavior~=room_message]', (event) ->
if event.keyCode is 13
if event.target.value isnt ''
App.room.speak(event.target.value, $('#room_id').val())
event.target.value = ''
event.preventDefault()
# コメントの送信 ボタン
$('#comment_send').on 'click', () ->
@@ -44,7 +44,6 @@ function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player('video',
{
width: 640,
height: 390,
videoId: videoList[videoIndex]['id'],
events: {
'onReady': onPlayerReady,
@@ -12,8 +12,13 @@
*
*= require_tree .
*= require_self
*= require_tree ../../../vendor/assets/.
*/
html, body {
font-family:"ヒラギノ角ゴ Pro W3", メイリオ, Osaka, Arial, Verdana, "MS Pゴシック", sans-serif !important;
}
a {
text-decoration: none !important;;
text-decoration: none !important;
}
@@ -23,6 +23,10 @@
}
// メッセージエリア
.message-div {
margin-left: 0 !important;
padding-left: 0 !important;
}
.scrollbar-ripe::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
@@ -43,8 +47,38 @@
width: 6px;
}
.message-div {
.video-div {
margin-right: 0 !important;
padding-right: 0 !important;
}
.message-div > div {
position: relative;
overflow-y: scroll;
height: 390px;
height: 365px;
}
.error-msg {
color: #f00;
}
.message-hr {
margin: 0;
padding: 0;
}
.message-body {
margin: 0;
padding: 0;
font-size: 0.8rem;
}
.message-date {
margin: 0;
padding: 0;
font-size: 0.5rem;
}
footer {
bottom: 0;
font-size: 0.8rem;
}
@@ -8,8 +8,14 @@ module Service::VideoService
# ビデオの検索
def search_video(params)
tag = Tag.where(:name => params[:t]).first
tag.videos
if params[:t]
# タグ検索
tag = Tag.where(:name => params[:t]).first
tag.videos
elsif params[:k]
# キーワード検索
Video.where('title LIKE(?)', "%#{params[:k]}%")
end
end
# ビデオの新規登録
@@ -3,9 +3,10 @@ class VideoRailsController < ApplicationController
include Service::VideoService
def index
if params[:t]
if params[:t] || params[:k]
videos = search_video(params)
rail_id_list = videos.map{|v| v.video_rail_id}
p rail_id_list
@video_rails = VideoRail.where(:id => rail_id_list)
else
@video_rails = VideoRail.all
@@ -19,6 +20,7 @@ def index
@video_list_info[video.video_rail_id] = {:title => video.title, :thumbnail => video.thumbnail}
}
@search_word = params[:k]
end
def show
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>TechVideos</title>
<title>生つべ</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
@@ -12,24 +12,25 @@
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="/">Tech TV</a>
<a class="navbar-brand" href="/">生つべ</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/videos">Video List<span class="sr-only">(current)</span></a>
<a class="nav-link" href="/videos">動画<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/videos/new">Register</a>
<a class="nav-link" href="/videos/new">登録</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse justify-content-md-center">
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-md-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
<!-- 検索フォーム -->
<form class="form-inline mt-2 mt-md-0" action="/videos">
<input class="form-control mr-md-2" type="text" placeholder="Search" aria-label="Search" name="k" value="<%= @search_word %>">
<button class="btn btn-success my-2 my-sm-0" type="submit"><span class="oi oi-magnifying-glass"></span></button>
</form>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
@@ -38,13 +39,13 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><%= current_user.nickname %></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/mypage">My Page</a>
<a class="dropdown-item" href="/logout">Logout</a>
<a class="dropdown-item" href="/mypage">マイページ</a>
<a class="dropdown-item" href="/logout">ログアウト</a>
</div>
</li>
</ul>
<% else %>
<a class="btn btn-sm btn-outline-info" href="/login">Sign up</a>
<a class="btn btn-sm btn-outline-info" href="/login">ログイン</a>
<% end %>
</div>
</div>
@@ -55,37 +56,8 @@
<%= yield %>
</main>
<footer class="container py-5">
<div class="row">
<div class="col-12 col-md">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
<small class="d-block mb-3 text-muted">&copy; 2017-2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Business</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
</ul>
</div>
</div>
<footer class="container text-center">
<p class="text-muted">&copy; <a href="https://twitter.com/motikan2010" target="_blank">@motikan2010</a> 2018-</p>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
@@ -1,5 +1,9 @@
<div class="message">
<hr/>
<span><%= message.content %></span><br/>
<small><%= message.created_at %></small>
<div>
<p class="message-body"><%= message.content %></p>
</div>
<div class="text-right">
<span class="message-date"><%= message.created_at.strftime('%m/%d %H:%M') %></span>
</div>
<hr class="message-hr"/>
</div>
@@ -11,19 +11,19 @@
</div>
</div>
</div>
<!-- 動画 エリア -->
<div class="row row-eq-height">
<div class="col-md-7 offset-md-1">
<!-- 動画 エリア -->
<div class="col-md-7 offset-md-1 video-div">
<% @videos.each do |video| %>
<div class="video-list" data-youtube-id="<%= video.youtube_id %>" data-play-time="<%= video.play_time %>"></div>
<% end %>
<div class="embed-responsive embed-responsive-16by9">
<div id="video"></div>
</div>
</div>
<div class="col-md-3">
<div class="card message-div scrollbar-ripe">
<!-- コメント表示 エリア -->
<div class="col-md-3 message-div">
<div class="card scrollbar-ripe">
<div id="messages" class="card-body" data-room_id="<%= @videos.first.video_rail_id %>">
<%= render @messages %>
</div>
@@ -32,18 +32,21 @@
</div>
<!-- コメント入力 エリア -->
<div class="row">
<div class="col-md-7 offset-md-1 py-1">
<% if logged_in? %>
<form class="form-inline col-md-12">
<div class="col-md-7 offset-md-1 py-2">
<form class="form-inline">
<div class="new-post col-md-12">
<input id="comment" name="content" class="form-control" data-behavior="room_speaker"/>
<button id="comment_send" type="button" class="btn btn-primary">送信</button>
<%= hidden_field_tag 'room_id', @videos.first.video_rail_id, {:id => 'room_id'} %>
<div class="form-group">
<% if logged_in? %>
<input type="text" id="comment" name="content" class="form-control col-md-10" data-behavior="room_message"/>
<button id="comment_send" type="button" class="btn btn-primary col-md-2">送信</button>
<%= hidden_field_tag 'room_id', @videos.first.video_rail_id, {:id => 'room_id'} %>
<% else %>
<input id="comment" class="form-control col-md-10" value="コメントを投稿するにはログインする必要があります" disabled="disabled"/>
<button id="comment_send" type="button" class="btn btn-primary col-md-2" disabled="disabled">送信</button>
<% end %>
</div>
</div>
</form>
<% else %>
<% end %>
</div>
</div>
</div>
@@ -64,8 +64,9 @@ class App extends React.Component {
let urlInputList = this.state.videoUrlList.map((videoUrl, i) => {
return (
<div key={i} className="form-group">
<label>{this.errorList[i]}</label>
<input type="text" className="form-control" name="video_url[]" value={videoUrl} onChange={e => this.changeVideoUrl(i, e)} placeholder="https://www.youtube.com/watch?v=XXXXXXXXXXX"/>
<label className="error-msg">{this.errorList[i]}</label>
<input type="text" className="form-control" name="video_url[]" value={videoUrl}
onChange={e => this.changeVideoUrl(i, e)} placeholder="https://www.youtube.com/watch?v=XXXXXXXXXXX"/>
</div>
)
});
Binary file not shown.
Binary file not shown.
Oops, something went wrong.

0 comments on commit 714a89f

Please sign in to comment.