From 1c59a5ac74c5ca83314bfb2178cb9f733d541b72 Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Sun, 30 Nov 2014 16:07:28 +0100 Subject: [PATCH] Mostly fixed the packages list, grid and detail views --- app/controllers/packages_controller.rb | 19 +++++++++- app/views/packages/_grid_thumbnail.slim | 15 ++++++++ app/views/packages/_list_details.slim | 32 ++++++++++++++++ app/views/packages/_paginator.slim | 8 ++++ app/views/packages/_sidebar.slim | 50 +++++++++++++++++++++++++ app/views/packages/index-grid.slim | 35 +++++++++++++++++ app/views/packages/index-list.slim | 48 ++++++++++++++++++++++++ 7 files changed, 206 insertions(+), 1 deletion(-) create mode 100644 app/views/packages/_grid_thumbnail.slim create mode 100644 app/views/packages/_list_details.slim create mode 100644 app/views/packages/_paginator.slim create mode 100644 app/views/packages/_sidebar.slim create mode 100644 app/views/packages/index-grid.slim create mode 100644 app/views/packages/index-list.slim diff --git a/app/controllers/packages_controller.rb b/app/controllers/packages_controller.rb index 49fb99c..94d934d 100644 --- a/app/controllers/packages_controller.rb +++ b/app/controllers/packages_controller.rb @@ -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 diff --git a/app/views/packages/_grid_thumbnail.slim b/app/views/packages/_grid_thumbnail.slim new file mode 100644 index 0000000..d780df9 --- /dev/null +++ b/app/views/packages/_grid_thumbnail.slim @@ -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 diff --git a/app/views/packages/_list_details.slim b/app/views/packages/_list_details.slim new file mode 100644 index 0000000..1401b84 --- /dev/null +++ b/app/views/packages/_list_details.slim @@ -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 diff --git a/app/views/packages/_paginator.slim b/app/views/packages/_paginator.slim new file mode 100644 index 0000000..7b4778f --- /dev/null +++ b/app/views/packages/_paginator.slim @@ -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 diff --git a/app/views/packages/_sidebar.slim b/app/views/packages/_sidebar.slim new file mode 100644 index 0000000..fac2c90 --- /dev/null +++ b/app/views/packages/_sidebar.slim @@ -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 diff --git a/app/views/packages/index-grid.slim b/app/views/packages/index-grid.slim new file mode 100644 index 0000000..e2b1812 --- /dev/null +++ b/app/views/packages/index-grid.slim @@ -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' diff --git a/app/views/packages/index-list.slim b/app/views/packages/index-list.slim new file mode 100644 index 0000000..23cc526 --- /dev/null +++ b/app/views/packages/index-list.slim @@ -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'