Design overhaul of details page

This commit is contained in:
Christoph Haas 2020-10-20 00:22:41 +02:00
parent 986b42145e
commit adb76650da
4 changed files with 90 additions and 107 deletions

View file

@ -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;
// }

View file

@ -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)

View file

@ -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'

View file

@ -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})