chaas/debshots
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Getting the project working again

Browse source 
Replace Twitter Bootstrap by Zurb Foundation
Used @import in SCSS instad of require_tree for proper order and use of variables like $debian_color
Moved old files out of the way (renamed them to xx*)
Welcome controller (/) works
Moved templates from ERB to SLIM format
Fixed database settings
Reduced routes to working ones
Tidied up Gemfile
Checked in experimental lab files

Tried to find a good description for this massive commit :)
This commit is contained in:
Christoph Haas 2014-11-16 18:26:03 +01:00
parent a7e05b2b78
commit 87f545414f
38 changed files with 3341 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/application.js
View file

@ -12,6 +12,12 @@
//
//= require jquery
//= require jquery_ujs
//=require 'foundation/foundation.topbar'
//=require 'foundation/foundation.slider'
//= require fancybox
//= require twitter/bootstrap
//= require jquery.cycle2
//= require_tree .
$(function(){
$(document).foundation(); }
);

32
app/assets/javascripts/packages.js.coffee
View file

@ -2,19 +2,19 @@
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
jQuery ->
# Enable fancybox zoom for thumbnail images
$("a.fancybox").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'inside'
}
}
})
# Submit the form if the user changes the view (grid or list)
$("input[name='search[display]']").change ->
$(this).parents('form').submit()
#jQuery ->
# # Enable fancybox zoom for thumbnail images
# $("a.fancybox").fancybox({
# openEffect : 'elastic',
# closeEffect : 'elastic',
#
# helpers : {
# title : {
# type : 'inside'
# }
# }
# })
#
# # Submit the form if the user changes the view (grid or list)
# $("input[name='search[display]']").change ->
# $(this).parents('form').submit()

5
app/assets/stylesheets/application.css.scss
View file

@ -9,8 +9,7 @@
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*= require fancybox
*/
@import "twitter/bootstrap";
@import "foundation_and_overrides.scss";
@import "my.css.scss";

1480
app/assets/stylesheets/foundation_and_overrides.scss Normal file
View file

File diff suppressed because it is too large Load diff

322
app/assets/stylesheets/my.css.scss
View file

@ -1,78 +1,288 @@
div.thumbnail
// -------------- debshots ---------------------------
$page-background: #f2f2f2;
$footer-background: #333333;
$footer-text-color: #b3b3b3;
body
{
/*width: 200px;*/
height: 210px;
margin-bottom: 5px;
background-color: $page-background;
}
/* Package name in thumbnails view */
.thumbnail h3
#teaser
{
font-size: 18px;
// Leave some space between topbar and teaser on the home page
padding-top: 20px;
h1
{
// Larger "We have screenshots!" teaser title
font-weight: 700;
}
}
.top-bar .name
{
// Display the site name in a larger font
font-size: 26px;
padding: 8px 5px 3px 0;
color: #babdb6;
// Extra space around the Linux distribution's logo
img
{
padding: 0 5px;
}
}
header
{
// Draw a colored line below the navigation topbar
border-bottom: 5px solid $debian_color;
}
// ------- Footer - format as table cell to allow vertical centering
/*@import "compass/layout/sticky-footer";*/
/*@include sticky-footer(40px, "#wholepage");*/
html, body {
height: 100%;
}
// Wrapper that makes the page 100% high so the start page looks entirely filled
#wholepage
{
height: 100%;
}
#footer
{
background-color: $footer-background;
display: table;
width: 100%;
p
{
display: table-cell;
padding: 0 20px;
color: $footer-text-color;
vertical-align: middle;
text-align: center;
white-space: nowrap;
overflow: hidden;
margin-top: 8px;
margin-bottom: 5px;
font-size: 80%;
}
a
{
color: $footer-text-color;
font-weight: bolder;
}
}
/* Package description in thumbnails view */
.thumbnail p
// Leave some room after the topbar
#content
{
text-align: center;
padding-top: 5px;
}
/* Pagination is shown in top bar. Reduce margin to avoid making the nav bar larger. */
ul.pagination
{
margin: 8px 16px;
}
/* Make paginator a bit narrower to save space */
ul.pagination li a
{
padding-left: 6px;
padding-right: 6px;
}
/* Top bar is fixed. Move main part down so the bar does not hide it. */
.container-main
{
margin-top: 60px;
}
/* Waste less space above and below pagers */
.pager
{
margin: 10px 0;
}
/* Waste less space between/below the navbar and the main container */
.navbar
{
margin-bottom: 10px;
}
/* Make sure that the description of a package does not flow outside of the thumbnail box */
// Screenshot thumbnail image with name and description
.thumbnail
{
overflow: hidden;
padding-bottom: 10px;
text-align: center;
line-height: 120%;
.pkgname
{
font-weight: 700;
}
.pkgdescription
{
font-size: 80%;
}
}
.pkgdescr
// Vertical icon bar in package view
#sidebar
{
text-overflow: ellipsis;
text-align: center;
// Text over a group of icons
.caption
{
padding-bottom: 5px;
color: black;
}
// An icon
.item
{
padding-bottom: 10px;
}
// Leave space after the last icon in a group
.space
{
padding-bottom: 20px;
}
}
a.fancybox.thumbnail
// List view
.row .listview
{
border: none;
// Leave vertical space and draw a line between package rows
border-bottom: 2px solid #d0d0d0;
padding-bottom: 20px;
margin-bottom: 20px;
img.screenshot
{
width: 100%;
}
}
/* Disable resonsiveness in Twitter Bootstrap CSS */
.container
.row .gridview
{
width: 1200px !important;
img.screenshot
{
width: 100%;
}
}
.pkgname
{
font-size: 150%;
font-weight: 700;
padding-bottom: 5px;
}
.pkgdetails
{
.description
{
font-size: 150%;
color: #808080;
padding-bottom: 10px;
}
.longdescription
{
font-size: 90%;
line-height: 120%;
padding-bottom: 5px;
}
.rating
{
padding-top: 5px;
vertical-align: bottom;
}
.commentcount
{
padding-left: 20px;
}
}
.grid-thumbnail
{
height: 125px;
}
// Avoid painting links to detail packages in the primary color
a.black
{
color: black;
}
.gray
{
color: #808080;
}
.detailpage
{
h1
{
margin-bottom: 0;
}
.subtitle
{
font-size: 120%;
color: #808080;
}
.imgcaption
{
text-align: center;
}
.longdescription
{
background-color: white;
border-radius: 10px;
padding: 1em 1em 0.1em 1em;
}
.comment
{
font-size: 90%;
.summary
{
font-weight: 700;
}
.author
{
text-align: right;
color: #808080;
font-style: italic;
}
}
form.comment
{
border: 2px solid #a0a0a0;
background-color: white;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
.summary input,textarea
{
margin-bottom: 0;
}
// Hide most elements in a comment input form.
// They get shown once the summary field is typed into.
.content,.author,.submit
{
display: none;
}
}
}
.ratingbar
{
background-color: $progress-bar-color;
width: 10em;
display: inline-block;
padding: 2px;
text-align: left;
color: white;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: bolder;
.meter
{
background-color: $primary-color;
padding: 2px;
padding-left: 0.4rem;
text-shadow: 0 0 2px black;
}
}

78
app/assets/stylesheets/xxmy.css.scss Normal file
View file

@ -0,0 +1,78 @@
div.thumbnail
{
/*width: 200px;*/
height: 210px;
margin-bottom: 5px;
}
/* Package name in thumbnails view */
.thumbnail h3
{
font-size: 18px;
text-align: center;
white-space: nowrap;
overflow: hidden;
margin-top: 8px;
margin-bottom: 5px;
}
/* Package description in thumbnails view */
.thumbnail p
{
text-align: center;
}
/* Pagination is shown in top bar. Reduce margin to avoid making the nav bar larger. */
ul.pagination
{
margin: 8px 16px;
}
/* Make paginator a bit narrower to save space */
ul.pagination li a
{
padding-left: 6px;
padding-right: 6px;
}
/* Top bar is fixed. Move main part down so the bar does not hide it. */
.container-main
{
margin-top: 60px;
}
/* Waste less space above and below pagers */
.pager
{
margin: 10px 0;
}
/* Waste less space between/below the navbar and the main container */
.navbar
{
margin-bottom: 10px;
}
/* Make sure that the description of a package does not flow outside of the thumbnail box */
.thumbnail
{
overflow: hidden;
}
.pkgdescr
{
text-overflow: ellipsis;
}
a.fancybox.thumbnail
{
border: none;
}
/* Disable resonsiveness in Twitter Bootstrap CSS */
.container
{
width: 1200px !important;
}

4
app/controllers/packages_controller.rb
View file

@ -15,6 +15,10 @@ class PackagesController < ApplicationController
@packages = @packages.page(params[:page]).per(12)
end
def details
@package = Package.find_by(name: params[:name])
end
def with_screenshots
end

12
app/controllers/welcome_controller.rb
View file

@ -1,4 +1,14 @@
class WelcomeController < ApplicationController
def index
def home
# TODO: show count depending on virtual host
#@package_count = cache_or_set("debian_pkgcount", :expires => 10 * 60) do
Package.count
#end
# TODO: Use the package with the actual newest uploaded screenshot
@newest_uploaded_package = Package.with_screenshots.first
# TODO: Use the actually most popular package and not just a random one
@most_popular_package = Package.with_screenshots.first
end
end

48
app/models/package.rb
View file

@ -5,22 +5,38 @@ class Package < ActiveRecord::Base
order('name ASC')
}
# Use PostgreSQL's full-text search capability for the user search
def self.text_search(query)
if query.present?
# Add a rank column to each result
rank = <<-RANK
ts_rank(to_tsvector(packages.name), plainto_tsquery(#{sanitize(query)}))
+
ts_rank(to_tsvector(packages.description), plainto_tsquery(#{sanitize(query)}))
RANK
# Do the full-text search and return results by rank
where("to_tsvector('english', packages.name) @@ plainto_tsquery(:q) or
to_tsvector('english', packages.description) @@ plainto_tsquery(:q)
", q: query).order("#{rank} desc")
else
all
end
# Return a query of all packages that have screenshots
def self.with_screenshots
# Query for all packages who's ID appears in a screenshot's "package_id" field
subselect = Screenshot.select(:package_id)
where(id: subselect )
end
# Return a query of all packages that have screenshots
def self.without_screenshots
# Query for all packages who's ID does not appear in a screenshot's "package_id" field
subselect = Screenshot.select(:package_id)
where.not(id: subselect)
end
# Use PostgreSQL's full-text search capability for the user search
# TODO: check if pgSearch does this job for us
#def self.text_search(query)
# if query.present?
# # Add a rank column to each result
# rank = <<-RANK
# ts_rank(to_tsvector(packages.name), plainto_tsquery(#{sanitize(query)}))
# +
# ts_rank(to_tsvector(packages.description), plainto_tsquery(#{sanitize(query)}))
# RANK
#
# # Do the full-text search and return results by rank
# where("to_tsvector('english', packages.name) @@ plainto_tsquery(:q) or
# to_tsvector('english', packages.description) @@ plainto_tsquery(:q)
# ", q: query).order("#{rank} desc")
# else
# all
# end
#end
end

23
app/models/screenshot.rb
View file

@ -8,4 +8,27 @@ class Screenshot < ActiveRecord::Base
def image_url(size)
"#{Rails.configuration.images_path_prefix}/#{self.package.name[0]}/#{self.package.name}/#{self.id}_#{size}.png"
end
## Get the URL leading to a screenshot of this package
#def url(size)
# if self.approved
# # TODO: Make the path configurable
# basepath = "/screenshots/approved/"
# else
# basepath = "/screenshots/unapproved/"
# end
#
# File.join(basepath, self.package.name[0], self.package.name, "#{self.id}_#{size}.png")
#end
#
## Return caption for full-screen screenshots.
## Takes the description of a screenshot if available.
## Otherwise it falls back to the general description of its package.
#def caption
# if self.description != ''
# self.description
# else
# self.package.description
# end
#end
end

13
app/views/layouts/_footer.slim Normal file
View file

@ -0,0 +1,13 @@
#footer
p
//| DEBUG RESPONSIVE:
//strong.show-for-small-only Small
//strong.show-for-medium-only Medium
//strong.show-for-large-only Large
//strong.show-for-xlarge-only X-Large
//strong.show-for-xxlarge-up XX-Large
// TODO: show feedback form in a modal and send the context (URL, user) along with email
' This site is operated by Christoph Haas and his debshots web application. Want to leave
a href="mailto:email@christoph-haas.de" feedback?
' | Kindly hosted by
a href="http://vexxhost.com/" VEXXHOST

40
app/views/layouts/_topbar.slim Normal file
View file

@ -0,0 +1,40 @@
header
div.contain-to-grid
nav.top-bar data-topbar=true role="navigation"
ul.title-area
// TODO: Make the logo depend on the virtual host
li.name
img src="/images/logos/debian.svg" width="35" alt="Debian logo"
// TODO: Use proper distribution name
'Debian Screenshots >
// Not enough space for the search… where do we put it?
//li.item
// = form_tag( url(:package, :index), :method=>'get')
// = search_field_tag :search, :placeholder=>'Search…', :autofocus=>true
li.toggle-topbar.menu-icon
a href="#"
span Menu
section.top-bar-section
ul.right
li class=('active' if controller_name=='welcome')
a href="/" Home
li class=('active' if controller_name=='package')
a href="/packages" Explore
li class=('active' if controller_name=='upload')
a href="/upload" Contribute
li.has-dropdown
a href="#" Distributions
ul.dropdown
// TODO: Use proper distribution list
li
a href="#" Debian
li
a href="#" Ubuntu
li class=('active' if controller_name=='about')
a href="/about" About
li.divider
// TODO: Show link for admin/moderation view if admin is logged in
li.has-form
// TODO: Show "My" when the user is logged in
a.button href="/profile" Login

15
app/views/layouts/application.html.erb
View file

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Debshots</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application", "data-turbolinks-track" => false %>
<meta charset='utf-8' />
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>

56
app/views/layouts/application.html.slim Normal file
View file

@ -0,0 +1,56 @@
doctype html
html
head
title screenshots.debian.net
/ TODO: make title reflect the virtual host (e.g. Debian)
meta charset="utf-8"
meta name="keywords" content="debian screenshots packages applications linux"
meta name="viewport" content="width=device-width, initial-scale=1.0"
/ TODO: make the keywords reflect the virtual host (e.g. Debian)
= stylesheet_link_tag "application", media: "all"
= javascript_include_tag "vendor/modernizr"
= stylesheet_link_tag "jquery-fancybox/jquery.fancybox", media: "all"
= stylesheet_link_tag "jquery.raty", media: "all"
= javascript_include_tag 'jquery'
/ = javascript_include_tag 'jquery.raty'
= csrf_meta_tags
body
// TODO: move topbar somewhere else than packages
#wholepage
= render 'layouts/topbar'
#content
= yield
= render 'layouts/footer'
= javascript_include_tag "application"
// Load Javascript libraries
// Initialize Zurb Foundation
javascript:
//$(document).foundation();
$('.fancybox').fancybox({nextEffect: "none", prevEffect: "none"});
// See http://wbotelhos.com/raty
//$('.star-rating').raty({
// score: 3,
// cancelOff: '/images/raty/cancel-off.png',
// cancelOn: '/images/raty/cancel-on.png',
// starHalf: '/images/raty/star-half.png',
// starOff: '/images/raty/star-off.png',
// starOn: '/images/raty/star-on.png',
// half: true
//});
//
//$('.star-rating-readonly').raty({
// score: 3,
// cancelOff: '/images/raty/cancel-off.png',
// cancelOn: '/images/raty/cancel-on.png',
// starHalf: '/images/raty/star-half.png',
// starOff: '/images/raty/star-off.png',
// starOn: '/images/raty/star-on.png',
// readOnly: true,
// halfShow: true,
// score: function() { return $(this).attr('data-score'); }
//});

0
app/views/packages/_packages_search_results_grid.html.erb → app/views/packages/xx_packages_search_results_grid.html.erb
View file

0
app/views/packages/_packages_search_results_list.html.erb → app/views/packages/xx_packages_search_results_list.html.erb
View file

0
app/views/packages/index.html.erb → app/views/packages/xxindex.html.erb
View file

0
app/views/packages/moderate.html.erb → app/views/packages/xxmoderate.html.erb
View file

61
app/views/welcome/home.slim Normal file
View file

@ -0,0 +1,61 @@
#teaser.row
div.large-4.medium-4.small-3.columns
#biglogo
// TODO: make the logo depending on the virtual host
img src="/images/logos/debian.svg" width="400" alt="Debian logo"
div.large-8.medium-8.small-9.columns
h1 We have screenshots!
p
' Have you ever wondered how a certain piece of software looks
' and works before spending time installing it?
p
' This website lets you browse screenshots of
=> number_with_delimiter(@package_count)
' software packages coming with
' Debian and other Linux distributions. And of course you are encouraged to upload
' your own screenshots for others to explore.
p
= form_tag(packages_path, method: 'GET')
div.row.collapse.postfix-round
div.small-9.columns
input type="text" name="search" placeholder="Looking for a special software?" autofocus="true"
div.small-3.columns
input.button.postfix type="submit" value="Search"
div.row
hr
div.row
div.large-4.medium-12.small-12.columns.text-center
h2 Newest upload
// TODO: load actual newest upload and cache it
// TODO: link to the package page
a.black href=package_path(@newest_uploaded_package.name)
img src=@newest_uploaded_package.screenshots[0].image_url('large')
p
strong
=@newest_uploaded_package.name
' :
'
=@newest_uploaded_package.description
div.large-4.medium-12.small-12.columns.text-center
h2 Most popular
// TODO: load actual most popular package and highest-rated screenshot and cache it
// TODO: link to the package page
a.black href=package_path(@most_popular_package.name)
img src=@most_popular_package.screenshots[0].image_url('large')
p
strong
=@most_popular_package.name
' :
'
=@most_popular_package.description
div.large-4.medium-12.small-12.columns.text-center
h2 Your help needed
// TODO: load actual most popular package without a screenshot and cache it
a href=upload_package_path('firefox')
img src="/images/dummy/no-screenshots-upload-one.svg" width="80%"
p
' We lack a screenshot for the Firefox package. Can you
a href=upload_package_path('firefox') provide one
' ?