Design overhaul of details page

app/assets/stylesheets/my_styles.scss

@@ -95,8 +95,8 @@ div.thumb-height
 
 .uploadbutton {
   animation-name: pump;
-  animation-duration: 3s;
+  animation-duration: 10s;
-  animation-delay: 2s;
+  animation-delay: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-out;
   // animation-direction: alternate;
@@ -105,10 +105,10 @@ div.thumb-height
   0% {
     transform: scale(1,1);
   }
-  10% {
+  5% {
     transform: scale(1.2,1.2);
   }
-  20% {
+  10% {
     transform: scale(1,1);
   }
 }
@@ -289,16 +289,16 @@ a.black
   h1
   {
     // margin-bottom: 0;
-    font-size: 150%;
+    // font-size: 200%;
-    font-weight: normal;
+    // font-weight: normal;
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 0 0;
   }
 
   h2
   {
     font-size: 150%;
     font-weight: normal;
-    margin: 0 0 0.2rem 0;
+    margin: 0 0 0.5rem 0;
     color: #808080;
   }
 
@@ -306,17 +306,12 @@ a.black
   .imgcaption
   {
     text-align: center;
-    font-variant: italic;
     display: inline-block;
 
-    padding: 0px 5px;
+    width: 100%;
-    // top: 10px;
+    white-space: nowrap;
-    // right: 0px;
+    overflow: hidden;
-    color: #fff;
+    text-overflow: ellipsis;
-    background-color: #808080;
-    // opacity: 0.5;
-    // position: absolute;
-    border-radius: 0 0 10px 10px;
   }
 
   /* Status of a screenshot (e.g. if it has to be moderated) */
@@ -541,17 +536,3 @@ a.black
   animation-delay: 4s;
   animation-fill-mode: both;
 }
-
-
-/* Display caption at the bottom of an image */
-
-// .image-with-zoom-icon .caption {
-//   padding: 0px 5px;
-//   top: 10px;
-//   right: 0px;
-//   color: #fff;
-//   background-color: #000;
-//   opacity: 0.5;
-//   position: absolute;
-//   border-radius: 15px 0 0 15px;
-// }

app/helpers/packages_helper.rb

@@ -26,14 +26,13 @@ module PackagesHelper
   # Return the description and/or the version of the package
   def screenshot_caption(screenshot)
     str = []
-    str << screenshot.description if screenshot.description
+    str << screenshot.description if screenshot.description.present?
-    str << "Version #{screenshot.version}" if screenshot.version
+    str << "#{screenshot.package.name} version #{screenshot.version}" if screenshot.version.present?
-    str << "from #{time_ago_in_words(screenshot.created_at)} ago"
+    str << "uploaded #{time_ago_in_words(screenshot.created_at)} ago"
-    str.join(' / ')
+    str.join(' ∙ ')
   end
 
 
-
   # Show filled/empty star icons from FontAwesome
   # depending on the rating (1-5)
   # def star_rating(rating)

app/views/packages/_details_rightbox.slim

@@ -1,6 +1,6 @@
 // Right-side panel on details page to display further information
 // about a package.
-.bigpanel.sticky data-sticky=true data-anchor="details"
+.bigpanel.sticky data-sticky=true data-anchor="metadata"
   // long description
   p.subtitle
     = fa_icon 'info-circle'

app/views/packages/details.slim

@@ -3,87 +3,90 @@
 = render 'receive_upload'
 
 .packagepage
-h1 =@package.name
+  h1 = @package.name
 
-.grid-x.grid-padding-x.packagepage
+  h2 = @package.description
-  #details.small-7.medium-7.cell.packagepage
-    p.subtitle = @package.description
 
-    - if @package.screenshots_pending.length > 0
+  .grid-x.grid-margin-x
-      div.callout.warning
+    .small-7.medium-7.cell
-        p
+      / Left column contains images
-          ' New screenshots have been uploaded for this package.
+      - if screenshots_visible_to_user(@package).count > 0
-          ' They still need to be approved by a moderator before they are publicly visible.
+        .grid-x.grid-margin-y.grid-margin-x.align-middle
-          ' Please check again later.
+          - screenshots_visible_to_user(@package).each_with_index do |screenshot, idx|
+            / Display the first screenshot as a large image
+            - if idx==0
+              .small-12.medium-12.cell
+                .margin-bottom-3
 
-    - if screenshots_visible_to_user(@package).count > 0
+                  / TODO: de-duplicate
-      - screenshots_visible_to_user(@package).each do |screenshot|
+                  a href =url_for(screenshot.large_watermarked) rel='fancybox-thumb' title=screenshot.caption data-fancybox='gallery' data-caption=screenshot_caption(screenshot)
-        .listview
+                    .image-with-zoom-icon
-          .text-center
+                      = image_tag(url_for(screenshot.image), alt: screenshot.caption, class: 'thumbnail')
-            /a.black.fancybox href =url_for(screenshot.image.variant(resize_to_limit: [800,600])) rel='fancybox-thumb' title=screenshot.caption
-            / Fancybox image viewer: http://fancyapps.com/fancybox/3/docs/#usage
 
-            a href =url_for(screenshot.large_watermarked) rel='fancybox-thumb' title=screenshot.caption data-fancybox='gallery'
+                      .magnifying-glass-icon
-              .image-with-zoom-icon
+                        i.fa.fa-search
-                = image_tag(url_for(screenshot.image), alt: screenshot.caption)
         
-                .magnifying-glass-icon
+                  /.imgcaption =screenshot_caption(screenshot)
-                  i.fa.fa-search
 
-            .imgcaption
+                  .imgcaption
-              - if screenshot.description.present?
+                    = screenshot.description
-                = screenshot.description
-                '  ∙
-              - if screenshot.version.present?
-                ' from version #{screenshot.version} ∙
-              ' #{time_ago_in_words(screenshot.created_at)} ago
-
-            // Has the unmoderated screenshot been uploaded by the current user?
-            - if screenshot_uploaded_by_current_user?(screenshot)
-              span.label.warning
-                | Uploaded by you
-                - unless screenshot.approved
-                  |  (but not public yet)
-
-            - if user_signed_in? and current_user.is_admin?
-              .imgcaption
-                span.label.secondary #{screenshot.adminstatus}
 
 
-            // Show detailed information about the screenshot object when in dev mode
+            / Display further screenshots as smaller images
-            / - if Rails.env == 'development'
+            - else
-            /   p 
+              .small-6.medium-6.cell
-            /     tt
+                .margin-bottom-3
-            /       = screenshot.inspect
+
+                  a href =url_for(screenshot.large_watermarked) rel='fancybox-thumb' title=screenshot.caption data-fancybox='gallery' data-caption=screenshot_caption(screenshot)
+                    .image-with-zoom-icon
+                      = image_tag(url_for(screenshot.image), alt: screenshot.caption, class: 'thumbnail')
+
+                      .magnifying-glass-icon
+                        i.fa.fa-search
+
+                  /.imgcaption =screenshot_caption(screenshot)
+
+                  .imgcaption
+                    = screenshot.description
+
+              // Has the unmoderated screenshot been uploaded by the current user?
+              - if screenshot_uploaded_by_current_user?(screenshot)
+                span.label.warning
+                  | Uploaded by you
+                  - unless screenshot.approved
+                    |  (but not public yet)
+
+              - if user_signed_in? and current_user.is_admin?
+                .imgcaption
+                  span.label.secondary #{screenshot.adminstatus}
 
 
-            // Is the user an admin?
+              // Show detailed information about the screenshot object when in dev mode
-            // TODO: fix dropdowns – do not enforce javascript
+              / - if Rails.env == 'development'
-            - if user_signed_in? and current_user.is_admin?
+              /   p 
-              = render(partial: 'admin_dropdown', locals: {screenshot: screenshot})
+              /     tt
-            // or does the screenshot belong to the user (determined by session cookie)
+              /       = screenshot.inspect
-            - elsif user_signed_in? and screenshot.user == current_user
-              = render(partial: 'user_dropdown', locals: {screenshot: screenshot})
 
 
-            // or is the user not related to the screenshot and the screenshot is public?
+              // Is the user an admin?
-            // TODO: Move to a seperate page with a form
+              // TODO: fix dropdowns – do not enforce javascript
-            //- elsif screenshot.approved
+              / - if user_signed_in? and current_user.is_admin?
-            //  = render(partial: 'report_dropdown', locals: {screenshot: screenshot})
+              /   = render(partial: 'admin_dropdown', locals: {screenshot: screenshot})
+              // or does the screenshot belong to the user (determined by session cookie)
+              / - elsif user_signed_in? and screenshot.user == current_user
+              /   = render(partial: 'user_dropdown', locals: {screenshot: screenshot})
 
-    - else
+
-      .listview
+              // or is the user not related to the screenshot and the screenshot is public?
+              // TODO: Move to a seperate page with a form
+              //- elsif screenshot.approved
+              //  = render(partial: 'report_dropdown', locals: {screenshot: screenshot})
+
+      - else
+        /.listview
         img src='/images/dummy/no-screenshots-available.svg' width='100%' style='padding: 0 10%'
 
-    // Load reviews from the Ubuntu API through our own (cached) URL.
+    #metadata.small-5.medium-5.cell
-    // Use asynchronous load to keep loading times low if the review
+      / Right column contains metadata about the package.
-    // was not yet cached.
+      / #metadata is the anchor for this sticky container.
-    / #reviews data-package-reviews-url=package_reviews_path(@package.name)
+      = render(partial: 'details_rightbox', locals: {pkg: @package})
-
-  .small-5.medium-5.cell data-sticky-container=true
-    = render(partial: 'details_rightbox', locals: {pkg: @package})
-
-/ javascript:
-/   $( function() {
-/     load_reviews()
-/   })