Slight design improvements

app/assets/stylesheets/my_styles.scss

@@ -307,6 +307,16 @@ a.black
   {
     text-align: center;
     font-variant: italic;
+    display: inline-block;
+
+    padding: 0px 5px;
+    // top: 10px;
+    // right: 0px;
+    color: #fff;
+    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) */
@@ -505,7 +515,7 @@ a.black
 
 @keyframes image-with-zoom-icon-animation {
   from {opacity: 0}
-  to {opacity: 0.4}
+  to {opacity: 0.25}
 }
 
 .image-with-zoom-icon .magnifying-glass-icon {
@@ -531,3 +541,17 @@ 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

@@ -23,6 +23,17 @@ module PackagesHelper
     screenshot.uploaderhash == session.id.to_s
   end
 
+  # Return the description and/or the version of the package
+  def screenshot_caption(screenshot)
+    str = []
+    str << screenshot.description if screenshot.description
+    str << "Version #{screenshot.version}" if screenshot.version
+    str << "from #{time_ago_in_words(screenshot.created_at)} ago"
+    str.join(' / ')
+  end
+
+
+
   # Show filled/empty star icons from FontAwesome
   # depending on the rating (1-5)
   # def star_rating(rating)

app/views/packages/details.slim

@@ -30,42 +30,46 @@ h1 =@package.name
                 .magnifying-glass-icon
                   i.fa.fa-search
 
-              - if screenshot.description
+            .imgcaption
-                .imgcaption =screenshot.description
+              - if screenshot.description.present?
-              // Has the unmoderated screenshot been uploaded by the current user?
+                = screenshot.description
-              - if screenshot_uploaded_by_current_user?(screenshot)
+                '  ∙
-                span.label.warning
-                  | Uploaded by you
-                  - unless screenshot.approved
-                    |  (but not public yet)
-
               - if screenshot.version.present?
-                .imgcaption
+                ' from version #{screenshot.version} ∙
-                  | Screenshot was taken from version #{screenshot.upstream_version} #{time_ago_in_words(screenshot.created_at)} ago
+              ' #{time_ago_in_words(screenshot.created_at)} ago
-              - if user_signed_in? and current_user.is_admin?
+
-                .imgcaption
+            // Has the unmoderated screenshot been uploaded by the current user?
-                  span.label.secondary #{screenshot.adminstatus}
+            - 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
+            // Show detailed information about the screenshot object when in dev mode
-              - if Rails.env == 'development'
+            / - if Rails.env == 'development'
-                tt
+            /   p 
-                  = screenshot.inspect
+            /     tt
+            /       = screenshot.inspect
 
 
-              // Is the user an admin?
+            // Is the user an admin?
-              // TODO: fix dropdowns – do not enforce javascript
+            // 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)
+            // 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?
+            // or is the user not related to the screenshot and the screenshot is public?
-              // TODO: Move to a seperate page with a form
+            // TODO: Move to a seperate page with a form
-              //- elsif screenshot.approved
+            //- elsif screenshot.approved
-              //  = render(partial: 'report_dropdown', locals: {screenshot: screenshot})
+            //  = render(partial: 'report_dropdown', locals: {screenshot: screenshot})
 
     - else
       .listview