Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Jul 2, 2024. It is now read-only.

Commit 4e2227c

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /