chaas/debshots
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Upload page seperated, styled and Javscript-pimped

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

2
app/views/packages/_details_rightbox.slim
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?

2
app/views/packages/details.slim
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() {

140
app/views/packages/upload.slim
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...