Update examples for new theme API

finos · Jan 29, 2022 · 8fc01ca · 8fc01ca
1 parent 62191fe
commit 8fc01ca
Show file tree

Hide file tree

Showing 20 changed files with 461 additions and 504 deletions.
diff --git a/examples/blocks/src/citibike/index.html b/examples/blocks/src/citibike/index.html
@@ -1,21 +1,17 @@
 <html>
     <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
 
-        <script src="https://cdn.jsdelivr.net/npm/webfontloader"></script>
-        <script>WebFont.load({google:{families:["Roboto Mono:200,400","Material Icons","Open Sans:300,400"]}})</script>
+        <link rel="stylesheet" href="/node_modules/@finos/perspective-workspace/dist/umd/material.css" />
+        <link rel="stylesheet" href="index.css" />
 
-        <link rel='stylesheet' href="/node_modules/@finos/perspective-workspace/dist/umd/material.css">
-        <link rel='stylesheet' href="index.css"> 
-
         <script src="/node_modules/@finos/perspective-workspace/dist/umd/perspective-workspace.js"></script>
         <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
         <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
         <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
         <script src="citibike.js"></script>
 
         <style>
-
             body {
                 display: flex;
                 flex-direction: column;
@@ -28,13 +24,9 @@
                 padding: 0;
                 overflow: hidden;
             }
-
         </style>
     </head>
-    <body> 
-
-        <perspective-workspace id="workspace">
-        </perspective-workspace>
-
+    <body>
+        <perspective-workspace id="workspace"> </perspective-workspace>
     </body>
-</html>
+</html>
diff --git a/examples/blocks/src/covid/index.html b/examples/blocks/src/covid/index.html
@@ -12,15 +12,12 @@
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
 
-        <script src="https://cdn.jsdelivr.net/npm/webfontloader"></script>
-        <script>WebFont.load({google: {families: ["Roboto Mono:200,400","Material Icons","Open Sans:300,400"]}});</script>
-
         <script type="module" src="/node_modules/@finos/perspective/dist/cdn/perspective.js"></script>
         <script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
         <script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
         <script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
 
-        <link rel="stylesheet" href="/node_modules/@finos/perspective-viewer/dist/css/material-dense.css" />
+        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
 
         <script type="module">
             import {worker} from "/node_modules/@finos/perspective/dist/cdn/perspective.js";

diff --git a/examples/blocks/src/csv/index.html b/examples/blocks/src/csv/index.html
@@ -1,36 +1,33 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
-
-    <script src="https://cdn.jsdelivr.net/npm/webfontloader"></script>
-    <script>WebFont.load({google:{families:["Roboto Mono:200,400","Material Icons","Open Sans:300,400"]}})</script>
-
-    <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
-    <script src="/node_modules/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
-    <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
-    <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
-
-    <script src="csv.js"></script>
-
-    <link rel='stylesheet' href="index.css">
-    <link rel='stylesheet' href="/node_modules/@finos/perspective-viewer/dist/umd/material-dense.css" is="custom-style">
-
-</head>
-
-<body>
-
-    <div id="drop-area">
-        <form class="my-form">
-            <p>Upload a CSV file by dragging from your desktop and dropping onto the dashed region.</p>
-            <p>(Data is processed in browser, and never sent to any server).</p>
-            <input type="file" id="fileElem" multiple accept="text/csv">
-            <label class="button" for="fileElem">Select a file</label>
-        </form>
-    </div>
-
-</body>
-
-</html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
+
+        <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
+        <script src="/node_modules/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
+        <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
+        <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
+
+        <script src="csv.js"></script>
+
+        <link rel="stylesheet" href="index.css" />
+        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/material.css" />
+    </head>
+
+    <body>
+        <div id="drop-area">
+            <form class="my-form">
+                <p>
+                    Upload a CSV file by dragging from your desktop and dropping
+                    onto the dashed region.
+                </p>
+                <p>
+                    (Data is processed in browser, and never sent to any
+                    server).
+                </p>
+                <input type="file" id="fileElem" multiple accept="text/csv" />
+                <label class="button" for="fileElem">Select a file</label>
+            </form>
+        </div>
+    </body>
+</html>
diff --git a/examples/blocks/src/custom/index.html b/examples/blocks/src/custom/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">                                 
-    <link rel='stylesheet' href="/node_modules/@finos/perspective-viewer/dist/umd/material-dense.dark.css">
+    <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/material-dark.css" />
 
     <script src="/node_modules/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
     <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>