Skip to content

Add responsive Transformer Tabs sample page #1

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

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

Add responsive Transformer Tabs sample page #1

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
8 changes: 7 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,4 +108,10 @@ Library App is a console-based library management system implemented in C# using

## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
```
```

@coderabbitai coderabbitai Bot Mar 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Stray code fence causes markdown lint warning.

Line 111 contains an orphan triple-backtick that isn't opening or properly closing a code block. This triggers MD040 (fenced code blocks should have a language specified).

Review the intended structure—this fence appears misplaced and should likely be removed or properly paired with a preceding opening fence.

🔧 Proposed fix (remove stray fence) 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-```
+
 ## UI Sample
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
```
🧰 Tools
🪛 markdownlint-cli2 (0.22.0)

[warning] 111-111: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@README.md` at line 111, There is an orphan triple-backtick in the README
(stray ``` right before the "## UI Sample" heading) causing MD040; remove that
stray fence or pair it with its matching opening fence (or add a language to a
proper opening fence) so the code block is properly opened/closed and the
markdown lint warning is resolved.

## UI Sample
A standalone responsive "Transformer Tabs" demo based on the provided markup/CSS/JS is available at:

- `samples/transformer-tabs/index.html`

Open the file in a browser to interact with tab switching behavior on desktop and mobile breakpoints.
237 changes: 237 additions & 0 deletions samples/transformer-tabs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transformer Tabs</title>
<style>
:root {
color-scheme: dark;
}

body {
margin: 0;
padding: 1rem;
background: #333;
color: #fff;
font: 100%/1.4 sans-serif;
}

.tabs > div {
display: none;
padding: 1rem;
}

.tabs > div:nth-of-type(1) {
background: #9b59b6;
}

.tabs > div:nth-of-type(2) {
background: #3498db;
}

.tabs > div:nth-of-type(3) {
background: #e67e22;
}

.tabs > div:nth-of-type(4) {
background: #c0392b;
}

.tabs > .active {
display: block;
}

.transformer-tabs ul {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 3px solid #fff;
}

.transformer-tabs li {
display: inline-block;
vertical-align: bottom;
}

.transformer-tabs a {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 0.5rem;
}

.transformer-tabs li:nth-child(1) a.active {
color: #c39bd3;
border-bottom-color: #9b59b6;
}

.transformer-tabs li:nth-child(2) a.active {
color: #85c1e9;
border-bottom-color: #3498db;
}

.transformer-tabs li:nth-child(3) a.active {
color: #f0b27a;
border-bottom-color: #e67e22;
}

.transformer-tabs li:nth-child(4) a.active {
color: #e6b0aa;
border-bottom-color: #c0392b;
}

.transformer-tabs a.active {
border-bottom: 3px solid transparent;
position: relative;
bottom: -3px;
}

@media (max-width: 700px) {
.transformer-tabs ul {
border-bottom: 0;
overflow: hidden;
position: relative;
background: linear-gradient(#666, #222);
}

.transformer-tabs ul::after {
content: "☰";
position: absolute;
top: 8px;
right: 15px;
z-index: 2;
pointer-events: none;
}

.transformer-tabs ul.open a {
position: relative;
display: block;
}

.transformer-tabs li {
display: block;
}

.transformer-tabs a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.transformer-tabs a.active {
border: 0;
z-index: 1;
background: linear-gradient(#666, #222);
}
}
</style>
</head>
<body>
<div class="tabs">
<nav role="navigation" class="transformer-tabs">
<ul>
<li><a href="#tab-1">Important Tab</a></li>
<li><a href="#tab-2" class="active">Smurfvision</a></li>
<li><a href="#tab-3">Monster Truck Rally</a></li>
<li><a href="https://google.com">Go To Google →</a></li>
Comment on lines +136 to +139

@coderabbitai coderabbitai Bot Mar 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Orphan panel: #tab-4 has no navigation link.

The navigation contains links for #tab-1, #tab-2, and #tab-3, but #tab-4 exists as a panel (lines 158-161) without a corresponding tab link. Users cannot reach this panel through the UI.

Either add a tab link for #tab-4 or remove the orphan panel.

🔧 Proposed fix to add the missing tab link 
           <li><a href="#tab-2" class="active">Smurfvision</a></li>
           <li><a href="#tab-3">Monster Truck Rally</a></li>
+          <li><a href="#tab-4">Tab Four</a></li>
           <li><a href="https://google.com">Go To Google →</a></li>

Also applies to: 158-161

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@samples/transformer-tabs/index.html` around lines 136 - 139, The DOM contains
an orphan panel with id "tab-4" (panel markup referenced as `#tab-4`) but the
navigation list only links to "#tab-1", "#tab-2", and "#tab-3"; fix by either
adding a corresponding navigation link (e.g., add an <li><a
href="#tab-4">…</a></li> alongside the existing tab anchors) so users can access
the panel, or remove the `#tab-4` panel entirely if it’s not needed; ensure the
added anchor matches the panel id and follows the same active/ARIA conventions
used by the other tab anchors (e.g., same class usage and ordering).

</ul>
</nav>

<div id="tab-1">
<h2>Tab 1</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum non iure magnam dolores earum nemo quo tempora ab unde!
</div>

<div id="tab-2" class="active">
<h2>Tab 2</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur est natus esse minima nihil quidem tenetur alias pariatur.
</div>

<div id="tab-3">
<h2>Tab 3</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores numquam cupiditate aliquam quisquam repellendus fugit eaque asperiores.
</div>

<div id="tab-4">
<h2>Tab 4</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste officiis impedit ut culpa quaerat error pariatur voluptatum sapiente.
</div>
</div>

<script>
const Tabs = {
init() {
this.bindUIFunctions();
this.pageLoadCorrectTab();
},

bindUIFunctions() {
document.addEventListener("click", (event) => {
const link = event.target.closest(".transformer-tabs a");
if (!link) {
return;
}

const href = link.getAttribute("href") ?? "";
if (!href.startsWith("#")) {
return;
}

if (link.classList.contains("active")) {
this.toggleMobileMenu(link);
event.preventDefault();
return;
}

this.changeTab(href);
event.preventDefault();
});
},

changeTab(hash) {
if (!hash) {
return;
}

const anchor = document.querySelector(`.transformer-tabs a[href="${hash}"]`);
const panel = document.querySelector(hash);

if (!anchor || !panel) {
return;
}

anchor.classList.add("active");
anchor
.closest("li")
?.parentElement?.querySelectorAll("a")
.forEach((tabLink) => {
if (tabLink !== anchor) {
tabLink.classList.remove("active");
}
});

panel.parentElement?.querySelectorAll(":scope > div").forEach((tabPanel) => {
tabPanel.classList.toggle("active", tabPanel === panel);
});

anchor.closest("ul")?.classList.remove("open");
},

pageLoadCorrectTab() {
if (window.location.hash) {
this.changeTab(window.location.hash);
}
},

toggleMobileMenu(linkElement) {
linkElement.closest("ul")?.classList.toggle("open");
}
};

Tabs.init();
</script>
</body>
</html>