Commit dd55e8f9f6a9a8a7ed600ee0739959bd79d48d03
1 parent
88b5a9ba
Exists in
master
and in
2 other branches
User login page. Menu in partial. CSS tweaks
Showing
11 changed files
with
76 additions
and
252 deletions
Show diff stats
app/assets/stylesheets/application.css.scss
| ... | ... | @@ -13,68 +13,34 @@ |
| 13 | 13 | *= require 'bootstrap' |
| 14 | 14 | *= require 'bootstrap_overrides' |
| 15 | 15 | *= require 'v_libras/videos' |
| 16 | + *= require 'components/ribbon' | |
| 17 | + *= require 'components/video_player' | |
| 16 | 18 | *= require_self |
| 17 | 19 | */ |
| 18 | 20 | |
| 21 | +.login { | |
| 22 | + padding: 3% 4%; | |
| 23 | + text-align: center; | |
| 19 | 24 | |
| 20 | -.ribbon-wrapper-green { | |
| 21 | - margin: 10px auto; | |
| 22 | - width: 203px; | |
| 23 | - height: 144px; | |
| 24 | - overflow: hidden; | |
| 25 | - top: -3px; | |
| 26 | - right: -3px; | |
| 27 | - | |
| 28 | - padding-top: 3px; | |
| 29 | -} | |
| 25 | + -moz-box-shadow: 0 0 5px 5px #888; | |
| 26 | + -webkit-box-shadow: 0 0 5px 5px #888; | |
| 27 | + box-shadow: 0 0 5px 5px #888; | |
| 30 | 28 | |
| 31 | -.ribbon-content img { | |
| 32 | - border-radius: 3px; | |
| 33 | - -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
| 34 | - -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
| 35 | - box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); | |
| 36 | -} | |
| 29 | + h2 { | |
| 30 | + color :#000; | |
| 31 | + text-align: center; | |
| 32 | + margin-bottom: 20px; | |
| 37 | 33 | |
| 38 | -.ribbon-green { | |
| 39 | - font: bold 15px Sans-Serif; | |
| 40 | - color: #333; | |
| 41 | - text-align: center; | |
| 42 | - text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; | |
| 43 | - -webkit-transform: rotate(45deg); | |
| 44 | - -moz-transform: rotate(45deg); | |
| 45 | - -ms-transform: rotate(45deg); | |
| 46 | - -o-transform: rotate(45deg); | |
| 47 | - position: relative; | |
| 48 | - padding: 5px 0; | |
| 49 | - left: 118px; | |
| 50 | - bottom: 124px; | |
| 51 | - width: 110px; | |
| 52 | - background-color: #BFDC7A; | |
| 53 | - background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); | |
| 54 | - background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); | |
| 55 | - background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); | |
| 56 | - background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); | |
| 57 | - background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); | |
| 58 | - color: #6a6340; | |
| 59 | - -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); | |
| 60 | - -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); | |
| 61 | - box-shadow: 0px 0px 3px rgba(0,0,0,0.3); | |
| 62 | -} | |
| 63 | - | |
| 64 | -.ribbon-green:before, .ribbon-green:after { | |
| 65 | - content: ""; | |
| 66 | - border-top: 3px solid #6e8900; | |
| 67 | - border-left: 3px solid transparent; | |
| 68 | - border-right: 3px solid transparent; | |
| 69 | - position:absolute; | |
| 70 | - bottom: -3px; | |
| 71 | -} | |
| 34 | + -moz-box-shadow: 0 0 5px 5px #CCC; | |
| 35 | + -webkit-box-shadow: 0 0 5px 5px #CCC; | |
| 36 | + box-shadow: 0 0 5px 5px #CCC; | |
| 37 | + } | |
| 72 | 38 | |
| 73 | -.ribbon-green:before { | |
| 74 | - left: 0; | |
| 75 | -} | |
| 76 | -.ribbon-green:after { | |
| 77 | - right: 0; | |
| 39 | + h3 { | |
| 40 | + text-align:center; | |
| 41 | + color:#BBB; | |
| 42 | + text-shadow: 1px 1px #AAA; | |
| 43 | + } | |
| 78 | 44 | } |
| 79 | 45 | |
| 80 | 46 | @media (max-width: 980px) { | ... | ... |
app/assets/stylesheets/bootstrap.css.less
| ... | ... | @@ -19,19 +19,15 @@ body { |
| 19 | 19 | @linkColorHover: darken(@linkColor, 15%); |
| 20 | 20 | |
| 21 | 21 | footer { |
| 22 | + margin-top: 20px; | |
| 22 | 23 | background-color: #d6d6d6; |
| 23 | 24 | text-align:center; |
| 24 | - padding:2%; | |
| 25 | + padding: 2%; | |
| 25 | 26 | -moz-box-shadow: 10px 10px 5px #888; |
| 26 | 27 | -webkit-box-shadow: 10px 10px 5px #888; |
| 27 | 28 | box-shadow: 10px 10px 5px #888; |
| 28 | 29 | } |
| 29 | 30 | |
| 30 | -#order_chart_user{ | |
| 31 | - height:300px; | |
| 32 | - width:700px; | |
| 33 | - margin-left:150px; | |
| 34 | -} | |
| 35 | 31 | .center_box{ |
| 36 | 32 | margin-left:10%; |
| 37 | 33 | width:100%; |
| ... | ... | @@ -54,32 +50,6 @@ footer { |
| 54 | 50 | |
| 55 | 51 | } |
| 56 | 52 | |
| 57 | -.login{ | |
| 58 | - min-width:250px; | |
| 59 | - padding:5%; | |
| 60 | - margin-left:35%; | |
| 61 | - margin-right:35%; | |
| 62 | - -moz-box-shadow: 0 0 5px 5px #888; | |
| 63 | - -webkit-box-shadow: 0 0 5px 5px#888; | |
| 64 | - box-shadow: 0 0 5px 5px #888; | |
| 65 | -} | |
| 66 | - | |
| 67 | -.login h2{ | |
| 68 | - background-color:#FFF; | |
| 69 | - color:#000; | |
| 70 | - text-align:center; | |
| 71 | - margin-bottom:10px; | |
| 72 | - -moz-box-shadow: 0 0 5px 5px #CCC; | |
| 73 | - -webkit-box-shadow: 0 0 5px 5px#CCC; | |
| 74 | - box-shadow: 0 0 5px 5px #CCC; | |
| 75 | -} | |
| 76 | - | |
| 77 | -.login h3{ | |
| 78 | - text-align:center; | |
| 79 | - color:#BBB; | |
| 80 | - text-shadow: 1px 1px #AAA; | |
| 81 | -} | |
| 82 | - | |
| 83 | 53 | .upload{ |
| 84 | 54 | width: 100%; |
| 85 | 55 | height: 480px; |
| ... | ... | @@ -134,11 +104,11 @@ footer { |
| 134 | 104 | margin-top:10px; |
| 135 | 105 | } |
| 136 | 106 | |
| 137 | -.radio{ | |
| 107 | +.radio { | |
| 138 | 108 | font-size:15px; |
| 139 | 109 | } |
| 140 | 110 | |
| 141 | -label{ | |
| 111 | +label { | |
| 142 | 112 | font-size:18px; |
| 143 | 113 | } |
| 144 | 114 | |
| ... | ... | @@ -155,58 +125,6 @@ label{ |
| 155 | 125 | box-shadow: 0 0 1px 1px #888; |
| 156 | 126 | } |
| 157 | 127 | |
| 158 | -#player{ | |
| 159 | - display:block; | |
| 160 | - width:600px; | |
| 161 | - height:300px; | |
| 162 | - float:right; | |
| 163 | - | |
| 164 | - | |
| 165 | - -moz-box-shadow: 0 0 5px 5px #888; | |
| 166 | - -webkit-box-shadow: 0 0 5px 5px#888; | |
| 167 | - box-shadow: 0 0 5px 5px #888; | |
| 168 | -} | |
| 169 | - | |
| 170 | -#player2{ | |
| 171 | - display:block; | |
| 172 | - width:200px; | |
| 173 | - height:150px; | |
| 174 | - | |
| 175 | - -moz-box-shadow: 0 0 5px 5px #888; | |
| 176 | - -webkit-box-shadow: 0 0 5px 5px#888; | |
| 177 | - box-shadow: 0 0 5px 5px #888; | |
| 178 | -} | |
| 179 | - | |
| 180 | -#player3{ | |
| 181 | - display:block; | |
| 182 | - width:200px; | |
| 183 | - height:150px; | |
| 184 | - | |
| 185 | - -moz-box-shadow: 0 0 5px 5px #888; | |
| 186 | - -webkit-box-shadow: 0 0 5px 5px#888; | |
| 187 | - box-shadow: 0 0 5px 5px #888; | |
| 188 | -} | |
| 189 | - | |
| 190 | -#player4{ | |
| 191 | - display:block; | |
| 192 | - width:200px; | |
| 193 | - height:150px; | |
| 194 | - | |
| 195 | - -moz-box-shadow: 0 0 5px 5px #888; | |
| 196 | - -webkit-box-shadow: 0 0 5px 5px#888; | |
| 197 | - box-shadow: 0 0 5px 5px #888; | |
| 198 | -} | |
| 199 | - | |
| 200 | -#player5{ | |
| 201 | - display:block; | |
| 202 | - width:500px; | |
| 203 | - height:380px; | |
| 204 | - | |
| 205 | - -moz-box-shadow: 0 0 5px 5px #888; | |
| 206 | - -webkit-box-shadow: 0 0 5px 5px#888; | |
| 207 | - box-shadow: 0 0 5px 5px #888; | |
| 208 | -} | |
| 209 | - | |
| 210 | 128 | input{ |
| 211 | 129 | display: inline-block; |
| 212 | 130 | *display: inline; | ... | ... |
app/assets/stylesheets/bootstrap_overrides.css.scss
app/assets/stylesheets/v_libras/videos.css.scss
app/controllers/static_controller.rb
app/controllers/v_libras/videos_controller.rb
| ... | ... | @@ -4,7 +4,7 @@ class VLibras::VideosController < InheritedResources::Base |
| 4 | 4 | before_filter :check_vlibras_api_status, :only => [ :index, :show ] |
| 5 | 5 | before_filter :authenticate_user! |
| 6 | 6 | |
| 7 | - after_filter :mark_as_seen!, :only => [ :show ] | |
| 7 | + before_filter :mark_as_seen!, :only => [ :show ] | |
| 8 | 8 | |
| 9 | 9 | def index |
| 10 | 10 | @videos = current_user.videos |
| ... | ... | @@ -13,6 +13,7 @@ class VLibras::VideosController < InheritedResources::Base |
| 13 | 13 | |
| 14 | 14 | protected |
| 15 | 15 | def mark_as_seen! |
| 16 | + @video = VLibras::Video.find(params[:id]) | |
| 16 | 17 | @video.mark_as_seen! |
| 17 | 18 | end |
| 18 | 19 | end | ... | ... |
app/helpers/application_helper.rb
| ... | ... | @@ -47,9 +47,18 @@ module ApplicationHelper |
| 47 | 47 | end |
| 48 | 48 | |
| 49 | 49 | def custom_video_tag(video) |
| 50 | - content_tag(:video, :id => "video_#{video.id}", :class => 'video-js vjs-default skin vlibras-video', | |
| 51 | - :controls => 'controls', :preload => 'auto', :width => '100%') do | |
| 52 | - content_tag(:source, '', :src => '/video.mp4', :type => 'video/mp4') | |
| 50 | + html5_video_tag('/video.mp4', "#video_#{video.id}") | |
| 51 | + end | |
| 52 | + | |
| 53 | + def html5_video_tag(url, id, classes = nil, *args) | |
| 54 | + options = args.first || {} | |
| 55 | + options[:id] = id | |
| 56 | + options[:class] = "video-js vjs-default skin #{classes}" | |
| 57 | + options[:controls] = 'controls' | |
| 58 | + options[:preload] = 'auto' | |
| 59 | + | |
| 60 | + content_tag(:video, options) do | |
| 61 | + content_tag(:source, '', :src => url, :type => 'video/mp4') | |
| 53 | 62 | end |
| 54 | 63 | end |
| 55 | 64 | ... | ... |
app/views/devise/sessions/new.html.haml
| 1 | -%h2 Sign in | |
| 2 | -= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'form-vertical' }) do |f| | |
| 3 | - = f.input :email, :autofocus => true | |
| 4 | - = f.input :password | |
| 5 | - = f.input :remember_me, :as => :boolean if devise_mapping.rememberable? | |
| 6 | - = f.button :submit, "Sign in", :class => 'btn-primary' | |
| 7 | -= render "devise/shared/links" | |
| 1 | +.row-fluid | |
| 2 | + .span5.offset1 | |
| 3 | + = html5_video_tag('/video.mp4', 'login', 'video-instructions', :autoplay => 'autoplay') | |
| 4 | + | |
| 5 | + .span4.offset1.login | |
| 6 | + %h2 Entrar | |
| 7 | + = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'form-vertical' }) do |f| | |
| 8 | + = f.input :email, :autofocus => true | |
| 9 | + = f.input :password, :label => "Senha", :required => false | |
| 10 | + = f.input :remember_me, :label => "Lembre-me da senha", :as => :boolean if devise_mapping.rememberable? | |
| 11 | + = f.button :submit, "Entrar", :class => 'btn-primary' | |
| 12 | + = render "devise/shared/links" | |
| 13 | + | |
| 14 | + | |
| 15 | += javascript_include_tag "plugins/flowplayer-3.2.8.min" | |
| 16 | += javascript_include_tag "site/user" | |
| 8 | 17 | \ No newline at end of file | ... | ... |
app/views/layouts/application.html.erb
| ... | ... | @@ -12,83 +12,9 @@ |
| 12 | 12 | document.createElement('video');document.createElement('audio');document.createElement('track'); |
| 13 | 13 | </script> |
| 14 | 14 | </head> |
| 15 | -<body> | |
| 16 | -<div class="navbar navbar-fixed-top"> | |
| 17 | - <div class="navbar-inner"> | |
| 18 | - <div class="container"> | |
| 19 | - <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> | |
| 20 | - <span class="icon-bar"></span> | |
| 21 | - <span class="icon-bar"></span> | |
| 22 | - <span class="icon-bar"></span> | |
| 23 | - </a> | |
| 24 | - <%= link_to "GTAaaS", home_path, :class => "brand" %> | |
| 25 | - | |
| 26 | - <%- if current_user.present? %> | |
| 27 | - <div class="nav-collapse"> | |
| 28 | - <ul class="nav"> | |
| 29 | - <li><%= link_to t('shared.main'), home_path %></li> | |
| 30 | - | |
| 31 | - <li class="dropdown"> | |
| 32 | - <a class="dropdown-toggle" href="#" data-toggle="dropdown"> | |
| 33 | - <%= t('shared.vlibras') %> | |
| 34 | - | |
| 35 | - <% if current_user.videos.not_seen.any? %> | |
| 36 | - <span class="label label-success">Novo vídeo!</span> <strong class="caret"></strong> | |
| 37 | - <% end %> | |
| 38 | - </a> | |
| 39 | - | |
| 40 | - <ul class="dropdown-menu"> | |
| 41 | - <li> | |
| 42 | - <%= link_to v_libras_videos_path do %> | |
| 43 | - <%= t('wikivideos.my_videos') %> | |
| 44 | - <% if current_user.videos.not_seen.any? %> | |
| 45 | - <span class="label label-success"><%= current_user.videos.not_seen.size %> </span> <strong class="caret"></strong> | |
| 46 | - <% end %> | |
| 47 | - <% end %> | |
| 48 | - </li> | |
| 49 | - <li><%= link_to t('videos.new'), '#' %></li> | |
| 50 | - <li class="divider"></li> | |
| 51 | - <li><%= link_to t('shared.form_alternative'), rapid_v_libras_requests_path %></li> | |
| 52 | - </ul> | |
| 53 | - </li> | |
| 54 | - | |
| 55 | - <li class="dropdown hidden"> | |
| 56 | - <a class="dropdown-toggle" href="#" data-toggle="dropdown"><%= t('shared.wikilibras') %><strong class="caret"></strong></a> | |
| 57 | 15 | |
| 58 | - <ul class="dropdown-menu"> | |
| 59 | - <li><%= link_to t('wikivideos.my_signals'), '#' %></li> | |
| 60 | - <li><%= link_to t('wikivideos.cadastro_sinal'), '#' %></li> | |
| 61 | - <li class="divider"></li> | |
| 62 | - <li><%= link_to t('wikivideos.dicionario_de_dados'), '#' %></li> | |
| 63 | - </ul> | |
| 64 | - </li> | |
| 65 | - <li class="hidden"><%= link_to t('shared.slibras') %></li> | |
| 66 | - <li><%= link_to t('shared.about'), "http://gtaaas.lavid.ufpb.br/projeto", :target => "blank" %></li> | |
| 67 | - </ul> | |
| 68 | - | |
| 69 | - | |
| 70 | - <ul class="nav pull-right"> | |
| 71 | - <li class="dropdown"> | |
| 72 | - <%= link_to t('shared.logout'), destroy_user_session_path, :method => 'delete' %> | |
| 73 | - <!-- <a class="dropdown-toggle" href="#" data-toggle="dropdown"><%#= current_user.email %><strong class="caret"></strong></a> | |
| 74 | - | |
| 75 | - <ul class="dropdown-menu"> | |
| 76 | - <li><%#= link_to t('shared.edit'), edit_user_registration_path %></li> | |
| 77 | - <li class="divider"></li> | |
| 78 | - <li><%#= link_to t('shared.logout'), destroy_user_session_path, :method => 'delete' %></li> | |
| 79 | - </ul> --> | |
| 80 | - </li> | |
| 81 | - </ul> | |
| 82 | - <% end %> | |
| 83 | - | |
| 84 | - <ul class="nav secondary-nav"> | |
| 85 | - <!-- <li><%= link_to image_tag('pt.png'), url_for( :locale => 'pt' ), :title => "Português" %></li> | |
| 86 | - <li><%= link_to image_tag('en.png'), url_for( :locale => 'en' ), :title => 'English' %></li> --> | |
| 87 | - </ul> | |
| 88 | - </div><!--/.nav-collapse --> | |
| 89 | - </div> | |
| 90 | - </div> | |
| 91 | -</div> | |
| 16 | +<body> | |
| 17 | +<%= render 'layouts/menu' %> | |
| 92 | 18 | |
| 93 | 19 | <div class="container-fluid"> |
| 94 | 20 | <% if content_for?(:menu) %> |
| ... | ... | @@ -107,7 +33,9 @@ |
| 107 | 33 | <%= yield %> |
| 108 | 34 | |
| 109 | 35 | <footer> |
| 110 | - <p>GTAaaS - <%= t('shared.project') %> <a href="http://gtaaas.lavid.ufpb.br" target="_blank">LAVID</a> | © <%= Time.now.year %>. <%= t('shared.copyright') %>.</p> | |
| 36 | + <p>GTAaaS - <%= t('shared.project') %> | |
| 37 | + <a href="http://gtaaas.lavid.ufpb.br" target="_blank">LAVID</a> | | |
| 38 | + © <%= Time.now.year %>. <%= t('shared.copyright') %>.</p> | |
| 111 | 39 | </footer> |
| 112 | 40 | </div> |
| 113 | 41 | ... | ... |
app/views/v_libras/videos/index.haml
| ... | ... | @@ -27,18 +27,19 @@ |
| 27 | 27 | %h4= t('requests.list') |
| 28 | 28 | |
| 29 | 29 | .row-fluid |
| 30 | - %table.table.table-hover.table-striped.table-requests.span8.offset2 | |
| 31 | - %thead | |
| 32 | - %tr | |
| 33 | - %th Situação | |
| 34 | - %th Vídeo | |
| 35 | - %th Criado há | |
| 36 | - | |
| 37 | - - @requests.each do |request| | |
| 38 | - %tr | |
| 39 | - %td.span2= request_status_label(request) | |
| 40 | - %td.span5= request.video_filename | |
| 41 | - %td.span5= time_ago_in_words(request.created_at) | |
| 30 | + .span8.offset2 | |
| 31 | + %table.table.table-hover.table-striped.table-requests | |
| 32 | + %thead | |
| 33 | + %tr | |
| 34 | + %th Situação | |
| 35 | + %th Vídeo | |
| 36 | + %th Criado há | |
| 37 | + | |
| 38 | + - @requests.each do |request| | |
| 39 | + %tr | |
| 40 | + %td.span2= request_status_label(request) | |
| 41 | + %td.span5= request.video_filename | |
| 42 | + %td.span5= time_ago_in_words(request.created_at) | |
| 42 | 43 | |
| 43 | 44 | |
| 44 | 45 | ... | ... |