From a5ddf932878254a5bd9c1d4b2230f609e505264c Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 28 Dec 2016 09:35:58 +0000 Subject: [PATCH 1/5] Restrict letter previews to their folded height MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The letter previews take up too much space on the page (more than a typical email or text message). This means that users have to scroll too much. When we send the real letters they will be folded in half to fit in the envelope. So by showing the letter previews on the page cropped to half the letter’s height: - it reduces the need for scrolling - it gives an accurate preview of how the letter will be delivered This is acheived without hard-coding any heights by using a little-known quirk of CSS, namely that padding set as a percentage is calculated from the width of the element, even for top/bottom padding. This means that we can always set the ratio of the displayed letter to be A4 folded in half – the square root of 2. --- app/assets/stylesheets/components/letter.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss index 6af2a50cf..2f2f518fc 100644 --- a/app/assets/stylesheets/components/letter.scss +++ b/app/assets/stylesheets/components/letter.scss @@ -11,6 +11,8 @@ $outline-width: 5px; outline: $outline-width solid rgba($text-colour, 0.1); padding: 0; margin: $outline-width $outline-width $gutter; + height: 50%; + overflow: hidden; a { display: block; From 6f7255d842f9ac8b9bacee84b59d90fb39245a4d Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 28 Dec 2016 10:18:41 +0000 Subject: [PATCH 2/5] Draw the folded half of the letter with CSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Users might wonder why they can’t see the whole letter. We should make it obvious that it’s because the letter is folded. We can use CSS to draw the bottom half of the page behind the top half. With some transforms this makes it look like the letter is actually folded. It’s a bit skeumorphic but: - I think it achives the desired effect - the way we show emails and text messages is also mildly skeuomorphic --- app/assets/stylesheets/components/letter.scss | 57 +++++++++++++++---- 1 file changed, 46 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss index 2f2f518fc..c74574315 100644 --- a/app/assets/stylesheets/components/letter.scss +++ b/app/assets/stylesheets/components/letter.scss @@ -1,26 +1,61 @@ -$outline-width: 5px; +$iso-paper-ratio: 70.7%; .letter { font-family: Helvetica, Arial, sans-serif; - box-shadow: - 1px 1px 0 0 $panel-colour, - 2px 2px 0 0 rgba($panel-colour, 0.5), - -1px 1px 0 0 $panel-colour, - -2px 2px 0 0 rgba($panel-colour, 0.5); - outline: $outline-width solid rgba($text-colour, 0.1); padding: 0; - margin: $outline-width $outline-width $gutter; - height: 50%; - overflow: hidden; + margin: 0 0 $gutter 0; + position: relative; + + &:after { + content: ""; + display: block; + z-index: 10; + position: absolute; + top: 2px; + left: 0; + height: 0; + padding: $iso-paper-ratio 0 0 0; + width: 100%; + background: $highlight-colour; + transform: skew(-1deg, 0deg) scale(1, 0.99); + transform-origin: left bottom; + box-shadow: inset 0 0 0 2px $panel-colour; + + } a { + display: block; + overflow: hidden; + width: 100%; + height: 0; + padding: $iso-paper-ratio 0 0 0; + position: relative; + z-index: 20; + transition: all 0.1s ease-out; + + &:focus { + + outline: none; + box-shadow: 0 3px 0 0 $yellow; + + img { + box-shadow: inset 0 0 0 3px $yellow; + } + + } + } img { display: block; - max-width: 100%; + width: 100%; + background: $white; + box-shadow: inset 0 0 0 2px $panel-colour; + position: absolute; + top: 0; + left: 0; } } From 83a9d3ad42a784fba1fd9f48e2d4479e19625374 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 28 Dec 2016 11:15:14 +0000 Subject: [PATCH 3/5] Make the letter unfold slightly on hover MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This might be taking the skeumorphism too far (especially with the animation). But it’s a way of indicating that the letter will ‘unfold’ if you click it. Might revert this, but let’s see how it feels. --- app/assets/stylesheets/components/letter.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss index c74574315..33439893a 100644 --- a/app/assets/stylesheets/components/letter.scss +++ b/app/assets/stylesheets/components/letter.scss @@ -1,3 +1,5 @@ +// Easing function from: http://easings.net/#easeOutBack +$transition-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275); $iso-paper-ratio: 70.7%; .letter { @@ -21,6 +23,15 @@ $iso-paper-ratio: 70.7%; transform: skew(-1deg, 0deg) scale(1, 0.99); transform-origin: left bottom; box-shadow: inset 0 0 0 2px $panel-colour; + transition: transform 0.2s $transition-easing; + } + + &:hover { + + &:after { + transform: skew(-1.5deg, 0deg) scale(1, 0.97); + transition: transform 0.1s $transition-easing; + } } From 6271b427aa8da9e4fdff45a93be4627333071d67 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 3 Jan 2017 10:29:11 +0000 Subject: [PATCH 4/5] =?UTF-8?q?Don=E2=80=99t=20skew=20bottom=20half=20of?= =?UTF-8?q?=20letter=20in=20folded=20state?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Skewing the letter results in a bunch of slightly-off-vertical diagonal lines. This is a bit visually jarring when everything else on the page lines up vertically or horizontally. This commit makes the bottom half of the letter straight, by offsetting it instead of transforming it. The ‘fold’ now has depth, so it has to be drawn in somehow, that’s what the `:before` is doing. --- app/assets/stylesheets/components/letter.scss | 33 ++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss index 33439893a..f4fce8766 100644 --- a/app/assets/stylesheets/components/letter.scss +++ b/app/assets/stylesheets/components/letter.scss @@ -1,10 +1,9 @@ // Easing function from: http://easings.net/#easeOutBack $transition-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275); -$iso-paper-ratio: 70.7%; +$iso-paper-ratio: 70.710678118%; .letter { - font-family: Helvetica, Arial, sans-serif; padding: 0; margin: 0 0 $gutter 0; position: relative; @@ -15,22 +14,40 @@ $iso-paper-ratio: 70.7%; z-index: 10; position: absolute; top: 2px; - left: 0; + left: 5px; height: 0; padding: $iso-paper-ratio 0 0 0; width: 100%; background: $highlight-colour; - transform: skew(-1deg, 0deg) scale(1, 0.99); transform-origin: left bottom; + transform: scale(1, 0.99); box-shadow: inset 0 0 0 2px $panel-colour; - transition: transform 0.2s $transition-easing; + transition: all 0.2s $transition-easing; + } + + &:before { + content: ""; + z-index: 15; + position: absolute; + bottom: -3px; + right: -5px; + width: 5px; + height: 6px; + background: $white; + transform: rotate(45deg); + box-shadow: inset 2px 0 0 0 $panel-colour; } &:hover { &:after { - transform: skew(-1.5deg, 0deg) scale(1, 0.97); - transition: transform 0.1s $transition-easing; + transform: skew(-1.3deg, 0deg) scale(1, 0.96); + transition: all 0.1s $transition-easing; + background: mix($white, $highlight-colour); + } + + &:before { + transform: rotate(50deg); } } @@ -44,7 +61,7 @@ $iso-paper-ratio: 70.7%; padding: $iso-paper-ratio 0 0 0; position: relative; z-index: 20; - transition: all 0.1s ease-out; + box-shadow: 0 2px 0 0 $panel-colour; &:focus { From 28b18bdac816939eef87db93a09f8a27cd4b8b0b Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 3 Jan 2017 16:38:32 +0000 Subject: [PATCH 5/5] Thin the borders around the letter preview 1px borders match the keylines that we use on email template previews. --- app/assets/stylesheets/components/letter.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss index f4fce8766..43aea97b2 100644 --- a/app/assets/stylesheets/components/letter.scss +++ b/app/assets/stylesheets/components/letter.scss @@ -13,15 +13,15 @@ $iso-paper-ratio: 70.710678118%; display: block; z-index: 10; position: absolute; - top: 2px; + top: 1px; left: 5px; height: 0; padding: $iso-paper-ratio 0 0 0; width: 100%; background: $highlight-colour; transform-origin: left bottom; - transform: scale(1, 0.99); - box-shadow: inset 0 0 0 2px $panel-colour; + transform: scale(1, 0.985); + box-shadow: inset 0 0 0 1px $border-colour; transition: all 0.2s $transition-easing; } @@ -31,11 +31,11 @@ $iso-paper-ratio: 70.710678118%; position: absolute; bottom: -3px; right: -5px; - width: 5px; - height: 6px; + width: 4px; + height: 7px; background: $white; transform: rotate(45deg); - box-shadow: inset 2px 0 0 0 $panel-colour; + box-shadow: inset 1px 0 0 0 $border-colour; } &:hover { @@ -43,7 +43,7 @@ $iso-paper-ratio: 70.710678118%; &:after { transform: skew(-1.3deg, 0deg) scale(1, 0.96); transition: all 0.1s $transition-easing; - background: mix($white, $highlight-colour); + background: mix($highlight-colour, $white); } &:before { @@ -61,7 +61,7 @@ $iso-paper-ratio: 70.710678118%; padding: $iso-paper-ratio 0 0 0; position: relative; z-index: 20; - box-shadow: 0 2px 0 0 $panel-colour; + box-shadow: 0 1px 0 0 $border-colour; &:focus { @@ -80,7 +80,7 @@ $iso-paper-ratio: 70.710678118%; display: block; width: 100%; background: $white; - box-shadow: inset 0 0 0 2px $panel-colour; + box-shadow: inset 0 0 0 1px $border-colour; position: absolute; top: 0; left: 0;