Getting the project working again

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

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(); }
);

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

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";

File diff suppressed because it is too large Load diff

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

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