From 1241d21f933db7e07727054d42684610bd7db541 Mon Sep 17 00:00:00 2001 From: James Mason Date: Tue, 23 Oct 2018 19:14:31 -0700 Subject: [PATCH] Provide an opportunity for including conference-specific CSS There is currently no top-level selector for views that is conference-specific, so all conferences on one OSEM instance end up sharing all the same CSS. In order to allow individual conferences to have unique CSS, a class for the current conference is applied to the tag, and an scss template provided with an example of conference-specific CSS. --- .haml-lint_todo.yml | 8 ++++---- app/assets/stylesheets/application.css | 1 + app/assets/stylesheets/conferences.scss | 13 +++++++++++++ .../{application.html.haml => application.haml} | 2 +- spec/views/layouts/application.haml_spec.rb | 11 +++++++++++ 5 files changed, 30 insertions(+), 5 deletions(-) create mode 100644 app/assets/stylesheets/conferences.scss rename app/views/layouts/{application.html.haml => application.haml} (96%) create mode 100644 spec/views/layouts/application.haml_spec.rb diff --git a/.haml-lint_todo.yml b/.haml-lint_todo.yml index a81a0d99..7e5ccaee 100644 --- a/.haml-lint_todo.yml +++ b/.haml-lint_todo.yml @@ -207,7 +207,7 @@ linters: - "app/views/layouts/_messages.html.haml" - "app/views/layouts/_navigation.html.haml" - "app/views/layouts/_user_menu.html.haml" - - "app/views/layouts/application.html.haml" + - "app/views/layouts/application.haml" - "app/views/organizations/index.html.haml" - "app/views/payments/_payment.html.haml" - "app/views/payments/new.html.haml" @@ -446,7 +446,7 @@ linters: - "app/views/layouts/_messages.html.haml" - "app/views/layouts/_navigation.html.haml" - "app/views/layouts/_user_menu.html.haml" - - "app/views/layouts/application.html.haml" + - "app/views/layouts/application.haml" - "app/views/organizations/index.html.haml" - "app/views/payments/_payment.html.haml" - "app/views/proposals/_form.html.haml" @@ -553,7 +553,7 @@ linters: - "app/views/layouts/_admin_sidebar_index.html.haml" - "app/views/layouts/_messages.html.haml" - "app/views/layouts/_navigation.html.haml" - - "app/views/layouts/application.html.haml" + - "app/views/layouts/application.haml" - "app/views/payments/_payment.html.haml" - "app/views/proposals/_form.html.haml" - "app/views/proposals/_tooltip.html.haml" @@ -603,7 +603,7 @@ linters: - "app/views/layouts/_admin.html.haml" - "app/views/layouts/_navigation.html.haml" - "app/views/layouts/_user_menu.html.haml" - - "app/views/layouts/application.html.haml" + - "app/views/layouts/application.haml" - "app/views/proposals/_encouragement_text.html.haml" - "app/views/proposals/new.html.haml" - "app/views/proposals/registrations.html.haml" diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index a316f473..567fa050 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -20,4 +20,5 @@ *= require selectize.bootstrap3 *= require mastodon *= require bootstrap-select + *= require conferences */ diff --git a/app/assets/stylesheets/conferences.scss b/app/assets/stylesheets/conferences.scss new file mode 100644 index 00000000..fbf950cd --- /dev/null +++ b/app/assets/stylesheets/conferences.scss @@ -0,0 +1,13 @@ +/* Apply CSS to views of a specific conference by encapsulating the style in + * a body tag classed for the conference's short title. + * See the example here for 'osemdemo'. + * NOTE: when overriding existing CSS, it may be necessary to use !important to + * bypass CSS specificity rules. +*/ + +body.conference-osemdemo { + // style here only applies when working with the 'osemdemo' conference. + #header { + background-color: #b58e73 !important; + } +} diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.haml similarity index 96% rename from app/views/layouts/application.html.haml rename to app/views/layouts/application.haml index 60c56307..0c8f6201 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.haml @@ -21,7 +21,7 @@ = javascript_include_tag "//cdn.transifex.com/live.js" = yield(:head) - %body + %body{ class: ("conference-#{@conference.short_title}" if @conference) } = render 'layouts/navigation', conference: @conference -# Admin area - if controller.class.name.split("::").first=="Admin" diff --git a/spec/views/layouts/application.haml_spec.rb b/spec/views/layouts/application.haml_spec.rb new file mode 100644 index 00000000..4b337429 --- /dev/null +++ b/spec/views/layouts/application.haml_spec.rb @@ -0,0 +1,11 @@ +require 'spec_helper' + +describe 'layouts/application.haml' do + let(:conference) { create(:conference) } + + it 'assigns a class to the body identifying the current conference' do + assign(:conference, conference) + render + expect(rendered).to have_selector("body.conference-#{conference.short_title}") + end +end