From 7e7d2e6c0b268bb2ead2c5f4fb1467f797579b61 Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Wed, 2 Mar 2016 21:36:58 +0100 Subject: [PATCH] Partially migrated to Foundatoin 6 --- app/assets/javascripts/application.js | 2 +- app/assets/stylesheets/_settings.scss | 377 +++++++++++++++++++++++- app/assets/stylesheets/application.scss | 5 +- app/assets/stylesheets/my.scss | 366 ----------------------- app/views/layouts/_topbar.slim | 22 +- app/views/layouts/application.html.slim | 7 +- 6 files changed, 388 insertions(+), 391 deletions(-) delete mode 100644 app/assets/stylesheets/my.scss diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 02fdfb7..f563a29 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -17,4 +17,4 @@ //= require cookies_eu //= require_tree . -$(document).foundation(); +$(function(){ $(document).foundation(); }); diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 42db5e2..ff59638 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -41,13 +41,21 @@ @import 'util/util'; + +// my +/* TODO: Make colors themable - e.g. Ubuntu has brown and SuSE has green */ +$debian-color: #c70338; + + + // 1. Global // --------- $global-font-size: 100%; $global-width: rem-calc(1200); $global-lineheight: 1.5; -$primary-color: #2199e8; +//$primary-color: #2199e8; +$primary-color: $debian-color; $secondary-color: #777; $success-color: #3adb76; $warning-color: #ffae00; @@ -546,3 +554,370 @@ $topbar-padding: 0.5rem; $topbar-background: $light-gray; $topbar-title-spacing: 1rem; $topbar-input-width: 200px; + +// --------------------------------------------------- +// -------------- debshots --------------------------- +// --------------------------------------------------- + +// Hover colors of links in top bar +$topbar-link-bg-hover: $primary-color; +$topbar-dropdown-link-bg-hover: $primary-color; + +// Larger top bar +// $topbar-height: rem-calc(60); +// Larger font in top bar +// $topbar-link-font-size: rem-calc(15); +$topbar-padding: 0; +// $topbar-button-font-size: rem-calc(3); +// $topbar-button-top: rem-calc(5); + +// $topbar-link-padding: rem-calc(8); + +// At which width the top navigation bar should be switched to +// mobile mode because otherwise it would wrap into two lines. +$topbar-breakpoint: 800px; +$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})"; + +// Import Google font +@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700); +$body-font-family: "Droid Sans"; + +$button-tny: rem-calc(4); +$button-font-tny: rem-calc(15); + +// Make the background of progress bars use a light version of the primary color +$progress-bar-color: tint($primary-color, 80); + +// Enable special grid and block-grid sizes for xlarge and xxlarge screens +/*$include-xl-html-grid-classes: true;*/ +/*$include-xl-html-block-grid-classes: true;*/ +/*$row-width: 100%;*/ + + + +$page-background: #f2f2f2; +$footer-background: #333333; +$footer-text-color: #b3b3b3; + +$menu-item-background-active: $primary-color; + +body +{ + background-color: $page-background; +} + +#teaser +{ + // 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-title +{ + // 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; + font-size: 80%; + } + + a + { + color: $footer-text-color; + font-weight: bolder; + } +} + + +// Leave some room after the topbar +#content +{ + padding-top: 5px; +} + +// Screenshot thumbnail image with name and description +.thumbnail +{ + padding-top: 5px !important; + padding-bottom: 5px !important; + border-radius: 10px; + margin-bottom: 10px; + text-align: center; + line-height: 120%; + + &:hover + { + background-color: #d0d0d0; + } + + .pkgname + { + font-weight: 700; + } + .pkgdescription + { + font-size: 80%; + } +} + +// Vertical icon bar in package view +#sidebar +{ + 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; + } +} + +// List view +.row .listview +{ + // 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%; + } + + img + { + filter: drop-shadow( 0px 0px 5px #888888 ); + } +} + +.row .gridview +{ + img.screenshot + { + width: 100%; + } +} + +.pkgname +{ + font-size: 130%; + font-weight: 700; + padding-bottom: 5px; + line-height: 120%; +} + + +/*.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; +} + +.packagepage +{ + h1 + { + margin-bottom: 0; + } + + .subtitle + { + font-size: 120%; + color: #808080; + } + + /* Description of a screenshot (e.g. the situation when the screenshot was taken) */ + .imgcaption + { + text-align: center; + font-variant: italic; + } + + /* Status of a screenshot (e.g. if it has to be moderated) */ + .imgstatus + { + text-align: center; + font-style: italic; + color: #808080; + } + + .bigpanel + { + background-color: white; + border-radius: 10px; + padding: 1em 1em 0.1em 1em; + margin-bottom: 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.8em; +// font-weight: bolder; + +// .meter +// { +// background-color: $primary-color; +// padding: 2px; +// padding-left: 0.4em; +// text-shadow: 0 0 2px black; +// } +// } + +/* Properties of a screenshot - shown in details view */ +.property-title +{ + font-weight: bolder; + font-size: 120%; + color: #808080; +} + +.property +{ + margin-left: 2em; + margin-bottom: 0.5em; +} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index fc92067..bed4efa 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -9,10 +9,7 @@ * compiled file, but it's generally better to create a new file per style scope. * *= require_self -//= require foundation_and_overrides + *= require foundation_and_overrides *= require cookies_eu *= require fancybox */ - -@import "foundation_and_overrides"; -@import "my"; diff --git a/app/assets/stylesheets/my.scss b/app/assets/stylesheets/my.scss deleted file mode 100644 index abded8c..0000000 --- a/app/assets/stylesheets/my.scss +++ /dev/null @@ -1,366 +0,0 @@ -// my own changes -/* TODO: Make colors themable - e.g. Ubuntu has brown and SuSE has green */ -$debian_color: #c70338; -$primary-color: $debian_color; - -// Hover colors of links in top bar -$topbar-link-bg-hover: $primary-color; -$topbar-dropdown-link-bg-hover: $primary-color; - -// Larger top bar -$topbar-height: rem-calc(60); -// Larger font in top bar -$topbar-link-font-size: rem-calc(15); - -$topbar-button-font-size: rem-calc(3); -$topbar-button-top: rem-calc(5); - -$topbar-link-padding: rem-calc(8); - -// At which width the top navigation bar should be switched to -// mobile mode because otherwise it would wrap into two lines. -$topbar-breakpoint: 800px; -$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})"; - -// Import Google font -@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700); -$body-font-family: "Droid Sans"; - -$button-tny: rem-calc(4); -$button-font-tny: rem-calc(15); - -// Make the background of progress bars use a light version of the primary color -$progress-bar-color: tint($primary-color, 80); - -// Enable special grid and block-grid sizes for xlarge and xxlarge screens -/*$include-xl-html-grid-classes: true;*/ -/*$include-xl-html-block-grid-classes: true;*/ -/*$row-width: 100%;*/ - - -// -------------- debshots --------------------------- - -$page-background: #f2f2f2; -$footer-background: #333333; -$footer-text-color: #b3b3b3; - -body -{ - background-color: $page-background; -} - -#teaser -{ - // 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; - font-size: 80%; - } - - a - { - color: $footer-text-color; - font-weight: bolder; - } -} - - -// Leave some room after the topbar -#content -{ - padding-top: 5px; -} - -// Screenshot thumbnail image with name and description -.thumbnail -{ - padding-top: 5px !important; - padding-bottom: 5px !important; - border-radius: 10px; - margin-bottom: 10px; - text-align: center; - line-height: 120%; - - &:hover - { - background-color: #d0d0d0; - } - - .pkgname - { - font-weight: 700; - } - .pkgdescription - { - font-size: 80%; - } -} - -// Vertical icon bar in package view -#sidebar -{ - 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; - } -} - -// List view -.row .listview -{ - // 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%; - } - - img - { - filter: drop-shadow( 0px 0px 5px #888888 ); - } -} - -.row .gridview -{ - img.screenshot - { - width: 100%; - } -} - -.pkgname -{ - font-size: 130%; - font-weight: 700; - padding-bottom: 5px; - line-height: 120%; -} - - -/*.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; -} - -.packagepage -{ - h1 - { - margin-bottom: 0; - } - - .subtitle - { - font-size: 120%; - color: #808080; - } - - /* Description of a screenshot (e.g. the situation when the screenshot was taken) */ - .imgcaption - { - text-align: center; - font-variant: italic; - } - - /* Status of a screenshot (e.g. if it has to be moderated) */ - .imgstatus - { - text-align: center; - font-style: italic; - color: #808080; - } - - .bigpanel - { - background-color: white; - border-radius: 10px; - padding: 1em 1em 0.1em 1em; - margin-bottom: 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.8em; -// font-weight: bolder; - -// .meter -// { -// background-color: $primary-color; -// padding: 2px; -// padding-left: 0.4em; -// text-shadow: 0 0 2px black; -// } -// } - -/* Properties of a screenshot - shown in details view */ -.property-title -{ - font-weight: bolder; - font-size: 120%; - color: #808080; -} - -.property -{ - margin-left: 2em; - margin-bottom: 0.5em; -} \ No newline at end of file diff --git a/app/views/layouts/_topbar.slim b/app/views/layouts/_topbar.slim index 03572f6..ea178a7 100644 --- a/app/views/layouts/_topbar.slim +++ b/app/views/layouts/_topbar.slim @@ -1,22 +1,14 @@ header div.contain-to-grid - nav.top-bar data-topbar=true role="navigation" - ul.title-area + .top-bar + .top-bar-title // 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 + img src="/images/logos/debian.svg" width="35" alt="Debian logo" + // TODO: Use proper distribution name + 'Debian Screenshots > - section.top-bar-section - ul.right + .top-bar-right + ul.menu li class=('active' if controller_name=='welcome' and action_name=='home') a href="/" Home li class=('active' if controller_name=='packages') diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index 09c926b..b8c28fc 100644 --- a/app/views/layouts/application.html.slim +++ b/app/views/layouts/application.html.slim @@ -1,14 +1,14 @@ doctype html html head - title screenshots.debian.net + title =(content_for?(:title) ? yield(: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="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" + / = javascript_include_tag "vendor/modernizr" = javascript_include_tag "application" = csrf_meta_tags @@ -24,7 +24,6 @@ html // Load Javascript libraries // Initialize Zurb Foundation javascript: - //$(document).foundation(); $(".fancybox").fancybox({ prevEffect : 'none', nextEffect : 'none',