Restyling
This commit is contained in:
Christoph Haas
parent
9d6baa20e5
commit
06b8f92963
21 changed files with 492 additions and 493 deletions
|
|
@ -69,7 +69,7 @@ $global-font-size: 100%;
|
||||||
$global-width: rem-calc(1200);
|
$global-width: rem-calc(1200);
|
||||||
$global-lineheight: 1.5;
|
$global-lineheight: 1.5;
|
||||||
$foundation-palette: (
|
$foundation-palette: (
|
||||||
primary: #1779ba,
|
primary: #c70338,
|
||||||
secondary: #767676,
|
secondary: #767676,
|
||||||
success: #3adb76,
|
success: #3adb76,
|
||||||
warning: #ffae00,
|
warning: #ffae00,
|
||||||
|
|
@ -80,9 +80,11 @@ $medium-gray: #cacaca;
|
||||||
$dark-gray: #8a8a8a;
|
$dark-gray: #8a8a8a;
|
||||||
$black: #0a0a0a;
|
$black: #0a0a0a;
|
||||||
$white: #fefefe;
|
$white: #fefefe;
|
||||||
$body-background: $white;
|
// $body-background: $white;
|
||||||
|
$body-background: #f2f2f2;
|
||||||
$body-font-color: $black;
|
$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;
|
$body-antialiased: true;
|
||||||
$global-margin: 1rem;
|
$global-margin: 1rem;
|
||||||
$global-padding: 1rem;
|
$global-padding: 1rem;
|
||||||
|
|
@ -90,7 +92,8 @@ $global-position: 1rem;
|
||||||
$global-weight-normal: normal;
|
$global-weight-normal: normal;
|
||||||
$global-weight-bold: bold;
|
$global-weight-bold: bold;
|
||||||
$global-radius: 0;
|
$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-menu-nested-margin: 1rem;
|
||||||
$global-text-direction: ltr;
|
$global-text-direction: ltr;
|
||||||
$global-flexbox: true;
|
$global-flexbox: true;
|
||||||
|
|
@ -845,8 +848,9 @@ $tooltip-radius: $global-radius;
|
||||||
// 55. Top Bar
|
// 55. Top Bar
|
||||||
// -----------
|
// -----------
|
||||||
|
|
||||||
$topbar-padding: 0.5rem;
|
$topbar-padding: 0;
|
||||||
$topbar-background: $light-gray;
|
// $topbar-background: $light-gray;
|
||||||
|
$topbar-background: #d8d8d8;
|
||||||
$topbar-submenu-background: $topbar-background;
|
$topbar-submenu-background: $topbar-background;
|
||||||
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
||||||
$topbar-input-width: 200px;
|
$topbar-input-width: 200px;
|
||||||
|
|
|
||||||
|
|
@ -13,4 +13,5 @@
|
||||||
*= require cookies_eu
|
*= require cookies_eu
|
||||||
*= require fancybox
|
*= require fancybox
|
||||||
*= require font-awesome
|
*= require font-awesome
|
||||||
|
*= require my_styles
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,6 @@
|
||||||
@charset 'utf-8';
|
@charset 'utf-8';
|
||||||
|
|
||||||
$debian-color: #c70338;
|
|
||||||
|
|
||||||
@import 'settings';
|
@import 'settings';
|
||||||
@import 'customisations';
|
|
||||||
@import 'foundation';
|
@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.
|
// 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.
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,5 @@
|
||||||
// ---------------------------------------------------
|
|
||||||
// -------------- debshots ---------------------------
|
|
||||||
// ---------------------------------------------------
|
|
||||||
|
|
||||||
$topbar-padding: 0;
|
// $topbar-padding: 0;
|
||||||
|
|
||||||
// At which width the top navigation bar should be switched to
|
// At which width the top navigation bar should be switched to
|
||||||
// mobile mode because otherwise it would wrap into two lines.
|
// 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;
|
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
|
// 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;
|
// $page-background: #f2f2f2;
|
||||||
$footer-background: #333333;
|
// $footer-background: #333333;
|
||||||
$footer-text-color: #b3b3b3;
|
// $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
|
// $menu-item-background-active: $primary-color;
|
||||||
{
|
|
||||||
// background-color: $light-gray;
|
|
||||||
background-color: #2e3436;
|
|
||||||
}
|
|
||||||
|
|
||||||
body
|
// header
|
||||||
{
|
// {
|
||||||
background-color: $page-background;
|
// // background-color: $light-gray;
|
||||||
}
|
// // background-color: #2e3436;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// body
|
||||||
|
// {
|
||||||
|
// // background-color: $page-background;
|
||||||
|
// }
|
||||||
|
|
||||||
#teaser
|
#teaser
|
||||||
{
|
{
|
||||||
// Leave some space between topbar and teaser on the home page
|
// Leave some space between topbar and teaser on the home page
|
||||||
padding-top: 20px;
|
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
|
color: #8a8a8a;
|
||||||
{
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// .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
|
// Make thumbnails equally high
|
||||||
div.thumb-height
|
div.thumb-height
|
||||||
{
|
{
|
||||||
|
|
@ -135,15 +140,15 @@ div.thumb-height
|
||||||
/*@import "compass/layout/sticky-footer";*/
|
/*@import "compass/layout/sticky-footer";*/
|
||||||
/*@include sticky-footer(40px, "#wholepage");*/
|
/*@include sticky-footer(40px, "#wholepage");*/
|
||||||
|
|
||||||
html, body {
|
// html, body {
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Wrapper that makes the page 100% high so the start page looks entirely filled
|
// Wrapper that makes the page 100% high so the start page looks entirely filled
|
||||||
#wholepage
|
// #wholepage
|
||||||
{
|
// {
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// #footer
|
// #footer
|
||||||
// {
|
// {
|
||||||
|
|
@ -170,17 +175,17 @@ html, body {
|
||||||
|
|
||||||
|
|
||||||
// Leave some room after the topbar
|
// Leave some room after the topbar
|
||||||
#content
|
// #content
|
||||||
{
|
// {
|
||||||
padding-top: 5px;
|
// padding-top: 5px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.grid-thumbnails .column
|
// .grid-thumbnails .column
|
||||||
{
|
// {
|
||||||
border-radius: 10px;
|
// border-radius: 10px;
|
||||||
padding: 5px 5px 50px 5px;
|
// padding: 5px 5px 50px 5px;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Vertical icon bar in package view
|
// Vertical icon bar in package view
|
||||||
#sidebar
|
#sidebar
|
||||||
|
|
@ -208,33 +213,33 @@ html, body {
|
||||||
}
|
}
|
||||||
|
|
||||||
// List view
|
// List view
|
||||||
.row .listview
|
// .row .listview
|
||||||
{
|
// {
|
||||||
// Leave vertical space and draw a line between package rows
|
// // Leave vertical space and draw a line between package rows
|
||||||
border-bottom: 1px solid rgba(0,0,0, 0.2);
|
// border-bottom: 1px solid rgba(0,0,0, 0.2);
|
||||||
padding-bottom: 20px;
|
// padding-bottom: 20px;
|
||||||
margin-bottom: 20px;
|
// margin-bottom: 20px;
|
||||||
|
|
||||||
img.screenshot
|
// img.screenshot
|
||||||
{
|
// {
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
}
|
// }
|
||||||
|
|
||||||
img
|
// img
|
||||||
{
|
// {
|
||||||
// box-shadow: 0px 0px 5px #000000;
|
// // box-shadow: 0px 0px 5px #000000;
|
||||||
box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
// box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.fancybox
|
// .fancybox
|
||||||
{
|
// {
|
||||||
img
|
// img
|
||||||
{
|
// {
|
||||||
// box-shadow: 0px 0px 5px #000000;
|
// // box-shadow: 0px 0px 5px #000000;
|
||||||
box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
// box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.pkgname
|
.pkgname
|
||||||
{
|
{
|
||||||
|
|
@ -263,7 +268,7 @@ a.black
|
||||||
|
|
||||||
.bigpanel
|
.bigpanel
|
||||||
{
|
{
|
||||||
background-color: $light-gray;
|
background-color: #e6e6e6;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 1em 1em 0.1em 1em;
|
padding: 1em 1em 0.1em 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
|
|
@ -382,9 +387,9 @@ a.black
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Foundation sets file buttons to 100% width. Fix that */
|
/* Foundation sets file buttons to 100% width. Fix that */
|
||||||
[type='file'] {
|
// [type='file'] {
|
||||||
width: inherit !important;
|
// width: inherit !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// .top-bar-title a {
|
// .top-bar-title a {
|
||||||
// font-size: 1.8rem;
|
// font-size: 1.8rem;
|
||||||
|
|
@ -392,11 +397,11 @@ a.black
|
||||||
// line-height: 1;
|
// line-height: 1;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
.button {
|
// .button {
|
||||||
// box-shadow: 0px 0px 5px #000000;
|
// // box-shadow: 0px 0px 5px #000000;
|
||||||
box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
// box-shadow: 0 0 6px -1px rgba(0,0,0, 1);
|
||||||
border-radius: 10px !important;
|
// border-radius: 10px !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Simple animation for FontAwesome icons in callouts at the top.
|
// Simple animation for FontAwesome icons in callouts at the top.
|
||||||
/*
|
/*
|
||||||
|
|
@ -414,54 +419,54 @@ a.black
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.menu .menu-text {
|
// .menu .menu-text {
|
||||||
font-size: 2rem;
|
// font-size: 2rem;
|
||||||
font-weight: 100;
|
// font-weight: 100;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Nicer callouts
|
// Nicer callouts
|
||||||
// https://foundation.zurb.com/building-blocks/blocks/alert-callout-subtle.html
|
// https://foundation.zurb.com/building-blocks/blocks/alert-callout-subtle.html
|
||||||
$alert-callout-subtle-border-left-width: rem-calc(5);
|
// $alert-callout-subtle-border-left-width: rem-calc(5);
|
||||||
$alert-callout-subtle-radius: 0.6rem;
|
// $alert-callout-subtle-radius: 0.6rem;
|
||||||
|
|
||||||
.alert-callout-subtle {
|
// .alert-callout-subtle {
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
background: $light-gray;
|
// background: $light-gray;
|
||||||
color: $dark-gray;
|
// color: $dark-gray;
|
||||||
border: 0;
|
// border: 0;
|
||||||
border-left: $alert-callout-subtle-border-left-width solid $dark-gray;
|
// border-left: $alert-callout-subtle-border-left-width solid $dark-gray;
|
||||||
box-shadow: 0 5px 8px -6px rgba(0,0,0, 0.2);
|
// box-shadow: 0 5px 8px -6px rgba(0,0,0, 0.2);
|
||||||
|
|
||||||
&.success {
|
// &.success {
|
||||||
background: $light-gray;
|
// background: $light-gray;
|
||||||
color: $dark-gray;
|
// color: $dark-gray;
|
||||||
border-left: $alert-callout-subtle-border-left-width solid $success-color;
|
// border-left: $alert-callout-subtle-border-left-width solid $success-color;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.alert {
|
// &.alert {
|
||||||
background: $light-gray;
|
// background: $light-gray;
|
||||||
color: $dark-gray;
|
// color: $dark-gray;
|
||||||
border-left: $alert-callout-subtle-border-left-width solid $alert-color;
|
// border-left: $alert-callout-subtle-border-left-width solid $alert-color;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.warning {
|
// &.warning {
|
||||||
background: $light-gray;
|
// background: $light-gray;
|
||||||
color: $dark-gray;
|
// color: $dark-gray;
|
||||||
border-left: $alert-callout-subtle-border-left-width solid $warning-color;
|
// border-left: $alert-callout-subtle-border-left-width solid $warning-color;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.primary {
|
// &.primary {
|
||||||
background: $light-gray;
|
// background: $light-gray;
|
||||||
color: $dark-gray;
|
// color: $dark-gray;
|
||||||
border-left: $alert-callout-subtle-border-left-width solid $primary-color;
|
// border-left: $alert-callout-subtle-border-left-width solid $primary-color;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.close-button {
|
// .close-button {
|
||||||
font-size: 2rem;
|
// font-size: 2rem;
|
||||||
@include vertical-center;
|
// @include vertical-center;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.radius {
|
// &.radius {
|
||||||
border-radius: $alert-callout-subtle-radius;
|
// border-radius: $alert-callout-subtle-radius;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
// Login form (sign_in)
|
// Login form (sign_in)
|
||||||
|
|
||||||
.row
|
.grid-container
|
||||||
.small-8.columns.small-centered
|
.small-8.cell.small-centered
|
||||||
div.callout
|
div.callout
|
||||||
p
|
p
|
||||||
' Are you required to login? No. You can still upload screenshots.
|
' Are you required to login? No. You can still upload screenshots.
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
a href='https://sso.debian.org/' Debian SSO
|
a href='https://sso.debian.org/' Debian SSO
|
||||||
' installed in your browser.
|
' installed in your browser.
|
||||||
|
|
||||||
.row
|
.grid-container
|
||||||
.text-center
|
.text-center
|
||||||
|
|
||||||
// Alternative way to display buttons without images. (Amazon wants their own button though.)
|
// Alternative way to display buttons without images. (Amazon wants their own button though.)
|
||||||
|
|
@ -45,24 +45,24 @@
|
||||||
|
|
||||||
hr
|
hr
|
||||||
|
|
||||||
.row
|
.grid-container
|
||||||
= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
|
= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
|
||||||
= f.hidden_field :provider, value: 'local'
|
= f.hidden_field :provider, value: 'local'
|
||||||
.small-2.columns
|
.small-2.cell
|
||||||
b Admin only…
|
b Admin only…
|
||||||
.small-5.columns
|
.small-5.cell
|
||||||
= f.email_field :email, autofocus: true, placeholder: 'email address'
|
= f.email_field :email, autofocus: true, placeholder: 'email address'
|
||||||
|
|
||||||
.small-4.columns
|
.small-4.cell
|
||||||
= f.password_field :password, autocomplete: "off", placeholder: 'password'
|
= f.password_field :password, autocomplete: "off", placeholder: 'password'
|
||||||
|
|
||||||
.small-1.columns
|
.small-1.cell
|
||||||
= f.submit "Log in", class: 'button'
|
= f.submit "Log in", class: 'button'
|
||||||
|
|
||||||
/ - if devise_mapping.rememberable?
|
/ - if devise_mapping.rememberable?
|
||||||
/ .small-6.columns
|
/ .small-6.cell
|
||||||
/ = f.check_box :remember_me
|
/ = f.check_box :remember_me
|
||||||
/ .small-6.columns
|
/ .small-6.cell
|
||||||
/ = f.label :remember_me
|
/ = f.label :remember_me
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,13 @@ nav.top-bar
|
||||||
.grid-x
|
.grid-x
|
||||||
.top-bar-left
|
.top-bar-left
|
||||||
ul.menu
|
ul.menu
|
||||||
li
|
li.menu-text
|
||||||
img src="/images/logos/debian.svg" width="38" alt="Debian logo"
|
img src="/images/logos/debian.svg" width="20" alt="Debian logo"
|
||||||
li.menu-text
|
li.menu-text
|
||||||
a href='/'
|
a href='/'
|
||||||
// TODO: Make the logo depend on the virtual host
|
// TODO: Make the logo depend on the virtual host
|
||||||
// TODO: Use proper distribution name
|
// TODO: Use proper distribution name
|
||||||
|
span style="font-weight: bold"
|
||||||
' Debian Screenshots >
|
' Debian Screenshots >
|
||||||
|
|
||||||
/ .top-bar-right
|
/ .top-bar-right
|
||||||
|
|
@ -17,7 +18,7 @@ nav.top-bar
|
||||||
li.menu-text class=('active' if controller_name=='welcome' and action_name=='home')
|
li.menu-text class=('active' if controller_name=='welcome' and action_name=='home')
|
||||||
a href="/" Home
|
a href="/" Home
|
||||||
li.menu-text class=('active' if controller_name=='packages')
|
li.menu-text class=('active' if controller_name=='packages')
|
||||||
a href="/packages" Explore
|
a href="/packages" Browse
|
||||||
//li.has-dropdown
|
//li.has-dropdown
|
||||||
//a href="#" Distributions
|
//a href="#" Distributions
|
||||||
//ul.dropdown
|
//ul.dropdown
|
||||||
|
|
|
||||||
|
|
@ -13,10 +13,9 @@ html
|
||||||
= csrf_meta_tags
|
= csrf_meta_tags
|
||||||
|
|
||||||
body
|
body
|
||||||
.container
|
= render 'layouts/topbar'
|
||||||
= render 'layouts/topbar'
|
#content.grid-container
|
||||||
#content
|
#messages
|
||||||
#messages.row
|
|
||||||
= render 'layouts/messages'
|
= render 'layouts/messages'
|
||||||
= yield
|
= yield
|
||||||
= render 'layouts/footer'
|
= render 'layouts/footer'
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
// Paginator and search bar
|
// Paginator and search bar
|
||||||
.row
|
.grid-x
|
||||||
.small-6.medium-8.large-9.columns
|
.small-6.medium-8.large-9.cell
|
||||||
// Paginator
|
// Paginator
|
||||||
= render 'logs/paginator'
|
= render 'logs/paginator'
|
||||||
|
|
||||||
.small-6.medium-4.large-3.columns
|
.small-6.medium-4.large-3.cell
|
||||||
// Search form
|
// Search form
|
||||||
= form_tag url_for, :method=>'GET'
|
= form_tag url_for, :method=>'GET'
|
||||||
= text_field_tag(:search, params[:search], placeholder: "Search...", maxlength: 50, size: 20, autofocus: true)
|
= text_field_tag(:search, params[:search], placeholder: "Search...", maxlength: 50, size: 20, autofocus: true)
|
||||||
|
|
||||||
// List of log messages
|
// List of log messages
|
||||||
.row
|
.grid-x
|
||||||
- if @logs.length>0
|
- if @logs.length>0
|
||||||
table
|
table
|
||||||
tr
|
tr
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
.row
|
.grid-container
|
||||||
h1 Moderation queue
|
h1 Moderation queue
|
||||||
|
|
||||||
- if @package
|
- if @package
|
||||||
|
|
@ -13,8 +13,8 @@
|
||||||
p =@package.description
|
p =@package.description
|
||||||
|
|
||||||
// Show moderation queue left - and existing screenshots right
|
// Show moderation queue left - and existing screenshots right
|
||||||
.row.packagepage
|
.grid-x.packagepage
|
||||||
.small-6.columns
|
.small-6.cell
|
||||||
p Please moderate:
|
p Please moderate:
|
||||||
- @pending_screenshots.each do |screenshot|
|
- @pending_screenshots.each do |screenshot|
|
||||||
.container.listview
|
.container.listview
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
a.button.success.round href=approve_screenshot_path(screenshot) Keep the screenshot
|
a.button.success.round href=approve_screenshot_path(screenshot) Keep the screenshot
|
||||||
|
|
||||||
|
|
||||||
.small-6.columns
|
.small-6.cell
|
||||||
p Existing screenshots:
|
p Existing screenshots:
|
||||||
- @package.screenshots.each do |screenshot|
|
- @package.screenshots.each do |screenshot|
|
||||||
- if screenshot.approved==true and screenshot.markedfordelete==false
|
- if screenshot.approved==true and screenshot.markedfordelete==false
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
.row
|
.grid-container
|
||||||
|
|
||||||
= render partial: 'menu'
|
= render partial: 'menu'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
/ = link_to 'Back', :back, class: 'button small'
|
/ = link_to 'Back', :back, class: 'button small'
|
||||||
|
|
||||||
.row.packagepage
|
.grid-container.packagepage
|
||||||
h1 Screenshots you uploaded
|
h1 Screenshots you uploaded
|
||||||
|
|
||||||
- @packages.each do |package|
|
- @packages.each do |package|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
.small-9.large-10.columns
|
.small-9.large-10.columns
|
||||||
- if @current_users_screenshots.length>0
|
- 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|
|
- @current_users_screenshots.each do |screenshot|
|
||||||
.column
|
.column
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,21 @@
|
||||||
.row
|
|
||||||
|
|
||||||
= render partial: 'menu'
|
.small-8.columns.small-centered
|
||||||
|
|
||||||
.small-8.columns.small-centered
|
.callout.success
|
||||||
|
h1 Welcome
|
||||||
.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.
|
|
||||||
|
|
||||||
|
- if current_user.provider == 'debian-sso'
|
||||||
p
|
p
|
||||||
' If you want to help then check out the
|
'You have just logged in using your Debian SSO certificate which proves that
|
||||||
a href="/packages?show=without" packages that have no screenshots
|
'you are associated to the Debian project. So you are invited to upload any
|
||||||
' yet.
|
'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.
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
// Modal upload window
|
// Modal upload window
|
||||||
#upload-modal.reveal data-reveal=true role='dialog'
|
#upload-modal.reveal data-reveal=true role='dialog'
|
||||||
h1 Upload new screenshots
|
h1 Upload new screenshots
|
||||||
.row
|
.grid-x
|
||||||
.small-4.columns
|
.small-4.cell
|
||||||
= form_for :screenshot, url: upload_image_path, html: { multipart: true } do |f|
|
= form_for :screenshot, url: upload_image_path, html: { multipart: true } do |f|
|
||||||
/ = image_tag("/images/dummy/upload.svg", style: "width: 100%", id: 'upload-image')
|
/ = image_tag("/images/dummy/upload.svg", style: "width: 100%", id: 'upload-image')
|
||||||
a.button.round id='upload-image' Start uploading
|
a.button.round id='upload-image' Start uploading
|
||||||
= f.file_field :image, id: 'fileupload', multiple: true, style: 'display: none'
|
= f.file_field :image, id: 'fileupload', multiple: true, style: 'display: none'
|
||||||
|
|
||||||
.small-8.columns
|
.small-8.cell
|
||||||
.bigpanel
|
.bigpanel
|
||||||
p Thanks for uploading more screenshots. Please note:
|
p Thanks for uploading more screenshots. Please note:
|
||||||
ul
|
ul
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,21 @@
|
||||||
/ Render this callout on top of the package's details page
|
/ Render this callout on top of the package's details page
|
||||||
/ if images have just been uploaded.
|
/ if images have just been uploaded.
|
||||||
- if (@valid_images and @valid_images.any?) or (@invalid_images and @invalid_images.any?)
|
- if (@valid_images and @valid_images.any?) or (@invalid_images and @invalid_images.any?)
|
||||||
.row
|
.callout.warning
|
||||||
.callout.warning
|
|
||||||
|
|
||||||
- if @invalid_images.any?
|
- if @invalid_images.any?
|
||||||
= fa_icon 'exclamation-circle 2x pull-left'
|
= fa_icon 'exclamation-circle 2x pull-left'
|
||||||
p These images were not accepted:
|
p These images were not accepted:
|
||||||
|
|
||||||
ul
|
ul
|
||||||
- @invalid_images.each do |image|
|
- @invalid_images.each do |image|
|
||||||
li
|
li
|
||||||
' #{image.image_file_name} (#{image.errors[:image].join(' and the image ')})
|
' #{image.image_file_name} (#{image.errors[:image].join(' and the image ')})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- if @valid_images.any?
|
- if @valid_images.any?
|
||||||
= fa_icon 'check-circle 2x pull-left'
|
= fa_icon 'check-circle 2x pull-left'
|
||||||
p
|
p
|
||||||
' #{pluralize(@valid_images.length, 'screenshot')} received successfully.
|
' #{pluralize(@valid_images.length, 'screenshot')} received successfully.
|
||||||
' Please review the images and add a description for each image. Thanks.
|
' Please review the images and add a description for each image. Thanks.
|
||||||
|
|
|
||||||
|
|
@ -2,16 +2,15 @@
|
||||||
/ in a callout.
|
/ in a callout.
|
||||||
= render 'receive_upload'
|
= render 'receive_upload'
|
||||||
|
|
||||||
.row.packagepage
|
.packagepage
|
||||||
.small-12.columns
|
h1 =@package.name
|
||||||
h1 =@package.name
|
|
||||||
|
|
||||||
.row.packagepage
|
.grid-x.grid-padding-x.packagepage
|
||||||
#details.small-7.medium-7.columns.packagepage
|
#details.small-7.medium-7.cell.packagepage
|
||||||
p.subtitle = @package.description
|
p.subtitle = @package.description
|
||||||
- if screenshots_visible_to_user(@package).count > 0
|
- if screenshots_visible_to_user(@package).count > 0
|
||||||
- screenshots_visible_to_user(@package).each do |screenshot|
|
- screenshots_visible_to_user(@package).each do |screenshot|
|
||||||
.row.listview
|
.listview
|
||||||
.text-center
|
.text-center
|
||||||
a.black.fancybox href=screenshot.image.url(:large, timestamp: false) rel='fancybox-thumb' title=screenshot.caption
|
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)
|
= image_tag(screenshot.image.url(:large, timestamp: false), alt: screenshot.caption)
|
||||||
|
|
@ -38,7 +37,7 @@
|
||||||
// = render(partial: 'report_dropdown', locals: {screenshot: screenshot})
|
// = render(partial: 'report_dropdown', locals: {screenshot: screenshot})
|
||||||
|
|
||||||
- else
|
- else
|
||||||
.row.listview
|
.listview
|
||||||
img src='/images/dummy/no-screenshots-available.svg' width='100%' style='padding: 0 10%'
|
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.
|
// Load reviews from the Ubuntu API through our own (cached) URL.
|
||||||
|
|
@ -46,7 +45,7 @@
|
||||||
// was not yet cached.
|
// was not yet cached.
|
||||||
/ #reviews data-package-reviews-url=package_reviews_path(@package.name)
|
/ #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})
|
= render(partial: 'details_rightbox', locals: {pkg: @package})
|
||||||
|
|
||||||
/ javascript:
|
/ javascript:
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
// Paginator and search bar
|
// Paginator and search bar
|
||||||
.row
|
.grid-x
|
||||||
.small-6.medium-8.large-9.columns
|
.small-6.medium-8.large-9.cell
|
||||||
// Paginator
|
// Paginator
|
||||||
= render 'packages/paginator'
|
= render 'packages/paginator'
|
||||||
|
|
||||||
.small-6.medium-4.large-3.columns
|
.small-6.medium-4.large-3.cell
|
||||||
// Search form
|
// Search form
|
||||||
= render 'packages/searchfield'
|
= render 'packages/searchfield'
|
||||||
|
|
||||||
// Grid view
|
// Grid view
|
||||||
.row
|
.grid-x
|
||||||
.small-9.large-10.columns
|
.small-9.large-10.cell
|
||||||
- if @packages.length>0
|
- 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|
|
- @packages.all.each do |pkg|
|
||||||
.column
|
.cell
|
||||||
= render partial: 'packages/grid_thumbnail', locals: { pkg: pkg }
|
= render partial: 'packages/grid_thumbnail', locals: { pkg: pkg }
|
||||||
|
|
||||||
- else
|
- else
|
||||||
|
|
@ -24,5 +24,5 @@
|
||||||
= render 'packages/paginator'
|
= render 'packages/paginator'
|
||||||
|
|
||||||
// Icon sidebar for options and views
|
// Icon sidebar for options and views
|
||||||
.small-3.large-2.columns
|
.small-3.large-2.cell
|
||||||
= render 'packages/sidebar'
|
= render 'packages/sidebar'
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
// Paginator and search bar
|
// Paginator and search bar
|
||||||
.row
|
.grid-x
|
||||||
.small-6.medium-8.large-9.columns
|
.small-6.medium-8.large-9.cell
|
||||||
// Paginator
|
// Paginator
|
||||||
= render 'packages/paginator'
|
= render 'packages/paginator'
|
||||||
|
|
||||||
.small-6.medium-4.large-3.columns
|
.small-6.medium-4.large-3.cell
|
||||||
// Search form
|
// Search form
|
||||||
= render 'packages/searchfield'
|
= render 'packages/searchfield'
|
||||||
|
|
||||||
// Package list
|
// Package list
|
||||||
.row.packagepage
|
.grid-x.packagepage
|
||||||
.small-9.medium-10.columns
|
.small-9.medium-10.cell
|
||||||
- if @packages.length>0
|
- if @packages.length>0
|
||||||
- @packages.to_a.each do |pkg|
|
- @packages.to_a.each do |pkg|
|
||||||
.row.listview
|
.grid-x.listview
|
||||||
.small-12.medium-4.columns
|
.small-12.medium-4.cell
|
||||||
- if pkg.screenshots_approved.any?
|
- if pkg.screenshots_approved.any?
|
||||||
// TODO: smarter search for the best screenshot instead of taking the first one
|
// TODO: smarter search for the best screenshot instead of taking the first one
|
||||||
- screenshot = pkg.screenshots.first
|
- screenshot = pkg.screenshots.first
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
- else
|
- else
|
||||||
a href=package_path(name: pkg.name)
|
a href=package_path(name: pkg.name)
|
||||||
img.screenshot src="/images/dummy/no-screenshots-upload-one.svg"
|
img.screenshot src="/images/dummy/no-screenshots-upload-one.svg"
|
||||||
.small-12.medium-8.columns
|
.small-12.medium-8.cell
|
||||||
h1
|
h1
|
||||||
a href=package_path(name: pkg.name)
|
a href=package_path(name: pkg.name)
|
||||||
=pkg.name
|
=pkg.name
|
||||||
|
|
@ -41,5 +41,5 @@
|
||||||
= render 'packages/noresults'
|
= render 'packages/noresults'
|
||||||
|
|
||||||
// Icon sidebar for options and views
|
// Icon sidebar for options and views
|
||||||
.small-3.medium-2.columns
|
.small-3.medium-2.cell
|
||||||
= render 'packages/sidebar'
|
= render 'packages/sidebar'
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,20 @@
|
||||||
.row
|
h1
|
||||||
|
i.fi-alert
|
||||||
|
' No such package…
|
||||||
|
|
||||||
h1
|
p
|
||||||
i.fi-alert
|
' I'm afraid but there is no package
|
||||||
' No such 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
|
p
|
||||||
' I'm afraid but there is no package
|
' Perhaps you want to search for some other piece of software?
|
||||||
em =@package_name
|
= form_tag(packages_grid_path, method: 'GET')
|
||||||
' in the database. It may be that a package that is available
|
div.collapse.postfix-round
|
||||||
' in your favorite Linux distribution is not listed here.
|
div.small-9.columns
|
||||||
' If you think this is an error then feel free to leave
|
input type="text" name="search"autofocus="true"
|
||||||
a href="mailto:email@christoph-haas.de" feedback
|
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.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"
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
= render 'receive_upload'
|
= render 'receive_upload'
|
||||||
|
|
||||||
.row
|
h1 = "Upload screenshots for #{@package.name}"
|
||||||
h1 = "Upload screenshots for #{@package.name}"
|
|
||||||
|
|
||||||
.row
|
.grid-x
|
||||||
.small-7.columns
|
.small-7.cell
|
||||||
p.subtitle = @package.description
|
p.subtitle = @package.description
|
||||||
p
|
p
|
||||||
' You are about to upload a screenshot for the #{@package.name}
|
' 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|
|
= form_for :screenshot, url: upload_receive_path, html: { multipart: true, id: 'file-form' } do |f|
|
||||||
|
|
||||||
.row
|
.grid-x
|
||||||
.small-6.columns
|
.small-6.cell
|
||||||
input.hidden-inputfile type="file" name="file[]" id="file" multiple=true
|
input.hidden-inputfile type="file" name="file[]" id="file" multiple=true
|
||||||
label for="file"
|
label for="file"
|
||||||
a.button id="file-select-button"
|
a.button id="file-select-button"
|
||||||
|
|
@ -21,7 +20,7 @@
|
||||||
span id="file-label"
|
span id="file-label"
|
||||||
' Select screenshot file(s)
|
' Select screenshot file(s)
|
||||||
|
|
||||||
.small-6.columns
|
.small-6.cell
|
||||||
button.button type="submit" id="file-submit"
|
button.button type="submit" id="file-submit"
|
||||||
= fa_stacked_icon "upload", base: "circle-thin"
|
= fa_stacked_icon "upload", base: "circle-thin"
|
||||||
' Start upload
|
' Start upload
|
||||||
|
|
@ -43,7 +42,7 @@
|
||||||
// ' be the first.
|
// ' be the first.
|
||||||
|
|
||||||
|
|
||||||
.small-5.columns.bigpanel
|
.small-5.cell.bigpanel
|
||||||
p.subtitle Your upload…
|
p.subtitle Your upload…
|
||||||
ul
|
ul
|
||||||
li
|
li
|
||||||
|
|
|
||||||
|
|
@ -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
|
This web site is served by the nginx web server software.
|
||||||
in the Debian GNU/Linux distribution and its derivates like Ubuntu. It was
|
It creates one line for every request that you make which contains
|
||||||
created to help getting an impression of what a certain software will look
|
the current date and time, your IP address, the URL you requested,
|
||||||
like on your desktop before you install it. Everybody can take screenshots and
|
the user agent (browser) identification string and the referer URL
|
||||||
upload them. Our admin team will just review your changes before they become
|
(if you followed a link from another web site to get here).
|
||||||
publicly visible.
|
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
|
h2 Which software packages are listed?
|
||||||
' This site is operated by Christoph Haas.
|
|
||||||
'
|
|
||||||
' Feel free to leave
|
|
||||||
a href="mailto:email@christoph-haas.de" feedback?
|
|
||||||
|
|
||||||
a name='cookies'
|
p
|
||||||
h2 Cookies and privacy
|
|
|
||||||
|
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
|
p
|
||||||
' I am very concerned with privacy myself. So this site stores as
|
' The repositories that I am scanning frequently are:
|
||||||
' little information about your stay as possible. That is:
|
|
||||||
|
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
|
ul
|
||||||
li
|
li
|
||||||
em
|
// TODO: Use actual virtual host name here instead of hardcoding screenshots.debian.net
|
||||||
'Cookies.
|
' http://screenshots.debian.net/packages
|
||||||
|
|
br
|
||||||
Only if and when you upload a screenshot the website will send your
|
' (List of all packages with screenshots)
|
||||||
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
|
li
|
||||||
em
|
' http://screenshots.debian.net/package/PACKAGENAME
|
||||||
'Log files.
|
br
|
||||||
|
|
' (Page with details and screenshots for a certain package)
|
||||||
|
|
||||||
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
|
li
|
||||||
em
|
' http://screenshots.debian.net/thumbnail/PACKAGENAME
|
||||||
'Privacy.
|
br
|
||||||
|
|
' (Returns a thumbnail (160x120 pixels or less) of a package's first found
|
||||||
Under no circumstance will information about your person be
|
' screenshot. If no screenshot was found then a dummy image will be returned
|
||||||
collected or processed. I am happy to have you here as my guest.
|
' along with the HTTP code 404.)
|
||||||
|
li
|
||||||
h2 What is your motivation of running this site?
|
' http://screenshots.debian.net/screenshot/PACKAGENAME
|
||||||
p
|
br
|
||||||
|
|
' (Returns a screenshot (800x600 pixels or less) of a package. If no
|
||||||
Do you wonder why this web site has been running for so many years
|
' screenshot was found then a dummy image will be returned along with the
|
||||||
obviously costing time and money? It's one of my pet projects and
|
' HTTP code 404.)
|
||||||
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?
|
|
||||||
|
|
||||||
p
|
p
|
||||||
|
|
' If you would like to get a complete list of packages or screenshots in JSON
|
||||||
I import the package repositories from various Linux
|
' format then use one of these URLs:
|
||||||
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
|
ul
|
||||||
' The repositories that I am scanning frequently are:
|
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
|
h2 Uploading new screenshots
|
||||||
- @package_sources.each do |repo|
|
|
||||||
li
|
|
||||||
a href=repo[:url] =repo[:description]
|
|
||||||
|
|
||||||
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
|
h2 Why isn't this a debian.org service?
|
||||||
|
|
|
||||||
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
|
||||||
|
|
|
||||||
|
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
|
h2 Is this web application available as a Debian package?
|
||||||
' You can use the screenshots on your own website. Some useful URLs:
|
|
||||||
|
|
||||||
ul
|
p
|
||||||
li
|
|
|
||||||
// TODO: Use actual virtual host name here instead of hardcoding screenshots.debian.net
|
I have been asked why the web application was not simply put into
|
||||||
' http://screenshots.debian.net/packages
|
a Debian package so everybody can install their own copy. First of all it
|
||||||
br
|
is pretty complex and creating a package from it would be time-consuming.
|
||||||
' (List of all packages with screenshots)
|
And the web application was specifically created to operate this web site.
|
||||||
li
|
Running a private copy of it would not really make much sense.
|
||||||
' 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
|
h2 Can I see the source code of this web application?
|
||||||
' If you would like to get a complete list of packages or screenshots in JSON
|
|
||||||
' format then use one of these URLs:
|
|
||||||
|
|
||||||
ul
|
p
|
||||||
li
|
|
|
||||||
' http://screenshots.debian.net/json/package/PACKAGENAME
|
Valid question. I am not a professional Rails developer so I was
|
||||||
br
|
reluctant to publish the source code. In fact I feared it would
|
||||||
' Returns a JSON structure containing the URLs to the thumbnails and
|
attract people with bad intentions rather than contributors.
|
||||||
' full-size images of the screenshots available on this site.
|
Yes, that is a weak reason. So after the next major update I will
|
||||||
li
|
add the Git URL here so you can get the source code and start
|
||||||
' http://screenshots.debian.net/json/packages
|
critisizing me. :)
|
||||||
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.
|
|
||||||
|
|
||||||
h2 Uploading new screenshots
|
h2 Statistics
|
||||||
|
|
||||||
p
|
p
|
||||||
|
|
// TODO: Use real values
|
||||||
Whether you are a developer or not - we appreciate if you upload screenshots.
|
' There are currently #{@package_count} software packages in the database.
|
||||||
See if your favorite package does not yet have a screenshot and
|
/ ' 3798 of them have screenshots.
|
||||||
upload one.
|
/ ' 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
|
h2 Who is behind this site?
|
||||||
|
|
|
||||||
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 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
|
p
|
||||||
|
|
'Christoph Haas
|
||||||
I have been asked why the web application was not simply put into
|
br
|
||||||
a Debian package so everybody can install their own copy. First of all it
|
'Oldesloer Straße 14a
|
||||||
is pretty complex and creating a package from it would be time-consuming.
|
br
|
||||||
And the web application was specifically created to operate this web site.
|
'23843 Rümpel
|
||||||
Running a private copy of it would not really make much sense.
|
br
|
||||||
|
'Email contact: email@christoph-haas.de
|
||||||
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
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
#teaser.row
|
#teaser.grid-container
|
||||||
div.large-4.medium-4.small-3.columns
|
.grid-x
|
||||||
|
.large-4.medium-4.small-3.cell
|
||||||
#biglogo
|
#biglogo
|
||||||
// TODO: vary the logo depending on the virtual host
|
// TODO: vary the logo depending on the virtual host
|
||||||
img src="/images/logos/debian.svg" width="400" alt="Debian logo"
|
img src="/images/logos/debian.svg" width="300" alt="Debian logo"
|
||||||
div.large-8.medium-8.small-9.columns
|
.large-8.medium-8.small-9.cell
|
||||||
h1 We have screenshots!
|
h1 We have screenshots!
|
||||||
p
|
p
|
||||||
' Have you ever wondered how a certain piece of software looks
|
' Have you ever wondered how a certain piece of software looks
|
||||||
|
|
@ -14,18 +15,19 @@
|
||||||
' software packages coming with
|
' software packages coming with
|
||||||
' Debian and other Linux distributions. And of course you are encouraged to upload
|
' Debian and other Linux distributions. And of course you are encouraged to upload
|
||||||
' your own screenshots for others to explore.
|
' your own screenshots for others to explore.
|
||||||
|
|
||||||
p
|
p
|
||||||
= form_tag(packages_grid_path, method: 'GET')
|
= form_tag(packages_grid_path, method: 'GET')
|
||||||
div.row.collapse.postfix-round
|
.input-group
|
||||||
div.small-9.columns
|
input.input-group-field type="search" name="search" placeholder="Looking for a special software?" autofocus="true"
|
||||||
input type="text" name="search" placeholder="Looking for a special software?" autofocus="true"
|
.input-group-button
|
||||||
div.small-3.columns
|
input.button.postfix type="submit" value="Search"
|
||||||
input.button.postfix type="submit" value="Search"
|
|
||||||
|
|
||||||
div.row
|
.grid-container
|
||||||
div.large-4.medium-12.small-12.columns.text-center
|
.grid-x.align-spaced
|
||||||
|
.large-3.medium-12.small-12.cell.text-center
|
||||||
h2 Newest upload
|
h2 Newest upload
|
||||||
div.thumb-height
|
.thumb-height
|
||||||
a href=package_path(@newest_upload.package.name)
|
a href=package_path(@newest_upload.package.name)
|
||||||
= image_tag(@newest_upload.image.url(:thumb, timestamp: false), alt: @newest_upload.caption)
|
= image_tag(@newest_upload.image.url(:thumb, timestamp: false), alt: @newest_upload.caption)
|
||||||
p
|
p
|
||||||
|
|
@ -33,9 +35,9 @@ div.row
|
||||||
=@newest_upload.package.name
|
=@newest_upload.package.name
|
||||||
' :
|
' :
|
||||||
=@newest_upload.package.description
|
=@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
|
h2 Most popular
|
||||||
div.thumb-height
|
.thumb-height
|
||||||
a href=package_path(@most_popular_package.name)
|
a href=package_path(@most_popular_package.name)
|
||||||
img src=@most_popular_package.screenshots.first.image.url(:thumb, timestamp: false)
|
img src=@most_popular_package.screenshots.first.image.url(:thumb, timestamp: false)
|
||||||
p
|
p
|
||||||
|
|
@ -43,14 +45,15 @@ div.row
|
||||||
=@most_popular_package.name
|
=@most_popular_package.name
|
||||||
' :
|
' :
|
||||||
=@most_popular_package.description
|
=@most_popular_package.description
|
||||||
div.large-4.medium-12.small-12.columns.text-center
|
.large-3.medium-12.small-12.cell.text-center
|
||||||
h2 Your help needed
|
h2 Contribute
|
||||||
div.thumb-height
|
.thumb-height
|
||||||
a href=upload_path(@most_wanted_package.name)
|
a href=upload_path(@most_wanted_package.name)
|
||||||
img src="/images/dummy/no-screenshots-upload-one.svg" width="160"
|
img src="/images/dummy/no-screenshots-upload-one.svg" width="160"
|
||||||
p
|
p
|
||||||
' We lack a screenshot for the
|
/ TODO: Randomly choose one of ~30 packages
|
||||||
strong =>@most_wanted_package.name
|
' We lack a screenshot for the
|
||||||
' package. Can you
|
strong =>@most_wanted_package.name
|
||||||
a href=package_path(@most_wanted_package.name) provide one
|
' package. Can you
|
||||||
|
a href=package_path(@most_wanted_package.name) provide one
|
||||||
' ?
|
' ?
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue