Restyling

This commit is contained in:
Christoph Haas 2018-06-27 18:43:08 +02:00
parent 9d6baa20e5
commit 06b8f92963
21 changed files with 492 additions and 493 deletions

View file

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

View file

@ -13,4 +13,5 @@
*= require cookies_eu
*= require fancybox
*= require font-awesome
*= require my_styles
*/

View file

@ -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.

View file

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

View file

@ -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

View file

@ -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

View file

@ -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'

View file

@ -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

View file

@ -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

View file

@ -1,4 +1,4 @@
.row
.grid-container
= render partial: 'menu'

View file

@ -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

View file

@ -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.

View file

@ -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

View file

@ -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.

View file

@ -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:

View file

@ -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'

View file

@ -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'

View file

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

View file

@ -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

View file

@ -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 <em>Ubuntu Software</em> application
li Benjamin Mesing's <em>Packagesearch</em> 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 <em>Ubuntu Software</em> application
li Benjamin Mesing's <em>Packagesearch</em> 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 <em>debshots</em> 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 <em>debshots</em> 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

View file

@ -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
' ?