Design overhaul of details page
This commit is contained in:
parent
986b42145e
commit
adb76650da
4 changed files with 90 additions and 107 deletions
|
|
@ -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;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue