Mostly fixed the packages list, grid and detail views

This commit is contained in:
Christoph Haas 2014-11-30 16:07:28 +01:00
parent 43a8ea9dd3
commit 1c59a5ac74
7 changed files with 206 additions and 1 deletions

View file

@ -12,7 +12,24 @@ class PackagesController < ApplicationController
@packages = @packages.where("screenshots.approved"=>true)
end
@packages = @packages.page(params[:page]).per(12)
if params[:show]=='with'
@packages = @packages.with_screenshots
logger.debug 'Limiting packages to those with screenshots'
elsif params[:show]=='without'
@packages = @packages.without_screenshots
logger.debug 'Limiting packages to those without screenshots'
end
# Show packages as list or grid
if params['view']=='list'
# List view
@packages = @packages.paginate(page: params[:page], per_page: 12)
render 'packages/index-list.slim'
else
# Grid view
@packages = @packages.paginate(page: params[:page], per_page: 24)
render 'packages/index-grid.slim'
end
end
def details

View file

@ -0,0 +1,15 @@
// TODO: Handle packages with multiple screenshots
a.black href=package_path(name: pkg.name)
div.grid-thumbnail
- if pkg.screenshots.any?
img src=pkg.screenshots[0].url('small')
- else
// TODO: make it a link to /upload
a href=upload_package_path(name: pkg.name)
img.screenshot src="/images/dummy/no-screenshots-upload-one.svg"
div
// TODO: use description instead of package name (as soon as it is available)
.pkgname
=pkg.name
.pkgdescription
= pkg.description

View file

@ -0,0 +1,32 @@
// Details of a package in list view
// Second row containsjust the long description
.row.pkgdetails
.large-12.columns
.description =pkg.description
// TODO: packages don't have any long description yet
-if pkg.long_description
.longdescription =pkg.long_description
-else
.longdescription Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
// Third row contains the star-rating, the comment count
// and the action buttons
//.row
// .large-12.columns
// // TODO: use actual rating
// span.star-rating-readonly data-score=4.5
//
// span.commentcount
// // TODO: count proper comments
// // TODO: Tooltips for it
// img src="/images/icons/comment.svg" width="18" =rand(30)
// '
// img src="/images/icons/screenshot.svg" width="18" =rand(5)+1
.row
.large-12.columns
a.button.tiny href=package_path(name: pkg.name) Details
'
a.button.tiny href=upload_package_path(name: pkg.name) Upload screenshot

View file

@ -0,0 +1,8 @@
- if @packages.length>0
// Use different pagination navigators depending on the screen width
div.show-for-large-up
=will_paginate @packages, :inner_window => 3
div.show-for-medium-only
=will_paginate @packages, :inner_window => 1
div.show-for-small-only
=will_paginate @packages, :page_links => false

View file

@ -0,0 +1,50 @@
- raise
// Navigation sidebar
#sidebar
.caption View
- if params['view'] == 'list'
.item
// Switch to grid view
//a href=url(:package, :index)
a href=url_for(view: 'grid')
img src="images/sidebar/grid0.svg" width=40 height=40
.item.space
img src="images/sidebar/list1.svg" width=40 height=40
- else
.item
img src="images/sidebar/grid1.svg" width=40 height=40
.item.space
// Switch to list view
//a href=url(:package, :index, view: 'list')
a href=url_for(view: 'list')
img src="images/sidebar/list0.svg" width=40 height=40
// Cycling between with/without/any packages filter
.caption Screenshots
- if params['show'] == 'with'
.item
a href=url_for(show: 'without')
img src="images/sidebar/show-without0.svg" width=40 height=40
.item
img src="images/sidebar/show-with1.svg" width=40 height=40
.item.space
a href=url_for(show: 'any')
img src="images/sidebar/show-any0.svg" width=40 height=40
- elsif params['show'] == 'without'
.item
img src="images/sidebar/show-without1.svg" width=40 height=40
.item
a href=url_for(show: 'with')
img src="images/sidebar/show-with0.svg" width=40 height=40
.item.space
a href=url_for(show: 'any')
img src="images/sidebar/show-any0.svg" width=40 height=40
- else # any
.item
a href=url_for(show: 'without')
img src="images/sidebar/show-without0.svg" width=40 height=40
.item
a href=url_for(show: 'with')
img src="images/sidebar/show-with0.svg" width=40 height=40
.item.space
img src="images/sidebar/show-any1.svg" width=40 height=40

View file

@ -0,0 +1,35 @@
// Paginator and search bar
.row
.small-6.medium-8.large-9.columns
// Paginator
= render 'packages/paginator'
.small-6.medium-4.large-3.columns
// Search form
= form_tag packages_path, :method=>'GET'
= text_field_tag('search', params[:search], placeholder: "Search...")
// Grid view
.row
.small-9.large-10.columns
ul.small-block-grid-1.medium-block-grid-3.large-block-grid-4
- if @packages.length>0
- @packages.all.each do |pkg|
li.thumbnail
= render partial: 'packages/grid_thumbnail', locals: { pkg: pkg }
- else
div.panel.callout.radius
' Sorry. I couldn't find any software package like that.
' Would you like to view
'
a href=url(:package, :index) all packages
'
' instead?
// Paginator
= render '/packages/paginator'
// Icon sidebar for options and views
.small-3.large-2.columns
= render 'packages/sidebar'

View file

@ -0,0 +1,48 @@
// Paginator and search bar
.row
.small-6.medium-8.large-9.columns
// Paginator
= render 'packages/paginator'
.small-6.medium-4.large-3.columns
// Search form
= form_tag packages_path, :method=>'GET'
= text_field_tag(:search, params[:search], placeholder: "Search...")
// Package list
.row
.small-9.medium-10.columns
- if @packages.length>0
- @packages.to_a.each do |pkg|
.row.listview
.small-12.medium-4.columns
a.black href=package_path(name: pkg.name)
.pkgname
=pkg.name
' >
- if pkg.screenshots.any?
a.black.fancybox title=pkg.screenshots.first.caption rel='fancybox-group' href=pkg.screenshots.first.url('large')
img.screenshot src=pkg.screenshots.first.url('large')
- if pkg.screenshots.length > 1
.text-center More screenshots
- else
a href=upload_package_path(name: pkg.name)
img.screenshot src="/images/dummy/no-screenshots-upload-one.svg"
.small-12.medium-8.columns
= render partial: 'packages/list_details', locals: {pkg: pkg }
// Second paginator at the bottom so the user does not have to scroll up again
= render 'packages/paginator'
- else
div.panel.callout.radius
' Sorry. I couldn't find any software package like that.
' Would you like to view
'
a href=url(:package, :index) all packages
'
' instead?
// Icon sidebar for options and views
.small-3.medium-2.columns
= render 'packages/sidebar'