Skip to content
This repository was archived by the owner on Jul 2, 2024. It is now read-only.

Commit 4e2227c

Browse files
shorodilovshorodilov
committed
GH-202: Add test pass/fail marks and update transitions
1 parent 19c8118 commit 4e2227c

File tree

6 files changed

+190
-35
lines changed

6 files changed

+190
-35
lines changed

‎assets/icons/check-mark-svgrepo-com.svg‎

Lines changed: 35 additions & 0 deletions
Loading

‎assets/icons/cross-mark-svgrepo-com.svg‎

Lines changed: 37 additions & 0 deletions
Loading

‎src/_static/scss/presentation-common.scss‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,34 @@ body {
6363
background: $background;
6464
}
6565

66-
/* fonts */
66+
/* fonts and icons */
6767
$base-font-size: 3.75rem;
6868
$title: $base-font-size * 2.5;
6969
$subtitle: $base-font-size *2;
7070
$section: $base-font-size * 1.5;
7171

72+
$checkMarkIcon: url("../../../assets/icons/check-mark-svgrepo-com.svg");
73+
$crossMarkIcon: url("../../../assets/icons/cross-mark-svgrepo-com.svg");
74+
75+
.i {
76+
display: inline-block;
77+
height: 1em;
78+
width: 1em;
79+
margin: auto 0.5em;
80+
}
81+
82+
.i-pass {
83+
@extend .i;
84+
background-image: $checkMarkIcon;
85+
background-size: contain;
86+
}
87+
88+
.i-fail {
89+
@extend .i;
90+
background-image: $crossMarkIcon;
91+
background-size: contain;
92+
}
93+
7294
body {
7395
font-size: $base-font-size;
7496

@@ -179,6 +201,7 @@ $step-width: 1800px;
179201
.fade-in {
180202
opacity: 0.0;
181203
}
204+
182205
.fly-in {
183206
opacity: 0.0;
184207
transform: translateY(2200px);
@@ -190,6 +213,7 @@ $step-width: 1800px;
190213
opacity: 1.0;
191214
transition: $transition;
192215
}
216+
193217
.fly-in {
194218
opacity: 1.0;
195219
transform: translateY(0px);

‎src/_static/scss/presentation-normalization.scss‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -138,20 +138,52 @@
138138
}
139139

140140
#mixed-data-types--1nf,
141-
#no-mixed-data-types--1nf {
142-
table {
143-
margin-right: auto;
144-
margin-left: auto;
145-
width: 50%;
141+
#repeating-groups--1nf,
142+
#table--1nf,
143+
#non-key-attrs--2nf,
144+
#table--2nf,
145+
#transitive-deps--3nf,
146+
#table--3nf {
147+
ul {
148+
list-style: none;
149+
150+
li {
151+
font-size: $base-font-size * 0.65;
152+
}
146153
}
147154
}
148155

156+
#mixed-data-types--1nf,
149157
#repeating-groups--1nf {
158+
section {
159+
display: grid;
160+
grid-template-columns: repeat(2, 1fr);
161+
gap: 20px;
162+
}
163+
150164
table {
151165
margin-right: auto;
152166
margin-left: auto;
153167
width: 50%;
154168
}
169+
170+
}
171+
172+
#mixed-data-types--1nf.future,
173+
#repeating-groups--1nf.future {
174+
.fly-in:first-of-type {
175+
transform: translateX(-2200px);
176+
177+
}
178+
179+
.fly-in:last-of-type {
180+
transform: translateX(2200px);
181+
}
182+
183+
.fly-in {
184+
opacity: 0.0;
185+
transition-delay: $transition-delay;
186+
}
155187
}
156188

157189
#table--3nf {

‎src/conf.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import "../assets/favicon.ico"
33
import "./_static/scss/presentation-common.scss"
44
import "./_static/scss/presentation-normalization.scss"
55

6+
import "../assets/icons/check-mark-svgrepo-com.svg"
7+
import "../assets/icons/cross-mark-svgrepo-com.svg"
8+
69
// import impress.js presentation framework
710
import "../assets/impress.js/js/impress"
811
import "../assets/impress.js/css/impress-common.css"

‎src/pres/normalization/index.html‎

Lines changed: 53 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ <h3>Requirements</h3>
294294
<div class="step" id="mixed-data-types--1nf"
295295
data-rel-position="relative"
296296
data-rel-x="-1000"
297-
data-rel-y="1500">
297+
data-rel-y="2200">
298298
<section class="fade-in fade-out">
299299
<table class="db-table" aria-label="data">
300300
<caption>Player Level</caption>
@@ -319,14 +319,6 @@ <h3>Requirements</h3>
319319
</tr>
320320
</tbody>
321321
</table>
322-
<div class="text-center"><i class="i-fail"></i><em>Mixed types are not allowed</em></div>
323-
</section>
324-
</div>
325-
<div class="step" id="no-mixed-data-types--1nf"
326-
data-rel-position="relative"
327-
data-rel-x="0"
328-
data-rel-y="850">
329-
<section class="fade-in fade-out">
330322
<table class="db-table" aria-label="data">
331323
<caption>Player Level</caption>
332324
<thead>
@@ -350,14 +342,21 @@ <h3>Requirements</h3>
350342
</tr>
351343
</tbody>
352344
</table>
353-
<div class="text-center"><i class="i-fail"></i><em>Mixed types are not allowed</em></div>
345+
</section>
346+
<section class="text-center fade-out">
347+
<ul class="fly-in">
348+
<li><i class="i-fail"></i>No mixed data types</li>
349+
</ul>
350+
<ul class="text-center fly-in">
351+
<li><i class="i-pass"></i>No mixed data types</li>
352+
</ul>
354353
</section>
355354
</div>
356355

357356
<div class="step" id="repeating-groups--1nf"
358357
data-rel-position="relative"
359358
data-rel-x="2000"
360-
data-rel-y="-850">
359+
data-rel-y="0">
361360
<section class="fade-in fade-out">
362361
<table class="db-table" aria-label="data">
363362
<caption>Player Inventory</caption>
@@ -382,14 +381,6 @@ <h3>Requirements</h3>
382381
</tr>
383382
</tbody>
384383
</table>
385-
<div class="text-center"><i class="i-fail"></i><em>Repeating groups are eliminated</em></div>
386-
</section>
387-
</div>
388-
<div class="step" id="no-repeating-groups--1nf"
389-
data-rel-position="relative"
390-
data-rel-x="0"
391-
data-rel-y="850">
392-
<section class="fade-in fade-out">
393384
<table class="db-table" aria-label="data">
394385
<caption>Player Inventory</caption>
395386
<thead>
@@ -427,14 +418,23 @@ <h3>Requirements</h3>
427418
</tr>
428419
</tbody>
429420
</table>
430-
<div class="text-center"><i class="i-pass"></i><em>Repeating groups are eliminated</em></div>
421+
</section>
422+
<section class="text-center fade-out">
423+
<ul class="fly-in">
424+
<li><i class="i-pass"></i>No mixed data types</li>
425+
<li><i class="i-fail"></i>No repeating groups</li>
426+
</ul>
427+
<ul class="text-center fly-in">
428+
<li><i class="i-pass"></i>No mixed data types</li>
429+
<li><i class="i-pass"></i>No repeating groups</li>
430+
</ul>
431431
</section>
432432
</div>
433433

434434
<div class="step" id="table--1nf"
435435
data-rel-position="relative"
436436
data-rel-x="-1000"
437-
data-rel-y="-1600">
437+
data-rel-y="-1200">
438438
<section class="fade-in">
439439
<table class="db-table" aria-label="data">
440440
<caption>Player Inventory</caption>
@@ -474,6 +474,13 @@ <h3>Requirements</h3>
474474
</tbody>
475475
</table>
476476
</section>
477+
<section class="fly-in">
478+
<ul class="text-center fly-in">
479+
<li><i class="i-pass"></i>Primary key applied</li>
480+
<li><i class="i-pass"></i>No mixed data types</li>
481+
<li><i class="i-pass"></i>No repeating groups</li>
482+
</ul>
483+
</section>
477484
</div>
478485

479486
<div class="step overview" id="overview--1nf"
@@ -557,10 +564,10 @@ <h3>Requirements</h3>
557564
<section class="fly-in fade-out">
558565
<ul>
559566
<li>
560-
<i class="icon-pass"></i><code>{ name, item_type } <-- { item_quantity }</code>
567+
<i class="i-pass"></i><code>{ name, item_type } <-- { item_quantity }</code>
561568
</li>
562569
<li>
563-
<i class="icon-fail"></i><code>{ name } <-- { level }</code>
570+
<i class="i-fail"></i><code>{ name } <-- { level }</code>
564571
</li>
565572
</ul>
566573
</section>
@@ -636,6 +643,16 @@ <h3>Requirements</h3>
636643
</tbody>
637644
</table>
638645
</section>
646+
<section class="fly-in">
647+
<ul>
648+
<li>
649+
<i class="i-pass"></i><code>{ username, item_type } <-- { item_quantity }</code>
650+
</li>
651+
<li>
652+
<i class="i-pass"></i><code>{ username } <-- { level }</code>
653+
</li>
654+
</ul>
655+
</section>
639656
</div>
640657

641658
<div class="step overview" id="overview--2nf"
@@ -695,16 +712,23 @@ <h3>Requirements</h3>
695712
</tbody>
696713
</table>
697714
</section>
715+
<section class="fly-in fade-out">
716+
<ul>
717+
<li>
718+
<i class="i-fail"></i><code>{ username } <-- { level } <-- { rank }</code>
719+
</li>
720+
</ul>
721+
</section>
698722
</div>
699723

700724
<div class="step" id="table--3nf"
701725
data-rel-position="relative"
702726
data-rel-x="0"
703727
data-rel-y="-1000">
704728
<section class="fade-in">
705-
<div class="text-center fly-in">
706-
<i class="i-fail"></i><code>{ username } <-- { level }</code>
707-
</div>
729+
<ul class="text-center fly-in">
730+
<li><i class="i-pass"></i><code>{ username } <-- { level }</code></li>
731+
</ul>
708732
<table class="db-table" aria-label="data">
709733
<caption>Player Level</caption>
710734
<thead>
@@ -777,9 +801,9 @@ <h3>Requirements</h3>
777801
</tr>
778802
</tbody>
779803
</table>
780-
<div class="text-center fly-in">
781-
<i class="i-pass"></i><code>{ level } <-- { rank }</code>
782-
</div>
804+
<ul class="text-center fly-in">
805+
<li><i class="i-pass"></i><code>{ level } <-- { rank }</code></li>
806+
</ul>
783807
</section>
784808
</div>
785809

0 commit comments

Comments
 (0)