Merge pull request #130 from dockersamples/minor-ui-tweaks

Minor UI tweaks

Author: mikesir87

components/interface/client/src/components/ExternalContentPanel/ExternalTabs.jsx

@@ -9,62 +9,61 @@ export function ExternalTabs({
   onRefreshClick,
 }) {
   return (
-<>
-    {tabs.length > 1 && (
-    <Nav
-      variant="tabs"
-      activeKey={activeTab}
-      onSelect={(selectedKey) => setActiveTab(selectedKey)}
-      id="external-content-tabs"
-      className="align-items-end"
-    >
-      {tabs.map((tab) => (
-        <Nav.Item key={tab.url} className="me-2 ms-2">
-          <Nav.Link
-            eventKey={tab.url}
-            href={tab.url}
-            className="p-1 ps-3 pe-1"
-            onClick={(e) => {
-              e.preventDefault();
-            }}
-          >
-            <span className="me-3">{tab.title}</span>
-
-            {activeTab === tab.url && (
-              <Button
-                size="sm"
-                variant="default"
-                className="rounded-circle p-1 pt-0 pb-0"
+    <>
+      {tabs.length > 1 && (
+        <Nav
+          variant="tabs"
+          activeKey={activeTab}
+          onSelect={(selectedKey) => setActiveTab(selectedKey)}
+          id="external-content-tabs"
+          className="align-items-end"
+        >
+          {tabs.map((tab) => (
+            <Nav.Item key={tab.url} className="me-2 ms-2">
+              <Nav.Link
+                eventKey={tab.url}
+                href={tab.url}
+                className="p-1 ps-3 pe-1"
                 onClick={(e) => {
-                  e.stopPropagation();
                   e.preventDefault();
-                  onRefreshClick();
                 }}
               >
-                <span className="material-symbols-outlined">refresh</span>
-              </Button>
-            )}
+                <span className="me-3">{tab.title}</span>
 
-            {tab.title !== "Workspace" && (
-              <Button
-                size="sm"
-                variant="default"
-                className="rounded-circle p-1 pt-0 pb-0"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  onTabRemoval(tab.url);
-                }}
-              >
-                <span className="material-symbols-outlined">close</span>
-              </Button>
-            )}
-          </Nav.Link>
-        </Nav.Item>
-      ))}
-    </Nav>
+                {activeTab === tab.url && (
+                  <Button
+                    size="sm"
+                    variant="default"
+                    className="rounded-circle p-1 pt-0 pb-0"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onRefreshClick();
+                    }}
+                  >
+                    <span className="material-symbols-outlined">refresh</span>
+                  </Button>
+                )}
 
-    )}
+                {tab.title !== "Workspace" && (
+                  <Button
+                    size="sm"
+                    variant="default"
+                    className="rounded-circle p-1 pt-0 pb-0"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onTabRemoval(tab.url);
+                    }}
+                  >
+                    <span className="material-symbols-outlined">close</span>
+                  </Button>
+                )}
+              </Nav.Link>
+            </Nav.Item>
+          ))}
+        </Nav>
+      )}
     </>
   );
 }

components/interface/client/src/components/WorkshopPanel/WorkshopBody.jsx

@@ -1,24 +1,30 @@
 import Dropdown from "react-bootstrap/Dropdown";
 import { useActiveSection, useWorkshop } from "../../WorkshopContext";
+import "./WorkshopNav.scss";
 
 export function WorkshopNav() {
   const { sections } = useWorkshop();
   const { activeSection, changeActiveSection } = useActiveSection();
 
   return (
     <div className="workshop-nav">
-      <Dropdown align="end">
-        <Dropdown.Toggle variant="outline-secondary">
+      <Dropdown className="dropdown-center" drop="down-centered">
+        <Dropdown.Toggle
+          variant="outline-secondary"
+          className="text-truncate w-100"
+          size="sm"
+          id="labspace-nav-dropdown"
+        >
           {(activeSection && (
             <>
               {sections.findIndex((s) => s.id === activeSection.id) + 1}.{" "}
-              {activeSection.title}
+              {activeSection.title} and a little more
             </>
           )) ||
             "Sections"}
         </Dropdown.Toggle>
 
-        <Dropdown.Menu>
+        <Dropdown.Menu align="center">
           {sections.map((section, index) => (
             <Dropdown.Item
               key={section.id}

components/interface/client/src/components/WorkshopPanel/WorkshopHeader.jsx

@@ -0,0 +1,16 @@
+#workshop-footer {
+  .material-symbols-outlined {
+    font-size: 0.7rem;
+  }
+}
+
+#labspace-nav-dropdown {
+  position: relative;
+  padding-right: 17px;
+
+  &::after {
+    position: absolute;
+    right: 6px;
+    top: 42%;
+  }
+}

components/interface/client/src/components/WorkshopPanel/WorkshopNav.jsx

@@ -1,11 +1,72 @@
-import { WorkshopBody } from "./WorkshopBody";
-import { WorkshopHeader } from "./WorkshopHeader";
+import { useActiveSection, useWorkshop } from "../../WorkshopContext";
+import { useEffect, useRef } from "react";
+import Button from "react-bootstrap/Button";
+import { MarkdownRenderer } from "./markdown/MarkdownRenderer";
+import { WorkshopNav } from "./WorkshopNav";
 import "./WorkshopPanel.scss";
 
 export function WorkshopPanel() {
+  const bodyRef = useRef();
+  const { activeSection, changeActiveSection } = useActiveSection();
+  const { sections } = useWorkshop();
+
+  const index = sections.findIndex(
+    (section) => section.id === activeSection.id,
+  );
+
+  useEffect(() => {
+    // alert("Scrolling?");
+    window.bodyRef = bodyRef.current;
+    setTimeout(
+      () => bodyRef.current.scrollTo({ top: 0, left: 0, behavior: "smooth" }),
+      100,
+    );
+  }, [activeSection, bodyRef]);
+
+  const hasNext = index < sections.length - 1;
+  const hasPrev = index > 0;
+
   return (
     <div className="d-flex flex-column h-100">
-       <WorkshopBody />
+      <div className="overflow-auto" ref={bodyRef}>
+        <div className="workshop-body p-5 pt-3 pb-3">
+          <MarkdownRenderer>{activeSection.content}</MarkdownRenderer>
+        </div>
+      </div>
+
+      <div
+        id="workshop-footer"
+        style={{ borderColor: "#E5E5E5 !Important" }}
+        className="workshop-footer d-flex justify-content-between p-3 border-top bg-light-subtle align-items-center"
+      >
+        <div>
+          <Button
+            size="sm"
+            variant="outline-secondary"
+            onClick={() => changeActiveSection(sections[index - 1].id)}
+            className="d-flex align-items-center"
+            style={{ visibility: hasPrev ? "visible" : "hidden" }}
+          >
+            <span className="material-symbols-outlined">arrow_back</span>
+            <span>Previous</span>
+          </Button>
+        </div>
+        <div style={{ maxWidth: "calc(100% - 175px)" }}>
+          <WorkshopNav />
+        </div>
+        <div>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => changeActiveSection(sections[index + 1].id)}
+            className="d-flex align-items-center"
+            style={{ visibility: hasNext ? "visible" : "hidden" }}
+          >
+            <span className="me-1">Next</span>
+            <span className="material-symbols-outlined">arrow_forward</span>
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }