fix: attempt to reorg our topbar

- also squeeze filters as we pushed way too many in
freiheit-com · Aug 23, 2024 · 60278a6 · 60278a6
1 parent ec30b55
commit 60278a6
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 25 deletions.
diff --git a/services/frontend-service/src/assets/_variables.scss b/services/frontend-service/src/assets/_variables.scss
@@ -41,7 +41,7 @@ $sidebar-transition-duration-large-screen: 0.4s;
 
 // Top App Bar
 $top-app-bar-padding: 0.5em 0 0.5em $nav-bar-width; // 0.5em on top and bottom each
-$top-app-bar-height: 5em; // 5em = 80px
+$top-app-bar-height: 10em;
 $top-app-bar-section-gap: 61px;
 // Logo
 // 4em = 64px - Logo_width(40px) = 24px / 2 = 12px

diff --git a/services/frontend-service/src/ui/components/SideBar/SideBar.tsx b/services/frontend-service/src/ui/components/SideBar/SideBar.tsx
@@ -553,6 +553,7 @@ export const SideBar: React.FC<{ className?: string }> = (props) => {
 
     return (
         <aside className={className}>
+            <strong className="sub-headline1">Planned Actions</strong>
             <nav className="mdc-drawer-sidebar mdc-drawer__drawer sidebar-content">
                 <nav className="mdc-drawer-sidebar mdc-drawer-sidebar-content">
                     <div className="mdc-drawer-sidebar mdc-drawer-sidebar-list">

diff --git a/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.scss b/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.scss
@@ -22,24 +22,35 @@ Copyright freiheit.com*/
     padding: $top-app-bar-padding;
     position: fixed;
     width: 100%;
+    max-height: $top-app-bar-height;
     z-index: 4;
 
-    .mdc-top-app-bar__row {
+    .top-app-bar__sidebarrow {
         display: flex;
+        flex-flow: row;
+
+        .top-app-bar__mainsection {
+            max-width: calc(100vw - 20em - 100px);
+        }
 
-        .mdc-top-app-bar__section--align-end {
-            padding-right: 0;
-            justify-content: flex-end;
+        .top-app-bar__sidebarsection {
+            width: 20em;
         }
+    }
+    .mdc-top-app-bar__row {
+        display: flex;
+        flex-flow: wrap;
+        align-items: stretch;
+
         .top-app-bar-search-field {
             width: 100%;
             height: 100%;
         }
         .top-app-bar--wide-filter {
-            flex-basis: 400px;
+            flex-basis: 300px;
         }
         .top-app-bar--narrow-filter {
-            flex-basis: 300px;
+            flex-basis: 150px;
             flex-grow: 0.01;
         }
     }

diff --git a/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.tsx b/services/frontend-service/src/ui/components/TopAppBar/TopAppBar.tsx
@@ -112,29 +112,32 @@ export const TopAppBar: React.FC<TopAppBarProps> = (props) => {
             <div className="mdc-top-app-bar__section top-app-bar--narrow-filter"></div>
         );
     const renderedUser = cookieValue ? (
-        <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
+        <div className="mdc-top-app-bar__section mdc-top-app-bar__section--wide-filter">
             <span className="welcome-message">
                 Welcome, <strong>{loggedInUser}!</strong>
             </span>
         </div>
     ) : (
-        <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"></div>
+        <div className="mdc-top-app-bar__section mdc-top-app-bar__section--wide-filter"></div>
     );
     return (
         <div className="mdc-top-app-bar">
-            <div className="mdc-top-app-bar__row">
-                <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-                    <span className="mdc-top-app-bar__title">
-                        Kuberpult <KuberpultGitHubLink version={version} />
-                    </span>
+            <div className="top-app-bar__sidebarrow">
+                <div className="top-app-bar__mainsection">
+                    <div className="mdc-top-app-bar__row">
+                        <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+                            <span className="mdc-top-app-bar__title">
+                                Kuberpult <KuberpultGitHubLink version={version} />
+                            </span>
+                        </div>
+                        {renderedAppFilter}
+                        {renderedTeamsFilter}
+                        {renderedWarningsFilter}
+                        {renderedWarnings}
+                        {renderedUser}
+                    </div>
                 </div>
-                {renderedAppFilter}
-                {renderedTeamsFilter}
-                {renderedWarningsFilter}
-                {renderedWarnings}
-                {renderedUser}
-                <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
-                    <strong className="sub-headline1">Planned Actions</strong>
+                <div className="top-app-bar__sidebarsection">
                     <SideBar
                         className={classNames(
                             `mdc-drawer-sidebar mdc-drawer-sidebar-container`,

diff --git a/services/frontend-service/src/ui/components/dropdown/dropdown.scss b/services/frontend-service/src/ui/components/dropdown/dropdown.scss
@@ -55,19 +55,28 @@ div.mdc-select {
 }
 
 .dropdown-arrow-container {
-    position: relative;
+    display: flex;
+    flex-flow: row-reverse;
+    height: 100%;
     .dropdown-arrow {
         position: absolute;
         right: 10px;
-        top: 10px;
+        top: 20px;
         font-size: xx-large;
         pointer-events: none;
     }
 }
+.dropdown-container{
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: stretch;
+    height: 100%;
+}
 
 .dropdown-input {
-    height: 50px;
-    border-radius: $border-radius-small;
+    height: 70px;
+    border-radius: $border-radius-medium;
     border: 1px solid blue;
     padding-left: 1em;
 }