diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss index e5e41fc..8ebc000 100644 --- a/app/assets/stylesheets/foundation_and_overrides.scss +++ b/app/assets/stylesheets/foundation_and_overrides.scss @@ -1131,8 +1131,8 @@ $include-open-sans: false; // We use these to style paragraphs // $paragraph-font-family: inherit; // $paragraph-font-weight: normal; -$paragraph-font-size: 1.4rem; -$paragraph-line-height: 1.5; +$paragraph-font-size: 1.1rem; +$paragraph-line-height: 1.5em; // $paragraph-margin-bottom: rem-calc(20); // $paragraph-aside-font-size: rem-calc(14); // $paragraph-aside-line-height: 1.35; diff --git a/app/assets/stylesheets/sass/_layout.scss b/app/assets/stylesheets/sass/_layout.scss index da7f0ca..0f86912 100644 --- a/app/assets/stylesheets/sass/_layout.scss +++ b/app/assets/stylesheets/sass/_layout.scss @@ -100,9 +100,12 @@ body { position: absolute; z-index: 10; //background-color: $white; - //background-color: rgba($white, 0.33); - background-color: transparent; - @include background-image(linear-gradient(top, #000 0%, rgba(#000, 0) 100%)); + background-color: rgba($white, 0.5); + + .has-banner-image & { + background-color: transparent; + @include background-image(linear-gradient(top, #000 0%, rgba(#000, 0) 100%)); + } .buttons { display: block; @@ -171,7 +174,10 @@ body { padding: 2.5%; font-size: 1em; min-height: 100vh; - background-image: none; + + .has-banner-image & { + background-image: none; + } .button, p { display: block; @@ -243,47 +249,17 @@ main { #banner { position: relative; - padding-bottom: 4em; background-size: cover; background-position: center 66.6667%; + //padding-top: 4em; color: $white; - background-color: rgba($conference-color, 0.33); - background-blend-mode: overlay; overflow: hidden; - @include text-shadow(0 0 0.5em $black); + background-color: $black; h1, h2 { color: inherit; } - .no-blend-modes & { - &:before { - content: ''; - display: block; - position: absolute; - background-color: inherit; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - } - } - - &:after { - content: ''; - display: block; - position: absolute; - //background-color: inherit; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - @include background-image(linear-gradient(top, rgba(0,0,0,0) 50%, darken($conference-color, 25) 100%)); - mix-blend-mode: multiply; - } - .row { height: 100%; z-index: 2; @@ -314,6 +290,45 @@ main { } .organizations & { + background-color: $organization-color; + } + + .has-banner-image & { + padding-bottom: 4em; + background-color: rgba($conference-color, 0.33); + background-blend-mode: overlay; + @include text-shadow(0 0 0.5em $black); + + .no-blend-modes & { + &:before { + content: ''; + display: block; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + } + } + + &:after { + content: ''; + display: block; + position: absolute; + //background-color: inherit; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + @include background-image(linear-gradient(top, rgba(0,0,0,0) 50%, darken($conference-color, 25) 100%)); + mix-blend-mode: multiply; + } + } + + .has-banner-image.organizations & { background-color: rgba($organization-color, 0.33); &:after { @@ -367,13 +382,15 @@ main { } @include breakpoint(medium) { - min-height: 40em; - height: 100%; - height: 100vh; - padding-top: 7.5em; + padding: 7.5em 4em 1em; + + .has-banner-image & { + min-height: 40em; + height: 100%; + height: 100vh; + } - .organizations-show &, - .conferences-show & { + .page-style-article & { min-height: 30em; height: 50%; height: 50vh; @@ -410,26 +427,36 @@ main { } } - .organizations-index &, - .conferences-index & { + .page-style-list & { + min-height: 10em; + height: 30em; height: 30vw; h1 { + font-size: 6em; font-size: 6vw; } } } @include breakpoint(large) { - padding-top: 0; border-bottom-left-radius: 2.5em; + padding-top: 2em; + + .has-banner-image & { + padding-top: 0; + } + + .no-content & { + border-radius: 0; + } &:after { border-bottom-left-radius: inherit; } - .organizations-index &, - .conferences-index & { + .page-style-list & { + height: 15em; height: 15vw; h1 { @@ -464,8 +491,49 @@ main { } #footer { + position: relative; min-height: 5em; background-color: inherit; + z-index: 1; + + i { + display: inline-block; + border-left: 3px solid; + height: 1em; + vertical-align: middle; + -webkit-transform: skewX(-15deg); + -moz-transform: skewX(-15deg); + -ms-transform: skewX(-15deg); + transform: skewX(-15deg); + } +} + +.photo-attribution { + position: absolute; + right: 0.25em; + font-size: 0.8em; + text-align: right; + margin: 0.25em 0.25em 0 0; + @include opacity(0.5); + z-index: 2; + + > span { + display: none; + } + + &:hover { + @include opacity(1); + + > span { + display: block; + } + } + + .no-content & { + a, a:visited { + color: $white; + } + } } /*body { diff --git a/app/assets/stylesheets/sass/_typography.scss b/app/assets/stylesheets/sass/_typography.scss index 2126c98..2bc15af 100644 --- a/app/assets/stylesheets/sass/_typography.scss +++ b/app/assets/stylesheets/sass/_typography.scss @@ -26,6 +26,7 @@ font-size: 1.333em; border: 0.15em solid transparent; padding: 0.5em 1em; + vertical-align: middle; &.organization, &.secondary { background-color: $organization-color; @@ -432,6 +433,7 @@ form > div:first-child + .columns:not([class*="medium-"]) { .actions { text-align: center; + padding-top: 1em; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ @@ -549,4 +551,10 @@ svg { a:hover { color: rgba($white, 0.5); } -} \ No newline at end of file +} + +article { + p { + font-size: 1.4rem; + } +} diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 2e05ae4..d8a529d 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -43,6 +43,7 @@ module ApplicationHelper def banner_image(banner_image, name: nil, id: nil, user_id: nil, src: nil) @@no_banner = false + @@banner_image = banner_image if (name || id || user_id || src) @@banner_attribution_details = {:name => name, :id => id, :user_id => user_id, :src => src} end @@ -50,6 +51,7 @@ module ApplicationHelper end def banner_attrs(banner_image) + @@no_banner = false if banner_image.length > 0 @@banner_image = banner_image return {style: 'background-image: url(' + banner_image + ');', class: 'has-image' } @@ -79,9 +81,9 @@ module ApplicationHelper src = @@banner_attribution_details[:src] attribution = '
' if src == 'panoramio' - attribution += '' + - _('Image_provided_by_panoramio_user') + - ' ' + @@banner_attribution_details[:name] + '' + + attribution += '© ' + + _('Banner_image_provided_by_panoramio_user') + + ' ' + @@banner_attribution_details[:name] + '' + '' + _('Photos_provided_by_Panoramio_are_under_the_copyright_of_their_owners') + '' end attribution += '
' @@ -95,12 +97,19 @@ module ApplicationHelper def page_style(style) classes = ['page-style-' + style.to_s] - if @@no_banner - classes << 'no-banner' - end + #if @@no_banner + # classes << 'no-banner' + #end if ThereAreTranslationsOnThisPage? classes << 'has-translations' end + if !@@has_content + classes << 'no-content' + end + if @@banner_image + classes << 'has-banner-image' + end + if params[:controller] classes << params[:controller] diff --git a/app/views/conferences/_header.html.haml b/app/views/conferences/_header.html.haml index 2107642..3557669 100644 --- a/app/views/conferences/_header.html.haml +++ b/app/views/conferences/_header.html.haml @@ -1,12 +1,12 @@ -- banner_image @conference.cover_url, id: 532693, name: 'phil', user_id: 1429589, src: 'panoramio' -- page_style 'emphasize-banner' +- banner_image @conference.cover_url, id: @conference.cover_attribution_id, name: @conference.cover_attribution_name, user_id: @conference.cover_attribution_user_id, src: @conference.cover_attribution_src +- page_style (params['controller'] == 'conferences' ? 'article' : 'emphasize-banner') - content_for :banner do .row .columns.small-12.banner %figure %img{src: @conference.poster_url} - .columns.medium-6.align-bottom + .columns.medium-8.align-bottom %div %h1='Bike!Bike! '+@conference.start_date.year.to_s %h2 @@ -16,7 +16,7 @@ = (l @conference.start_date, format: :date) + ' - ' + (l @conference.end_date, format: :date) - if params['controller'] != 'conferences' %p= ActionView::Base.full_sanitizer.sanitize(@conference.info).gsub(/^(.{300,350}\.)(.*)$/m, '\1...') - .columns.medium-6.centered.align-bottom + .columns.medium-4.centered.align-bottom %div - if @conference.registration_open %a.button{href: @conference.url(:register)} @@ -24,4 +24,3 @@ - if params['controller'] != 'conferences' %a.button.more{href: @conference.url} =_'conference.More_Info' - = banner_attribution \ No newline at end of file diff --git a/app/views/conferences/index.html.haml b/app/views/conferences/index.html.haml index d883d04..1f71861 100644 --- a/app/views/conferences/index.html.haml +++ b/app/views/conferences/index.html.haml @@ -1,6 +1,6 @@ -- page_style :list - title _'page.Conferences' - banner_image '/assets/conference.jpg' +- page_style :list - content_for :banner do .row .columns diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 20ba05e..4bd3e18 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -42,6 +42,7 @@ - if has_banner? %header#banner{banner_attrs(yield_or_default :banner_image)} = yield :banner + = banner_attribution - if has_content? #content=yield - else diff --git a/app/views/organizations/index.html.haml b/app/views/organizations/index.html.haml index 78f6a2f..aac16d6 100644 --- a/app/views/organizations/index.html.haml +++ b/app/views/organizations/index.html.haml @@ -1,6 +1,6 @@ -- page_style :list - title _'page.Organizations' - banner_image '/assets/orgs.jpg' +- page_style :list - content_for :banner do .row .columns diff --git a/app/views/organizations/show.html.haml b/app/views/organizations/show.html.haml index b8c6886..8b2f8d5 100644 --- a/app/views/organizations/show.html.haml +++ b/app/views/organizations/show.html.haml @@ -1,5 +1,5 @@ -- page_style 'organization' - banner_image @organization.cover_url +- page_style 'article' - content_for :banner do .row{:class => (@organization.avatar.is_landscape? ? 'landscape' : 'portrait')} .columns{:class => (@organization.avatar.is_landscape? ? nil : ['medium-6', 'medium-push-6'])} diff --git a/app/views/pages/translation_list.html.haml b/app/views/pages/translation_list.html.haml index 7f04106..cc879a6 100644 --- a/app/views/pages/translation_list.html.haml +++ b/app/views/pages/translation_list.html.haml @@ -1,3 +1,5 @@ +- banner_title 'Translations' + .row %h1 = _ 'languages.list' diff --git a/app/views/pages/translations.html.haml b/app/views/pages/translations.html.haml index e0e2c39..87e8e63 100644 --- a/app/views/pages/translations.html.haml +++ b/app/views/pages/translations.html.haml @@ -1,8 +1,7 @@ +- banner_title (_ 'language_translations', vars: {:language => (_ ('languages.' + @lang))}) - page_style :form .row - %h1 - = _ 'language_translations', vars: {:language => (_ ('languages.' + @lang))} %table.columns#translations{data: {token: form_authenticity_token}} %thead %tr diff --git a/app/views/shared/_footer.html.haml b/app/views/shared/_footer.html.haml index 7641885..abff369 100644 --- a/app/views/shared/_footer.html.haml +++ b/app/views/shared/_footer.html.haml @@ -1,9 +1,9 @@ %footer.row - .columns.medium-8.medium-push-1.large-6.large-push-3.text-center + .columns.medium-8.medium-push-1.large-6.large-push-2.text-center %a{href: '/conferences/'}='Conferences' - \/ + %i %a{href: '/conferences/'}='Organizations' - \/ + %i %a{href: '/conferences/'}='Zine' .columns.medium-3.large-3.text-right ©2014 Bike!Bike! diff --git a/db/migrate/20140712190647_add_cover_attribution_user_id_to_organizations.rb b/db/migrate/20140712190647_add_cover_attribution_user_id_to_organizations.rb new file mode 100644 index 0000000..1a8a6b1 --- /dev/null +++ b/db/migrate/20140712190647_add_cover_attribution_user_id_to_organizations.rb @@ -0,0 +1,5 @@ +class AddCoverAttributionUserIdToOrganizations < ActiveRecord::Migration + def change + add_column :organizations, :id, :integer + end +end diff --git a/db/migrate/20140712190815_add_cover_attribution_user_id_to_conferences.rb b/db/migrate/20140712190815_add_cover_attribution_user_id_to_conferences.rb new file mode 100644 index 0000000..ab8c34a --- /dev/null +++ b/db/migrate/20140712190815_add_cover_attribution_user_id_to_conferences.rb @@ -0,0 +1,5 @@ +class AddCoverAttributionUserIdToConferences < ActiveRecord::Migration + def change + add_column :conferences, :id, :integer + end +end