From 986b42145e4cf7fd04a4523368735b5b47a82f48 Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Mon, 19 Oct 2020 21:19:49 +0200 Subject: [PATCH] Slight design improvements --- app/assets/stylesheets/my_styles.scss | 26 ++++++++++- app/helpers/packages_helper.rb | 11 +++++ app/views/packages/details.slim | 62 ++++++++++++++------------- 3 files changed, 69 insertions(+), 30 deletions(-) diff --git a/app/assets/stylesheets/my_styles.scss b/app/assets/stylesheets/my_styles.scss index 14e2342..78314d7 100644 --- a/app/assets/stylesheets/my_styles.scss +++ b/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; +// } diff --git a/app/helpers/packages_helper.rb b/app/helpers/packages_helper.rb index c968ea6..f8d9d3e 100644 --- a/app/helpers/packages_helper.rb +++ b/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) diff --git a/app/views/packages/details.slim b/app/views/packages/details.slim index d533eea..773853d 100644 --- a/app/views/packages/details.slim +++ b/app/views/packages/details.slim @@ -30,42 +30,46 @@ h1 =@package.name .magnifying-glass-icon i.fa.fa-search - - if screenshot.description - .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) - + .imgcaption + - if screenshot.description.present? + = screenshot.description + ' ∙ - if screenshot.version.present? - .imgcaption - | Screenshot was taken from version #{screenshot.upstream_version} #{time_ago_in_words(screenshot.created_at)} ago - - if user_signed_in? and current_user.is_admin? - .imgcaption - span.label.secondary #{screenshot.adminstatus} + ' 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 - - if Rails.env == 'development' - tt - = screenshot.inspect + // Show detailed information about the screenshot object when in dev mode + / - if Rails.env == 'development' + / p + / tt + / = screenshot.inspect - // 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}) + // 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}) - // 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}) + // 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