Showcases by noderoutercom · Pull Request #111 · primefaces/sakai-ng

noderoutercom · 2026-02-10T05:10:38Z

No description provided.

- Introduced new SCSS files for layout structure including core, footer, main, menu, topbar, and typography. - Added responsive design rules for various screen sizes. - Implemented preloader styles for loading states. - Created utility classes for common styles and a clearfix mixin. - Defined global CSS variables for theming and styling consistency. - Integrated demo styles and code highlighting styles. - Added flag styles and responsive images for country flags. - Established a base layout structure with a sidebar and topbar for navigation.

Copilot

Pull request overview

This PR replaces the previous src/assets submodule with in-repo styling assets to support a “Showcases” UI, including Tailwind + PrimeUI integration, a full layout SCSS structure (core/layout/topbar/menu/responsive), and demo styling/assets (code blocks + flag sprites). It also updates package-lock.json accordingly.

Changes:

Add Tailwind + Tailwind PrimeUI imports and theme/breakpoint configuration.
Add a structured SCSS layout system (variables, mixins, core, topbar/menu/responsive utilities, etc.) plus demo styles.
Vendor demo flag sprite assets and update the npm lockfile after dependency/install changes.

Reviewed changes

Copilot reviewed 20 out of 22 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/assets/tailwind.css	Tailwind + PrimeUI Tailwind entrypoint and theme/breakpoint configuration.
src/assets/styles.scss	Global stylesheet aggregator wiring in Tailwind/layout/demo/PrimeIcons.
src/assets/layout/variables/_common.scss	Common CSS variables mapped to PrimeNG theme tokens.
src/assets/layout/variables/_light.scss	Light-mode CSS variable overrides.
src/assets/layout/variables/_dark.scss	Dark-mode CSS variable overrides tied to `.app-dark`.
src/assets/layout/layout.scss	Layout SCSS module entrypoint composing layout partials.
src/assets/layout/_mixins.scss	Shared focus-ring mixins.
src/assets/layout/_core.scss	Base html/body/link/layout wrapper styling.
src/assets/layout/_main.scss	Main container layout + global image sizing override.
src/assets/layout/_topbar.scss	Topbar layout + responsive menu styles.
src/assets/layout/_menu.scss	Sidebar/menu styling + submenu transitions.
src/assets/layout/_footer.scss	Footer layout styling.
src/assets/layout/_responsive.scss	Desktop/mobile responsive behavior for overlay/static/mobile layouts.
src/assets/layout/_utils.scss	Utility styles (clearfix, card, toast positioning).
src/assets/layout/_typography.scss	Headings/typography defaults and common elements.
src/assets/layout/_preloading.scss	Preloader overlay + keyframe animation.
src/assets/demo/demo.scss	Demo SCSS entrypoint composing code + flag styles.
src/assets/demo/code.scss	Code block styling for demos.
src/assets/demo/flags/flags.scss	Flag sprite CSS classes referencing the sprite sheet.
src/assets/demo/flags/flags_responsive.png	Flag sprite image asset.
src/assets	Removes the previous git submodule pointer for `src/assets`.
package-lock.json	Lockfile updated (notably many entries lose `"peer": true` and some nested dependency entries change).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-10T05:17:03Z

+                }
+
+                span {
+                    font-weight: medium;


font-weight: medium; is not a valid CSS font-weight value (valid keywords are normal/bold/bolder/lighter, or numeric 100–900). This will be ignored by the browser; use a numeric value (e.g. 500) if you want “medium” weight.

Suggested change

font-weight: medium;

font-weight: 500;

Copilot · 2026-02-10T05:17:04Z

+    .layout-topbar-action {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--text-color-secondary);
+        border-radius: 50%;
+        width: 2.5rem;
+        height: 2.5rem;
+        color: var(--text-color);
+        transition: background-color var(--element-transition-duration);


.layout-topbar-action sets color twice (--text-color-secondary then immediately --text-color), so the first declaration is dead code and may confuse future edits. Remove the unused value or split styles if different states are intended.

Copilot · 2026-02-10T05:17:04Z

+.clearfix:after {
+    content: ' ';
+    display: block;
+    clear: both;
+}


Use modern pseudo-element syntax (::after) instead of :after. While :after still works for backward compatibility, ::after is the standards-based form and avoids ambiguity with pseudo-classes.

Copilot · 2026-02-10T05:17:04Z

+.preloader-content:before, .preloader-content:after{
+    content: '';
+    border: 1em solid var(--primary-color);
+    border-radius: 50%;
+    width: inherit;
+    height: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: loader 2s linear infinite;
+    opacity: 0;
+}
+
+.preloader-content:before{
+    animation-delay: 0.5s;


Consider using ::before/::after (instead of :before/:after) and adding spacing/newlines between selectors to match modern CSS conventions and improve readability.

Copilot · 2026-02-10T05:17:04Z

+@use './tailwind.css';
+@use './layout/layout.scss';
+@use 'primeicons/primeicons.css';


These @use statements point at plain .css files (./tailwind.css and primeicons/primeicons.css). In Sass, @use is for Sass modules; importing CSS this way commonly fails to compile. Prefer including these CSS files via the Angular styles array, switching to a Sass-supported CSS import approach (e.g. sass:meta’s CSS loader), or converting the imported file to .scss if it’s intended to be a module. Also, avoid pulling tailwind.css in twice if it’s already listed separately in the build styles.

Suggested change

@use './tailwind.css';

@use './layout/layout.scss';

@use 'primeicons/primeicons.css';

@import './tailwind.css';

@use './layout/layout.scss';

@import 'primeicons/primeicons.css';

Copilot · 2026-02-10T05:17:05Z

+        margin: 0;
+        line-height: 1.5;
+        display: block;
+        font-weight: semibold;


font-weight: semibold; is not a valid CSS font-weight value, so this rule will be ignored. Use a numeric weight (e.g. 600) or a valid keyword (e.g. bold) depending on the desired appearance.

Suggested change

font-weight: semibold;

font-weight: 600;

Copilot · 2026-02-10T05:17:05Z

+img {
+    max-width: none !important;


This applies img { max-width: none !important; } globally, which will override Tailwind/PrimeNG defaults and can easily cause images to overflow containers and break responsive layouts. Consider scoping this rule to the specific component/container that needs it, or removing the !important so layout utilities can still control image sizing.

Suggested change

img {

max-width: none !important;

.layout-main img {

max-width: none;

Copilot · 2026-02-10T05:17:05Z

+@use 'mixins' as *;
+


This file uses @use 'mixins' as *; while the rest of the layout SCSS uses explicit relative @use './...' imports. Using a bare specifier relies on Sass load-path resolution and may break depending on the build configuration; consider changing it to a relative import (e.g. @use './mixins' as *;) for consistency and robustness.

Copilot · 2026-02-10T05:17:05Z

+@use 'mixins' as *;
+


This file uses @use 'mixins' as *; while other layout SCSS modules use relative @use './...' imports. To avoid relying on implicit load paths (which can differ between toolchains) and to match the local convention, use a relative import path (e.g. @use './mixins' as *;).

…e menu structure

…and presets

…c rendering

…L configuration

…ock types and props

noderoutercom added 2 commits February 10, 2026 12:05

fix: remove unnecessary peer dependencies from package-lock.json

e0c0c6d

Copilot AI review requested due to automatic review settings February 10, 2026 05:10

Copilot started reviewing on behalf of noderoutercom February 10, 2026 05:11 View session

Copilot AI reviewed Feb 10, 2026

View reviewed changes

noderoutercom added 8 commits February 10, 2026 14:17

feat: add layout showcase component and update routing and menu

8998d80

feat: add configuration center with YAML/JSON import/export and updat…

8b7e986

…e menu structure

feat: implement theme configuration with dark mode, color selection, …

b5eef81

…and presets

feat: add layout builder component with YAML configuration and dynami…

39107f3

…c rendering

feat: add route for layout builder and update menu link

d1c06ca

feat: integrate CodeMirror for YAML editing with dark mode support

9b2ab94

feat: enhance layout builder with component defaults and improved YAM…

2664c89

…L configuration

feat: add YAML component guide dialog with accordion for supported bl…

e6821fc

…ock types and props

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Showcases#111

Showcases#111
noderoutercom wants to merge 10 commits into
primefaces:masterfrom
noderoutercom:showcases

noderoutercom commented Feb 10, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-img {
-    max-width: none !important;
+.layout-main img {
+    max-width: none;

Conversation

noderoutercom commented Feb 10, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants