Restyling
This commit is contained in:
Christoph Haas
parent
9d6baa20e5
commit
06b8f92963
21 changed files with 492 additions and 493 deletions
|
|
@ -69,7 +69,7 @@ $global-font-size: 100%;
|
|||
$global-width: rem-calc(1200);
|
||||
$global-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;
|
||||
|
|
|
|||
|
|
@ -13,4 +13,5 @@
|
|||
*= require cookies_eu
|
||||
*= require fancybox
|
||||
*= require font-awesome
|
||||
*= require my_styles
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// }
|
||||
// }
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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
|
||||
|
|
|
|||
|
|
@ -13,10 +13,9 @@ html
|
|||
= csrf_meta_tags
|
||||
|
||||
body
|
||||
.container
|
||||
= render 'layouts/topbar'
|
||||
#content
|
||||
#messages.row
|
||||
#content.grid-container
|
||||
#messages
|
||||
= render 'layouts/messages'
|
||||
= yield
|
||||
= render 'layouts/footer'
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.row
|
||||
.grid-container
|
||||
|
||||
= render partial: 'menu'
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
.row
|
||||
|
||||
= render partial: 'menu'
|
||||
|
||||
.small-8.columns.small-centered
|
||||
.small-8.columns.small-centered
|
||||
|
||||
.callout.success
|
||||
h1 Welcome
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/ 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
|
||||
|
||||
- if @invalid_images.any?
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
.row
|
||||
|
||||
h1
|
||||
h1
|
||||
i.fi-alert
|
||||
' No such package…
|
||||
|
||||
p
|
||||
p
|
||||
' I'm afraid but there is no package
|
||||
em =@package_name
|
||||
' 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
|
||||
a href="mailto:email@christoph-haas.de" feedback
|
||||
|
||||
p
|
||||
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.collapse.postfix-round
|
||||
div.small-9.columns
|
||||
input type="text" name="search"autofocus="true"
|
||||
div.small-3.columns
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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
|
||||
|
|
@ -12,22 +9,22 @@
|
|||
upload them. Our admin team will just review your changes before they become
|
||||
publicly visible.
|
||||
|
||||
h2 Who runs this site?
|
||||
h2 Who runs this site?
|
||||
|
||||
p
|
||||
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
|
||||
a name='cookies'
|
||||
h2 Cookies and privacy
|
||||
|
||||
p
|
||||
p
|
||||
' I am very concerned with privacy myself. So this site stores as
|
||||
' little information about your stay as possible. That is:
|
||||
|
||||
ul
|
||||
ul
|
||||
li
|
||||
em
|
||||
'Cookies.
|
||||
|
|
@ -59,8 +56,8 @@
|
|||
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
|
||||
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
|
||||
|
|
@ -69,9 +66,9 @@
|
|||
If you feel you want to give back something then help the Debian
|
||||
project.
|
||||
|
||||
h2 Which software packages are listed?
|
||||
h2 Which software packages are listed?
|
||||
|
||||
p
|
||||
p
|
||||
|
|
||||
I import the package repositories from various Linux
|
||||
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
|
||||
are missing packages.
|
||||
|
||||
p
|
||||
p
|
||||
' The repositories that I am scanning frequently are:
|
||||
|
||||
ul
|
||||
|
|
@ -89,9 +86,9 @@
|
|||
li
|
||||
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
|
||||
this site either to look for specific pieces of software for certain use
|
||||
|
|
@ -106,9 +103,9 @@
|
|||
li
|
||||
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:
|
||||
|
||||
ul
|
||||
|
|
@ -163,17 +160,17 @@
|
|||
' that still lack screenshots. If you want to help contributing
|
||||
' 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.
|
||||
See if your favorite package does not yet have a screenshot and
|
||||
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
|
||||
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
|
||||
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
|
||||
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.
|
||||
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
|
||||
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
|
||||
critisizing me. :)
|
||||
|
||||
h2 Statistics
|
||||
h2 Statistics
|
||||
|
||||
p
|
||||
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.)
|
||||
/ p
|
||||
/ // TODO: Use plot about upload statistics
|
||||
/ ' (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.
|
||||
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.
|
||||
The person responsible for this site is:
|
||||
|
||||
p
|
||||
p
|
||||
'Christoph Haas
|
||||
br
|
||||
'Oldesloer Straße 14a
|
||||
|
|
|
|||
|
|
@ -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-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,12 +45,13 @@ 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
|
||||
/ TODO: Randomly choose one of ~30 packages
|
||||
' We lack a screenshot for the
|
||||
strong =>@most_wanted_package.name
|
||||
' package. Can you
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue