From d34ee05a2ee864a27320df7f2040e1d38e3a6c56 Mon Sep 17 00:00:00 2001 From: FaberVitale Date: Thu, 17 Jun 2021 19:58:31 +0200 Subject: [PATCH] docs(rtk-query): clean up demo --- .../demo/public/index.html | 2 +- .../demo/src/App.tsx | 60 +++++++++++++------ .../demo/src/Pokemon.tsx | 3 +- .../demo/src/index.css | 50 ++++++++++++++++ .../demo/src/index.tsx | 1 + 5 files changed, 96 insertions(+), 20 deletions(-) diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/index.html b/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/index.html index 89cf6a1d..ad9c2ff3 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/index.html +++ b/packages/redux-devtools-rtk-query-inspector-monitor/demo/public/index.html @@ -8,7 +8,7 @@ name="description" content="Web site created using create-snowpack-app" /> - Snowpack App + RTK Query monitor demo
diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/App.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/App.tsx index c8e60bd2..d3e2a008 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/App.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/App.tsx @@ -10,23 +10,49 @@ export default function App() { const [pokemon, setPokemon] = React.useState(['bulbasaur']); return ( -
-
- - -
+
+

RTK Query inspector monitor demo

+
+

Pokemon polling demo

+
+ + +
- {pokemon.map((name, index) => ( - - ))} -
+
+ {pokemon.map((name, index) => ( + + ))} +
+ +
+

Dock controls

+ 
+          
+            {`toggleVisibilityKey="ctrl-h"\nchangePositionKey="ctrl-q"`}
+          
+
+
+ + ); } diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/Pokemon.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/Pokemon.tsx index 49c076c6..b809ba8b 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/Pokemon.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/Pokemon.tsx @@ -28,9 +28,8 @@ export function Pokemon({ name }: { name: PokemonName }) { return (
diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/index.css b/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/index.css index ec2585e8..6a611e5d 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/index.css +++ b/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/index.css @@ -11,3 +11,53 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +h1 { + font-size: 1.4em; +} + +h2 { + font-size: 1.2em; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + text-align: left; + font-family: inherit; + padding: 0.5em; + margin: 0; +} + +.demo-toolbar { + display: flex; + padding: 1em; + justify-content: flex-start; +} + +section { + display: block; +} + +.pokemon-list { + display: flex; + max-width: 80vw; + flex-flow: row wrap; + overflow-x: hidden; +} + +.pokemon { + padding: 0.2em; + text-align: center; +} + +pre code { + white-space: pre-wrap; +} + +article { + padding: 0.4em; +} diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/index.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/index.tsx index ee93252d..7c48f576 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/index.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/demo/src/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import App from './App'; +import './index.css'; import { store } from './store'; import DevTools from './DevTools';