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