From adb76650dab43971b34d456fa0abc4b83359b98a Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Tue, 20 Oct 2020 00:22:41 +0200 Subject: [PATCH] Design overhaul of details page --- app/assets/stylesheets/my_styles.scss | 43 ++----- app/helpers/packages_helper.rb | 9 +- app/views/packages/_details_rightbox.slim | 2 +- app/views/packages/details.slim | 143 +++++++++++----------- 4 files changed, 90 insertions(+), 107 deletions(-) diff --git a/app/assets/stylesheets/my_styles.scss b/app/assets/stylesheets/my_styles.scss index 78314d7..42fe90f 100644 --- a/app/assets/stylesheets/my_styles.scss +++ b/app/assets/stylesheets/my_styles.scss @@ -95,8 +95,8 @@ div.thumb-height .uploadbutton { animation-name: pump; - animation-duration: 3s; - animation-delay: 2s; + animation-duration: 10s; + 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-weight: normal; - margin: 0 0 0.5rem 0; + // font-size: 200%; + // font-weight: normal; + 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; - // top: 10px; - // right: 0px; - color: #fff; - background-color: #808080; - // opacity: 0.5; - // position: absolute; - border-radius: 0 0 10px 10px; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } /* 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; -// } diff --git a/app/helpers/packages_helper.rb b/app/helpers/packages_helper.rb index f8d9d3e..1660ea5 100644 --- a/app/helpers/packages_helper.rb +++ b/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 << "Version #{screenshot.version}" if screenshot.version - str << "from #{time_ago_in_words(screenshot.created_at)} ago" - str.join(' / ') + str << screenshot.description if screenshot.description.present? + str << "#{screenshot.package.name} version #{screenshot.version}" if screenshot.version.present? + str << "uploaded #{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) diff --git a/app/views/packages/_details_rightbox.slim b/app/views/packages/_details_rightbox.slim index 3983765..70ffbc6 100644 --- a/app/views/packages/_details_rightbox.slim +++ b/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' diff --git a/app/views/packages/details.slim b/app/views/packages/details.slim index 773853d..ba7f8d7 100644 --- a/app/views/packages/details.slim +++ b/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 - #details.small-7.medium-7.cell.packagepage - p.subtitle = @package.description + h2 = @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 + .grid-x.grid-margin-y.grid-margin-x.align-middle + - 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 - - screenshots_visible_to_user(@package).each do |screenshot| - .listview - .text-center - /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 + / 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, class: 'thumbnail') - a href =url_for(screenshot.large_watermarked) rel='fancybox-thumb' title=screenshot.caption data-fancybox='gallery' - .image-with-zoom-icon - = image_tag(url_for(screenshot.image), alt: screenshot.caption) + .magnifying-glass-icon + i.fa.fa-search + + /.imgcaption =screenshot_caption(screenshot) - .magnifying-glass-icon - i.fa.fa-search - - .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) - 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} + .imgcaption + = screenshot.description - // Show detailed information about the screenshot object when in dev mode - / - if Rails.env == 'development' - / p - / tt - / = screenshot.inspect + / 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 + = 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? - // TODO: fix dropdowns – do not enforce javascript - - if user_signed_in? and current_user.is_admin? - = 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}) + // Show detailed information about the screenshot object when in dev mode + / - if Rails.env == 'development' + / p + / tt + / = screenshot.inspect - // 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}) + // Is the user an admin? + // TODO: fix dropdowns – do not enforce javascript + / - if user_signed_in? and current_user.is_admin? + / = 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. - // Use asynchronous load to keep loading times low if the review - // was not yet cached. - / #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() -/ }) + #metadata.small-5.medium-5.cell + / Right column contains metadata about the package. + / #metadata is the anchor for this sticky container. + = render(partial: 'details_rightbox', locals: {pkg: @package})