docs: apply panel-toggle for tutorial & playground

QwikDev · Aug 10, 2022 · 84fc87b · 84fc87b
1 parent 2e3854b
commit 84fc87b
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 71 deletions.
diff --git a/packages/docs/src/components/panel-toggle/panel-toggle.css b/packages/docs/src/components/panel-toggle/panel-toggle.css
@@ -0,0 +1,44 @@
+.panel-toggle {
+  position: -webkit-sticky;
+  position: sticky;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--qwik-light-blue);
+  width: 100vw;
+  height: var(--panel-toggle-height);
+}
+
+.panel-toggle button {
+  background-color: white;
+  color: var(--qwik-dark-blue);
+  border: 1px solid var(--qwik-dark-blue);
+  border-radius: 3px;
+  min-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 4px 6px;
+  margin: 0 8px;
+  font-size: 12px;
+}
+
+.panel-toggle button.active,
+.panel-toggle button:hover {
+  background-color: var(--qwik-dark-blue);
+  color: white;
+}
+
+@media (min-width: 380px) {
+  .panel-toggle button {
+    padding: 4px 8px;
+    margin: 0 10px;
+    min-width: 70px;
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 768px) {
+  .panel-toggle {
+    display: none;
+  }
+}
diff --git a/packages/docs/src/components/panel-toggle/panel-toggle.tsx b/packages/docs/src/components/panel-toggle/panel-toggle.tsx
@@ -0,0 +1,31 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from './panel-toggle.css?inline';
+
+export interface PanelToggleProps {
+  panelStore: {
+    active: string;
+    list: string[];
+  };
+}
+
+export const PanelToggle = component$((props: PanelToggleProps) => {
+  useStyles$(styles);
+
+  return (
+    <div class="panel-toggle">
+      {props.panelStore.list.map((p) => (
+        <button
+          key={p}
+          onClick$={() => {
+            props.panelStore.active = p;
+          }}
+          type="button"
+          preventDefault:click
+          class={{ active: props.panelStore.active === p }}
+        >
+          {p}
+        </button>
+      ))}
+    </div>
+  );
+});
diff --git a/packages/docs/src/global.css b/packages/docs/src/global.css
@@ -28,6 +28,13 @@ html {
   --header-height: 56px;
   --repl-tab-height: 56px;
   --repl-tab-bg-color: var(--qwik-light-blue);
+  --panel-toggle-height: 0px;
+}
+
+@media (max-width: 768px) {
+  html {
+    --panel-toggle-height: 56px;
+  }
 }
 
 a,

diff --git a/packages/docs/src/routes/examples/[...id]/examples.css b/packages/docs/src/routes/examples/[...id]/examples.css
@@ -39,46 +39,6 @@
   height: calc(100vh - var(--header-height));
 }
 
-.examples .panel-toggle {
-  grid-area: example-panel-toggle;
-  position: -webkit-sticky;
-  position: sticky;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--qwik-light-blue);
-  width: 100vw;
-  height: var(--header-height);
-}
-
-.examples .panel-toggle button {
-  background-color: white;
-  color: var(--qwik-dark-blue);
-  border: 1px solid var(--qwik-dark-blue);
-  border-radius: 3px;
-  min-width: 60px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 4px 6px;
-  margin: 0 8px;
-  font-size: 12px;
-}
-
-.examples .panel-toggle button.active,
-.examples .panel-toggle button:hover {
-  background-color: var(--qwik-dark-blue);
-  color: white;
-}
-
-@media (min-width: 380px) {
-  .examples .panel-toggle button {
-    padding: 4px 8px;
-    margin: 0 10px;
-    min-width: 70px;
-    font-size: 14px;
-  }
-}
-
 @media (min-width: 768px) {
   .examples-menu-container {
     grid-template-rows: auto;
@@ -96,10 +56,6 @@
       'repl-output-panel'
       'repl-detail-panel';
   }
-
-  .examples .panel-toggle {
-    display: none;
-  }
 }
 
 @media (min-width: 1200px) {

diff --git a/packages/docs/src/routes/examples/[...id]/index!.tsx b/packages/docs/src/routes/examples/[...id]/index!.tsx
@@ -6,23 +6,26 @@ import { Header } from '../../../components/header/header';
 import exampleSections, { ExampleApp } from '@examples-data';
 import type { ReplAppInput } from '../../../repl/types';
 import { DocumentHead, useLocation } from '@builder.io/qwik-city';
+import { PanelToggle } from '../../../components/panel-toggle/panel-toggle';
 
 export default component$(() => {
   useStyles$(styles);
 
   const { params } = useLocation();
+  const panelStore = useStore(() => ({
+    active: 'Examples',
+    list: PANELS,
+  }));
 
   const store = useStore<ExamplesStore>(() => {
     const app = getExampleApp(params.id);
-
     const initStore: ExamplesStore = {
       appId: params.id,
       buildId: 0,
       buildMode: 'development',
       entryStrategy: 'hook',
       files: app?.inputs || [],
       version: '',
-      activePanel: 'Examples',
     };
     return initStore;
   });
@@ -43,9 +46,9 @@ export default component$(() => {
       <div
         class={{
           'examples-menu-container': true,
-          'examples-panel-input': store.activePanel === 'Input',
-          'examples-panel-output': store.activePanel === 'Output',
-          'examples-panel-console': store.activePanel === 'Console',
+          'examples-panel-input': panelStore.active === 'Input',
+          'examples-panel-output': panelStore.active === 'Output',
+          'examples-panel-console': panelStore.active === 'Console',
         }}
       >
         <div class="examples-menu">
@@ -60,7 +63,7 @@ export default component$(() => {
                   preventDefault:click
                   onClick$={() => {
                     store.appId = app.id;
-                    store.activePanel = 'Input';
+                    panelStore.active === 'Input';
                     history.replaceState({}, '', `/examples/${app.id}`);
                   }}
                   class={{
@@ -98,21 +101,7 @@ export default component$(() => {
           />
         </main>
       </div>
-      <div class="panel-toggle">
-        {PANELS.map((p) => (
-          <button
-            key={p}
-            onClick$={() => {
-              store.activePanel = p;
-            }}
-            type="button"
-            preventDefault:click
-            class={{ active: store.activePanel === p }}
-          >
-            {p}
-          </button>
-        ))}
-      </div>
+      <PanelToggle panelStore={panelStore} />
     </Host>
   );
 });
@@ -138,7 +127,6 @@ export const PANELS: ActivePanel[] = ['Examples', 'Input', 'Output', 'Console'];
 
 interface ExamplesStore extends ReplAppInput {
   appId: string;
-  activePanel: ActivePanel;
 }
 
 type ActivePanel = 'Examples' | 'Input' | 'Output' | 'Console';

diff --git a/packages/docs/src/routes/playground/index!.tsx b/packages/docs/src/routes/playground/index!.tsx
@@ -7,6 +7,7 @@ import playgroundApp from '@playground-data';
 import type { ReplAppInput } from '../../repl/types';
 import { createPlaygroundShareUrl, parsePlaygroundShareUrl } from '../../repl/repl-share-url';
 import type { DocumentHead } from '@builder.io/qwik-city';
+import { PanelToggle } from '../../components/panel-toggle/panel-toggle';
 
 export default component$(() => {
   useStyles$(styles);
@@ -25,6 +26,11 @@ export default component$(() => {
     return initStore;
   });
 
+  const panelStore = useStore(() => ({
+    active: 'Input',
+    list: ['Input', 'Output', 'Console'],
+  }));
+
   useClientEffect$(() => {
     // run once on the client
     const shareData = parsePlaygroundShareUrl(location.hash.slice(1));
@@ -85,6 +91,12 @@ export default component$(() => {
         style={{
           gridTemplateColumns: `${store.colLeft}% ${100 - store.colLeft}%`,
         }}
+        class={{
+          'repl-panel-output': panelStore.active === 'Output',
+          'repl-panel-console': panelStore.active === 'Console',
+          // might be removed ?
+          repl: true,
+        }}
         enableCopyToPlayground={false}
         enableDownload={true}
         enableInputDelete={true}
@@ -100,6 +112,7 @@ export default component$(() => {
           left: `calc(${store.colLeft}% - 6px)`,
         }}
       />
+      <PanelToggle panelStore={panelStore} />
     </Host>
   );
 });

diff --git a/packages/docs/src/routes/playground/playground.css b/packages/docs/src/routes/playground/playground.css
@@ -15,7 +15,7 @@
     'repl-input-panel repl-output-panel'
     'repl-input-panel repl-detail-panel';
   top: calc(var(--header-height) + var(--playground-header-height));
-  height: calc(100vh - var(--header-height));
+  height: calc(100vh - var(--header-height) - var(--panel-toggle-height));
 }
 
 .playground .repl-col-resize-bar {
@@ -56,3 +56,22 @@
 .playground .repl-input-panel {
   border-right: 1px solid var(--repl-tab-bg-color);
 }
+
+@media (max-width: 768px) {
+  .playground .repl {
+    width: 300vw;
+    grid-template-rows: 100%;
+    grid-template-columns: 1fr 1fr 1fr !important;
+    grid-template-areas: 'repl-input-panel repl-output-panel repl-detail-panel';
+    transition: transform 500ms;
+  }
+  .repl-panel-output {
+    transform: translateX(-33.33%);
+  }
+  .repl-panel-console {
+    transform: translateX(-66.66%);
+  }
+  .playground .repl-col-resize-bar {
+    display: none;
+  }
+}
diff --git a/packages/docs/src/routes/tutorial/layout!.tsx b/packages/docs/src/routes/tutorial/layout!.tsx
@@ -6,6 +6,7 @@ import styles from './tutorial.css?inline';
 import { TutorialContentFooter } from './tutorial-content-footer';
 import { TutorialContentHeader } from './tutorial-content-header';
 import tutorialSections, { TutorialApp } from '@tutorial-data';
+import { PanelToggle } from '../../components/panel-toggle/panel-toggle';
 import { Header } from '../../components/header/header';
 import type { ReplAppInput, ReplModuleInput } from '../../repl/types';
 import { EditIcon } from '../../components/svgs/edit-icon';
@@ -15,6 +16,10 @@ export default component$(() => {
   useStyles$(`html,body { margin: 0; height: 100%; overflow: hidden; }`);
 
   const { pathname } = useLocation();
+  const panelStore = useStore(() => ({
+    active: 'Tutorial',
+    list: PANELS,
+  }));
   const store = useStore<TutorialStore>(() => {
     const p = pathname.split('/');
     const appId = `${p[2]}/${p[3]}`;
@@ -46,7 +51,12 @@ export default component$(() => {
   return (
     <Host class="tutorial full-width fixed-header">
       <Header />
-      <main>
+      <main
+        class={{
+          'tutorial-panel-input': panelStore.active === 'Input',
+          'tutorial-panel-output': panelStore.active === 'Output',
+        }}
+      >
         <div class="tutorial-content-panel">
           <TutorialContentHeader store={store} />
 
@@ -87,6 +97,7 @@ export default component$(() => {
           <div class="tutorial-repl-footer" />
         </div>
       </main>
+      <PanelToggle panelStore={panelStore} />
     </Host>
   );
 });
@@ -155,6 +166,7 @@ export interface TutorialStore extends ReplAppInput {
   next: TutorialApp | undefined;
 }
 
+export const PANELS = ['Tutorial', 'Input', 'Output'];
 export const onGet: RequestHandler = ({ response }) => {
   response.headers.set(
     'Cache-Control',