Merge branch 'master' into oil-124-public-build-info

# Conflicts:
#	test/specs/config.spec.js

docs/src/docs/03-configuration.adoc

@@ -60,7 +60,7 @@ This is a full list of configurable options.
 | Config Parameter | Description | Default Setting
 | locale | The locale version that should be used. The locale defines the standard labels for all legal texts and buttons. <<supported-languages,Supported language packs.>> | deDE_01
 | publicPath | The server path from which all chunks and ressources will be loaded. You should upload all released files there and configure it. | //oil.axelspringer.com/release/{version}/`
-| theme | The theme for the layer. By default there are two themes, 'dark' and 'light', with 'light' beeing the default. The theme currently works only as an additional css class. If you want to change the style or theme, please look into the styling guide in the development section. | 'light'
+| theme | The theme for the layer. By default there are two themes and size modifier theme, 'dark', 'light' and 'small dark', 'small light' , with 'light' beeing the default. The theme currently works only as an additional css class. If you want to change the style or theme, please look into the styling guide in the development section. | 'light'
 | poi_activate_poi | Activates or disactivates Power Opt-In. Rememeber that you also have to setup the hub.js part if you do so, or you will endup with a non-working button. | false
 | poi_hub_origin | The origin of the hub.js installation, if any. | //oil.axelspringer.com
 | poi_hub_path | The path to the hub.html installation on the origin, if any. | /hub.html

package.json

@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "compression": "1.7.2",
-    "consent-string": "1.2.1",
+    "consent-string": "1.2.4",
     "express": "4.16.2",
     "fresh": "0.5.2",
     "js-cookie": "2.1.4",

src/demos/small-design.html

@@ -10,20 +10,11 @@
       {
         "advanced_settings": false,
         "poi_group_name": "axelSpringerSe_01",
-  "locale": {
-    "localeId": "deDE_02",
-    "version": 1,
-    "texts": {
-      "label_intro": "Auf dieser Webseite werden Cookies gesetzt. Diese helfen uns bei der Analyse der Webseite, Optimierung redaktioneller Services, Durchführung personalisierter Vermarktung und ermöglichen das Teilen von Artikeln über soziale Netzwerke. Weiterführende Infos und Widerspruchsmöglichkeiten finden Sie in unserer Datenschutzerklärung.",
-      "label_button_yes": "OK"
-    }
-  },
-        "theme": "small dark",
-        "timeout": 600
+        "label_intro": "Auf dieser Webseite werden Cookies gesetzt. Diese helfen uns bei der Analyse der Webseite, Optimierung redaktioneller Services, Durchführung personalisierter Vermarktung und ermöglichen das Teilen von Artikeln über soziale Netzwerke. Weiterführende Infos und Widerspruchsmöglichkeiten finden Sie in <a href=\"#\" class=\"as-oil__intro-txt--link\">unserer Datenschutzerklärung</a>.",
+        "label_button_yes": "OK",
+        "theme": "small light",
+        "timeout": -1
       }
-
-
-
   </script>
   <!-- end::oil-config[] -->
   <style>

src/index.html

@@ -315,8 +315,8 @@
   <div class="logo"></div>
 
   <div class="claim-wrapper">
-    <h1 class="logo-claim">Prepares you for ePrivacy</h1>
-    <h2 class="logo-claim-2">Optimized. Tested. Compatible. Beta. Ready to use.</h2>
+    <h1 class="logo-claim">Prepares you for GDPR and ePrivacy</h1>
+    <h2 class="logo-claim-2">Optimized. Tested. Compatible. Beta.</h2>
   </div>
 
   <div class="jumbotron hero">
@@ -361,9 +361,9 @@ <h2 class="beta-note__claim">Caution: This is only a beta version. The full rele
 <div class="full-row">
   <div class="claim-wrapper">
     <h1 class="logo-claim">Supports your preparation for GDPR and ePrivacy compliance</h1>
-    <h1 class="logo-claim-2">The "Opt-In Layer" is a JavaScript library for displaying the user consent dialog. It
+    <h1 class="logo-claim-2">The Opt-In and Transparency Layer (OIL) is a JavaScript library for displaying the user consent dialog. It
       offers
-      a huge variety of options and helps you to manage your tags.<br/> Best served with <a href="https://tealiumiq.com"
+      a substantial variety of options and helps you to manage your tags.<br/> Best served with <a href="https://tealiumiq.com"
                                                                                             target="_blank">Tealium</a>!
     </h1>
   </div>
@@ -378,13 +378,13 @@ <h1>
         <span class="text-muted">No worries.</span>
       </h1>
       <p class="lead">
-        How does the consent given by the end user get forwarded to different vendors? We help you with our battle proven and high
+        How does consent, provided by the end user, get forwarded to different vendors? We aim to help you by offering you full access to our userfriendly and high
         quality solution. </p>
       <p class="lead">
-        Oil.js brings you awesome events for every interaction, a fully featured JavaScript API and support for the
-        <a href="http://advertisingconsent.eu/" target="_blank">IAB standard</a>. We not only support the <a
+        OIL.js generates detailed events for every interaction, a fully featured JavaScript API and support for the
+        <a href="http://advertisingconsent.eu/" target="_blank">IAB standard</a>. Besides supporting the <a
         href="https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework" target="_blank">IAB
-        specification</a>, we helped to shape it.</p>
+        specification</a>, we encourage its adoption and advise you to get involved with its development.</p>
     </div>
     <div class="col-sm-5">
       <img class="img-responsive pull-right animated wow fadeInRight dropshadow"
@@ -429,13 +429,12 @@ <h1 class="logo-claim">Some of our features</h1>
   <div class="row">
     <div class="col-sm-7 col-sm-push-5 animated wow slideInRight">
       <h1>
-        Oil, no vinegar. <span class="text-muted">See for yourself.</span>
+        OIL, no vinegar. <span class="text-muted">See for yourself.</span>
       </h1>
       <p class="lead">
-        Our library was AB-tested with hundreds of thousands of users.
-        We used multiple websites from our Axel Springer family to check that everything works,
-        as well as create the optimal guidelines for you. We are your experts for Opt-In layers! </p>
-      <!--<a href="examples/" target="_blank">AB-Test examples</a>-->
+        Our library was AB-tested with large amounts of users thus improving the solutions's quality and its documentation.
+        We value your technical feedback and are looking forward to sparing ideas with you. <a href="mailto:oil-support@asideas.de">Contact us</a> and let's improve OIL together!
+         </p>
     </div>
     <div class="col-sm-5 col-sm-pull-7">
       <img class="img-responsive animated wow slideInLeft dropshadow" src="assets/images/landing_page/oil.jpeg"

src/styles/modal.scss

@@ -120,7 +120,7 @@
   }
 
   .small & {
-    padding: .5em 0 0 0;
+    padding: .5em !important;
   }
 
   @include media('<=phone') {
@@ -162,10 +162,13 @@
 
   .small & {
     margin: 0 0 0 1em;
+    @include media('<=phone') {
+      margin: .5em 0;
+    }
   }
 
   @include media('<=phone') {
-    margin: 0.5em 0;
+    margin: .5em 0;
     min-width: 100%;
     max-width: 100%;
 
@@ -372,6 +375,10 @@
     @include stack-items-remove-horizontal-margins;
     width: 100%;
     margin: 1em 0;
+
+    .small & {
+      margin: 0;
+    }
   }
 }
 

test/specs/config.spec.js

@@ -1,13 +1,21 @@
-import {getCookieExpireInDays, getHubLocation, getHubOrigin, getHubPath, getLocaleVariantName, resetConfiguration} from '../../src/scripts/core/core_config.js';
-import {getSoiCookie} from '../../src/scripts/core/core_cookies.js';
-import {getLabel} from '../../src/scripts/userview/userview_config.js';
-import {OIL_LABELS} from '../../src/scripts/userview/userview_constants.js';
-import {loadFixture} from '../utils.js';
+import {
+  getCookieExpireInDays,
+  getHubLocation,
+  getHubOrigin,
+  getHubPath,
+  getLocaleVariantName,
+  resetConfiguration
+} from '../../src/scripts/core/core_config.js';
+import { getSoiCookie } from '../../src/scripts/core/core_cookies.js';
+import { getLabel } from '../../src/scripts/userview/userview_config.js';
+import { OIL_LABELS } from '../../src/scripts/userview/userview_constants.js';
+import { loadFixture, deleteAllCookies } from '../utils.js';
 
 describe('configuration', () => {
 
   beforeEach(() => {
     resetConfiguration();
+    deleteAllCookies();
   });
 
   it('should work with empty config', () => {

test/specs/userview/userview_cpc-template.spec.js

@@ -9,13 +9,13 @@ import {
   removeOilLayerAndConfig,
   deleteAllCookies,
   initCustomYasmineMatchers,
-  waitsForAndRuns
+  waitsForAndRuns,
+  waitForElementToDisplay
 } from '../../utils.js';
 import * as OilList from '../../../src/scripts/poi-list/oil.list';
 import * as CoreConfig from '../../../src/scripts/core/core_config.js';
 import { hasRunningTimeout } from '../../../src/scripts/userview/userview_modal';
 import { setSoiOptIn } from '../../../src/scripts/core/core_cookies';
-import { waitForElementToDisplay } from '../../utils';
 
 describe('the userview modal aka the oil layer wrapper with CPC', () => {