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.

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

Styling Update for Header and Footer Elements #2502

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

sultan
Copy link

@sultan sultan commented Aug 19, 2023

Summary of the changes (Less than 80 chars)

Enhanced header and footer styling for consistency and transparency fixes.

Description

This pull request brings important styling updates to the header and footer elements within the codebase, designed to enhance visual uniformity and user experience. The following changes have been enacted:

Header:

Introduced the sticky-sm-top class to establish a sticky header behavior during scrolling.
Adjusted the background color of the header to eliminate transparency issues and match the desired appearance.

Footer:

Harmonized the background color of the footer with the global body background color.
Refrained from transparency effects in the footer's styling.
Implemented a media query that triggers for screens wider than Bootstrap's small (576px) breakpoint. This ensures consistent behavior with other areas and queries utilizing Bootstrap's breakpoint system.

@deepchoudhery
Copy link
Member

Tagging @HaoK for content review.

@HaoK
Copy link
Member

HaoK commented Aug 22, 2023

I'm over in Azure land these days @deepchoudhery, @halter73 can review or redirect as appropriate

@HaoK HaoK requested review from halter73 and removed request for HaoK August 22, 2023 04:05
Copy link
Member

@halter73 halter73 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we get before and after screenshots of the headers and footers for Bootstrap 3, 4 and 5 with wide and narrow screen widths?

I'm not a CSS expert. Maybe @JeremyLikness @danroth27 @SteveSandersonMS and/or @javiercn might be better to review this.

html {
font-size: 14px;
}
@media (min-width: 768px) {

@media (min-width: 576px) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you reduce the min width?

Copy link
Author

@sultan sultan Aug 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because the layout uses bootstrap small size which is 576
if you want to use 768 here, the layout has to be changed to use large bootstrap breakpoints instead

white-space: normal;
text-align: center;
word-break: break-all;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did this move?

<nav class="navbar navbar-expand-sm navbar-light navbar-toggleable-sm bg-white border-bottom box-shadow mb-3">
<div class="container">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow mb-3">
<div class="container-fluid">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why use "container-fluid" here but not on line 48? Why use it at all? Is having fixed widths that bad?

position: relative;
min-height: 100%;
.header {
background-color: var(--bs-body-bg);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not inherit a background-color like before? Do we use var(--bs-body-bg) anywhere else? Is this available in Bootstrap3? Why are there no non-whitespace changes in the Bootstrap3 site.css?

.footer {
position: absolute;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why remove the position: absolute, width: 100, bottom: 0 for smaller width footers? Did you test on smaller screen sizes?

/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
line-height: 45px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's wrong with 60px? Why don't need the height: anymore?

@@ -19,8 +19,8 @@
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-light navbar-toggleable-sm bg-white border-bottom box-shadow mb-3">
<div class="container">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow mb-3">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's wrong with navbar-light and bg-white for the bar?

position: fixed;
bottom: 0;
width: 100%;
z-index: 9;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is z-index necessary? Because the footer is now fixed? Do we really want a fixed footer?

@sultan
Copy link
Author

sultan commented Aug 25, 2023

hey thanks for the review, this is still a work in progress !
i wish i would have had a review on the asp.net repo first, dotnet/aspnetcore#50130
well, any feedback is welcomed !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants