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.

269
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 {
.menu .menu-text font-weight: 100 !important;
{ font-size: 1.1rem;
// 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 h1, h2, h3
img
{ {
padding: 5px; color: #8a8a8a;
}
} }
// .top-bar-left
// {
// .menu .menu-text
// {
// // Display the site name in a larger font
// font-size: 1.2rem;
// padding: 10px 5px 3px 0;
// color: $dark-gray;
// font-weight: normal;
// }
// // Extra space around the Linux distribution's logo
// img
// {
// padding: 5px;
// }
// }
// Make thumbnails equally high // 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

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

@ -1,6 +1,3 @@
.row
= render partial: 'menu'
.small-8.columns.small-centered .small-8.columns.small-centered

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?

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

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

@ -1,5 +1,3 @@
.row
h1 h1
i.fi-alert i.fi-alert
' No such package… ' No such package…
@ -15,7 +13,7 @@
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

13
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

3
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

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