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

@@ -5,38 +5,49 @@
 .packagepage
   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
-      div.callout.warning
-        p
-          ' New screenshots have been uploaded for this package.
-          ' They still need to be approved by a moderator before they are publicly visible.
-          ' Please check again later.
 
+  .grid-x.grid-margin-x
+    .small-7.medium-7.cell
+      / Left column contains images
       - if screenshots_visible_to_user(@package).count > 0
-      - screenshots_visible_to_user(@package).each do |screenshot|
+        .grid-x.grid-margin-y.grid-margin-x.align-middle
-        .listview
+          - screenshots_visible_to_user(@package).each_with_index do |screenshot, idx|
-          .text-center
+            / Display the first screenshot as a large image
-            /a.black.fancybox href =url_for(screenshot.image.variant(resize_to_limit: [800,600])) rel='fancybox-thumb' title=screenshot.caption
+            - if idx==0
-            / Fancybox image viewer: http://fancyapps.com/fancybox/3/docs/#usage
+              .small-12.medium-12.cell
+                .margin-bottom-3
 
-            a href =url_for(screenshot.large_watermarked) rel='fancybox-thumb' title=screenshot.caption data-fancybox='gallery'
+                  / TODO: de-duplicate
+                  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)
+                      = 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
+
+
+            / Display further screenshots as smaller images
+            - else
+              .small-6.medium-6.cell
+                .margin-bottom-3
+
+                  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
-              - if screenshot.description.present?
                     = 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)
@@ -59,11 +70,11 @@ h1 =@package.name
 
               // Is the user an admin?
               // TODO: fix dropdowns – do not enforce javascript
-            - if user_signed_in? and current_user.is_admin?
+              / - if user_signed_in? and current_user.is_admin?
-              = render(partial: 'admin_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
+              / - elsif user_signed_in? and screenshot.user == current_user
-              = render(partial: 'user_dropdown', locals: {screenshot: screenshot})
+              /   = render(partial: 'user_dropdown', locals: {screenshot: screenshot})
 
 
               // or is the user not related to the screenshot and the screenshot is public?
@@ -72,18 +83,10 @@ h1 =@package.name
               //  = render(partial: 'report_dropdown', locals: {screenshot: screenshot})
 
       - else
-      .listview
+        /.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)
-
-  .small-5.medium-5.cell data-sticky-container=true
       = render(partial: 'details_rightbox', locals: {pkg: @package})
-
-/ javascript:
-/   $( function() {
-/     load_reviews()
-/   })