chaas/debshots
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Restyling

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

16
app/assets/stylesheets/_settings.scss
View file

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

1
app/assets/stylesheets/application.scss
View file

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

3
app/assets/stylesheets/foundation_and_overrides.scss
View file

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

273
app/assets/stylesheets/customisations.scss → app/assets/stylesheets/my_styles.scss
View file

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

20
app/views/devise/sessions/new.slim
View file

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

7
app/views/layouts/_topbar.slim
View file

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

5
app/views/layouts/application.html.slim
View file

@ -13,10 +13,9 @@ html
= csrf_meta_tags = csrf_meta_tags
body body
.container
= render 'layouts/topbar' = render 'layouts/topbar'
#content #content.grid-container
#messages.row #messages
= render 'layouts/messages' = render 'layouts/messages'
= yield = yield
= render 'layouts/footer' = render 'layouts/footer'

8
app/views/logs/index.html.slim
View file

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

8
app/views/moderate/index.slim
View file

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

2
app/views/my/profile.slim
View file

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

4
app/views/my/uploads.slim
View file

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

5
app/views/my/welcome.slim
View file

@ -1,8 +1,5 @@
.row
= render partial: 'menu' .small-8.columns.small-centered
.small-8.columns.small-centered
.callout.success .callout.success
h1 Welcome h1 Welcome

6
app/views/packages/_details_uploadmodal.slim
View file

@ -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
app/views/packages/_receive_upload.slim
View file

@ -1,7 +1,6 @@
/ 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?

15
app/views/packages/details.slim
View file

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

16
app/views/packages/grid.slim
View file

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

18
app/views/packages/list.slim
View file

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

10
app/views/packages/notfound.slim
View file

@ -1,10 +1,8 @@
.row h1
h1
i.fi-alert i.fi-alert
' No such package… ' No such package…
p p
' I'm afraid but there is no package ' I'm afraid but there is no package
em =@package_name em =@package_name
' in the database. It may be that a package that is available ' in the database. It may be that a package that is available
@ -12,10 +10,10 @@
' If you think this is an error then feel free to leave ' If you think this is an error then feel free to leave
a href="mailto:email@christoph-haas.de" feedback a href="mailto:email@christoph-haas.de" feedback
p p
' Perhaps you want to search for some other piece of software? ' Perhaps you want to search for some other piece of software?
= form_tag(packages_grid_path, method: 'GET') = form_tag(packages_grid_path, method: 'GET')
div.row.collapse.postfix-round div.collapse.postfix-round
div.small-9.columns div.small-9.columns
input type="text" name="search"autofocus="true" input type="text" name="search"autofocus="true"
div.small-3.columns div.small-3.columns

15
app/views/packages/upload.slim
View file

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

69
app/views/welcome/about.slim
View file

@ -1,10 +1,7 @@
.row h1 About this web site
h1 About this web site p
p
| |
This is a public repository of screenshots taken from applications contained This is a public repository of screenshots taken from applications contained
in the Debian GNU/Linux distribution and its derivates like Ubuntu. It was 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 created to help getting an impression of what a certain software will look
@ -12,22 +9,22 @@
upload them. Our admin team will just review your changes before they become upload them. Our admin team will just review your changes before they become
publicly visible. publicly visible.
h2 Who runs this site? h2 Who runs this site?
p p
' This site is operated by Christoph Haas. ' This site is operated by Christoph Haas.
' '
' Feel free to leave ' Feel free to leave
a href="mailto:email@christoph-haas.de" feedback? a href="mailto:email@christoph-haas.de" feedback?
a name='cookies' a name='cookies'
h2 Cookies and privacy h2 Cookies and privacy
p p
' I am very concerned with privacy myself. So this site stores as ' I am very concerned with privacy myself. So this site stores as
' little information about your stay as possible. That is: ' little information about your stay as possible. That is:
ul ul
li li
em em
'Cookies. 'Cookies.
@ -59,8 +56,8 @@
Under no circumstance will information about your person be Under no circumstance will information about your person be
collected or processed. I am happy to have you here as my guest. collected or processed. I am happy to have you here as my guest.
h2 What is your motivation of running this site? h2 What is your motivation of running this site?
p p
| |
Do you wonder why this web site has been running for so many years 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 obviously costing time and money? It's one of my pet projects and
@ -69,9 +66,9 @@
If you feel you want to give back something then help the Debian If you feel you want to give back something then help the Debian
project. project.
h2 Which software packages are listed? h2 Which software packages are listed?
p p
| |
I import the package repositories from various Linux I import the package repositories from various Linux
distributions once a day. However we already filter out packages that distributions once a day. However we already filter out packages that
@ -81,7 +78,7 @@
available in your favorite Linux distribution. Just let me know if you available in your favorite Linux distribution. Just let me know if you
are missing packages. are missing packages.
p p
' The repositories that I am scanning frequently are: ' The repositories that I am scanning frequently are:
ul ul
@ -89,9 +86,9 @@
li li
a href=repo[:url] =repo[:description] a href=repo[:url] =repo[:description]
h2 Who is using this site? h2 Who is using this site?
p p
| |
Many users interested in Linux distributions and their applications visit Many users interested in Linux distributions and their applications visit
this site either to look for specific pieces of software for certain use this site either to look for specific pieces of software for certain use
@ -106,9 +103,9 @@
li li
a href="http://packages.ubuntu.com" packages.ubuntu.com a href="http://packages.ubuntu.com" packages.ubuntu.com
h2 How you can use the screenshots h2 How you can use the screenshots
p p
' You can use the screenshots on your own website. Some useful URLs: ' You can use the screenshots on your own website. Some useful URLs:
ul ul
@ -163,17 +160,17 @@
' that still lack screenshots. If you want to help contributing ' that still lack screenshots. If you want to help contributing
' then this data can be useful. ' then this data can be useful.
h2 Uploading new screenshots h2 Uploading new screenshots
p p
| |
Whether you are a developer or not - we appreciate if you upload screenshots. 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 See if your favorite package does not yet have a screenshot and
upload one. upload one.
h2 Why isn't this a debian.org service? h2 Why isn't this a debian.org service?
p p
| |
Often experimental services start as something.debian.net. After a while they 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 are handed over to the trusted hands of the Debian sysadmin team to be operated
@ -184,9 +181,9 @@
as a one-man show it has proven to be very stable and fast over a period of as a one-man show it has proven to be very stable and fast over a period of
many years. many years.
h2 Is this web application available as a Debian package? h2 Is this web application available as a Debian package?
p p
| |
I have been asked why the web application was not simply put into 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 a Debian package so everybody can install their own copy. First of all it
@ -194,9 +191,9 @@
And the web application was specifically created to operate this web site. And the web application was specifically created to operate this web site.
Running a private copy of it would not really make much sense. Running a private copy of it would not really make much sense.
h2 Can I see the source code of this web application? h2 Can I see the source code of this web application?
p p
| |
Valid question. I am not a professional Rails developer so I was Valid question. I am not a professional Rails developer so I was
reluctant to publish the source code. In fact I feared it would reluctant to publish the source code. In fact I feared it would
@ -205,22 +202,22 @@
add the Git URL here so you can get the source code and start add the Git URL here so you can get the source code and start
critisizing me. :) critisizing me. :)
h2 Statistics h2 Statistics
p p
// TODO: Use real values // TODO: Use real values
' There are currently #{@package_count} software packages in the database. ' There are currently #{@package_count} software packages in the database.
/ ' 3798 of them have screenshots. / ' 3798 of them have screenshots.
/ ' That makes a total of 7.8%. / ' That makes a total of 7.8%.
' And #{@screenshot_count} screenshots have been uploaded. ' And #{@screenshot_count} screenshots have been uploaded.
/ p / p
/ // TODO: Use plot about upload statistics / // TODO: Use plot about upload statistics
/ ' (Number of screenshots uploaded each month.) / ' (Number of screenshots uploaded each month.)
h2 Who is behind this site? h2 Who is behind this site?
p p
| |
This site has been developed and is maintained by Christoph Haas. 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. It runs on a web application called <em>debshots</em> that was written in Ruby-on-Rails.
@ -228,7 +225,7 @@
and the Zurb Foundation toolkit. and the Zurb Foundation toolkit.
The person responsible for this site is: The person responsible for this site is:
p p
'Christoph Haas 'Christoph Haas
br br
'Oldesloer Straße 14a 'Oldesloer Straße 14a

35
app/views/welcome/home.slim
View file

@ -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,12 +45,13 @@ 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
/ TODO: Randomly choose one of ~30 packages
' We lack a screenshot for the ' We lack a screenshot for the
strong =>@most_wanted_package.name strong =>@most_wanted_package.name
' package. Can you ' package. Can you