Merge pull request #780 from dennis531/nav-flex

Prevent overflow by using flexbox in header nav bar
opencast · Jul 2, 2024 · 6a81af8 · 6a81af8
2 parents bb604fd + 599a5cd
commit 6a81af8
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 72 deletions.
diff --git a/src/components/configuration/Themes.tsx b/src/components/configuration/Themes.tsx
@@ -87,16 +87,6 @@ const Themes = ({
 		<>
 			<Header />
 			<NavBar>
-				{/* Add theme button */}
-				<div className="btn-group">
-					{hasAccess("ROLE_UI_THEMES_CREATE", user) && (
-						<button className="add" onClick={() => showNewThemesModal()}>
-							<i className="fa fa-plus" />
-							<span>{t("CONFIGURATION.ACTIONS.ADD_THEME")}</span>
-						</button>
-					)}
-				</div>
-
 				{/* Display modal for new series if add series button is clicked */}
 				<NewResourceModal
 					showModal={displayNewThemesModal}
@@ -118,6 +108,16 @@ const Themes = ({
 						</Link>
 					)}
 				</nav>
+
+				{/* Add theme button */}
+				<div className="btn-group">
+					{hasAccess("ROLE_UI_THEMES_CREATE", user) && (
+						<button className="add" onClick={() => showNewThemesModal()}>
+							<i className="fa fa-plus" />
+							<span>{t("CONFIGURATION.ACTIONS.ADD_THEME")}</span>
+						</button>
+					)}
+				</div>
 			</NavBar>
 
 			<MainView open={displayNavigation}>

diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
@@ -195,15 +195,6 @@ const Events = ({
 		<>
 			<Header />
 			<NavBar>
-				<div className="btn-group">
-					{hasAccess("ROLE_UI_EVENTS_CREATE", user) && (
-						<button className="add" onClick={() => showNewEventModal()}>
-							<i className="fa fa-plus" />
-							<span>{t("EVENTS.EVENTS.ADD_EVENT")}</span>
-						</button>
-					)}
-				</div>
-
 				{
 					/* Display modal for new event if add event button is clicked */
 					!isFetchingAssetUploadOptions && (
@@ -258,6 +249,15 @@ const Events = ({
 						<Stats />
 					</div>
 				)}
+
+				<div className="btn-group">
+					{hasAccess("ROLE_UI_EVENTS_CREATE", user) && (
+						<button className="add" onClick={() => showNewEventModal()}>
+							<i className="fa fa-plus" />
+							<span>{t("EVENTS.EVENTS.ADD_EVENT")}</span>
+						</button>
+					)}
+				</div>
 			</NavBar>
 
 			<MainView open={displayNavigation}>

diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx
@@ -163,15 +163,6 @@ const Series = ({
 		<>
 			<Header />
 			<NavBar>
-				<div className="btn-group">
-					{hasAccess("ROLE_UI_SERIES_CREATE", user) && (
-						<button className="add" onClick={() => showNewSeriesModal()}>
-							<i className="fa fa-plus" />
-							<span>{t("EVENTS.EVENTS.ADD_SERIES")}</span>
-						</button>
-					)}
-				</div>
-
 				{/* Display modal for new series if add series button is clicked */}
 				<NewResourceModal
 					showModal={displayNewSeriesModal}
@@ -206,6 +197,15 @@ const Series = ({
 						</Link>
 					)}
 				</nav>
+
+				<div className="btn-group">
+					{hasAccess("ROLE_UI_SERIES_CREATE", user) && (
+						<button className="add" onClick={() => showNewSeriesModal()}>
+							<i className="fa fa-plus" />
+							<span>{t("EVENTS.EVENTS.ADD_SERIES")}</span>
+						</button>
+					)}
+				</div>
 			</NavBar>
 
 			<MainView open={displayNavigation}>

diff --git a/src/components/users/Acls.tsx b/src/components/users/Acls.tsx
@@ -105,16 +105,6 @@ const Acls: React.FC = () => {
 		<>
 			<Header />
 			<NavBar>
-				{/* Add acl button */}
-				<div className="btn-group">
-					{hasAccess("ROLE_UI_ACLS_CREATE", user) && (
-						<button className="add" onClick={() => showNewAclModal()}>
-							<i className="fa fa-plus" />
-							<span>{t("USERS.ACTIONS.ADD_ACL")}</span>
-						</button>
-					)}
-				</div>
-
 				{/* Display modal for new acl if add acl button is clicked */}
 				<NewResourceModal
 					showModal={displayNewAclModal}
@@ -154,6 +144,16 @@ const Acls: React.FC = () => {
 						</Link>
 					)}
 				</nav>
+
+				{/* Add acl button */}
+				<div className="btn-group">
+					{hasAccess("ROLE_UI_ACLS_CREATE", user) && (
+						<button className="add" onClick={() => showNewAclModal()}>
+							<i className="fa fa-plus" />
+							<span>{t("USERS.ACTIONS.ADD_ACL")}</span>
+						</button>
+					)}
+				</div>
 			</NavBar>
 
 			<MainView open={displayNavigation}>

diff --git a/src/components/users/Groups.tsx b/src/components/users/Groups.tsx
@@ -120,16 +120,6 @@ const Groups = ({
 		<>
 			<Header />
 			<NavBar>
-				{/* Add group button */}
-				<div className="btn-group">
-					{hasAccess("ROLE_UI_GROUPS_CREATE", user) && (
-						<button className="add" onClick={() => showNewGroupModal()}>
-							<i className="fa fa-plus" />
-							<span>{t("USERS.ACTIONS.ADD_GROUP")}</span>
-						</button>
-					)}
-				</div>
-
 				{/* Display modal for new acl if add acl button is clicked */}
 				<NewResourceModal
 					showModal={displayNewGroupModal}
@@ -169,6 +159,16 @@ const Groups = ({
 						</Link>
 					)}
 				</nav>
+
+				{/* Add group button */}
+				<div className="btn-group">
+					{hasAccess("ROLE_UI_GROUPS_CREATE", user) && (
+						<button className="add" onClick={() => showNewGroupModal()}>
+							<i className="fa fa-plus" />
+							<span>{t("USERS.ACTIONS.ADD_GROUP")}</span>
+						</button>
+					)}
+				</div>
 			</NavBar>
 
 			<MainView open={displayNavigation}>

diff --git a/src/components/users/Users.tsx b/src/components/users/Users.tsx
@@ -110,16 +110,6 @@ const Users: React.FC = () => {
 		<>
 			<Header />
 			<NavBar>
-				{/* Add user button */}
-				<div className="btn-group">
-					{hasAccess("ROLE_UI_USERS_CREATE", user) && (
-						<button className="add" onClick={() => showNewUserModal()}>
-							<i className="fa fa-plus" />
-							<span>{t("USERS.ACTIONS.ADD_USER")}</span>
-						</button>
-					)}
-				</div>
-
 				{/* Display modal for new acl if add acl button is clicked */}
 				<NewResourceModal
 					showModal={displayNewUserModal}
@@ -159,6 +149,16 @@ const Users: React.FC = () => {
 						</Link>
 					)}
 				</nav>
+
+				{/* Add user button */}
+				<div className="btn-group">
+					{hasAccess("ROLE_UI_USERS_CREATE", user) && (
+						<button className="add" onClick={() => showNewUserModal()}>
+							<i className="fa fa-plus" />
+							<span>{t("USERS.ACTIONS.ADD_USER")}</span>
+						</button>
+					)}
+				</div>
 			</NavBar>
 
 			<MainView open={displayNavigation}>

diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss
@@ -174,14 +174,15 @@
 .action-nav-bar {
     $height: 80px;
     width: 100%;
-    height: $height;
-    position: relative;
+    min-height: $height;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
     background: $d-blue;
 
     .btn-group {
-         float: right;
          margin-right: $side-margin;
-         margin-top: 18px;
+         align-self: center;
 
         // btn specific styles
         .add {
@@ -250,9 +251,8 @@
         @include border-top-radius(4px);
         border: $thin-border-stroke darken(#1e364b, 3%);
         border-bottom: none;
-        position: absolute;
-        top: 36px;
-        left: $side-margin;
+        margin: 0 $side-margin;
+        position: relative;
 
         > button {
             width: 100%;
@@ -268,16 +268,15 @@
 
     // Subpage Navigation
     nav {
-        position: absolute;
-        top: 50px;
-        left: 120px;
+        flex-grow: 1;
 
         a {
             display: inline-block;
             color: $subpage-navigation-link-color;
             text-align: center;
             position: relative;
             padding: 0 20px;
+            margin-bottom: 16px;
 
             &:hover {
                 color: $subpage-navigation-link-hover-color;

diff --git a/src/styles/components/_stats.scss b/src/styles/components/_stats.scss
@@ -21,17 +21,15 @@
 @use "sass:math";
 
 .stats-container {
-  text-align: right;
+  align-self: center;
 
   .col {
     $num-cols: 8;
 
     box-sizing: border-box;
     display: inline-block;
     vertical-align: top;
-    min-width: math.div(40%, $num-cols);
-    margin-bottom: 20px;
-    margin-top: 12px;
+    min-width: 80px;
     padding: 0 5px;
 
     &:last-child{