AG-1053 Tidy react examples, make more idiomatic

2017-11-08 14:45:28 +00:00
parent b030235bbc
commit 983b5974cf
149 changed files with 339 additions and 8856 deletions
--- a/src-examples/index.html
+++ b/src-examples/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <script type="text/javascript" src="../dist/react-examples.js" charset="utf-8"></script>
+    <!-- Example uses font awesome icons -->
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
+    <style>
+        html, body {
+            height: 100%;
+        }
+
+        body {
+            line-height: 1
+        }
+
+        div.card-body > a {
+            margin-top: 5px
+        }
+
+        .btn-primary {
+            margin-right: 5px;
+        }
+
+        button {
+            margin-left: 4px;
+            margin-right: 4px;
+        }
+
+        .align-right {
+            text-align: right
+        }
+
+        .customHeaderMenuButton {
+            margin-left: 4px;
+            float: left;
+        }
+
+        .customHeaderLabel {
+            margin-left: 5px;
+            float: left;
+        }
+
+        .customSortDownLabel {
+            float: left;
+            margin-left: 10px;
+        }
+
+        .customSortUpLabel {
+            float: left;
+            margin-left: 3px;
+        }
+
+        .customSortRemoveLabel {
+            float: left;
+            font-size: 11px;
+            margin-left: 3px;
+        }
+
+        .active {
+            color: cornflowerblue;
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .customHeaderLabel {
+            margin-left: 5px;
+            float: left;
+        }
+
+        .customExpandButton {
+            float: right;
+            margin-left: 3px;
+        }
+
+        .expanded {
+            animation-name: toExpanded;
+            animation-duration: 1s;
+            -ms-transform: rotate(180deg); /* IE 9 */
+            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+            transform: rotate(180deg);
+        }
+
+        .collapsed {
+            color: cornflowerblue;
+            animation-name: toCollapsed;
+            animation-duration: 1s;
+            -ms-transform: rotate(0deg); /* IE 9 */
+            -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+            transform: rotate(0deg);
+        }
+
+        @keyframes toExpanded {
+            from {
+                color: cornflowerblue;
+                -ms-transform: rotate(0deg); /* IE 9 */
+                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+                transform: rotate(0deg);
+            }
+            to {
+                color: black;
+                -ms-transform: rotate(180deg); /* IE 9 */
+                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+                transform: rotate(180deg);
+            }
+        }
+
+        @keyframes toCollapsed {
+            from {
+                color: black;
+                -ms-transform: rotate(180deg); /* IE 9 */
+                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+                transform: rotate(180deg);
+            }
+            to {
+                color: cornflowerblue;
+                -ms-transform: rotate(0deg); /* IE 9 */
+                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+                transform: rotate(0deg);
+            }
+        }
+    </style>
+</head>
+
+<body>
+<div id="app"></div>
+</body>
+</html>