GH-202: Add deletion anomalies transitions

Author: shorodilov

src/_static/scss/presentation-common.scss

@@ -42,7 +42,8 @@
 }
 
 /* transitions */
-$transition-default: 2000ms;
+$transition: 2000ms;
+$transition-delay: 1000ms;
 
 /* colors */
 // todo: adjust colors
@@ -55,6 +56,8 @@ $on-primary: white;
 $secondary: #212121;
 $on-secondary: white;
 
+$lost-data: orange;
+
 body {
   background: $background;
 }
@@ -184,19 +187,19 @@ $step-width: 1800px;
   .present {
     .fade-in {
       opacity: 1.0;
-      transition: $transition-default;
+      transition: $transition;
     }
     .fly-in {
       opacity: 1.0;
       transform: translateY(0px);
-      transition: $transition-default;
+      transition: $transition;
     }
   }
 
   .past {
     .fade-out {
       opacity: 0.0;
-      transition: $transition-default;
+      transition: $transition;
     }
   }
 

src/_static/scss/presentation-normalization.scss

@@ -13,6 +13,41 @@
     }
   }
 
+  #deletion-anomalies.future {
+    td.fade-out {
+      opacity: 1.0;
+    }
+  }
+
+  #deletion-anomalies.present {
+    td.fade-out {
+      opacity: 0.0;
+      transition: $transition;
+      transition-delay: $transition-delay;
+    }
+
+    td.lost-data {
+      &:nth-child(odd) {
+        transform: rotate(-7deg);
+      }
+
+      &:nth-child(even) {
+        transform: rotate(7deg);
+      }
+
+      color: $lost-data;
+      transition: $transition;
+      transition-delay: $transition + $transition-delay;
+    }
+  }
+
+  #deletion-anomalies.past {
+    td.lost-data {
+      color: $lost-data;
+      transform: rotate(7deg);
+    }
+  }
+
   #mixed-data-types--1nf,
   #no-mixed-data-types--1nf {
     table {
@@ -66,7 +101,7 @@
       .fly-in {
         transform: translateY(0px);
         opacity: 1.0;
-        transition: $transition-default;
+        transition: $transition;
         transition-delay: 1000ms;
       }
     }

src/pres/normalization/index.html

@@ -162,25 +162,25 @@ <h2>Update anomalies</h2>
           <tbody>
           <tr>
             <td>prombery87</td>
-            <td>7.75</td>
+            <td class="text-center">7.75</td>
             <td>Advanced</td>
             <td>1&nbsp;sword, 4&nbsp;rings</td>
           </tr>
           <tr>
             <td>acen1999</td>
-            <td class="invalid-data">1</td>
+            <td class="text-center invalid-data">1</td>
             <td>Beginner</td>
             <td class="invalid-data">1&nbsp;wizard&nbsp;hat</td>
           </tr>
           <tr>
             <td>wheed1997</td>
-            <td class="invalid-data">Greater than 7</td>
+            <td class="text-center invalid-data">Greater than 7</td>
             <td class="invalid-data">Intermediate</td>
             <td>18&nbsp;copper&nbsp;coins</td>
           </tr>
           <tr>
             <td>acen1999</td>
-            <td class="invalid-data">2</td>
+            <td class="text-center invalid-data">2</td>
             <td>Beginner</td>
             <td class="invalid-data">1&nbsp;wizard hat, 1&nbsp;robe</td>
           </tr>
@@ -221,21 +221,21 @@ <h2>Deletion anomalies</h2>
           <tbody>
           <tr>
             <td>prombery87</td>
-            <td>7.75</td>
+            <td class="text-center">7.75</td>
             <td>Advanced</td>
             <td>1 sword, 4 rings</td>
           </tr>
           <tr>
-            <td class="rotating lost-data">wheed1997</td>
-            <td class="rotating lost-data">Almost 7</td>
-            <td class="rotating lost-data">Intermediate</td>
+            <td class="lost-data">wheed1997</td>
+            <td class="text-center lost-data">Almost 7</td>
+            <td class="lost-data">Intermediate</td>
             <td class="fade-out">18 copper coins</td>
           </tr>
           <tr>
             <td>acen1999</td>
-            <td>1</td>
+            <td class="text-center">1</td>
             <td>Beginner</td>
-            <td class="invalid"></td>
+            <td>1&nbsp;wizard&nbsp;hat, 1&nbsp;robe</td>
           </tr>
           </tbody>
         </table>