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-large-data/index.html
+++ b/src-large-data/index.html
@@ -0,0 +1,124 @@
+<html>
+
+    <!-- This index file is common for both the standard and large examples. As to which project you are running
+        depends on whether you use 'npm run standard' or 'npm run large' -->
+
+    <head>
+        <meta charset="utf-8">
+        <script type="text/javascript" src="../dist/react-large.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">
+    </head>
+
+    <!-- Put some spacing around the buttons - not needed, just makes it look nice -->
+    <style>
+        button {
+            margin-left: 4px;
+            margin-right: 4px;
+        }
+
+        .customHeaderMenuButton{
+            margin-top: 5px;
+            margin-left: 4px;
+            float: left;
+        }
+
+        .customHeaderLabel{
+            margin-left: 5px;
+            margin-top: 3px;
+            float: left;
+        }
+
+        .customSortDownLabel{
+            float: left;
+            margin-left: 10px;
+            margin-top: 5px;
+        }
+
+        .customSortUpLabel{
+            float: left;
+            margin-left: 3px;
+            margin-top: 4px;
+        }
+
+        .customSortRemoveLabel{
+            float: left;
+            font-size: 11px;
+            margin-left: 3px;
+            margin-top: 6px;
+        }
+
+        .active {
+            color: cornflowerblue;
+        }
+
+        .hidden { display:none; }
+
+
+        .customHeaderLabel{
+            margin-left: 5px;
+            margin-top: 3px;
+            float: left;
+        }
+
+        .customExpandButton{
+            float:right;
+            margin-top: 5px;
+            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>
+
+    <body>
+        <div id="myAppContainer"></div>
+    </body>
+
+</html>