From 566843177b464dc659a83969b60ee1b9dac625e8 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <mail@timfischbach.de>
Date: Sun, 10 Apr 2016 11:33:46 +0200
Subject: [PATCH] Improve logo theme configurability

* Add variant displaying logo on all pages
* Add variables for logo dimensions
* Allow to fade in watermark logo on all pages
---
 .../pageflow/themes/default/logo.scss         | 41 +++++++++++++++--
 ...{first_page.scss => background_image.scss} | 27 +++++++----
 .../default/logo/variant/watermark.scss       | 46 +++++++++++--------
 3 files changed, 83 insertions(+), 31 deletions(-)
 rename app/assets/stylesheets/pageflow/themes/default/logo/variant/{first_page.scss => background_image.scss} (63%)

diff --git a/app/assets/stylesheets/pageflow/themes/default/logo.scss b/app/assets/stylesheets/pageflow/themes/default/logo.scss
index cf2865599d..96390a4288 100644
--- a/app/assets/stylesheets/pageflow/themes/default/logo.scss
+++ b/app/assets/stylesheets/pageflow/themes/default/logo.scss
@@ -6,14 +6,49 @@
 ///
 /// - `"first-page"`: Background image on first page.
 ///
+/// - `"all-pages"`: Background image on all pages.
+///
 /// - `"watermark"`: Use `.header_logo` element as logo.
 $logo-variant: "first-page" !default;
 
-@import "./logo/variant/first_page";
+/// Top position of logo.
+$logo-top: 30px !default;
+
+/// Width of the logo. (Watermark variant only)
+$logo-width: 100px !default;
+
+/// Width of the logo in percent. (Non-watermark variants only)
+$logo-relative-width: 13% !default;
+
+/// Min Width of the logo. (Non-watermark variants only)
+$logo-min-width: 100px !default;
+
+/// Max Width of the logo. (Non-watermark variants only)
+$logo-max-width: 221px !default;
+
+/// Height of the logo.
+$logo-height: 50px !default;
+
+/// Height of the logo in phone layout. (Watermark variant only)
+$logo-phone-height: 24px !default;
+
+@import "./logo/variant/background_image";
 @import "./logo/variant/watermark";
 
 @if $logo-variant == "watermark" {
-  @include logo-variant-watermark;
+  @include logo-variant-watermark(
+    $top: $logo-top,
+    $width: $logo-width,
+    $height: $logo-height,
+    $phone-height: $logo-phone-height
+  );
 } @else {
-  @include logo-variant-first-page;
+  @include logo-variant-background-image(
+    $first-page-only: ($logo-variant == "first-page"),
+    $top: $logo-top,
+    $min-width: $logo-min-width,
+    $max-width: $logo-max-width,
+    $width: $logo-relative-width,
+    $height: $logo-height
+  );
 }
diff --git a/app/assets/stylesheets/pageflow/themes/default/logo/variant/first_page.scss b/app/assets/stylesheets/pageflow/themes/default/logo/variant/background_image.scss
similarity index 63%
rename from app/assets/stylesheets/pageflow/themes/default/logo/variant/first_page.scss
rename to app/assets/stylesheets/pageflow/themes/default/logo/variant/background_image.scss
index 9e1cabda4d..23721c93a6 100644
--- a/app/assets/stylesheets/pageflow/themes/default/logo/variant/first_page.scss
+++ b/app/assets/stylesheets/pageflow/themes/default/logo/variant/background_image.scss
@@ -1,19 +1,28 @@
-@mixin logo-variant-first-page {
-  .js .page:first-child {
+@mixin logo-variant-background-image(
+  $first-page-only,
+  $top,
+  $min-width,
+  $max-width,
+  $width,
+  $height
+) {
+  $page-selector: if($first-page-only, ":first-child", "");
+
+  .js .page#{$page-selector} {
     .content_and_background .scroller > div:after {
       content: "";
       position: absolute;
+      left: 8%;
+      top: $top;
+      z-index: 200;
+      min-width: $min-width;
+      max-width: $max-width;
+      width: $width;
+      height: $height;
       background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.png");
       background-repeat: no-repeat;
-      top: 50px;
-      z-index: 200;
       background-size: contain;
       background-position: left top;
-      padding-top: 6.8%;
-      min-width: 100px;
-      max-width: 221px;
-      width: 13%;
-      left: 8%;
 
       @include mobile {
         padding-top: 1%;
diff --git a/app/assets/stylesheets/pageflow/themes/default/logo/variant/watermark.scss b/app/assets/stylesheets/pageflow/themes/default/logo/variant/watermark.scss
index d9e7437a89..5d5431ad87 100644
--- a/app/assets/stylesheets/pageflow/themes/default/logo/variant/watermark.scss
+++ b/app/assets/stylesheets/pageflow/themes/default/logo/variant/watermark.scss
@@ -1,26 +1,25 @@
-////
-/// @group logo
-////
+/// Fade in logo when scroller is near top
+///
+/// - `"first-page"`: only on first page
+///
+/// - `"all-pages"`: on all pages
+$logo-watermark-variant-fade-in-near-top: "first-page" !default;
 
-/// Width of the logo
-$logo-width: 100px !default;
-
-/// Height of the logo
-$logo-height: 50px !default;
-
-/// Height of the logo in phone layout
-$logo-phone-height: 24px !default;
-
-@mixin logo-variant-watermark {
+@mixin logo-variant-watermark(
+  $top,
+  $width,
+  $height,
+  $phone-height
+) {
   .header_logo {
     @extend %pageflow_widget_margin_top !optional;
     display: none;
 
     @include hide-text;
     position: absolute;
-    width: $logo-width;
-    height: $logo-height;
-    top: 30px;
+    width: $width;
+    height: $height;
+    top: $top;
     left: 8%;
     z-index: 1;
 
@@ -29,8 +28,8 @@ $logo-phone-height: 24px !default;
     @include transition(opacity 500ms);
 
     @include phone {
-      width: $logo-phone-height * $logo-width / $logo-height;
-      height: $logo-phone-height;
+      width: $phone-height * $width / $height;
+      height: $phone-height;
       top: 21px;
     }
 
@@ -75,7 +74,16 @@ $logo-phone-height: 24px !default;
     pointer-events: all;
   }
 
-  .header.near_top.first_page .header_logo,
+  @if $logo-watermark-variant-fade-in-near-top == "first-page" {
+    .header.near_top.first_page .header_logo {
+      opacity: 1;
+    }
+  } @else {
+    .header.near_top .header_logo {
+      opacity: 1;
+    }
+  }
+
   .header.near_top .header_logo:hover {
     opacity: 1;
   }