Skip to content

add maintenance banner #380

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

Merged
merged 1 commit into from
Oct 20, 2025
Merged

add maintenance banner #380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,7 @@ workflows:
only:
- dev
- TOP-2044_show-signin-modal
- maintenance

- deployProd:
context: org-global
Expand Down
43 changes: 43 additions & 0 deletions src/lib/components/Maintenance.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
@import 'lib/styles/fonts.scss';
Copy link

@github-actions github-actions bot Oct 20, 2025

Choose a reason for hiding this comment

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

[⚠️ maintainability]
Consider using a relative import path for fonts.scss to ensure compatibility across different environments and avoid potential issues with module resolution.


.bannerWrap {
position: relative;
height: 48px;
width: 100%;
}

.banner {
background: rgb(157, 27, 27);
color: #fff;
padding: 0.5rem;
display: flex;
justify-content: space-between;

&:before {
content: "";
display: block;
}
}

.bannerContent {
flex: 1 1 0;
display: flex;
justify-content: center;
align-items: center;
column-gap: 1rem;
row-gap: 0.5rem;
margin: 0 0.5rem;
min-width: 0;
flex-wrap: wrap;
}

.bannerText {
white-space: pre-wrap;
overflow-wrap: break-word;
font-family: $roboto;
Copy link

@github-actions github-actions bot Oct 20, 2025

Choose a reason for hiding this comment

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

[❗❗ correctness]
Ensure $roboto is defined in fonts.scss. If not, this could lead to a compilation error or unexpected font rendering.

font-size: 16px;
color: #fff;
line-height: 24px;
font-weight: bold;
}

12 changes: 12 additions & 0 deletions src/lib/components/Maintenance.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script lang="ts">
import styles from './Maintenance.module.scss';
const bannerName = 'maintenance';
</script>

<div class={styles.banner}>
<div class={styles.bannerContent}>
<div class={styles.bannerText}>
Topcoder will be undergoing maintenance on Tuesday, October 21, 2025 from 1 AM to 6 AM EST
Copy link

@github-actions github-actions bot Oct 20, 2025

Choose a reason for hiding this comment

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

[⚠️ maintainability]
Consider externalizing the maintenance message to a configuration file or environment variable to allow for easier updates without code changes.

</div>
</div>
</div>
2 changes: 2 additions & 0 deletions src/lib/marketing-navigation/MarketingNavigation.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
import { checkAndLoadFonts } from 'lib/utils/fonts';
import NavigationBar from './components/NavigationBar.svelte';
import UserArea from 'lib/components/user-area/UserArea.svelte';
import Maintenance from 'lib/components/Maintenance.svelte';
const ctx = getAppContext()
$: ({auth, navigationHandler} = $ctx)
Expand All @@ -35,6 +36,7 @@

<div class="tc-universal-nav-wrap">
<!-- <Banner /> -->
<Maintenance />
Copy link

@github-actions github-actions bot Oct 20, 2025

Choose a reason for hiding this comment

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

[⚠️ design]
Consider verifying that the Maintenance component is conditionally rendered based on a relevant state or prop. Rendering it unconditionally might not be appropriate if maintenance mode is not always active.

<NavigationBar
activeRoutePath={activeRoute}
activeRoute={primaryRoute}
Expand Down
2 changes: 2 additions & 0 deletions src/lib/tool-navigation/ToolNavigation.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
import type { NavMenuItem } from 'lib/functions/nav-menu-item.model';
import { useSessionStorage } from 'lib/utils/use-storage';
import { marketingRightItems } from 'lib/functions/marketing-navigation.provider'
import Maintenance from 'lib/components/Maintenance.svelte';
import styles from './ToolNavigation.module.scss';
import ToolNavSeparator from './tool-nav-separator/ToolNavSeparator.svelte';
Expand Down Expand Up @@ -48,6 +49,7 @@
onMount(checkAndLoadFonts)
</script>

<Maintenance />
Copy link

@github-actions github-actions bot Oct 20, 2025

Choose a reason for hiding this comment

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

[⚠️ design]
Consider verifying that the <Maintenance /> component does not interfere with the layout or functionality of the existing navigation elements. Ensure it is appropriately styled and positioned, especially on different screen sizes.

<TopNavbar class={classnames(styles.navbar, 'tc-universal-nav-wrap')} style="primary" minVersionLogo>
{#if $isMobile}
<MobileNavigation
Expand Down