darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-02 17:48:50 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
05fca0536c2245bbbab4e98ebc77ac623ce22014
notifications-admin/app/assets/stylesheets/components/letter.scss

75 lines
1.3 KiB
SCSS
Raw Normal View History

Make the letter unfold slightly on hover 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.
2016-12-28 11:15:14 +00:00
// Easing function from: http://easings.net/#easeOutBack
$transition-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
Make letter full-height and increase resolution Previously we only showed the top half of a letter template, in order to conserve space and fit multiple letter templates on one page. Now that we have only one template per page there is space to spare. So this commit changes the letter preview to show the full height of the A4 page. This also requires increasing the resolution at which the preview is rendered so that it still looks clean at the bigger size.
2017-03-10 17:08:26 +00:00
$iso-paper-ratio: 141.42135624%;
Make border around letter neater The drop shadow stolen from GOV.UK was a bit crude; this commit makes it a bit more refined. Also makes things line up a bit better.
2016-11-10 14:31:25 +00:00
Add letter component Similar to the components we have for previewing email and text messages. Style stolen from PDF thumbnail at https://www.gov.uk/government/publications/honey-bees
2016-11-08 13:08:53 +00:00
.letter {
Add endpoint for generating an image of a letter The PDF preview is all good, but it’s hard, finickeity and feels dirty to embed a PDF in a web page. It’s a more natural thing to embed an image in a web page. So this commit adds another endpoint to return an image of a letter template. It generates this image from the PDF preview, so the stack looks like: 1. `template.png` (generated in admin) 2. `template.pdf` (generated in admin) 3. HTML preview (generated by a `Renderer` in utils) 4. `Template` instance 5. serialised template from API 6. Template stored in database The library used to convert the PDF to an image is Wand[1], which binds to ImageMagick underneath. So in order to get this working locally on a Mac you will probably need to do: `brew install imagemagick ghostscript cairo pango`. To get it working on Ubuntu/EC2 is an exercise left to the reader… 1. http://docs.wand-py.org/en/0.4.4/
2016-11-28 11:01:39 +00:00
padding: 0;
Draw the folded half of the letter with CSS 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
2016-12-28 10:18:41 +00:00
margin: 0 0 $gutter 0;
position: relative;
&:after {
content: "";
display: block;
z-index: 10;
position: absolute;
Make letter full-height and increase resolution Previously we only showed the top half of a letter template, in order to conserve space and fit multiple letter templates on one page. Now that we have only one template per page there is space to spare. So this commit changes the letter preview to show the full height of the A4 page. This also requires increasing the resolution at which the preview is rendered so that it still looks clean at the bigger size.
2017-03-10 17:08:26 +00:00
top: 5px;
Don’t skew bottom half of letter in folded state 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.
2017-01-03 10:29:11 +00:00
left: 5px;
Draw the folded half of the letter with CSS 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
2016-12-28 10:18:41 +00:00
height: 0;
padding: $iso-paper-ratio 0 0 0;
width: 100%;
background: $highlight-colour;
transform-origin: left bottom;
Thin the borders around the letter preview 1px borders match the keylines that we use on email template previews.
2017-01-03 16:38:32 +00:00
box-shadow: inset 0 0 0 1px $border-colour;
Don’t skew bottom half of letter in folded state 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.
2017-01-03 10:29:11 +00:00
transition: all 0.2s $transition-easing;
}
Make the letter unfold slightly on hover 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.
2016-12-28 11:15:14 +00:00
&:hover {
&:after {
Don’t skew bottom half of letter in folded state 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.
2017-01-03 10:29:11 +00:00
transform: skew(-1.3deg, 0deg) scale(1, 0.96);
transition: all 0.1s $transition-easing;
Thin the borders around the letter preview 1px borders match the keylines that we use on email template previews.
2017-01-03 16:38:32 +00:00
background: mix($highlight-colour, $white);
Don’t skew bottom half of letter in folded state 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.
2017-01-03 10:29:11 +00:00
}
&:before {
transform: rotate(50deg);
Make the letter unfold slightly on hover 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.
2016-12-28 11:15:14 +00:00
}
Draw the folded half of the letter with CSS 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
2016-12-28 10:18:41 +00:00
}
Add endpoint for generating an image of a letter The PDF preview is all good, but it’s hard, finickeity and feels dirty to embed a PDF in a web page. It’s a more natural thing to embed an image in a web page. So this commit adds another endpoint to return an image of a letter template. It generates this image from the PDF preview, so the stack looks like: 1. `template.png` (generated in admin) 2. `template.pdf` (generated in admin) 3. HTML preview (generated by a `Renderer` in utils) 4. `Template` instance 5. serialised template from API 6. Template stored in database The library used to convert the PDF to an image is Wand[1], which binds to ImageMagick underneath. So in order to get this working locally on a Mac you will probably need to do: `brew install imagemagick ghostscript cairo pango`. To get it working on Ubuntu/EC2 is an exercise left to the reader… 1. http://docs.wand-py.org/en/0.4.4/
2016-11-28 11:01:39 +00:00
a {
Draw the folded half of the letter with CSS 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
2016-12-28 10:18:41 +00:00
Add endpoint for generating an image of a letter The PDF preview is all good, but it’s hard, finickeity and feels dirty to embed a PDF in a web page. It’s a more natural thing to embed an image in a web page. So this commit adds another endpoint to return an image of a letter template. It generates this image from the PDF preview, so the stack looks like: 1. `template.png` (generated in admin) 2. `template.pdf` (generated in admin) 3. HTML preview (generated by a `Renderer` in utils) 4. `Template` instance 5. serialised template from API 6. Template stored in database The library used to convert the PDF to an image is Wand[1], which binds to ImageMagick underneath. So in order to get this working locally on a Mac you will probably need to do: `brew install imagemagick ghostscript cairo pango`. To get it working on Ubuntu/EC2 is an exercise left to the reader… 1. http://docs.wand-py.org/en/0.4.4/
2016-11-28 11:01:39 +00:00
display: block;
Draw the folded half of the letter with CSS 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
2016-12-28 10:18:41 +00:00
overflow: hidden;
width: 100%;
height: 0;
padding: $iso-paper-ratio 0 0 0;
position: relative;
z-index: 20;
&:focus {
outline: none;
box-shadow: 0 3px 0 0 $yellow;
img {
box-shadow: inset 0 0 0 3px $yellow;
}
}
Add endpoint for generating an image of a letter The PDF preview is all good, but it’s hard, finickeity and feels dirty to embed a PDF in a web page. It’s a more natural thing to embed an image in a web page. So this commit adds another endpoint to return an image of a letter template. It generates this image from the PDF preview, so the stack looks like: 1. `template.png` (generated in admin) 2. `template.pdf` (generated in admin) 3. HTML preview (generated by a `Renderer` in utils) 4. `Template` instance 5. serialised template from API 6. Template stored in database The library used to convert the PDF to an image is Wand[1], which binds to ImageMagick underneath. So in order to get this working locally on a Mac you will probably need to do: `brew install imagemagick ghostscript cairo pango`. To get it working on Ubuntu/EC2 is an exercise left to the reader… 1. http://docs.wand-py.org/en/0.4.4/
2016-11-28 11:01:39 +00:00
}
img {
display: block;
Draw the folded half of the letter with CSS 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
2016-12-28 10:18:41 +00:00
width: 100%;
background: $white;
Thin the borders around the letter preview 1px borders match the keylines that we use on email template previews.
2017-01-03 16:38:32 +00:00
box-shadow: inset 0 0 0 1px $border-colour;
Draw the folded half of the letter with CSS 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
2016-12-28 10:18:41 +00:00
position: absolute;
top: 0;
left: 0;
Add endpoint for generating an image of a letter The PDF preview is all good, but it’s hard, finickeity and feels dirty to embed a PDF in a web page. It’s a more natural thing to embed an image in a web page. So this commit adds another endpoint to return an image of a letter template. It generates this image from the PDF preview, so the stack looks like: 1. `template.png` (generated in admin) 2. `template.pdf` (generated in admin) 3. HTML preview (generated by a `Renderer` in utils) 4. `Template` instance 5. serialised template from API 6. Template stored in database The library used to convert the PDF to an image is Wand[1], which binds to ImageMagick underneath. So in order to get this working locally on a Mac you will probably need to do: `brew install imagemagick ghostscript cairo pango`. To get it working on Ubuntu/EC2 is an exercise left to the reader… 1. http://docs.wand-py.org/en/0.4.4/
2016-11-28 11:01:39 +00:00
}
Add letter component Similar to the components we have for previewing email and text messages. Style stolen from PDF thumbnail at https://www.gov.uk/government/publications/honey-bees
2016-11-08 13:08:53 +00:00
}
Reference in New Issue Copy Permalink