Upload page seperated, styled and Javscript-pimped

Actual upload is not yet working.
This commit is contained in:
Christoph Haas 2016-08-29 18:17:16 +02:00
parent c6cbdb3e3a
commit 107309a84c
6 changed files with 113 additions and 93 deletions

View file

@ -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');
}
};

View file

@ -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 */
}

View file

@ -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?

View file

@ -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() {

View file

@ -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...

View file

@ -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