feat: floating UI complete and consistent

- closes #120
scout-ch · Oct 22, 2023 · 5e5483f · 5e5483f
1 parent 4c4e7d0
commit 5e5483f
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 52 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -128,7 +128,7 @@ function App() {
                 <PageLayout.Content>
                   {/* to have a sticky header, it needs to be placed here
                   in the content */}
-                    <main id="main-content" className='p-4 px-md-6'>
+                    <main id="main-content" className='p-3'>
                       <Routes>
                           <Route path="/search" element={<SearchPage page={searchPage} sections = {sections} />} />
                           <Route path="/impressum" element={<ImpressumPage />} />
@@ -141,7 +141,7 @@ function App() {
                 </PageLayout.Content>
                 <PageLayout.Pane position={'start'} sticky  //resizable
                   hidden={{narrow: true, regular: true, wide: false}}
-                  offsetHeader={48}
+                  offsetHeader={64}
                 >
                   <SidebarNav startPageMenuName={'start'} variant='full'/>
                 </PageLayout.Pane>

diff --git a/src/components/Chapter.tsx b/src/components/Chapter.tsx
@@ -45,16 +45,15 @@ function Chapter(props: ChapterProps) {
 
     // render chapter
     // slug is used for anchor links
-    return <div className='chapter' style={style}>
+    return <div className='chapter rounded p-3 border color-bg-default' style={style}>
         <div id={data.slug}>
-
-            <div className="chapter-title">
+            <div className="chapter-title pb-3">
                 <h2 id={data.slug}>
                     {data.icon && (<img className='icon' src={data.icon.url} alt="icon" />)}
                     {data.title}
                 </h2>
             </div>
-            <div className='chapter-main'>
+            <div className='chapter-body rounded p-3 color-bg-subtle'>
                 <Target targets={data.responsible} />
                 <ReactMarkdown remarkPlugins={[remarkGfm]}
                     components={LinkComponent}>{data.content}</ReactMarkdown>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -136,17 +136,17 @@ const Header = ({ t }: Props) => {
     <>
         <header
           className={cx(
-            'color-bg-default p-2 px-4 z-1 sections position-sticky top-0 z-1',
-            'border-bottom color-border-subtle',
-            scroll && 'color-shadow-small',
+            'AppHeader',
+            'p-3 z-1 sections position-sticky top-0',
+            // scroll && 'color-shadow-small',
           )}
           role='banner'
           aria-label='Main'
         >
           <div className={cx('d-flex flex-items-center')}>
           <IconButton
             className={cx(
-              "border hide-xxl mr-3",
+              "AppHeader-button hide-xxl mr-3 color-fg-muted",
             )}
             icon={ThreeBarsIcon}
             aria-label="Open Sidebar"
@@ -201,7 +201,7 @@ const Header = ({ t }: Props) => {
             {!isSearchResultsPage && <>
               <IconButton
                 className={cx(
-                  'hide-lg hide-xl',
+                  'hide-lg hide-xl AppHeader-button color-fg-muted',
                   !isSearchOpen ? 'd-flex flex-items-center ml-auto' : 'd-none',
                 )}
                 onClick={() => setIsSearchOpen(!isSearchOpen)}
@@ -215,7 +215,7 @@ const Header = ({ t }: Props) => {
                 aria-expanded={isSearchOpen ? 'true' : 'false'}
                 icon={XIcon}
 
-                className='show'
+                className='show AppHeader-button color-fg-muted'
                 sx={
                   isSearchOpen
                     ? {
@@ -241,10 +241,11 @@ const Header = ({ t }: Props) => {
               </div> */}
 
               {/* The ... navigation menu */}
-              <div>
+              <div className='dotdotdot-nav'>
                 <ActionMenu aria-labelledby="sidebar-overlay-header">
                   <ActionMenu.Anchor>
                     <IconButton
+                      className='AppHeader-button color-fg-muted'
                       icon={KebabHorizontalIcon}
                       aria-label="Open Menu"
                       sx={

diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
@@ -49,6 +49,7 @@ function SearchInput({ t, keyword, onChange, onKeyDown, tooltipDirection }: Prop
         onInput={(e) => (e.target as HTMLInputElement).setCustomValidity('')}
         placeholder={t('searchPage.searchPlaceholder')}
         maxLength={512}
+        className="color-bg-transparent color-fg-muted"
         sx={{
           width: '100%',
           height: '2rem',
@@ -61,6 +62,7 @@ function SearchInput({ t, keyword, onChange, onKeyDown, tooltipDirection }: Prop
     </label>
     <Tooltip aria-label={t("searchPage.tooltip")} direction={tooltipDirection? tooltipDirection : 'n'}>
       <IconButton
+      className="AppHeader-button color-fg-muted"
         aria-label={t("searchPage.tooltip")}
         icon={SearchIcon}
         sx={{ borderTopLeftRadius: 'unset', borderBottomLeftRadius: 'unset' }}

diff --git a/src/components/Section.tsx b/src/components/Section.tsx
@@ -35,7 +35,6 @@ function Section(props: Props) {
     }).map(function (chapter: ChapterT) {
         return <Chapter key={chapter.title} data={chapter}></Chapter>
     })
-    let classes=`section-title section-${props.section.sorting}`;
     const root = document.documentElement;
     if(props.section.color_primary){
         root.style.setProperty('--color-primary', props.section.color_primary);
@@ -47,21 +46,25 @@ function Section(props: Props) {
     }
 
 
-    return <div className='content'>
+    return <section className='content'>
         <Helmet><title>{props.section['title']}</title></Helmet>
-        <div id="section-title" className={classes}>
+        <div id="section-title" className={`section-title section-${props.section.sorting} mb-2`}>
             <h1>
                 {props.section.icon && (<img className='icon' src={props.section.icon.url} alt="icon" />)}
                 {props.section['title']}
             </h1>
         </div>
-        <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            components={LinkComponent}
-        >{props.section.content ?? ''}</ReactMarkdown>
+        <div className='section-body rounded p-3 border color-bg-default'>
+            <div className='section-description'>
+                <ReactMarkdown
+                    remarkPlugins={[remarkGfm]}
+                    components={LinkComponent}
+                >{props.section.content ?? ''}
+                </ReactMarkdown>
+            </div>
+        </div>
         {chapters}
-    </div>
-
+    </section>
 }
 
 export default withTranslation()(Section)
diff --git a/src/components/SidebarNav.tsx b/src/components/SidebarNav.tsx
@@ -110,8 +110,8 @@ function SidebarNav(props: Props) {
 
     return (
         <div data-container="nav"
-            style={{minWidth: '261px'}}
-            className={cx(variant === 'full' ? 'position-sticky d-xxl-block d-lg-block d-none' : '')}
+            style={{minWidth: '261px', minHeight: 'var(--sticky-pane-height)'}}
+            className={cx(variant === 'full' ? 'position-sticky d-xxl-block d-lg-block d-none border-right height-full color-border-subtle' : '')}
         >
             <NavList>
                 <NavList.Item as={ReactRouterLink} to='/'

diff --git a/src/index.scss b/src/index.scss
@@ -13,6 +13,7 @@
 @import './styles/section.scss';
 @import './styles/chapter.scss';
 // @import './styles/nav.scss';
+@import './styles/header.scss';
 @import './styles/table.scss';
 @import './styles/search.scss';
 @import './styles/footer.scss';
@@ -29,12 +30,22 @@
   --line-height: 1.5;
 }
 
+#root > div > div > div {
+  max-width: unset;
+}
+
+#main-content {
+  max-width: 1280px;
+  margin: auto;
+}
 
 .content {
-  h1, h2, h3, h4, h5, h6 {
-    scroll-margin-top: 48px;
+  h1 {
+    scroll-margin-top: 128px;
+  }
+  h2, h3, h4, h5, h6 {
+    scroll-margin-top: 32px;
   }
-
   h1, h2, h3 {
     color: var(--color-primary);
   }
@@ -66,9 +77,3 @@
 .bg-secondary {
   background-color: var(--color-primary-light) !important;
 }
-
-
-// Force color override of the dialog header
-#sidebar-overlay-header *[color] {
-  color: var(--fgColor-default, var(--color-fg-default)) !important;
-}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -27,13 +27,23 @@ function HomePage(props: Props) {
       <title>{startPage.title}</title>
     </Helmet>
 
-    <h1>{startPage.title}</h1>
+    <div id="section-title" className="section-title section-1 mb-2">
+      <h1>{startPage.title}</h1>
+    </div>
 
-    <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            components={LinkComponent}
-        >{startPage.content}</ReactMarkdown>
+
+    <div className='section-body rounded p-3 border color-bg-default'>
+      <div className='section-description'>
+        <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                components={LinkComponent}
+            >{startPage.content}</ReactMarkdown>
+
+      </div>
+
+    </div>
 
   </div>
+
 }
 export default withTranslation()(HomePage)
diff --git a/src/styles/chapter.scss b/src/styles/chapter.scss
@@ -15,9 +15,9 @@
     }
   }
 
-  h2 {
-    margin-top: 16px;
-  }
+  // h2 {
+  //   margin-top: 16px;
+  // }
   h3 {
     margin-top: 8px;
   }

diff --git a/src/styles/header.scss b/src/styles/header.scss
@@ -0,0 +1,25 @@
+.AppHeader {
+    --AppHeader-bg: var(--bgColor-inset, var(--color-canvas-inset));
+    color: var(--fgColor-default, var(--color-fg-default));
+    background: var(--AppHeader-bg);
+    box-shadow: inset 0 calc(var(--borderWidth-thin, 1px)*-1) var(--color-border-default);
+    @media (prefers-color-scheme: dark) {
+        .AppHeader-button {
+            position: relative;
+            display: grid;
+            grid-auto-columns: max-content;
+            width: var(--base-size-32, 32px);
+            height: var(--base-size-32, 32px);
+            color: var(--fgColor-muted, var(--color-fg-muted));
+            background: transparent;
+              background-color: transparent;
+            border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+            border-radius: var(--borderRadius-medium, 6px);
+            align-items: center;
+            justify-content: center;
+            &:hover {
+                background: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));
+            }
+        }
+    }
+}
diff --git a/src/styles/quiz.scss b/src/styles/quiz.scss
@@ -3,7 +3,8 @@
 .quiz-container {
   display: block;
   padding: 10px;
-  @include default-style;
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important;
+  border-radius: var(--borderRadius-medium, 6px) !important;
 }
 
 .react-quiz-container {

diff --git a/src/styles/table.scss b/src/styles/table.scss
@@ -1,14 +1,13 @@
 .content {
   table {
-    border: 1px solid var(--color-primary-light);
-    border-radius: 6px;
+    box-shadow: inset 0px 0px 0px 1px var(--color-primary);
+    border-radius: var(--borderRadius-medium, 6px);
     border-collapse: unset;
-    border-spacing: unset;
     th:first-child {
-      border-radius: 6px 0 0 0;
+      border-radius: var(--borderRadius-medium, 6px) 0 0 0;
     }
     th:last-child {
-      border-radius: 0 6px 0 0;
+      border-radius: 0 var(--borderRadius-medium, 6px) 0 0;
     }
     td:first-child,
     th:first-child {
@@ -22,12 +21,19 @@
     }
     tbody {
       td, th {
-        border-left: 1px solid var(--color-primary-light);
-        border-top: 1px solid var(--color-primary-light);
+        box-shadow: inset 0px 0px 0px 0.5px var(--color-primary);
+      }
+      tr:hover {
+        background-color: var(--color-btn-hover-bg);
+      }
+      tr:last-child {
+        :first-child {
+          border-radius: 0 0 0 var(--borderRadius-medium, 6px);
+        }
+        :last-child {
+          border-radius: 0 0 var(--borderRadius-medium, 6px) 0;
+        }
       }
-    }
-    tr:hover {
-      background-color: var(--color-btn-hover-bg);
     }
   }
 }