Skip to content

Commit

Permalink
Responsively crop copy, restore onclick via sliding drop-down animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@2kool2
2kool2 committed Jan 22, 2017
0 parents commit d40b331
Show file tree
Hide file tree
Showing 6 changed files with 537 additions and 0 deletions.
121 changes: 121 additions & 0 deletions css/styles.css
@@ -0,0 +1,121 @@

/* Generic styles */
body {
font-family: sans-serif;
line-height: 1.5;
color: #fff;
background-color: #3a3a3a;
max-width: 40rem;
}
figure {margin: 1rem 0}
pre, code {display:block;margin:0}
pre {overflow-x:scroll;resize:horizontal;min-width:100%;background-color:#333}
pre > code {text-shadow:0 1px #000;word-wrap:normal;padding-left:.75rem}
::selection {background-color:#000}
::-moz-selection {background-color:#000}
h1, h2, h3 {font-weight: 100; line-height:1.25}
h1 {font-size:1.75rem}
h2 {font-size:1.5rem;margin-top:2em}
a,a:visited {color:#fff}

/* helper class */
* {
box-sizing: border-box;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}


/* Main styles */

.CCR {
/* Animated via JS embedding inline max-height values */
/* Note: 1ms shorter than SVG rotation duration */
overflow: hidden;
transition: max-height .6s ease-out;
}

.CCR_txt {
/* Optional, adjust to meet individual project */
color: #fff;
background-color: #000;
padding: .75rem 1rem;
}
.CCR_txt[role="button"] {
cursor: pointer;
}

.CCR_txt * {
/* Required, polyfill if unsupported */
/* Note: Prevents embedded links from working */
pointer-events: none;
}


/* Icon styles */

.CCR_icon {
/* SVG container (required) */
/* Fixes Safari's focus/hover state box-shadow */

/* Override colours here if required: */
/* color: #fff; */
background-color: #3a3a3a;

float: right;
margin: 0 0 .75rem .75rem;

/* Today we look through the round window */
border-radius: 100%;
overflow: hidden;
display: block;
width: 1.5em;
height: 1.5em;
-webkit-transition: box-shadow .3s ease-out;
transition: box-shadow .3s ease-out;
}
.CCR_svg {
background-color: transparent;
color: currentColor;
border: .125em solid currentColor;
border: 2px solid #3a3a3a;
border-radius: 100%;
display: block;
width: 100%;
height: 100%;
stroke-width: 4;
stroke-linecap: square;
stroke: currentColor;

/* Note: 1ms longer than SVG rotation duration */
-webkit-transition: transform .7s ease-out;
transition: transform .7s ease-out;
}


/* Icon animation */

.CCR-expanded .CCR_svg {
/* 360deg provides a slower rotation */
transform: rotateZ(180deg);
}
.CCR_use-plus {
/* Note: same as SVG rotation duration */
-webkit-transition: opacity .7s ease-out;
transition: opacity .7s ease-out;
}
.CCR-expanded .CCR_use-plus {
opacity: 0;
}

/* Acts as focus state indicator for the control */
/* A requirement to meet WCAG 2 */
.CCR_txt:hover > .CCR_icon,
.CCR_txt:focus > .CCR_icon {
box-shadow: 0 0 0 4px #99BAD9;
}
100 changes: 100 additions & 0 deletions index.html
@@ -0,0 +1,100 @@
<head>
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Crop copy, restore on-click</title>

<link rel=stylesheet href="css/styles.css">
</head>
<body>

<svg style=display:none>
<defs>
<!-- combine to create plus symbol -->
<symbol viewBox="0 0 38 38" id="icon-vert">
<path d="M19 10.5l0 17"></path>
</symbol>
<symbol viewBox="0 0 38 38" id="icon-hori">
<path d="M10.5 19l17 0"></path>
</symbol>
</defs>
</svg>


<h1>Responsively crop copy, restore onclick via sliding drop-down animation</h1>

<p>
Responsively crop content copy down to a user-defined number of lines in an accessible manner.<br>
Click to fully restore content via a sliding drop-down animation.</p>
<p>
As used on <a href="http://www.tesco.com/food-love-stories/">Tesco Food Love Stories</a>.
</p>


<section>

<h2>Examples</h2>

<h3>Single line:</h3>

<div class=CCR>
<div class=CCR_txt data-cropCopyRestore>
If you’ve seen our recent TV ad, you’ll be in on our Food Love Story about ‘David’s’ shameful secret: when he met his wife, he fibbed about sharing her love of spicy food. 15 years later, he hasn’t come clean, but he’s still making his wife her favourite curry – with a sneaky dollop of cooling yogurt for him.
</div>
</div>

<h3>Two lines:</h3>

<div class=CCR>
<div class=CCR_txt data-cropCopyRestore=2>
Sometimes it’s the undemandingly easy, everyday recipes that deliver the most joy. For ‘Iain’ and his dad, from our Food Love Story, it’s croque monsieur. They first had it on a joint trip to France and, since then, it’s become their favourite weekend lunch. ‘Iain’s’ made a few changes to it along the way (bonjour, wafer-thin roast turkey) – but for him and his dad, it’s most definitely ‘proper’.
</div>
</div>

</section>


<h2>Usage</h2>

<p>Include a link to the styles:</p>

<figure>
<figcaption class=visually-hidden>Language HTML</figcaption>
<pre><code contenteditable spellcheck=false>
&lt;link rel="stylesheet" href="css/styles.css"&gt;
</code></pre>
</figure>

<p>Add content block(s) and data attribute.<br>The attribute value is equal to the number of lines to display.</p>

<figure>
<figcaption class=visually-hidden>Language HTML</figcaption>
<pre><code contenteditable spellcheck=false>
&lt;div class="CCR"&gt;
&lt;div class="CCR_txt"
data-cropCopyRestore="2"&gt;
Content copy&hellip;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</figure>


<p>Include a link to the script:</p>

<figure>
<figcaption class=visually-hidden>Language HTML</figcaption>
<pre><code contenteditable spellcheck=false>
&lt;script src="js/cropCopyRestore.2.0.min.js"&gt;&lt;/script&gt;
</code></pre>
</figure>


<p>CodePen demo: <a href="https://codepen.io/2kool2/pen/PWmzMa">Responsively crop copy, restore onclick via sliding drop-down animation</a></p>
<p>GitHub repo: <a href="https://github.com/2kool2/crop-copy-slide-restore">crop-copy-slide-restore</a></p>
<p>Mike Foskett @ <a href="https://websemantics.uk/">webSemantics</a></p>


<script src="js/cropCopyRestore.2.0.min.js"></script>

</body>

0 comments on commit d40b331

Please sign in to comment.