Added styling to movie pages

This commit is contained in:
Luke Barratt 2014-04-26 22:28:06 +01:00
parent 3dd1dbbf89
commit cbd4f595c8
8 changed files with 242 additions and 209 deletions

View file

@ -44,3 +44,47 @@
margin-top: em(20);
}
}
/*
Movies List
*/
#movies {
.filters {
@include span-columns(12);
margin-bottom: em(20);
}
}
table.movie {
.controls {
@include span-columns(12);
margin: em(20) 0;
}
}
.movie-full {
.title {
display: none;
}
#player {
display: block;
position: relative;
width: 100%;
height: 0px;
padding-bottom: 56%;
padding-top: 50px;
margin-bottom: em(20);
object {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
}

View file

@ -1,49 +1,50 @@
<div class="wide box">
<%= form_for @movie, :html => { :multipart => true } do |f| %>
<%= f.error_messages %>
<%= form_for @movie, html: { multipart: true, class: 'square' } do |f| %>
<%= render 'shared/errors', messages: @movie.errors.full_messages %>
<% if @movie.file %>
<%= link_to "Go to file", edit_data_file_path(@movie.file) %>
<%= link_to "View File", edit_data_file_path(@movie.file), class: 'button tiny' %>
<% end %>
<p>
<%= f.label :name %><br />
<%= f.text_field :name, {:value => @movie.file.to_s} %>
</p>
<p>
<%= f.label :category_id %><br />
<%= f.select :category_id, Category.ordered.collect{|c| ["#{c.domains[c.domain]} - #{c}", c.id]} %>
</p>
<p>
<%= f.label :content %><br />
<div class="fields horizontal">
<%= f.label :name %>
<%= f.text_field :name, { value: @movie.file.to_s } %>
</div>
<div class="fields horizontal">
<%= f.label :category_id %>
<%= f.select :category_id, Category.ordered.collect { |c| ["#{c.domains[c.domain]} - #{c}", c.id] } %>
</div>
<div class="fields horizontal">
<%= f.label :content %>
<%= f.text_field :content %>
</p>
<p>
<%= f.label :format %><br />
</div>
<div class="fields horizontal">
<%= f.label :format %>
<%= f.text_field :format %>
</p>
<p>
<%= f.label :length, "Length in seconds" %><br />
</div>
<div class="fields horizontal">
<%= f.label :length, "Length in seconds" %>
<%= f.text_field :length %>
</p>
<p>
<%= link_to_function 'Author', "findUser('movie[user_name]')" %><br />
<%= f.text_field :user_name, {:value => @movie.get_user} %>
</p>
<p>
<%= f.label :file %><br />
<%= f.select :file_id, DataFile.movies.collect{|d| ["#{d.name}", d.id]}, {:include_blank => true} %>
</p>
<p>
<%= f.label :preview_id %><br />
<%= f.select :preview_id, @movie.all_files.collect{|d| ["#{d.name}", d.id]}, {:include_blank => true} %>
</p>
<p>
<%= f.label :picture %><br />
</div>
<div class="fields horizontal">
<%= f.label :user_name, "Author" %>
<%= f.text_field :user_name, { value: @movie.get_user } %>
</div>
<div class="fields horizontal">
<%= f.label :file %>
<div class="inputs">
<%= f.select :file_id, DataFile.movies.collect { |d| ["#{d.name}", d.id] }, { include_blank: true } %>
</div>
</div>
<div class="fields horizontal">
<%= f.label :preview_id %>
<%= f.select :preview_id, @movie.all_files.collect { |d| ["#{d.name}", d.id] }, { include_blank: true } %>
</div>
<div class="fields horizontal">
<%= f.label :picture %>
<%= f.file_field :picture %>
</p>
<p>
</div>
<div class="controls">
<%= f.submit 'Save' %>
</p>
<% end %>
</div>
</div>
<% end %>

View file

@ -1,44 +1,34 @@
<div class="wide box sub">
<table id="movie">
<table class="movie">
<tr>
<td>
<br />&nbsp;<br />
<% if movie.picture %>
<%= image_tag movie.picture.url, :class => "centered" %>
<% end %>
</td>
<td>
<h3 class="center">
<%= namelink movie %>
</h3>
<h3 class="title"><%= namelink movie %></h3>
<%= cascade movie, ["content", "format", ["Author", :user], "length_s", ["Views", "view_count"], ["Date", "file.created_at"]] %>
<% (params[:action] == "show" ? movie.all_files : [movie.file]).each do |file| %>
<p>
<b>File: </b> <%= link_to File.basename(file.name.to_s), file.url %>
</p>
<ul>
<li>
<b>MD5:</b> <%= file.md5_s %>
<strong>MD5:</strong> <%= file.md5_s %>
</li>
<li>
<b>Size:</b> <%= file.size_s %> MB
<strong>Size:</strong> <%= file.size_s %> MB
</li>
</ul>
<% end %>
<% if cuser and movie.can_update? cuser %>
<p>
<%= link_to 'Edit', edit_movie_path(movie) %> |
<%= link_to 'Make a Preview', :action => "preview", :id => movie %> |
<%= link_to 'Destroy', movie, :confirm => 'Are you sure?', :method => :delete %>
</p>
<div class="controls">
<%= link_to 'Edit', edit_movie_path(movie), class: 'button tiny' %>
<%= link_to 'Make a Preview', { action: "preview", id: movie }, class: 'button tiny' %>
<%= link_to 'Destroy', movie, confirm: 'Are you sure?', method: :delete, class: 'button tiny' %>
</div>
<% end %>
</td>
</tr>
</table>
<div class="clear">
</div>
</div>
</tr>
</table>

View file

@ -1,60 +1,65 @@
<h1>Editing movie</h1>
<h1>Editing Movie</h1>
<%= render :partial => "form" %>
<%= render partial: 'form' %>
<div class="wide box">
<h3>
Make a preview
</h3>
<div class="preview">
<h3>Make a Preview</h3>
<p>
This will produce a MP4-version preview of the file. It will take usually 3-4 times the movie length.
The program will run in the background and the preview file will automatically added to the movie.
</p>
<%= form_tag :action => "preview", :id => @movie.id do %>
<p>
Resolution: <%= text_field_tag "x", "800", :size => 2 %> x <%= text_field_tag "y", "600", :size => 2 %>
</p>
<p>
<%= submit_tag "Make a preview" %>
</p>
<% end %>
<br />
<h3>
Take a snapshot
</h3>
<%= form_tag :action => "snapshot", :id => @movie.id do %>
<p>
Secs: <%= text_field_tag "secs" %>
</p>
<p>
<%= submit_tag "Take snapshot" %>
</p>
<% end %>
<h3>
Download (stream)
</h3>
<%= form_tag :action => "download", :id => @movie.id do %>
<p>
This will start downloading the video from an IP and Port.
</p>
<p>
IP: <%= text_field_tag "ip", "", :size => 12 %> : <%= text_field_tag "port", "", :size => 3 %>
</p>
<p>
<%= submit_tag "Download" %>
</p>
<% end %>
<%= form_tag({ action: "preview", id: @movie.id }, { class: 'square' }) do %>
<div class="fields horizontal">
<%= label_tag "Resolution" %>
<div class="inputs">
<%= text_field_tag "x", "800", size: 2 %> x <%= text_field_tag "y", "600", size: 2 %>
</div>
</div>
<%= link_to 'Show', @movie %> |
<%= link_to 'Back', movies_path %>
<div class="controls">
<%= submit_tag "Make a Preview" %>
</div>
<% end %>
</div>
<div class="snapshot">
<h3>Take a Snapshot</h3>
<%= form_tag({ action: "snapshot", id: @movie.id }, { class: 'square' }) do %>
<div class="fields horizontal">
<%= label_tag "Seconds" %>
<%= text_field_tag "secs" %>
</div>
<div class="controls">
<%= submit_tag "Take Snapshot" %>
</div>
<% end %>
</div>
<div class="stream">
<h3>Download (Stream)</h3>
<%= form_tag({ action: "download", id: @movie.id }, { class: 'square' }) do %>
<p>This will start downloading the video from an IP and Port.</p>
<div class="fields horizontal">
<%= label_tag "IP" %>
<%= text_field_tag "ip", "", size: 12 %>
</div>
<div class="fields horizontal">
<%= label_tag "Port" %>
<%= text_field_tag "port", "", size: 3 %>
</div>
<div class="controls">
<%= submit_tag "Download" %>
</div>
<% end %>
</div>

View file

@ -1,23 +1,25 @@
<h1>
ENSL Movie Archive
</h1>
<div id="movies">
<h1 class="title">Movie Archive</h1>
<p>We recommend <%= link_to "VLC Player", "http://www.videolan.org/vlc/" %> for movie playback.</p>
<p>
We recommend <%= link_to "VLC Player", "http://www.videolan.org/vlc/" %> for movie playback.
</p>
<%= form_tag movies_url(), :method => "get" do %>
Limit to:
<div class="filters">
<%= form_tag movies_url, method: "get" do %>
<div class="fields">
<%= select_tag :filter, options_for_select({"5 stars" => 5, "4 stars" => 4, "3 stars" => 3, "2 stars" => 2, "1 stars" => 1}) %>
Order by:
</div>
<div class="fields">
<%= select_tag :order, options_for_select({"Ratings" => :ratings, "Date" => :date, "Author" => :author}) %>
</div>
<div class="controls">
<%= submit_tag "Filter" %>
<% end %>
</div>
<% end %>
</div>
<br />
<div id="movieTabs">
<ul id="movieTabs-nav" class="tabs">
<div id="movie" class="tabbed">
<ul id="movie-nav" class="tabs">
<% Category.domain(Category::DOMAIN_MOVIES).ordered.each do |cat| %>
<li>
<a href="#<%= cat.id %>"><%= cat %></a>
@ -25,24 +27,25 @@
<% end %>
</ul>
<div class="box wide tabs">
<div class="tabbed-contents">
<% Category.domain(Category::DOMAIN_MOVIES).each do |cat| %>
<div class="tab" id="<%= cat.id %>">
<div id="movieList">
<% @movies.each do |m| %>
<% next if m.category != cat %>
<%= render :partial => "movie", :object => m %>
<%= render partial: "movie", object: m %>
<% end %>
</div>
<% end %>
</div>
</div>
<script type="text/javascript">
new Yetii({
id: 'movie'
});
</script>
<% if cuser and DataFile.new(directory_id: Directory::MOVIES).can_create? cuser %>
<%= link_to "New Movie", { controller: "data_files", action: "new", id: Directory::MOVIES }, { class: 'button' } %>
<% end %>
</div>
</div>
<script type="text/javascript">
var tabber1 = new Yetii({id: 'movieTabs'});
</script>
<% if cuser and DataFile.new(:directory_id => Directory::MOVIES).can_create? cuser %>
<%= link_to "New Movie", :controller => "data_files", :action => "new", :id => Directory::MOVIES %>
<% end %>

View file

@ -1,5 +1,3 @@
<h1>New movie</h1>
<h1>New Movie</h1>
<%= render :partial => "form" %>
<%= link_to 'Back', movies_path %>
<%= render partial: 'form' %>

View file

@ -1,32 +1,26 @@
<div class="box">
<h2>
<%= namelink @movie %>
</h2>
<%= render :partial => "movie", :object => @movie %>
<div class="movie-full">
<h1 class="fancy">
<span><%= namelink @movie %></span>
</h1>
<%= render partial: "movie", object: @movie %>
<% if @movie.preview %>
<div class="nbox wide center">
<div class="player">
<%= javascript_include_tag 'flowplayer' %>
<script>
flowplayer("player", "/flash/flowplayer-3.1.3.swf",
{
clip:
{
flowplayer("player", "/flash/flowplayer-3.1.3.swf", {
clip: {
autoPlay: false,
autoBuffering: false
}
});
</script>
<a
href="<%= @movie.preview.url %>"
style="display:block;width:520px;height:330px"
id="player" class="centered">
</a>
<p>
This is a low quality version. Please download better version from above. <br />
We recommend <%= link_to "VLC Player", "http://www.videolan.org/vlc/" %> for movie playback.
</p>
<a id="player" href="<%= @movie.preview.url %>"></a>
<p>This is a low quality version. Please download better version from above.</p>
</div>
<% end %>
</div>

View file

@ -1,7 +1,5 @@
<h2>
Movies
</h2>
<h2>Movies</h2>
<div class="userData">
<%= render :partial => "movies/movie_user", :collection => @user.movies %>
<%= render partial: "movies/movie_user", collection: @user.movies %>
</div>