Upload page seperated, styled and Javscript-pimped
Actual upload is not yet working.
This commit is contained in:
parent
c6cbdb3e3a
commit
107309a84c
6 changed files with 113 additions and 93 deletions
|
|
@ -37,3 +37,21 @@ load_reviews = function() {
|
|||
}
|
||||
);
|
||||
};
|
||||
|
||||
// Initialize the upload form.
|
||||
upload_form_init = function() {
|
||||
// Disable the submit button until files are selected.
|
||||
$('#file-submit').hide();
|
||||
|
||||
// Install event handler to notice when files were selected.
|
||||
$('#file').on('change', upload_form_files_selected);
|
||||
};
|
||||
|
||||
upload_form_files_selected = function() {
|
||||
no_files = this.files.length;
|
||||
if (no_files > 0) {
|
||||
$('#file-label').html(no_files+" files selected");
|
||||
$('#file-select-button').addClass('success');
|
||||
$('#file-submit').fadeIn('slow');
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -804,6 +804,20 @@ a.black
|
|||
color: #808080;
|
||||
}
|
||||
|
||||
.bigpanel
|
||||
{
|
||||
background-color: $light-gray;
|
||||
border-radius: 10px;
|
||||
padding: 1em 1em 0.1em 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.subtitle
|
||||
{
|
||||
font-size: 120%;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.packagepage
|
||||
{
|
||||
h1
|
||||
|
|
@ -811,11 +825,6 @@ a.black
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.subtitle
|
||||
{
|
||||
font-size: 120%;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
/* Description of a screenshot (e.g. the situation when the screenshot was taken) */
|
||||
.imgcaption
|
||||
|
|
@ -832,13 +841,6 @@ a.black
|
|||
color: #808080;
|
||||
}
|
||||
|
||||
.bigpanel
|
||||
{
|
||||
background-color: $light-gray;
|
||||
border-radius: 10px;
|
||||
padding: 1em 1em 0.1em 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.comment
|
||||
{
|
||||
|
|
@ -897,3 +899,17 @@ a.black
|
|||
{
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
/* Hide the file upload button to just show the styleable label */
|
||||
/* display: none will not work - this is the workaround */
|
||||
.hidden-inputfile {
|
||||
width: 0.1px;
|
||||
height: 0.1px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.inputfile + label {
|
||||
cursor: pointer; /* "hand" cursor */
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
' Please help extend the collection of screenshots.
|
||||
' Just make a screenshot and upload it here. You don't
|
||||
' need to register or anything.
|
||||
a.button.small.expand data-open="upload-modal" Upload now
|
||||
a.button.small.expand href=upload_path(pkg.name) Upload now
|
||||
|
||||
// homepage
|
||||
- if pkg.homepage.present?
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
.small-5.medium-5.columns
|
||||
= render(partial: 'details_rightbox', locals: {pkg: @package})
|
||||
|
||||
= render(partial: 'details_uploadmodal')
|
||||
/ = render(partial: 'details_uploadmodal')
|
||||
|
||||
javascript:
|
||||
$( function() {
|
||||
|
|
|
|||
|
|
@ -1,85 +1,71 @@
|
|||
.row.packagepage
|
||||
.small-12.columns
|
||||
h1 = "Upload a new screenshot for #{@package.name}>"
|
||||
.row
|
||||
h1 = "Upload a screenshot for #{@package.name}"
|
||||
|
||||
.row
|
||||
.small-7.columns
|
||||
p.subtitle = @package.description
|
||||
p
|
||||
' You are about to upload a screenshot for the #{@package.name}
|
||||
' package. Thanks for your contribution.
|
||||
- if @package.screenshots.any?
|
||||
p
|
||||
' Just for your information - these screenshots have already been uploaded.
|
||||
|
||||
.row.packagepage
|
||||
.small-12.medium-7.large-8.columns
|
||||
// First row contains the upload form
|
||||
.row
|
||||
.small-6.columns
|
||||
//input id="fileupload" type="file" name="files[]" data-url=upload_image_path(name: @package.name) multiple=true
|
||||
.small-up-1.medium-up-3.large-up-4.grid-thumbnails
|
||||
- @package.screenshots.all.each do |ss|
|
||||
a.black.fancybox href=ss.image.url(:large, timestamp: false) rel='fancybox-thumb' title=ss.caption
|
||||
= image_tag(ss.image.url(:thumb, timestamp: false), alt: ss.caption, class: 'thumbnail')
|
||||
|
||||
//= form_for @new_screenshot, :url => upload_image_path, :html => { :multipart => true } do |form|
|
||||
// = form.file_field :image
|
||||
// = form.submit 'Save'
|
||||
= form_tag(upload_image_path, multipart: true)
|
||||
= file_field_tag('image')
|
||||
= submit_tag
|
||||
// = render partial: 'packages/grid_thumbnail', locals: { pkg: pkg }
|
||||
|
||||
//a.button.radius.expand href=upload_package_by_name_path(name: @package.name)
|
||||
//' Click or drag a PNG screenshot file here
|
||||
.small-6.columns
|
||||
' Form
|
||||
- @package.screenshots.each do |screenshot|
|
||||
.row
|
||||
img src=screenshot.image.url(:large, timestamp: false, alt: screenshot.caption)
|
||||
= link_to "Delete screenshot", delete_screenshot_path(@package.name, screenshot.id), onclick: "return confirm('Really delete the screenshot?');"
|
||||
- else
|
||||
' There are no screenshots yet for #{@package.name}.
|
||||
|
||||
// - @package.screenshots.each do |screenshot|
|
||||
// .listview
|
||||
// a.black.fancybox href=screenshot.image.url(:large, timestamp: false) rel='fancybox-thumb' title=screenshot.caption
|
||||
// = image_tag(screenshot.image.url(:large, timestamp: false), alt: screenshot.caption)
|
||||
// .imgcaption
|
||||
// => screenshot.caption
|
||||
// - if screenshot.uploader
|
||||
// | (Uploaded by
|
||||
// =< screenshot.uploader
|
||||
// | )
|
||||
= form_tag(upload_image_path, multipart: true)
|
||||
|
||||
.small-12.medium-5.large-4.columns
|
||||
.bigpanel
|
||||
p Thanks for uploading more screenshots. Please note:
|
||||
ul
|
||||
li
|
||||
' Screenshots are made public and can freely be used by anyone.
|
||||
li
|
||||
' Your screenshots must be in PNG format.
|
||||
li
|
||||
' Images larger than 800x600 pixels will automatically be reduced.
|
||||
' So don't try to put too much detail on a screenshot.
|
||||
li
|
||||
' Your screenshot should contain a typical scene when working with it.
|
||||
li
|
||||
' Nice tools for taking screenshots are shutter, ksnapshot (KDE),
|
||||
' gimp, xwd or scrot. See the
|
||||
a href='http://wiki.debian.org/ScreenShots' Debian wiki
|
||||
' for more information on how to make screenshots under Debian.
|
||||
li
|
||||
' Please set your language to english so that everybody understands it.
|
||||
' If you don't use english by default please start your application
|
||||
' from a shell using after setting "export LANG=C".
|
||||
li
|
||||
' Please only take a screenshot of the respective application and not of
|
||||
' your whole desktop (unless the screenshot is meant for a window manager).
|
||||
li
|
||||
' If you are not logged in or lack the reputation then your screenshot
|
||||
' may need to be approved by the moderators first.
|
||||
input.hidden-inputfile type="file" name="file" id="file" multiple=true
|
||||
label for="file"
|
||||
a.button id="file-select-button"
|
||||
= fa_stacked_icon "image", base: "circle-thin"
|
||||
span id="file-label"
|
||||
' Select screenshot files
|
||||
|
||||
//ul.small-block-grid-1.medium-block-grid-2.large-block-grid-2
|
||||
// - for screenshot in @package.screenshots
|
||||
// li
|
||||
// a.black.fancybox href=screenshot.url('large') rel='fancybox-thumb' title=screenshot.caption
|
||||
// img src=screenshot.url('large')
|
||||
// .imgcaption =screenshot.caption
|
||||
//
|
||||
button.button type="submit" id="file-submit"
|
||||
= fa_stacked_icon "upload", base: "circle-thin"
|
||||
' Start upload
|
||||
|
||||
//javascript:
|
||||
// $('#fileupload').fileupload({
|
||||
// dataType: 'json',
|
||||
// done: function (e, data) {
|
||||
// $.each(data.result.files, function (index, file) {
|
||||
// $('<p/>').text(file.name).appendTo(document.body);
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
.small-5.columns.bigpanel
|
||||
p.subtitle Your upload…
|
||||
ul
|
||||
li
|
||||
' should contain a typical scene when working with it.
|
||||
li
|
||||
' should show the actual application and not just
|
||||
' your whole desktop (unless the screenshot is meant for a window manager).
|
||||
li
|
||||
' must be in PNG format.
|
||||
li
|
||||
' can be multiple images at once.
|
||||
li
|
||||
' needs to be approved by the moderators first before it is publicly visible.
|
||||
li
|
||||
' will be reduced if it is lager than 800x600 pixels.
|
||||
' So don't try to capture too much detail in a screenshot. It may become
|
||||
' unreadable. Shrink the applications window if possible.
|
||||
li
|
||||
' will be made public and can freely be used by anyone.
|
||||
li
|
||||
' can be taken by screenshot tools like shutter, ksnapshot (KDE),
|
||||
' gimp, xwd or scrot. See the
|
||||
a href='http://wiki.debian.org/ScreenShots' Debian wiki
|
||||
' for more information on how to make screenshots under Debian.
|
||||
li
|
||||
' should preferably show the application in english.
|
||||
' If you don't use english by default please start your application
|
||||
' from a shell using after setting "export LANG=C".
|
||||
|
||||
javascript:
|
||||
// Hide the submit button unless images are selected for upload
|
||||
$(document).ready(upload_form_init);
|
||||
// TODO: Move into javascripts/packages/upload...
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@ Debshots::Application.routes.draw do
|
|||
get 'logs' => 'logs#index'
|
||||
get 'package/:name' => 'packages#details', as: :package, name: /[^\/]+/
|
||||
get 'package_reviews/:name' => 'packages#reviews', as: :package_reviews, name: /[^\/]+/
|
||||
get 'upload', to: redirect('/packages') # legacy upload form
|
||||
get 'upload', to: redirect('/packages'), as: :upload_legacy # legacy upload form
|
||||
post 'uploadfile' => 'packages#legacy_uploadfile'
|
||||
get 'upload/:name' => 'packages#upload', as: :upload_package_by_name
|
||||
get 'upload/:name' => 'packages#upload', as: :upload
|
||||
post 'upload_image/:name' => 'packages#upload_image', as: :upload_image, name: /[^\/]+/
|
||||
# TODO: "get" is probably the wrong method to delete a screenshot
|
||||
get 'delete_screenshot/:id' => 'packages#delete_screenshot', as: :delete_screenshot
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue