From d2a39c22629646ee1f607658809ce428a57c40fd Mon Sep 17 00:00:00 2001 From: Ole Vik Date: Fri, 16 Jun 2017 14:28:11 +0200 Subject: [PATCH 1/5] Skeleton-link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c1efa07..e1723e8 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ The **Fullpage** Plugin is for [Grav CMS](http://github.com/getgrav/grav). The [ At its core the plugin facilitates efficient handling of content for use with the library. You can utilize fullPage.js however you want through custom initialization, and still leverage the plugin's content-handling. -A [demo is available](https://olevik.me/plugins/fullpage/book/), as are docs presented [by the plugin](https://olevik.me/plugins/fullpage/). The [demo-content](https://github.com/OleVik/grav-plugin-fullpage/tree/demo-content)-branch holds copies of the pages used in these two examples. +A [demo is available](https://olevik.me/plugins/fullpage/book/), as are docs presented [by the plugin](https://olevik.me/plugins/fullpage/). The [demo-content](https://github.com/OleVik/grav-plugin-fullpage/tree/demo-content)-branch holds copies of the pages used in these two examples. If you want to get started quickly, @PaulHibbits has a ready-to-go [skeleton](https://github.com/paulhibbitts/fullpage-site). ## Installation From b4c29cec3fd4094895f9c7cec57a9df24b0c1a66 Mon Sep 17 00:00:00 2001 From: Ole Vik Date: Fri, 16 Jun 2017 14:29:34 +0200 Subject: [PATCH 2/5] Typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e1723e8..39936b6 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ The **Fullpage** Plugin is for [Grav CMS](http://github.com/getgrav/grav). The [ At its core the plugin facilitates efficient handling of content for use with the library. You can utilize fullPage.js however you want through custom initialization, and still leverage the plugin's content-handling. -A [demo is available](https://olevik.me/plugins/fullpage/book/), as are docs presented [by the plugin](https://olevik.me/plugins/fullpage/). The [demo-content](https://github.com/OleVik/grav-plugin-fullpage/tree/demo-content)-branch holds copies of the pages used in these two examples. If you want to get started quickly, @PaulHibbits has a ready-to-go [skeleton](https://github.com/paulhibbitts/fullpage-site). +A [demo is available](https://olevik.me/plugins/fullpage/book/), as are docs presented [by the plugin](https://olevik.me/plugins/fullpage/). The [demo-content](https://github.com/OleVik/grav-plugin-fullpage/tree/demo-content)-branch holds copies of the pages used in these two examples. If you want to get started quickly, @PaulHibbitts has a ready-to-go [skeleton](https://github.com/paulhibbitts/fullpage-site). ## Installation From 4eccd0eb587fbeaa808fc31256aa1c3b4ccebfe0 Mon Sep 17 00:00:00 2001 From: Ole Vik Date: Fri, 16 Jun 2017 16:20:17 +0200 Subject: [PATCH 3/5] Improve transition, default color-scheme --- blueprints.yaml | 2 +- css/transition.css | 182 +++++++++++++++++++++++++++++++++++ fullpage.php | 11 +++ fullpage.yaml | 10 +- templates/fullpage.html.twig | 34 +++---- 5 files changed, 215 insertions(+), 24 deletions(-) create mode 100644 css/transition.css diff --git a/blueprints.yaml b/blueprints.yaml index eef508d..f329353 100644 --- a/blueprints.yaml +++ b/blueprints.yaml @@ -117,7 +117,7 @@ form: styles: type: section title: Default Styles - text: "Array of CSS properties and values. WORK IN PROGRESS, needs custom implementation of array field-type." + text: "Array of CSS properties and values. INCOMPLETE: Will use multilevel-field. underline: true options: type: section diff --git a/css/transition.css b/css/transition.css new file mode 100644 index 0000000..593507d --- /dev/null +++ b/css/transition.css @@ -0,0 +1,182 @@ +/* Transition */ +#page_transition { + position: fixed; + background: white; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1; + visibility: visible; + transition: opacity .5s, visibility .5s; + overflow: hidden; + z-index: 1000; +} +#page_transition .la-line-scale { + margin: 25% auto; +} + +/*! + * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) + * Copyright 2015 Daniel Cardoso <@DanielCardoso> + * Licensed under MIT + */ +.la-line-scale, +.la-line-scale > div { + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.la-line-scale { + display: block; + font-size: 0; + color: #fff; +} +.la-line-scale.la-dark { + color: #333; +} +.la-line-scale > div { + display: inline-block; + float: none; + background-color: currentColor; + border: 0 solid currentColor; +} +.la-line-scale { + width: 40px; + height: 32px; +} +.la-line-scale > div { + width: 4px; + height: 32px; + margin: 2px; + margin-top: 0; + margin-bottom: 0; + border-radius: 0; + -webkit-animation: line-scale 1.2s infinite ease; + -moz-animation: line-scale 1.2s infinite ease; + -o-animation: line-scale 1.2s infinite ease; + animation: line-scale 1.2s infinite ease; +} +.la-line-scale > div:nth-child(1) { + -webkit-animation-delay: -1.2s; + -moz-animation-delay: -1.2s; + -o-animation-delay: -1.2s; + animation-delay: -1.2s; +} +.la-line-scale > div:nth-child(2) { + -webkit-animation-delay: -1.1s; + -moz-animation-delay: -1.1s; + -o-animation-delay: -1.1s; + animation-delay: -1.1s; +} +.la-line-scale > div:nth-child(3) { + -webkit-animation-delay: -1s; + -moz-animation-delay: -1s; + -o-animation-delay: -1s; + animation-delay: -1s; +} +.la-line-scale > div:nth-child(4) { + -webkit-animation-delay: -.9s; + -moz-animation-delay: -.9s; + -o-animation-delay: -.9s; + animation-delay: -.9s; +} +.la-line-scale > div:nth-child(5) { + -webkit-animation-delay: -.8s; + -moz-animation-delay: -.8s; + -o-animation-delay: -.8s; + animation-delay: -.8s; +} +.la-line-scale.la-sm { + width: 20px; + height: 16px; +} +.la-line-scale.la-sm > div { + width: 2px; + height: 16px; + margin: 1px; + margin-top: 0; + margin-bottom: 0; +} +.la-line-scale.la-2x { + width: 80px; + height: 64px; +} +.la-line-scale.la-2x > div { + width: 8px; + height: 64px; + margin: 4px; + margin-top: 0; + margin-bottom: 0; +} +.la-line-scale.la-3x { + width: 120px; + height: 96px; +} +.la-line-scale.la-3x > div { + width: 12px; + height: 96px; + margin: 6px; + margin-top: 0; + margin-bottom: 0; +} +/* + * Animation + */ +@-webkit-keyframes line-scale { + 0%, + 40%, + 100% { + -webkit-transform: scaleY(.4); + transform: scaleY(.4); + } + 20% { + -webkit-transform: scaleY(1); + transform: scaleY(1); + } +} +@-moz-keyframes line-scale { + 0%, + 40%, + 100% { + -webkit-transform: scaleY(.4); + -moz-transform: scaleY(.4); + transform: scaleY(.4); + } + 20% { + -webkit-transform: scaleY(1); + -moz-transform: scaleY(1); + transform: scaleY(1); + } +} +@-o-keyframes line-scale { + 0%, + 40%, + 100% { + -webkit-transform: scaleY(.4); + -o-transform: scaleY(.4); + transform: scaleY(.4); + } + 20% { + -webkit-transform: scaleY(1); + -o-transform: scaleY(1); + transform: scaleY(1); + } +} +@keyframes line-scale { + 0%, + 40%, + 100% { + -webkit-transform: scaleY(.4); + -moz-transform: scaleY(.4); + -o-transform: scaleY(.4); + transform: scaleY(.4); + } + 20% { + -webkit-transform: scaleY(1); + -moz-transform: scaleY(1); + -o-transform: scaleY(1); + transform: scaleY(1); + } +} \ No newline at end of file diff --git a/fullpage.php b/fullpage.php index 7f691a6..c7f5efc 100644 --- a/fullpage.php +++ b/fullpage.php @@ -85,6 +85,17 @@ public function pageIteration() $this->grav['twig']->twig_vars['fullpage_menu'] = $menu; if ($config['transition']) { $this->grav['twig']->twig_vars['fullpage_transition'] = true; + $this->grav['assets']->addCss('plugin://fullpage/css/transition.css', ['loading' => 'inline', 'group' => 'critical']); + if (isset($config['styles'])) { + $lines = array(); + foreach ($config['styles'] as $style) { + if (isset($style['background'])) { + $lines[] = $style['background']; + } + } + $lines = array_slice($lines, 0, 5); + $this->grav['twig']->twig_vars['fullpage_lines'] = $lines; + } } if ($config['builtin_js']) { diff --git a/fullpage.yaml b/fullpage.yaml index ba81e30..aa39cb5 100644 --- a/fullpage.yaml +++ b/fullpage.yaml @@ -13,11 +13,11 @@ inject_footer: "" shortcodes: true transition: true styles: - - background: "#93c0d3" - - background: "#6f977d" - - background: "#598495" - - background: "#5e6168" - - background: "#213533" + - background: "#0B110D" + - background: "#2C4D56" + - background: "#C3AA72" + - background: "#DC7612" + - background: "#BD3200" options: navigation: false navigationPosition: 'right' diff --git a/templates/fullpage.html.twig b/templates/fullpage.html.twig index 9394123..f097b46 100644 --- a/templates/fullpage.html.twig +++ b/templates/fullpage.html.twig @@ -11,30 +11,28 @@ {% endblock meta %} - {% if fullpage_transition %} - - {% endif %} + {{ assets.css('critical')|raw }} {{ assets.css()|raw }} {% endblock head %} {% if fullpage_transition %} -
+
+
+ {% if fullpage_lines %} + {% for line in fullpage_lines %} +
+ {% endfor %} + {% else %} +
+
+
+
+
+ {% endif %} +
+
{% endif %} {% block content %}
From c6a1d4b89da00ecb605aef080585d889cb9ddc6e Mon Sep 17 00:00:00 2001 From: Ole Vik Date: Fri, 16 Jun 2017 16:22:20 +0200 Subject: [PATCH 4/5] Blueprints-typo --- blueprints.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blueprints.yaml b/blueprints.yaml index f329353..88b6e6c 100644 --- a/blueprints.yaml +++ b/blueprints.yaml @@ -117,7 +117,7 @@ form: styles: type: section title: Default Styles - text: "Array of CSS properties and values. INCOMPLETE: Will use multilevel-field. + text: "Array of CSS properties and values. INCOMPLETE: Will use multilevel-field." underline: true options: type: section From 4a06013dc78a706579ffff7a062b696e855b944b Mon Sep 17 00:00:00 2001 From: Ole Vik Date: Fri, 16 Jun 2017 16:37:16 +0200 Subject: [PATCH 5/5] Simplify transition --- fullpage.php | 10 ---------- templates/fullpage.html.twig | 16 +++++----------- 2 files changed, 5 insertions(+), 21 deletions(-) diff --git a/fullpage.php b/fullpage.php index c7f5efc..194c111 100644 --- a/fullpage.php +++ b/fullpage.php @@ -86,16 +86,6 @@ public function pageIteration() if ($config['transition']) { $this->grav['twig']->twig_vars['fullpage_transition'] = true; $this->grav['assets']->addCss('plugin://fullpage/css/transition.css', ['loading' => 'inline', 'group' => 'critical']); - if (isset($config['styles'])) { - $lines = array(); - foreach ($config['styles'] as $style) { - if (isset($style['background'])) { - $lines[] = $style['background']; - } - } - $lines = array_slice($lines, 0, 5); - $this->grav['twig']->twig_vars['fullpage_lines'] = $lines; - } } if ($config['builtin_js']) { diff --git a/templates/fullpage.html.twig b/templates/fullpage.html.twig index f097b46..0c63021 100644 --- a/templates/fullpage.html.twig +++ b/templates/fullpage.html.twig @@ -20,17 +20,11 @@ {% if fullpage_transition %}
- {% if fullpage_lines %} - {% for line in fullpage_lines %} -
- {% endfor %} - {% else %} -
-
-
-
-
- {% endif %} +
+
+
+
+
{% endif %}