Commit 1cf5e10a by Brian Talbot

revised cheatsheet markdown, fixed height + added vertical scroll, and replaced…

revised cheatsheet markdown, fixed height + added vertical scroll, and replaced explanation example in sheet
parent 04e94473
cms/static/img/explanation-example.png

16.1 KB | W: | H:

cms/static/img/explanation-example.png

4.66 KB | W: | H:

cms/static/img/explanation-example.png
cms/static/img/explanation-example.png
cms/static/img/explanation-example.png
cms/static/img/explanation-example.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<div class="cheatsheet-wrapper"> <div class="cheatsheet-wrapper">
<div class="row"> <div class="row">
<h6>Header</h6> <h6>Header</h6>
<div class="col sample"> <div class="col sample header">
<img src="/static/img/header-example.png" /> <img src="/static/img/header-example.png" />
</div> </div>
<div class="col"> <div class="col">
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
</div> </div>
<div class="row"> <div class="row">
<h6>Multiple Choice</h6> <h6>Multiple Choice</h6>
<div class="col sample"> <div class="col sample multiple-choice">
<img src="/static/img/choice-example.png" /> <img src="/static/img/choice-example.png" />
</div> </div>
<div class="col"> <div class="col">
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</div> </div>
<div class="row"> <div class="row">
<h6>Check Multiple</h6> <h6>Check Multiple</h6>
<div class="col sample"> <div class="col sample explanation">
<img src="/static/img/multi-example.png" /> <img src="/static/img/multi-example.png" />
</div> </div>
<div class="col"> <div class="col">
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</div> </div>
<div class="row"> <div class="row">
<h6>String Response</h6> <h6>String Response</h6>
<div class="col sample"> <div class="col sample explanation">
<img src="/static/img/string-example.png" /> <img src="/static/img/string-example.png" />
</div> </div>
<div class="col"> <div class="col">
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
</div> </div>
<div class="row"> <div class="row">
<h6>Numerical Response</h6> <h6>Numerical Response</h6>
<div class="col sample"> <div class="col sample explanation">
<img src="/static/img/number-example.png" /> <img src="/static/img/number-example.png" />
</div> </div>
<div class="col"> <div class="col">
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
</div> </div>
<div class="row"> <div class="row">
<h6>Option Response</h6> <h6>Option Response</h6>
<div class="col sample"> <div class="col sample explanation">
<img src="/static/img/select-example.png" /> <img src="/static/img/select-example.png" />
</div> </div>
<div class="col"> <div class="col">
...@@ -95,14 +95,11 @@ ...@@ -95,14 +95,11 @@
</div> </div>
<div class="row"> <div class="row">
<h6>Explanation</h6> <h6>Explanation</h6>
<div class="col sample"> <div class="col sample explanation">
<img src="/static/img/explanation-example.png" /> <img src="/static/img/explanation-example.png" />
</div> </div>
<div class="col"> <div class="col">
<pre><code>[explanation] <pre><code>[explanation] A short explanation of the answer. [explanation]</code></pre>
A short explanation of the answer.
[explanation]
</code></pre>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -71,13 +71,15 @@ ...@@ -71,13 +71,15 @@
left: 100%; left: 100%;
width: 0; width: 0;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
@include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 15px); @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
@include transition(width .3s); @include transition(width .3s);
&.shown { &.shown {
width: 300px; width: 300px;
height: 100%;
overflow-y: scroll;
} }
.cheatsheet-wrapper { .cheatsheet-wrapper {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment