From 45ef27589c229554705b194709f041a6d46bfc99 Mon Sep 17 00:00:00 2001 From: Sean Johnson Date: Tue, 26 Jun 2018 17:48:55 -0700 Subject: [PATCH] Added fillable ability. --- src/styl/abilities/ability-settings.styl | 1 + src/styl/abilities/fillable.styl | 19 +++++++++ src/styl/card/card-settings.styl | 3 +- src/styl/card/card.styl | 20 +++++---- src/styl/main.styl | 1 + test/ts/index.ts | 45 ++++++++++++++++++++ test/views/abilities.hbs | 22 ++++++++-- test/views/index.hbs | 54 ++++++++++++------------ 8 files changed, 127 insertions(+), 38 deletions(-) create mode 100644 src/styl/abilities/fillable.styl diff --git a/src/styl/abilities/ability-settings.styl b/src/styl/abilities/ability-settings.styl index bc86fba..ffde88b 100644 --- a/src/styl/abilities/ability-settings.styl +++ b/src/styl/abilities/ability-settings.styl @@ -1 +1,2 @@ $closeable-animation-time ?= $default-animation-time; +$fillable-animation-time ?= $default-animation-time; diff --git a/src/styl/abilities/fillable.styl b/src/styl/abilities/fillable.styl new file mode 100644 index 0000000..318bbaa --- /dev/null +++ b/src/styl/abilities/fillable.styl @@ -0,0 +1,19 @@ +@require "ability-settings.styl"; + +fillable() { + //padding: 0; + .fillable-content { + transition: top $fillable-animation-time, right $fillable-animation-time, bottom $fillable-animation-time, left $fillable-animation-time; + z-index: 100; + } + + &[data-filled="true"] { + .fillable-content { + position: fixed; + } + } +} + +.fillable { + fillable(); +} \ No newline at end of file diff --git a/src/styl/card/card-settings.styl b/src/styl/card/card-settings.styl index 1fac1fd..574de88 100644 --- a/src/styl/card/card-settings.styl +++ b/src/styl/card/card-settings.styl @@ -1,9 +1,10 @@ @require "../settings.styl"; $card-padding ?= $default-padding; -$card-margin ?= $default-margin-layout; +$card-margin ?= 0;//$default-margin-layout; $card-border-width ?= $default-border-width; $card-border-color ?= $default-border-color; $card-border-radius ?= $default-border-radius; +$card-background-color ?= $default-background-color; $card-header-background-color ?= $default-header-color; $card-header-color ?= $default-header-color-alt; $card-header-font-weight ?= bold; diff --git a/src/styl/card/card.styl b/src/styl/card/card.styl index 0663e90..ae0a338 100644 --- a/src/styl/card/card.styl +++ b/src/styl/card/card.styl @@ -18,20 +18,24 @@ $card-header-margin = -($card-border-width + $card-padding); margin: $card-margin 0; border: $card-border-width solid $card-border-color; - border-radius: $card-border-radius; + background-color: $card-background-color; box-shadow: $card-box-shadow; transition: height $card-animation-time; - & > *:first-child { - border-top-left-radius: $card-border-radius; - border-top-right-radius: $card-border-radius; - } + &:not(.card-square) { + border-radius: $card-border-radius; + + & > *:first-child { + border-top-left-radius: $card-border-radius; + border-top-right-radius: $card-border-radius; + } - & > *:last-child { - border-bottom-left-radius: $card-border-radius; - border-bottom-right-radius: $card-border-radius; + & > *:last-child { + border-bottom-left-radius: $card-border-radius; + border-bottom-right-radius: $card-border-radius; + } } & > header, diff --git a/src/styl/main.styl b/src/styl/main.styl index 3ab4827..a91a821 100644 --- a/src/styl/main.styl +++ b/src/styl/main.styl @@ -10,6 +10,7 @@ @require "core/mixins.styl"; @require "core/align.styl"; @require "abilities/closeable.styl"; +@require "abilities/fillable.styl"; @require "animation/animation.styl"; @require "animation/transition.styl"; @require "badge/badge.styl"; diff --git a/test/ts/index.ts b/test/ts/index.ts index 19c0241..a7b495f 100644 --- a/test/ts/index.ts +++ b/test/ts/index.ts @@ -278,4 +278,49 @@ $(function () { }, 220) } }); + + var filled = false; + var fillableTimeout; + $('#clickFillableToggle').click(function (event) { + window.clearTimeout(fillableTimeout); + filled = !filled; + var fillable = $('#fillable')[0] as HTMLDivElement; + var fillableContent = fillable.children[0] as HTMLDivElement; + var card = fillableContent.children[0] as HTMLDivElement; + var button = $(this); + //fillable.setAttribute('data-running', 'true'); + if (!filled) { + let rect = fillable.getBoundingClientRect(); + fillableContent.style.top = rect.top + 'px'; + fillableContent.style.bottom = window.innerHeight - rect.top - rect.height + 'px'; + fillableContent.style.left = rect.left + 'px'; + fillableContent.style.right = document.body.scrollWidth - rect.left - rect.width + 'px'; + window.setTimeout(function () { + fillableContent.style.top = null; + fillableContent.style.bottom = null; + fillableContent.style.left = null; + fillableContent.style.right = null; + fillable.style.height = null; + fillable.style.width = null; + fillable.setAttribute('data-filled', 'false'); + card.classList.remove('card-square'); + }, 220); + } else { + let rect = fillable.getBoundingClientRect(); + fillable.style.height = rect.height + 'px'; + fillable.style.width = rect.width + 'px'; + fillableContent.style.top = rect.top + 'px'; + fillableContent.style.bottom = window.innerHeight - rect.top - rect.height + 'px'; + fillableContent.style.left = rect.left + 'px'; + fillableContent.style.right = document.body.scrollWidth - rect.left - rect.width + 'px'; + fillable.setAttribute('data-filled', 'true'); + card.classList.add('card-square'); + window.setTimeout(function () { + fillableContent.style.top = 0 + 'px'; + fillableContent.style.bottom = 0 + 'px'; + fillableContent.style.left = 0 + 'px'; + fillableContent.style.right = 0 + 'px'; + }, 20); + } + }); }); diff --git a/test/views/abilities.hbs b/test/views/abilities.hbs index fbc7cea..47833de 100644 --- a/test/views/abilities.hbs +++ b/test/views/abilities.hbs @@ -4,9 +4,25 @@

Closeable

- Multiple
- Lines of
- Content + Multiple +
Lines of +
Content +
+ +

Fillable

+
+
+
+
+ Multiple +
Lines of +
Content +
+ +
+
\ No newline at end of file diff --git a/test/views/index.hbs b/test/views/index.hbs index 8391da0..8564c33 100644 --- a/test/views/index.hbs +++ b/test/views/index.hbs @@ -7,32 +7,34 @@ display: block; } -
- {{#> menu-bar-top}}{{/menu-bar-top}} -
- {{#> button}}{{/button}} - {{#> input}}{{/input}} - {{#> form}}{{/form}} -
-
- {{#> data}}{{/data}} -
-
-

Widgets

- {{#> information}}{{/information}} - {{#> containers}}{{/containers}} - {{#> card}}{{/card}} - {{#> widgets}}{{/widgets}} -
- -
- {{#> animation}}{{/animation}} -
-
- {{#> grid}}{{/grid}} +
+
+ {{#> menu-bar-top}}{{/menu-bar-top}} +
+ {{#> button}}{{/button}} + {{#> input}}{{/input}} + {{#> form}}{{/form}} +
+
+ {{#> data}}{{/data}} +
+
+

Widgets

+ {{#> information}}{{/information}} + {{#> containers}}{{/containers}} + {{#> card}}{{/card}} + {{#> widgets}}{{/widgets}} +
+ +
+ {{#> animation}}{{/animation}} +
+
+ {{#> grid}}{{/grid}} +
\ No newline at end of file