From 61dc736fcbb7f35384174e21c7ec8b8d2f093cc4 Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Thu, 3 Mar 2016 17:13:11 +0100 Subject: [PATCH] Thumbnail grid fixed for Foundation 6 --- app/assets/stylesheets/_settings.scss | 84 +++++++++++++++++---------- app/views/packages/index-grid.slim | 4 +- 2 files changed, 54 insertions(+), 34 deletions(-) diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index ff59638..5f271b9 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -54,8 +54,8 @@ $debian-color: #c70338; $global-font-size: 100%; $global-width: rem-calc(1200); $global-lineheight: 1.5; -//$primary-color: #2199e8; -$primary-color: $debian-color; +$primary-color: #808080; +//$primary-color: $debian-color; $secondary-color: #777; $success-color: #3adb76; $warning-color: #ffae00; @@ -378,7 +378,8 @@ $mediaobject-image-width-stacked: 100%; $menu-margin: 0; $menu-margin-nested: 1rem; -$menu-item-padding: 0.7rem 1rem; +//$menu-item-padding: 0.7rem 1rem; +$menu-item-padding: 1.2rem 1rem; $menu-icon-spacing: 0.25rem; $menu-expand-max: 6; @@ -518,7 +519,8 @@ $tab-content-padding: 1rem; $thumbnail-border: solid 4px $white; $thumbnail-margin-bottom: $global-margin; $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); -$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); +// $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); +$thumbnail-shadow-hover: 0 0 6px 3px rgba($primary-color, 0.5); $thumbnail-transition: box-shadow 200ms ease-out; $thumbnail-radius: $global-radius; @@ -601,6 +603,11 @@ $footer-text-color: #b3b3b3; $menu-item-background-active: $primary-color; +header +{ + background-color: $light-gray; +} + body { background-color: $page-background; @@ -623,7 +630,7 @@ body // Display the site name in a larger font font-size: 26px; padding: 8px 5px 3px 0; - color: #babdb6; + color: $dark-gray; // Extra space around the Linux distribution's logo img @@ -683,28 +690,38 @@ html, body { } // Screenshot thumbnail image with name and description -.thumbnail +// .thumbnail +// { +// padding-top: 5px !important; +// padding-bottom: 5px !important; + // border-radius: 10px; +// margin-bottom: 10px; +// text-align: center; +// line-height: 120%; + +// &:hover +// { +// background-color: #d0d0d0; +// } + +// .pkgname +// { +// font-weight: 700; +// } +// .pkgdescription +// { +// font-size: 80%; +// } +// } + +.grid-thumbnails .column { - padding-top: 5px !important; - padding-bottom: 5px !important; + // border: 5px solid green; border-radius: 10px; - margin-bottom: 10px; + // border: 2px solid $light-gray; + // height: 300px; + padding: 5px 5px 50px 5px; text-align: center; - line-height: 120%; - - &:hover - { - background-color: #d0d0d0; - } - - .pkgname - { - font-weight: 700; - } - .pkgdescription - { - font-size: 80%; - } } // Vertical icon bar in package view @@ -751,13 +768,13 @@ html, body { } } -.row .gridview -{ - img.screenshot - { - width: 100%; - } -} +// .row .gridview +// { +// img.screenshot +// { +// width: 100%; +// } +// } .pkgname { @@ -798,7 +815,8 @@ html, body { */ .grid-thumbnail { - height: 125px; + // Pretend that all thumbnails are 120 pixels high to align the captions properly + height: 130px; } // Avoid painting links to detail packages in the primary color @@ -887,6 +905,7 @@ a.black } } + // .ratingbar // { // background-color: $progress-bar-color; @@ -921,3 +940,4 @@ a.black margin-left: 2em; margin-bottom: 0.5em; } + diff --git a/app/views/packages/index-grid.slim b/app/views/packages/index-grid.slim index dc94a58..61ae37c 100644 --- a/app/views/packages/index-grid.slim +++ b/app/views/packages/index-grid.slim @@ -12,9 +12,9 @@ .row .small-9.large-10.columns - if @packages.length>0 - ul.small-block-grid-1.medium-block-grid-3.large-block-grid-4 + .row.small-up-1.medium-up-3.large-up-4.grid-thumbnails - @packages.all.each do |pkg| - li.thumbnail + .column = render partial: 'packages/grid_thumbnail', locals: { pkg: pkg } - else