Showing details about a screenshot

app/assets/stylesheets/my.scss

@@ -296,3 +296,17 @@ a.black
     text-shadow: 0 0 2px black;
   }
 }
+
+/* Properties of a screenshot - shown in details view */
+.property-title
+{
+  font-weight: bolder;
+  font-size: 120%;
+  color: #808080;
+}
+
+.property
+{
+  margin-left: 2em;
+  margin-bottom: 0.5em;
+}

app/views/packages/details.slim

@@ -5,7 +5,7 @@
     //.progress.radius
       //span.meter style="width: #{rand(100)}%" Rating
 
-.row.packagepage
+.row.packagepage.listview
   .small-12.columns
     h1 =@package.name
 
@@ -15,9 +15,10 @@
     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
+          a.black.fancybox href=screenshot.image.url(:large, timestamp: false) rel='fancybox-thumb' title=screenshot.caption
-            img src=screenshot.url('large')
+            = image_tag(screenshot.image.url(:large, timestamp: false), alt: screenshot.caption)
             .imgcaption =screenshot.caption
+  //- raise
 
     // TODO: Enable comments in a later version
     // = partial '/package/comments'

app/views/packages/upload.slim

@@ -8,7 +8,11 @@
     // 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
+        //input id="fileupload" type="file" name="files[]" data-url=upload_image_path(name: @package.name) multiple=true
+
+        = form_for @package, :url => upload_image_path, :html => { :multipart => true } do |form|
+          = form.file_field :image
+
         a.button.radius.expand href=upload_package_by_name_path(name: @package.name)
           ' Click or drag a PNG screenshot file here
       .small-6.columns
@@ -16,9 +20,15 @@
     - for screenshot in @package.screenshots
       .row
         .small-6.columns
-          img src=screenshot.url('large')
+          = image_tag(screenshot.image.url(:large, timestamp: false), alt: screenshot.caption)
+
         .small-6.columns
-          ' read-only Form
+          .property-title This image shows the…
+          .property =screenshot.caption
+          .property-title It was uploaded by…
+          .property =screenshot.uploader
+          .property-title The image…
+          .property =screenshot.status
 
   .small-4.columns
     .bigpanel