From 06b8f9296392bd70428ab818622a5c58d89652e7 Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Wed, 27 Jun 2018 18:43:08 +0200 Subject: [PATCH] Restyling --- app/assets/stylesheets/_settings.scss | 16 +- app/assets/stylesheets/application.scss | 1 + .../stylesheets/foundation_and_overrides.scss | 3 - .../{customisations.scss => my_styles.scss} | 273 ++++++------ app/views/devise/sessions/new.slim | 20 +- app/views/layouts/_topbar.slim | 11 +- app/views/layouts/application.html.slim | 7 +- app/views/logs/index.html.slim | 8 +- app/views/moderate/index.slim | 8 +- app/views/my/profile.slim | 2 +- app/views/my/uploads.slim | 4 +- app/views/my/welcome.slim | 37 +- app/views/packages/_details_uploadmodal.slim | 6 +- app/views/packages/_receive_upload.slim | 27 +- app/views/packages/details.slim | 15 +- app/views/packages/grid.slim | 16 +- app/views/packages/list.slim | 18 +- app/views/packages/notfound.slim | 38 +- app/views/packages/upload.slim | 15 +- app/views/welcome/about.slim | 413 +++++++++--------- app/views/welcome/home.slim | 47 +- 21 files changed, 492 insertions(+), 493 deletions(-) rename app/assets/stylesheets/{customisations.scss => my_styles.scss} (64%) diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 26f74f9..323d3ea 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -69,7 +69,7 @@ $global-font-size: 100%; $global-width: rem-calc(1200); $global-lineheight: 1.5; $foundation-palette: ( - primary: #1779ba, + primary: #c70338, secondary: #767676, success: #3adb76, warning: #ffae00, @@ -80,9 +80,11 @@ $medium-gray: #cacaca; $dark-gray: #8a8a8a; $black: #0a0a0a; $white: #fefefe; -$body-background: $white; +// $body-background: $white; +$body-background: #f2f2f2; $body-font-color: $black; -$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; +$body-font-family: 'Droid Sans', sans-serif; +// $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; $body-antialiased: true; $global-margin: 1rem; $global-padding: 1rem; @@ -90,7 +92,8 @@ $global-position: 1rem; $global-weight-normal: normal; $global-weight-bold: bold; $global-radius: 0; -$global-menu-padding: 0.7rem 1rem; +$global-menu-padding: 0.3rem 0.5rem; +// $global-menu-padding: 0.7rem 1rem; $global-menu-nested-margin: 1rem; $global-text-direction: ltr; $global-flexbox: true; @@ -845,8 +848,9 @@ $tooltip-radius: $global-radius; // 55. Top Bar // ----------- -$topbar-padding: 0.5rem; -$topbar-background: $light-gray; +$topbar-padding: 0; +// $topbar-background: $light-gray; +$topbar-background: #d8d8d8; $topbar-submenu-background: $topbar-background; $topbar-title-spacing: 0.5rem 1rem 0.5rem 0; $topbar-input-width: 200px; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 5f83651..b9b5c5a 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -13,4 +13,5 @@ *= require cookies_eu *= require fancybox *= require font-awesome + *= require my_styles */ diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss index 8d8891e..2ae5cbb 100644 --- a/app/assets/stylesheets/foundation_and_overrides.scss +++ b/app/assets/stylesheets/foundation_and_overrides.scss @@ -1,9 +1,6 @@ @charset 'utf-8'; -$debian-color: #c70338; - @import 'settings'; -@import 'customisations'; @import 'foundation'; // If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package. diff --git a/app/assets/stylesheets/customisations.scss b/app/assets/stylesheets/my_styles.scss similarity index 64% rename from app/assets/stylesheets/customisations.scss rename to app/assets/stylesheets/my_styles.scss index 2a685f1..ffef0cb 100644 --- a/app/assets/stylesheets/customisations.scss +++ b/app/assets/stylesheets/my_styles.scss @@ -1,8 +1,5 @@ -// --------------------------------------------------- -// -------------- debshots --------------------------- -// --------------------------------------------------- -$topbar-padding: 0; + // $topbar-padding: 0; // At which width the top navigation bar should be switched to // mobile mode because otherwise it would wrap into two lines. @@ -25,61 +22,69 @@ $topbar-padding: 0; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } -$body-font-family: "Droid Sans"; - -$button-tny: rem-calc(4); -$button-font-tny: rem-calc(15); +// $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); +// $progress-bar-color: tint($primary-color, 80); -$page-background: #f2f2f2; -$footer-background: #333333; -$footer-text-color: #b3b3b3; +// $page-background: #f2f2f2; +// $footer-background: #333333; +// $footer-text-color: #b3b3b3; -$menu-item-background-active: $primary-color; +// $menu-item-color-active: $white; +// $menu-item-background-active: get-color(primary); +// $menu-icon-spacing: 0.25rem; +// $menu-item-background-hover: $light-gray; -header -{ - // background-color: $light-gray; - background-color: #2e3436; -} +// $menu-item-background-active: $primary-color; -body -{ - background-color: $page-background; -} +// header +// { +// // background-color: $light-gray; +// // background-color: #2e3436; +// } + +// 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-left +// Menu text not bold +.menu .menu-text { + font-weight: 100 !important; + font-size: 1.1rem; +} + +h1, h2, h3 { - .menu .menu-text - { - // Display the site name in a larger font - font-size: 26px; - padding: 8px 5px 3px 0; - color: $dark-gray; - font-weight: normal; - } - - // Extra space around the Linux distribution's logo - img - { - padding: 5px; - } + color: #8a8a8a; } +// .top-bar-left +// { +// .menu .menu-text +// { +// // Display the site name in a larger font +// font-size: 1.2rem; +// padding: 10px 5px 3px 0; +// color: $dark-gray; +// font-weight: normal; +// } + +// // Extra space around the Linux distribution's logo +// img +// { +// padding: 5px; +// } +// } + // Make thumbnails equally high div.thumb-height { @@ -135,15 +140,15 @@ div.thumb-height /*@import "compass/layout/sticky-footer";*/ /*@include sticky-footer(40px, "#wholepage");*/ -html, body { - height: 100%; -} +// html, body { +// height: 100%; +// } // Wrapper that makes the page 100% high so the start page looks entirely filled -#wholepage -{ - height: 100%; -} +// #wholepage +// { +// height: 100%; +// } // #footer // { @@ -170,17 +175,17 @@ html, body { // Leave some room after the topbar -#content -{ - padding-top: 5px; -} +// #content +// { +// padding-top: 5px; +// } -.grid-thumbnails .column -{ - border-radius: 10px; - padding: 5px 5px 50px 5px; - text-align: center; -} +// .grid-thumbnails .column +// { +// border-radius: 10px; +// padding: 5px 5px 50px 5px; +// text-align: center; +// } // Vertical icon bar in package view #sidebar @@ -208,33 +213,33 @@ html, body { } // List view -.row .listview -{ - // Leave vertical space and draw a line between package rows - border-bottom: 1px solid rgba(0,0,0, 0.2); - padding-bottom: 20px; - margin-bottom: 20px; +// .row .listview +// { +// // Leave vertical space and draw a line between package rows +// border-bottom: 1px solid rgba(0,0,0, 0.2); +// padding-bottom: 20px; +// margin-bottom: 20px; - img.screenshot - { - width: 100%; - } +// img.screenshot +// { +// width: 100%; +// } - img - { - // box-shadow: 0px 0px 5px #000000; - box-shadow: 0 0 6px -1px rgba(0,0,0, 1); - } -} +// img +// { +// // box-shadow: 0px 0px 5px #000000; +// box-shadow: 0 0 6px -1px rgba(0,0,0, 1); +// } +// } -.fancybox -{ - img - { - // box-shadow: 0px 0px 5px #000000; - box-shadow: 0 0 6px -1px rgba(0,0,0, 1); - } -} +// .fancybox +// { +// img +// { +// // box-shadow: 0px 0px 5px #000000; +// box-shadow: 0 0 6px -1px rgba(0,0,0, 1); +// } +// } .pkgname { @@ -263,7 +268,7 @@ a.black .bigpanel { - background-color: $light-gray; + background-color: #e6e6e6; border-radius: 10px; padding: 1em 1em 0.1em 1em; margin-bottom: 1em; @@ -382,9 +387,9 @@ a.black } /* Foundation sets file buttons to 100% width. Fix that */ -[type='file'] { - width: inherit !important; -} +// [type='file'] { +// width: inherit !important; +// } // .top-bar-title a { // font-size: 1.8rem; @@ -392,11 +397,11 @@ a.black // line-height: 1; // } -.button { - // box-shadow: 0px 0px 5px #000000; - box-shadow: 0 0 6px -1px rgba(0,0,0, 1); - border-radius: 10px !important; -} +// .button { +// // box-shadow: 0px 0px 5px #000000; +// box-shadow: 0 0 6px -1px rgba(0,0,0, 1); +// border-radius: 10px !important; +// } // Simple animation for FontAwesome icons in callouts at the top. /* @@ -414,54 +419,54 @@ a.black } */ -.menu .menu-text { - font-size: 2rem; - font-weight: 100; -} +// .menu .menu-text { +// font-size: 2rem; +// font-weight: 100; +// } // Nicer callouts // https://foundation.zurb.com/building-blocks/blocks/alert-callout-subtle.html -$alert-callout-subtle-border-left-width: rem-calc(5); -$alert-callout-subtle-radius: 0.6rem; +// $alert-callout-subtle-border-left-width: rem-calc(5); +// $alert-callout-subtle-radius: 0.6rem; -.alert-callout-subtle { - width: 100%; - background: $light-gray; - color: $dark-gray; - border: 0; - border-left: $alert-callout-subtle-border-left-width solid $dark-gray; - box-shadow: 0 5px 8px -6px rgba(0,0,0, 0.2); +// .alert-callout-subtle { +// width: 100%; +// background: $light-gray; +// color: $dark-gray; +// border: 0; +// border-left: $alert-callout-subtle-border-left-width solid $dark-gray; +// box-shadow: 0 5px 8px -6px rgba(0,0,0, 0.2); - &.success { - background: $light-gray; - color: $dark-gray; - border-left: $alert-callout-subtle-border-left-width solid $success-color; - } +// &.success { +// background: $light-gray; +// color: $dark-gray; +// border-left: $alert-callout-subtle-border-left-width solid $success-color; +// } - &.alert { - background: $light-gray; - color: $dark-gray; - border-left: $alert-callout-subtle-border-left-width solid $alert-color; - } +// &.alert { +// background: $light-gray; +// color: $dark-gray; +// border-left: $alert-callout-subtle-border-left-width solid $alert-color; +// } - &.warning { - background: $light-gray; - color: $dark-gray; - border-left: $alert-callout-subtle-border-left-width solid $warning-color; - } +// &.warning { +// background: $light-gray; +// color: $dark-gray; +// border-left: $alert-callout-subtle-border-left-width solid $warning-color; +// } - &.primary { - background: $light-gray; - color: $dark-gray; - border-left: $alert-callout-subtle-border-left-width solid $primary-color; - } +// &.primary { +// background: $light-gray; +// color: $dark-gray; +// border-left: $alert-callout-subtle-border-left-width solid $primary-color; +// } - .close-button { - font-size: 2rem; - @include vertical-center; - } +// .close-button { +// font-size: 2rem; +// @include vertical-center; +// } - &.radius { - border-radius: $alert-callout-subtle-radius; - } -} +// &.radius { +// border-radius: $alert-callout-subtle-radius; +// } +// } diff --git a/app/views/devise/sessions/new.slim b/app/views/devise/sessions/new.slim index 824085b..cab2dac 100644 --- a/app/views/devise/sessions/new.slim +++ b/app/views/devise/sessions/new.slim @@ -1,7 +1,7 @@ // Login form (sign_in) -.row - .small-8.columns.small-centered +.grid-container + .small-8.cell.small-centered div.callout p ' Are you required to login? No. You can still upload screenshots. @@ -23,7 +23,7 @@ a href='https://sso.debian.org/' Debian SSO ' installed in your browser. -.row +.grid-container .text-center // Alternative way to display buttons without images. (Amazon wants their own button though.) @@ -45,24 +45,24 @@ hr -.row +.grid-container = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| = f.hidden_field :provider, value: 'local' - .small-2.columns + .small-2.cell b Admin only… - .small-5.columns + .small-5.cell = f.email_field :email, autofocus: true, placeholder: 'email address' - .small-4.columns + .small-4.cell = f.password_field :password, autocomplete: "off", placeholder: 'password' - .small-1.columns + .small-1.cell = f.submit "Log in", class: 'button' / - if devise_mapping.rememberable? - / .small-6.columns + / .small-6.cell / = f.check_box :remember_me - / .small-6.columns + / .small-6.cell / = f.label :remember_me diff --git a/app/views/layouts/_topbar.slim b/app/views/layouts/_topbar.slim index 84a314b..c9b0e24 100644 --- a/app/views/layouts/_topbar.slim +++ b/app/views/layouts/_topbar.slim @@ -4,12 +4,13 @@ nav.top-bar .grid-x .top-bar-left ul.menu - li - img src="/images/logos/debian.svg" width="38" alt="Debian logo" + li.menu-text + img src="/images/logos/debian.svg" width="20" alt="Debian logo" li.menu-text a href='/' - // TODO: Make the logo depend on the virtual host - // TODO: Use proper distribution name + // TODO: Make the logo depend on the virtual host + // TODO: Use proper distribution name + span style="font-weight: bold" ' Debian Screenshots > / .top-bar-right @@ -17,7 +18,7 @@ nav.top-bar li.menu-text class=('active' if controller_name=='welcome' and action_name=='home') a href="/" Home li.menu-text class=('active' if controller_name=='packages') - a href="/packages" Explore + a href="/packages" Browse //li.has-dropdown //a href="#" Distributions //ul.dropdown diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index 4d6bb9f..377834a 100644 --- a/app/views/layouts/application.html.slim +++ b/app/views/layouts/application.html.slim @@ -13,10 +13,9 @@ html = csrf_meta_tags body - .container - = render 'layouts/topbar' - #content - #messages.row + = render 'layouts/topbar' + #content.grid-container + #messages = render 'layouts/messages' = yield = render 'layouts/footer' diff --git a/app/views/logs/index.html.slim b/app/views/logs/index.html.slim index 64db410..aeca9ed 100644 --- a/app/views/logs/index.html.slim +++ b/app/views/logs/index.html.slim @@ -1,16 +1,16 @@ // Paginator and search bar -.row - .small-6.medium-8.large-9.columns +.grid-x + .small-6.medium-8.large-9.cell // Paginator = render 'logs/paginator' - .small-6.medium-4.large-3.columns + .small-6.medium-4.large-3.cell // Search form = form_tag url_for, :method=>'GET' = text_field_tag(:search, params[:search], placeholder: "Search...", maxlength: 50, size: 20, autofocus: true) // List of log messages -.row +.grid-x - if @logs.length>0 table tr diff --git a/app/views/moderate/index.slim b/app/views/moderate/index.slim index a6a28ef..cc117de 100644 --- a/app/views/moderate/index.slim +++ b/app/views/moderate/index.slim @@ -1,4 +1,4 @@ -.row +.grid-container h1 Moderation queue - if @package @@ -13,8 +13,8 @@ p =@package.description // Show moderation queue left - and existing screenshots right - .row.packagepage - .small-6.columns + .grid-x.packagepage + .small-6.cell p Please moderate: - @pending_screenshots.each do |screenshot| .container.listview @@ -38,7 +38,7 @@ a.button.success.round href=approve_screenshot_path(screenshot) Keep the screenshot - .small-6.columns + .small-6.cell p Existing screenshots: - @package.screenshots.each do |screenshot| - if screenshot.approved==true and screenshot.markedfordelete==false diff --git a/app/views/my/profile.slim b/app/views/my/profile.slim index 58c199e..1aa762f 100644 --- a/app/views/my/profile.slim +++ b/app/views/my/profile.slim @@ -1,4 +1,4 @@ -.row +.grid-container = render partial: 'menu' diff --git a/app/views/my/uploads.slim b/app/views/my/uploads.slim index a7700cd..1c7a22a 100644 --- a/app/views/my/uploads.slim +++ b/app/views/my/uploads.slim @@ -2,7 +2,7 @@ / = link_to 'Back', :back, class: 'button small' -.row.packagepage +.grid-container.packagepage h1 Screenshots you uploaded - @packages.each do |package| @@ -12,7 +12,7 @@ .small-9.large-10.columns - if @current_users_screenshots.length>0 - .row.small-up-1.medium-up-3.large-up-4.grid-thumbnails + .grid-x.small-up-1.medium-up-3.large-up-4.grid-thumbnails - @current_users_screenshots.each do |screenshot| .column diff --git a/app/views/my/welcome.slim b/app/views/my/welcome.slim index 031680c..b9762e6 100644 --- a/app/views/my/welcome.slim +++ b/app/views/my/welcome.slim @@ -1,24 +1,21 @@ -.row - = render partial: 'menu' +.small-8.columns.small-centered - .small-8.columns.small-centered - - .callout.success - h1 Welcome - - - if current_user.provider == 'debian-sso' - p - 'You have just logged in using your Debian SSO certificate which proves that - 'you are associated to the Debian project. So you are invited to upload any - 'screenshots. Your uploads will instantly be published and visible in applications - 'and web sites that use this service. - - else - p - 'You are now logged in. We will associate all your future uploads of screenshots - 'with your account. So others can see what you contributed to this site. + .callout.success + h1 Welcome + - if current_user.provider == 'debian-sso' p - ' If you want to help then check out the - a href="/packages?show=without" packages that have no screenshots - ' yet. + 'You have just logged in using your Debian SSO certificate which proves that + 'you are associated to the Debian project. So you are invited to upload any + 'screenshots. Your uploads will instantly be published and visible in applications + 'and web sites that use this service. + - else + p + 'You are now logged in. We will associate all your future uploads of screenshots + 'with your account. So others can see what you contributed to this site. + + p + ' If you want to help then check out the + a href="/packages?show=without" packages that have no screenshots + ' yet. diff --git a/app/views/packages/_details_uploadmodal.slim b/app/views/packages/_details_uploadmodal.slim index 83c4e90..aeb60db 100644 --- a/app/views/packages/_details_uploadmodal.slim +++ b/app/views/packages/_details_uploadmodal.slim @@ -1,14 +1,14 @@ // Modal upload window #upload-modal.reveal data-reveal=true role='dialog' h1 Upload new screenshots - .row - .small-4.columns + .grid-x + .small-4.cell = form_for :screenshot, url: upload_image_path, html: { multipart: true } do |f| / = image_tag("/images/dummy/upload.svg", style: "width: 100%", id: 'upload-image') a.button.round id='upload-image' Start uploading = f.file_field :image, id: 'fileupload', multiple: true, style: 'display: none' - .small-8.columns + .small-8.cell .bigpanel p Thanks for uploading more screenshots. Please note: ul diff --git a/app/views/packages/_receive_upload.slim b/app/views/packages/_receive_upload.slim index 044fcad..6b66f2c 100644 --- a/app/views/packages/_receive_upload.slim +++ b/app/views/packages/_receive_upload.slim @@ -1,22 +1,21 @@ / Render this callout on top of the package's details page / if images have just been uploaded. - if (@valid_images and @valid_images.any?) or (@invalid_images and @invalid_images.any?) - .row - .callout.warning + .callout.warning - - if @invalid_images.any? - = fa_icon 'exclamation-circle 2x pull-left' - p These images were not accepted: + - if @invalid_images.any? + = fa_icon 'exclamation-circle 2x pull-left' + p These images were not accepted: - ul - - @invalid_images.each do |image| - li - ' #{image.image_file_name} (#{image.errors[:image].join(' and the image ')}) + ul + - @invalid_images.each do |image| + li + ' #{image.image_file_name} (#{image.errors[:image].join(' and the image ')}) - - if @valid_images.any? - = fa_icon 'check-circle 2x pull-left' - p - ' #{pluralize(@valid_images.length, 'screenshot')} received successfully. - ' Please review the images and add a description for each image. Thanks. + - if @valid_images.any? + = fa_icon 'check-circle 2x pull-left' + p + ' #{pluralize(@valid_images.length, 'screenshot')} received successfully. + ' Please review the images and add a description for each image. Thanks. diff --git a/app/views/packages/details.slim b/app/views/packages/details.slim index 31a28a3..daaa911 100644 --- a/app/views/packages/details.slim +++ b/app/views/packages/details.slim @@ -2,16 +2,15 @@ / in a callout. = render 'receive_upload' -.row.packagepage - .small-12.columns - h1 =@package.name +.packagepage +h1 =@package.name -.row.packagepage - #details.small-7.medium-7.columns.packagepage +.grid-x.grid-padding-x.packagepage + #details.small-7.medium-7.cell.packagepage p.subtitle = @package.description - if screenshots_visible_to_user(@package).count > 0 - screenshots_visible_to_user(@package).each do |screenshot| - .row.listview + .listview .text-center a.black.fancybox href=screenshot.image.url(:large, timestamp: false) rel='fancybox-thumb' title=screenshot.caption = image_tag(screenshot.image.url(:large, timestamp: false), alt: screenshot.caption) @@ -38,7 +37,7 @@ // = render(partial: 'report_dropdown', locals: {screenshot: screenshot}) - else - .row.listview + .listview img src='/images/dummy/no-screenshots-available.svg' width='100%' style='padding: 0 10%' // Load reviews from the Ubuntu API through our own (cached) URL. @@ -46,7 +45,7 @@ // was not yet cached. / #reviews data-package-reviews-url=package_reviews_path(@package.name) - .small-5.medium-5.columns data-sticky-container=true + .small-5.medium-5.cell data-sticky-container=true = render(partial: 'details_rightbox', locals: {pkg: @package}) / javascript: diff --git a/app/views/packages/grid.slim b/app/views/packages/grid.slim index 61ae37c..2b82d11 100644 --- a/app/views/packages/grid.slim +++ b/app/views/packages/grid.slim @@ -1,20 +1,20 @@ // Paginator and search bar -.row - .small-6.medium-8.large-9.columns +.grid-x + .small-6.medium-8.large-9.cell // Paginator = render 'packages/paginator' - .small-6.medium-4.large-3.columns + .small-6.medium-4.large-3.cell // Search form = render 'packages/searchfield' // Grid view -.row - .small-9.large-10.columns +.grid-x + .small-9.large-10.cell - if @packages.length>0 - .row.small-up-1.medium-up-3.large-up-4.grid-thumbnails + .grid-x.grid-margin-x.small-up-1.medium-up-3.large-up-4 - @packages.all.each do |pkg| - .column + .cell = render partial: 'packages/grid_thumbnail', locals: { pkg: pkg } - else @@ -24,5 +24,5 @@ = render 'packages/paginator' // Icon sidebar for options and views - .small-3.large-2.columns + .small-3.large-2.cell = render 'packages/sidebar' diff --git a/app/views/packages/list.slim b/app/views/packages/list.slim index 6ac806d..5c7d7dc 100644 --- a/app/views/packages/list.slim +++ b/app/views/packages/list.slim @@ -1,20 +1,20 @@ // Paginator and search bar -.row - .small-6.medium-8.large-9.columns +.grid-x + .small-6.medium-8.large-9.cell // Paginator = render 'packages/paginator' - .small-6.medium-4.large-3.columns + .small-6.medium-4.large-3.cell // Search form = render 'packages/searchfield' // Package list -.row.packagepage - .small-9.medium-10.columns +.grid-x.packagepage + .small-9.medium-10.cell - if @packages.length>0 - @packages.to_a.each do |pkg| - .row.listview - .small-12.medium-4.columns + .grid-x.listview + .small-12.medium-4.cell - if pkg.screenshots_approved.any? // TODO: smarter search for the best screenshot instead of taking the first one - screenshot = pkg.screenshots.first @@ -26,7 +26,7 @@ - else a href=package_path(name: pkg.name) img.screenshot src="/images/dummy/no-screenshots-upload-one.svg" - .small-12.medium-8.columns + .small-12.medium-8.cell h1 a href=package_path(name: pkg.name) =pkg.name @@ -41,5 +41,5 @@ = render 'packages/noresults' // Icon sidebar for options and views - .small-3.medium-2.columns + .small-3.medium-2.cell = render 'packages/sidebar' diff --git a/app/views/packages/notfound.slim b/app/views/packages/notfound.slim index e49bd3a..9f0dcd2 100644 --- a/app/views/packages/notfound.slim +++ b/app/views/packages/notfound.slim @@ -1,22 +1,20 @@ -.row +h1 + i.fi-alert + ' No such package… - h1 - i.fi-alert - ' No such package… +p + ' I'm afraid but there is no package + em =@package_name + ' in the database. It may be that a package that is available + ' in your favorite Linux distribution is not listed here. + ' If you think this is an error then feel free to leave + a href="mailto:email@christoph-haas.de" feedback - p - ' I'm afraid but there is no package - em =@package_name - ' in the database. It may be that a package that is available - ' in your favorite Linux distribution is not listed here. - ' If you think this is an error then feel free to leave - a href="mailto:email@christoph-haas.de" feedback - - p - ' Perhaps you want to search for some other piece of software? - = form_tag(packages_grid_path, method: 'GET') - div.row.collapse.postfix-round - div.small-9.columns - input type="text" name="search"autofocus="true" - div.small-3.columns - input.button.postfix type="submit" value="Search" +p + ' Perhaps you want to search for some other piece of software? + = form_tag(packages_grid_path, method: 'GET') + div.collapse.postfix-round + div.small-9.columns + input type="text" name="search"autofocus="true" + div.small-3.columns + input.button.postfix type="submit" value="Search" diff --git a/app/views/packages/upload.slim b/app/views/packages/upload.slim index 3fc9bad..9b709e9 100644 --- a/app/views/packages/upload.slim +++ b/app/views/packages/upload.slim @@ -1,10 +1,9 @@ = render 'receive_upload' -.row - h1 = "Upload screenshots for #{@package.name}" +h1 = "Upload screenshots for #{@package.name}" -.row - .small-7.columns +.grid-x + .small-7.cell p.subtitle = @package.description p ' You are about to upload a screenshot for the #{@package.name} @@ -12,8 +11,8 @@ = form_for :screenshot, url: upload_receive_path, html: { multipart: true, id: 'file-form' } do |f| - .row - .small-6.columns + .grid-x + .small-6.cell input.hidden-inputfile type="file" name="file[]" id="file" multiple=true label for="file" a.button id="file-select-button" @@ -21,7 +20,7 @@ span id="file-label" ' Select screenshot file(s) - .small-6.columns + .small-6.cell button.button type="submit" id="file-submit" = fa_stacked_icon "upload", base: "circle-thin" ' Start upload @@ -43,7 +42,7 @@ // ' be the first. - .small-5.columns.bigpanel + .small-5.cell.bigpanel p.subtitle Your upload… ul li diff --git a/app/views/welcome/about.slim b/app/views/welcome/about.slim index a789991..e382867 100644 --- a/app/views/welcome/about.slim +++ b/app/views/welcome/about.slim @@ -1,238 +1,235 @@ -.row +h1 About this web site - h1 About this web site +p + | + This is a public repository of screenshots taken from applications contained + in the Debian GNU/Linux distribution and its derivates like Ubuntu. It was + created to help getting an impression of what a certain software will look + like on your desktop before you install it. Everybody can take screenshots and + upload them. Our admin team will just review your changes before they become + publicly visible. - p +h2 Who runs this site? + +p + ' This site is operated by Christoph Haas. + ' + ' Feel free to leave + a href="mailto:email@christoph-haas.de" feedback? + +a name='cookies' +h2 Cookies and privacy + +p + ' I am very concerned with privacy myself. So this site stores as + ' little information about your stay as possible. That is: + +ul + li + em + 'Cookies. + | + Only if and when you upload a screenshot the website will send your + browser a cookie. That allows you to manage your own uploads + while the cookie is valid. You can still upload screenshots even + if you reject the cookie. + li + em + 'Log files. | - This is a public repository of screenshots taken from applications contained - in the Debian GNU/Linux distribution and its derivates like Ubuntu. It was - created to help getting an impression of what a certain software will look - like on your desktop before you install it. Everybody can take screenshots and - upload them. Our admin team will just review your changes before they become - publicly visible. + This web site is served by the nginx web server software. + It creates one line for every request that you make which contains + the current date and time, your IP address, the URL you requested, + the user agent (browser) identification string and the referer URL + (if you followed a link from another web site to get here). + This information is used to resolve technical issues regarding the operation + of this web application by optimizing the code and fine-tuning caching. + It is also used to count how often a certain software package has + been viewed so the website can find out which software is most relevant + and display it first in search results. + Detailed log files will get deleted automatically after 14 days. + li + em + 'Privacy. + | + Under no circumstance will information about your person be + collected or processed. I am happy to have you here as my guest. - h2 Who runs this site? +h2 What is your motivation of running this site? +p + | + Do you wonder why this web site has been running for so many years + obviously costing time and money? It's one of my pet projects and + it is fun to develop and operate it. It was not conceived to make + a profit from it. I'm just glad if you like the idea. + If you feel you want to give back something then help the Debian + project. - p - ' This site is operated by Christoph Haas. - ' - ' Feel free to leave - a href="mailto:email@christoph-haas.de" feedback? +h2 Which software packages are listed? - a name='cookies' - h2 Cookies and privacy +p + | + I import the package repositories from various Linux + distributions once a day. However we already filter out packages that + we think would not be able to have a meaningful screenshot. + Like libraries or documentation or developer packages. So it may happen + that you a package is not found on this web sites although it may be + available in your favorite Linux distribution. Just let me know if you + are missing packages. - p - ' I am very concerned with privacy myself. So this site stores as - ' little information about your stay as possible. That is: +p + ' The repositories that I am scanning frequently are: + + ul + - @package_sources.each do |repo| + li + a href=repo[:url] =repo[:description] + +h2 Who is using this site? + +p + | + Many users interested in Linux distributions and their applications visit + this site either to look for specific pieces of software for certain use + cases or just to see if there are any new applications they may have missed out on. + And then there are several applications and web sites that use the screenshots + from this site: + ul + li Ubuntu Software application + li Benjamin Mesing's Packagesearch application + li + a href="https://packages.debian.org" packages.debian.org + li + a href="http://packages.ubuntu.com" packages.ubuntu.com + +h2 How you can use the screenshots + +p + ' You can use the screenshots on your own website. Some useful URLs: ul li - em - 'Cookies. - | - Only if and when you upload a screenshot the website will send your - browser a cookie. That allows you to manage your own uploads - while the cookie is valid. You can still upload screenshots even - if you reject the cookie. + // TODO: Use actual virtual host name here instead of hardcoding screenshots.debian.net + ' http://screenshots.debian.net/packages + br + ' (List of all packages with screenshots) li - em - 'Log files. - | - - This web site is served by the nginx web server software. - It creates one line for every request that you make which contains - the current date and time, your IP address, the URL you requested, - the user agent (browser) identification string and the referer URL - (if you followed a link from another web site to get here). - This information is used to resolve technical issues regarding the operation - of this web application by optimizing the code and fine-tuning caching. - It is also used to count how often a certain software package has - been viewed so the website can find out which software is most relevant - and display it first in search results. - Detailed log files will get deleted automatically after 14 days. + ' http://screenshots.debian.net/package/PACKAGENAME + br + ' (Page with details and screenshots for a certain package) li - em - 'Privacy. - | - Under no circumstance will information about your person be - collected or processed. I am happy to have you here as my guest. - - h2 What is your motivation of running this site? - p - | - Do you wonder why this web site has been running for so many years - obviously costing time and money? It's one of my pet projects and - it is fun to develop and operate it. It was not conceived to make - a profit from it. I'm just glad if you like the idea. - If you feel you want to give back something then help the Debian - project. - - h2 Which software packages are listed? + ' http://screenshots.debian.net/thumbnail/PACKAGENAME + br + ' (Returns a thumbnail (160x120 pixels or less) of a package's first found + ' screenshot. If no screenshot was found then a dummy image will be returned + ' along with the HTTP code 404.) + li + ' http://screenshots.debian.net/screenshot/PACKAGENAME + br + ' (Returns a screenshot (800x600 pixels or less) of a package. If no + ' screenshot was found then a dummy image will be returned along with the + ' HTTP code 404.) p - | - I import the package repositories from various Linux - distributions once a day. However we already filter out packages that - we think would not be able to have a meaningful screenshot. - Like libraries or documentation or developer packages. So it may happen - that you a package is not found on this web sites although it may be - available in your favorite Linux distribution. Just let me know if you - are missing packages. + ' If you would like to get a complete list of packages or screenshots in JSON + ' format then use one of these URLs: - p - ' The repositories that I am scanning frequently are: + ul + li + ' http://screenshots.debian.net/json/package/PACKAGENAME + br + ' Returns a JSON structure containing the URLs to the thumbnails and + ' full-size images of the screenshots available on this site. + li + ' http://screenshots.debian.net/json/packages + br + ' Returns a JSON structure containing information about all packages + ' but not the actual screenshots. + ' The returned object is huge so please use it sparingly. + li + ' http://screenshots.debian.net/json/screenshots + br + ' Returns a JSON structure containing informatoin about all packages + ' and one screenshot's URL each. There may be further screenshots that are + ' not included. + li + ' http://screenshots.debian.net/json/packages-without-screenshots + br + ' Returns a JSON structure containing the names of all packages + ' that still lack screenshots. If you want to help contributing + ' then this data can be useful. - ul - - @package_sources.each do |repo| - li - a href=repo[:url] =repo[:description] +h2 Uploading new screenshots - h2 Who is using this site? +p + | + Whether you are a developer or not - we appreciate if you upload screenshots. + See if your favorite package does not yet have a screenshot and + upload one. - p - | - Many users interested in Linux distributions and their applications visit - this site either to look for specific pieces of software for certain use - cases or just to see if there are any new applications they may have missed out on. - And then there are several applications and web sites that use the screenshots - from this site: - ul - li Ubuntu Software application - li Benjamin Mesing's Packagesearch application - li - a href="https://packages.debian.org" packages.debian.org - li - a href="http://packages.ubuntu.com" packages.ubuntu.com +h2 Why isn't this a debian.org service? - h2 How you can use the screenshots +p + | + Often experimental services start as something.debian.net. After a while they + are handed over to the trusted hands of the Debian sysadmin team to be operated + on Debian servers. This works best for simple services that are easy to deploy. + The web application behind this website has been written in Ruby-on-Rails + and uses sophisticated database and caching configuration to make it + fast. That has been a showstopper in the past. Although the site is running + as a one-man show it has proven to be very stable and fast over a period of + many years. - p - ' You can use the screenshots on your own website. Some useful URLs: +h2 Is this web application available as a Debian package? - ul - li - // TODO: Use actual virtual host name here instead of hardcoding screenshots.debian.net - ' http://screenshots.debian.net/packages - br - ' (List of all packages with screenshots) - li - ' http://screenshots.debian.net/package/PACKAGENAME - br - ' (Page with details and screenshots for a certain package) - li - ' http://screenshots.debian.net/thumbnail/PACKAGENAME - br - ' (Returns a thumbnail (160x120 pixels or less) of a package's first found - ' screenshot. If no screenshot was found then a dummy image will be returned - ' along with the HTTP code 404.) - li - ' http://screenshots.debian.net/screenshot/PACKAGENAME - br - ' (Returns a screenshot (800x600 pixels or less) of a package. If no - ' screenshot was found then a dummy image will be returned along with the - ' HTTP code 404.) +p + | + I have been asked why the web application was not simply put into + a Debian package so everybody can install their own copy. First of all it + is pretty complex and creating a package from it would be time-consuming. + And the web application was specifically created to operate this web site. + Running a private copy of it would not really make much sense. - p - ' If you would like to get a complete list of packages or screenshots in JSON - ' format then use one of these URLs: +h2 Can I see the source code of this web application? - ul - li - ' http://screenshots.debian.net/json/package/PACKAGENAME - br - ' Returns a JSON structure containing the URLs to the thumbnails and - ' full-size images of the screenshots available on this site. - li - ' http://screenshots.debian.net/json/packages - br - ' Returns a JSON structure containing information about all packages - ' but not the actual screenshots. - ' The returned object is huge so please use it sparingly. - li - ' http://screenshots.debian.net/json/screenshots - br - ' Returns a JSON structure containing informatoin about all packages - ' and one screenshot's URL each. There may be further screenshots that are - ' not included. - li - ' http://screenshots.debian.net/json/packages-without-screenshots - br - ' Returns a JSON structure containing the names of all packages - ' that still lack screenshots. If you want to help contributing - ' then this data can be useful. +p + | + Valid question. I am not a professional Rails developer so I was + reluctant to publish the source code. In fact I feared it would + attract people with bad intentions rather than contributors. + Yes, that is a weak reason. So after the next major update I will + add the Git URL here so you can get the source code and start + critisizing me. :) - h2 Uploading new screenshots +h2 Statistics - p - | - Whether you are a developer or not - we appreciate if you upload screenshots. - See if your favorite package does not yet have a screenshot and - upload one. +p + // TODO: Use real values + ' There are currently #{@package_count} software packages in the database. + / ' 3798 of them have screenshots. + / ' That makes a total of 7.8%. + ' And #{@screenshot_count} screenshots have been uploaded. - h2 Why isn't this a debian.org service? +/ p +/ // TODO: Use plot about upload statistics +/ ' (Number of screenshots uploaded each month.) - p - | - Often experimental services start as something.debian.net. After a while they - are handed over to the trusted hands of the Debian sysadmin team to be operated - on Debian servers. This works best for simple services that are easy to deploy. - The web application behind this website has been written in Ruby-on-Rails - and uses sophisticated database and caching configuration to make it - fast. That has been a showstopper in the past. Although the site is running - as a one-man show it has proven to be very stable and fast over a period of - many years. +h2 Who is behind this site? - h2 Is this web application available as a Debian package? +p + | + This site has been developed and is maintained by Christoph Haas. + It runs on a web application called debshots that was written in Ruby-on-Rails. + debshots also uses a PostgreSQL database, the jQuery Javascript library + and the Zurb Foundation toolkit. + The person responsible for this site is: - p - | - I have been asked why the web application was not simply put into - a Debian package so everybody can install their own copy. First of all it - is pretty complex and creating a package from it would be time-consuming. - And the web application was specifically created to operate this web site. - Running a private copy of it would not really make much sense. - - h2 Can I see the source code of this web application? - - p - | - Valid question. I am not a professional Rails developer so I was - reluctant to publish the source code. In fact I feared it would - attract people with bad intentions rather than contributors. - Yes, that is a weak reason. So after the next major update I will - add the Git URL here so you can get the source code and start - critisizing me. :) - - h2 Statistics - - p - // TODO: Use real values - ' There are currently #{@package_count} software packages in the database. - / ' 3798 of them have screenshots. - / ' That makes a total of 7.8%. - ' And #{@screenshot_count} screenshots have been uploaded. - - / p - / // TODO: Use plot about upload statistics - / ' (Number of screenshots uploaded each month.) - - h2 Who is behind this site? - - p - | - This site has been developed and is maintained by Christoph Haas. - It runs on a web application called debshots that was written in Ruby-on-Rails. - debshots also uses a PostgreSQL database, the jQuery Javascript library - and the Zurb Foundation toolkit. - The person responsible for this site is: - - p - 'Christoph Haas - br - 'Oldesloer Straße 14a - br - '23843 Rümpel - br - 'Email contact: email@christoph-haas.de +p + 'Christoph Haas + br + 'Oldesloer Straße 14a + br + '23843 Rümpel + br + 'Email contact: email@christoph-haas.de diff --git a/app/views/welcome/home.slim b/app/views/welcome/home.slim index 1962cc7..7386339 100644 --- a/app/views/welcome/home.slim +++ b/app/views/welcome/home.slim @@ -1,9 +1,10 @@ -#teaser.row - div.large-4.medium-4.small-3.columns +#teaser.grid-container + .grid-x + .large-4.medium-4.small-3.cell #biglogo // TODO: vary 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 + img src="/images/logos/debian.svg" width="300" alt="Debian logo" + .large-8.medium-8.small-9.cell h1 We have screenshots! p ' Have you ever wondered how a certain piece of software looks @@ -14,18 +15,19 @@ ' 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_grid_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" + .input-group + input.input-group-field type="search" name="search" placeholder="Looking for a special software?" autofocus="true" + .input-group-button + input.button.postfix type="submit" value="Search" -div.row - div.large-4.medium-12.small-12.columns.text-center +.grid-container + .grid-x.align-spaced + .large-3.medium-12.small-12.cell.text-center h2 Newest upload - div.thumb-height + .thumb-height a href=package_path(@newest_upload.package.name) = image_tag(@newest_upload.image.url(:thumb, timestamp: false), alt: @newest_upload.caption) p @@ -33,9 +35,9 @@ div.row =@newest_upload.package.name ' : =@newest_upload.package.description - div.large-4.medium-12.small-12.columns.text-center + .large-3.medium-12.small-12.cell.text-center h2 Most popular - div.thumb-height + .thumb-height a href=package_path(@most_popular_package.name) img src=@most_popular_package.screenshots.first.image.url(:thumb, timestamp: false) p @@ -43,14 +45,15 @@ div.row =@most_popular_package.name ' : =@most_popular_package.description - div.large-4.medium-12.small-12.columns.text-center - h2 Your help needed - div.thumb-height + .large-3.medium-12.small-12.cell.text-center + h2 Contribute + .thumb-height a href=upload_path(@most_wanted_package.name) img src="/images/dummy/no-screenshots-upload-one.svg" width="160" - p - ' We lack a screenshot for the - strong =>@most_wanted_package.name - ' package. Can you - a href=package_path(@most_wanted_package.name) provide one + p + / TODO: Randomly choose one of ~30 packages + ' We lack a screenshot for the + strong =>@most_wanted_package.name + ' package. Can you + a href=package_path(@most_wanted_package.name) provide one ' ?