Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix tabbing in header (reapplies #346 as breaking) #374

Merged
merged 5 commits into from
Jun 21, 2024
Merged

Fix tabbing in header (reapplies #346 as breaking) #374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
375d56d
Fix tabbing in header
sneridagh Mar 25, 2024
d199191
docs
sneridagh Mar 25, 2024
040a838
Merge branch 'main' into fixtabbing-breaking
sneridagh Mar 25, 2024
04ebf02
Merge branch 'main' into fixtabbing-breaking
iRohitSingh May 10, 2024
7b51bf9
Merge branch 'main' into fixtabbing-breaking
sneridagh Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/volto-light-theme/news/374.breaking
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Fix tabbing order in the top header. It modifies the underlying HTML to move the top header to the bottom, and modifies CSS to adjust. @iRohitSingh @sneridagh
24 changes: 12 additions & 12 deletions packages/volto-light-theme/src/components/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,6 @@ const InternetHeader = ({ pathname, siteLabel, token, siteAction }) => {
return (
<>
<div className="header">
<div className="logo-nav-wrapper">
<div className="logo">
<Logo />
</div>
<Navigation pathname={pathname} />
<MobileNavigation pathname={pathname} />
<div className="search-wrapper navigation-desktop">
<div className="search">
<SearchWidget />
</div>
</div>
</div>
<div className="tools-wrapper">
<LanguageSelector />

Expand All @@ -58,6 +46,18 @@ const InternetHeader = ({ pathname, siteLabel, token, siteAction }) => {
</div>
)}
</div>
<div className="logo-nav-wrapper">
<div className="logo">
<Logo />
</div>
<Navigation pathname={pathname} />
<MobileNavigation pathname={pathname} />
<div className="search-wrapper navigation-desktop">
<div className="search">
<SearchWidget />
</div>
</div>
</div>
</div>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/volto-light-theme/src/theme/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.header-wrapper .header {
display: flex;
flex-direction: column-reverse;
flex-direction: column;

.logo-nav-wrapper {
display: flex;
Expand Down