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 b4a4e30

Browse files
GH-202: Add update anomalies transitions
1 parent b9cadc5 commit b4a4e30

File tree

3 files changed

+75
-6
lines changed

3 files changed

+75
-6
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ $on-primary: white;
5656
$secondary: #212121;
5757
$on-secondary: white;
5858

59+
$invalid-data: red;
5960
$lost-data: orange;
6061

6162
body {

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,56 @@
1313
}
1414
}
1515

16+
#update-anomalies {
17+
.invalid-data {
18+
position: relative;
19+
20+
.updated-data {
21+
position: absolute;
22+
top: 50%;
23+
left: 50%;
24+
transform: translate(-50%, -50%);
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
}
29+
}
30+
}
31+
32+
#update-anomalies.future {
33+
span.fade-out {
34+
opacity: 1.0;
35+
}
36+
37+
span.fade-in {
38+
opacity: 0.0;
39+
}
40+
}
41+
42+
#update-anomalies.present {
43+
span.fade-out {
44+
opacity: 0.0;
45+
transition: $transition;
46+
transition-delay: $transition-delay;
47+
}
48+
49+
span.fade-in {
50+
opacity: 1.0;
51+
transition: $transition;
52+
transition-delay: $transition + $transition-delay;
53+
}
54+
55+
.invalid-data {
56+
color: $invalid-data;
57+
}
58+
}
59+
60+
#update-anomalies.past {
61+
.invalid-data {
62+
color: $invalid-data;
63+
}
64+
}
65+
1666
#deletion-anomalies.future {
1767
td.fade-out {
1868
opacity: 1.0;

‎src/pres/normalization/index.html

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -168,21 +168,39 @@ <h2>Update anomalies</h2>
168168
</tr>
169169
<tr>
170170
<td>acen1999</td>
171-
<td class="text-center invalid-data">1</td>
171+
<td class="text-center invalid-data">
172+
<span class="fade-out updated-data">1</span>
173+
<span class="fade-in updated-data">1</span>
174+
</td>
172175
<td>Beginner</td>
173-
<td class="invalid-data">1&nbsp;wizard&nbsp;hat</td>
176+
<td class="invalid-data">
177+
<span class="fade-out updated-data">1&nbsp;wizard&nbsp;hat</span>
178+
<span class="fade-in updated-data">1&nbsp;wizard&nbsp;hat</span>
179+
</td>
174180
</tr>
175181
<tr>
176182
<td>wheed1997</td>
177-
<td class="text-center invalid-data">Greater than 7</td>
178-
<td class="invalid-data">Intermediate</td>
183+
<td class="text-center invalid-data">
184+
<span class="fade-out updated-data">Almost 7</span>
185+
<span class="fade-in updated-data">Greater than 7</span>
186+
</td>
187+
<td class="invalid-data">
188+
<span class="fade-out updated-data">Intermediate</span>
189+
<span class="fade-in updated-data">Intermediate</span>
190+
</td>
179191
<td>18&nbsp;copper&nbsp;coins</td>
180192
</tr>
181193
<tr>
182194
<td>acen1999</td>
183-
<td class="text-center invalid-data">2</td>
195+
<td class="text-center invalid-data">
196+
<span class="fade-out updated-data">1</span>
197+
<span class="fade-in updated-data">2</span>
198+
</td>
184199
<td>Beginner</td>
185-
<td class="invalid-data">1&nbsp;wizard hat, 1&nbsp;robe</td>
200+
<td class="invalid-data">
201+
<span class="fade-out updated-data">1&nbsp;wizard&nbsp;hat</span>
202+
<span class="fade-in updated-data">1&nbsp;wizard&nbsp;hat, 1&nbsp;robe</span>
203+
</td>
186204
</tr>
187205
</tbody>
188206
</table>

0 commit comments

Comments
(0)

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