Add phone-sm/phone-lg breakpoints and improve SCSS scope error message
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
@@ -346,23 +346,41 @@ class ScssClassScope_CodeQualityRule extends CodeQualityRule_Abstract
|
|||||||
*/
|
*/
|
||||||
private function build_no_match_suggestion(string $file, string $wrapper_class): string
|
private function build_no_match_suggestion(string $file, string $wrapper_class): string
|
||||||
{
|
{
|
||||||
|
// Convert wrapper class to a plausible BEM element name (lowercase with underscores)
|
||||||
|
$bem_element = strtolower($wrapper_class);
|
||||||
|
|
||||||
$lines = [];
|
$lines = [];
|
||||||
$lines[] = "The wrapper class '{$wrapper_class}' does not match any known";
|
$lines[] = "The wrapper class '{$wrapper_class}' does not match any known";
|
||||||
$lines[] = "action, layout, component, or Blade view.";
|
$lines[] = "action, layout, component, or Blade view.";
|
||||||
$lines[] = "";
|
$lines[] = "";
|
||||||
$lines[] = "VALID ASSOCIATIONS:";
|
$lines[] = "OPTION 1 - STANDALONE COMPONENT:";
|
||||||
$lines[] = " - Spa_Action class (e.g., Frontend_Dashboard extends Spa_Action)";
|
$lines[] = " If this is a reusable component, create the matching class:";
|
||||||
$lines[] = " - Spa_Layout class (e.g., Frontend_Layout extends Spa_Layout)";
|
$lines[] = " - Spa_Action: class {$wrapper_class} extends Spa_Action";
|
||||||
$lines[] = " - Component class (e.g., Sidebar_Nav extends Component)";
|
$lines[] = " - Spa_Layout: class {$wrapper_class} extends Spa_Layout";
|
||||||
$lines[] = " - Blade @rsx_id (e.g., @rsx_id('Login_Index'))";
|
$lines[] = " - Component: class {$wrapper_class} extends Component";
|
||||||
|
$lines[] = " - Blade view: @rsx_id('{$wrapper_class}')";
|
||||||
$lines[] = "";
|
$lines[] = "";
|
||||||
$lines[] = "TO FIX:";
|
$lines[] = "OPTION 2 - BEM CHILD ELEMENT (most common):";
|
||||||
$lines[] = " 1. Rename the wrapper class to match your action/layout/component/view";
|
$lines[] = " If this is part of a parent component (action, layout, or component),";
|
||||||
$lines[] = " 2. Or create the missing .js or .blade.php file with this class/id";
|
$lines[] = " use BEM naming in the PARENT's SCSS file instead of creating a";
|
||||||
|
$lines[] = " separate file:";
|
||||||
$lines[] = "";
|
$lines[] = "";
|
||||||
$lines[] = "NO EXEMPTIONS are allowed. If this file provides shared styles that";
|
$lines[] = " Parent: Frontend_Layout";
|
||||||
$lines[] = "cannot be scoped to a single element, it may need to be moved to";
|
$lines[] = " Element: {$bem_element}";
|
||||||
$lines[] = "rsx/theme/ (outside components/) - but this is rare and requires";
|
$lines[] = "";
|
||||||
|
$lines[] = " SCSS (in Frontend_Layout.scss):";
|
||||||
|
$lines[] = " .Frontend_Layout {";
|
||||||
|
$lines[] = " &__{$bem_element} { ... }";
|
||||||
|
$lines[] = " }";
|
||||||
|
$lines[] = "";
|
||||||
|
$lines[] = " HTML:";
|
||||||
|
$lines[] = " <nav class=\"Frontend_Layout__{$bem_element}\">";
|
||||||
|
$lines[] = "";
|
||||||
|
$lines[] = " Then DELETE this orphaned SCSS file.";
|
||||||
|
$lines[] = "";
|
||||||
|
$lines[] = "OPTION 3 - GLOBAL STYLES (rare):";
|
||||||
|
$lines[] = " If this provides truly shared styles that cannot be scoped to any";
|
||||||
|
$lines[] = " component, move to rsx/theme/ (outside components/). This requires";
|
||||||
$lines[] = " explicit developer approval.";
|
$lines[] = " explicit developer approval.";
|
||||||
$lines[] = "";
|
$lines[] = "";
|
||||||
$lines[] = "See: php artisan rsx:man scss";
|
$lines[] = "See: php artisan rsx:man scss";
|
||||||
|
|||||||
172
app/RSpade/upstream_changes/phone_breakpoints_12_30.txt
Executable file
172
app/RSpade/upstream_changes/phone_breakpoints_12_30.txt
Executable file
@@ -0,0 +1,172 @@
|
|||||||
|
PHONE-SM AND PHONE-LG BREAKPOINTS - MIGRATION GUIDE
|
||||||
|
Date: 2024-12-30
|
||||||
|
|
||||||
|
SUMMARY
|
||||||
|
New granular phone breakpoints added to the responsive system. The existing
|
||||||
|
`phone` breakpoint (0-799px) remains as a composite covering all phones,
|
||||||
|
similar to how `mobile` covers all non-desktop sizes. Two new breakpoints
|
||||||
|
provide finer control:
|
||||||
|
|
||||||
|
phone-sm 0 - 399px Small phones, compact screens
|
||||||
|
phone-lg 400 - 799px Large phones, phablets
|
||||||
|
|
||||||
|
This mirrors the desktop pattern where `desktop` is the composite and
|
||||||
|
`desktop-sm`, `desktop-md`, `desktop-lg`, `desktop-xl` provide granularity.
|
||||||
|
|
||||||
|
BREAKPOINT SUMMARY (UPDATED)
|
||||||
|
|
||||||
|
Tier 1 - Semantic:
|
||||||
|
mobile 0 - 1023px Phone + tablet combined
|
||||||
|
desktop 1024px+ All desktop sizes
|
||||||
|
|
||||||
|
Tier 2 - Granular:
|
||||||
|
phone 0 - 799px All phones (composite)
|
||||||
|
phone-sm 0 - 399px Small phones, compact screens
|
||||||
|
phone-lg 400 - 799px Large phones, phablets
|
||||||
|
tablet 800 - 1023px Tablets portrait
|
||||||
|
desktop-sm 1024 - 1199px Laptops, small monitors
|
||||||
|
desktop-md 1200 - 1639px Standard monitors (1080p)
|
||||||
|
desktop-lg 1640 - 2199px Large monitors (1440p)
|
||||||
|
desktop-xl 2200px+ Ultra-wide monitors, 4K
|
||||||
|
|
||||||
|
Breakpoints: 400, 800, 1024, 1200, 1640, 2200
|
||||||
|
|
||||||
|
AFFECTED FILES
|
||||||
|
|
||||||
|
Framework files (already updated):
|
||||||
|
rsx/theme/variables.scss New $bp-phone-lg variable, updated $grid-breakpoints
|
||||||
|
rsx/theme/responsive.scss New mixins: phone-sm, phone-lg, phone-lg-up
|
||||||
|
|
||||||
|
Application files requiring migration:
|
||||||
|
rsx/theme/variables.scss Add $bp-phone-lg, update $grid-breakpoints
|
||||||
|
rsx/theme/responsive.scss Add new mixins
|
||||||
|
|
||||||
|
CHANGES REQUIRED
|
||||||
|
|
||||||
|
1. Update variables.scss
|
||||||
|
-------------------------------------------------------------------------
|
||||||
|
Add the new breakpoint variable and update $grid-breakpoints.
|
||||||
|
|
||||||
|
Add after existing breakpoint comments:
|
||||||
|
|
||||||
|
$bp-phone-lg: 400px;
|
||||||
|
$bp-tablet: 800px;
|
||||||
|
$bp-desktop: 1024px;
|
||||||
|
$bp-desktop-md: 1200px;
|
||||||
|
$bp-desktop-lg: 1640px;
|
||||||
|
$bp-desktop-xl: 2200px;
|
||||||
|
|
||||||
|
Update $grid-breakpoints to include phone-sm and phone-lg:
|
||||||
|
|
||||||
|
$grid-breakpoints: (
|
||||||
|
xs: 0,
|
||||||
|
mobile: 0,
|
||||||
|
phone: 0,
|
||||||
|
phone-sm: 0,
|
||||||
|
phone-lg: 400px,
|
||||||
|
tablet: 800px,
|
||||||
|
desktop: 1024px,
|
||||||
|
desktop-sm: 1024px,
|
||||||
|
desktop-md: 1200px,
|
||||||
|
desktop-lg: 1640px,
|
||||||
|
desktop-xl: 2200px
|
||||||
|
);
|
||||||
|
|
||||||
|
2. Update responsive.scss
|
||||||
|
-------------------------------------------------------------------------
|
||||||
|
Add the new mixins after the existing @mixin phone definition:
|
||||||
|
|
||||||
|
@mixin phone-sm {
|
||||||
|
@media (max-width: #{$bp-phone-lg - 0.02px}) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin phone-lg {
|
||||||
|
@media (min-width: $bp-phone-lg) and (max-width: #{$bp-tablet - 0.02px}) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Add in the "and up" mixins section:
|
||||||
|
|
||||||
|
@mixin phone-lg-up {
|
||||||
|
@media (min-width: $bp-phone-lg) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Update CSS custom properties in :root:
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bp-phone-lg: #{$bp-phone-lg}; // 400px
|
||||||
|
--bp-tablet: #{$bp-tablet}; // 800px
|
||||||
|
--bp-desktop: #{$bp-desktop}; // 1024px
|
||||||
|
--bp-desktop-md: #{$bp-desktop-md}; // 1200px
|
||||||
|
--bp-desktop-lg: #{$bp-desktop-lg}; // 1640px
|
||||||
|
--bp-desktop-xl: #{$bp-desktop-xl}; // 2200px
|
||||||
|
}
|
||||||
|
|
||||||
|
NEW CLASSES AVAILABLE
|
||||||
|
|
||||||
|
Bootstrap utility classes are auto-generated from $grid-breakpoints:
|
||||||
|
|
||||||
|
.col-phone-sm-12 Full width on small phones
|
||||||
|
.col-phone-lg-6 Half width on large phones
|
||||||
|
.d-phone-sm-none Hide on small phones
|
||||||
|
.d-phone-lg-block Show as block on large phones
|
||||||
|
.p-phone-sm-2 Padding 2 on small phones
|
||||||
|
.m-phone-lg-3 Margin 3 on large phones
|
||||||
|
|
||||||
|
USAGE EXAMPLES
|
||||||
|
|
||||||
|
Different layouts for small vs large phones:
|
||||||
|
|
||||||
|
.my-component {
|
||||||
|
// Default (all sizes)
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
@include phone-sm {
|
||||||
|
// Compact layout for small phones
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include phone-lg {
|
||||||
|
// More spacious for larger phones
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Responsive grid with phone granularity:
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-phone-sm-12 col-phone-lg-6 col-tablet-4 col-desktop-3">
|
||||||
|
Card
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Hide element on small phones only:
|
||||||
|
|
||||||
|
<div class="d-phone-sm-none">
|
||||||
|
This content is hidden on small phones (< 400px)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
VERIFICATION
|
||||||
|
|
||||||
|
1. Compile bundles and verify no SCSS errors:
|
||||||
|
php artisan rsx:bundle:compile Frontend_Bundle
|
||||||
|
|
||||||
|
2. Test the new breakpoints:
|
||||||
|
- Resize browser to < 400px, verify phone-sm styles apply
|
||||||
|
- Resize browser to 400-799px, verify phone-lg styles apply
|
||||||
|
- Verify phone (composite) still works for 0-799px range
|
||||||
|
|
||||||
|
3. Test Bootstrap classes:
|
||||||
|
- Add class="col-phone-sm-12 col-phone-lg-6" to element
|
||||||
|
- Verify layout changes at 400px breakpoint
|
||||||
|
|
||||||
|
REFERENCE
|
||||||
|
|
||||||
|
php artisan rsx:man responsive - Full responsive system documentation
|
||||||
@@ -431,9 +431,9 @@ Pattern recognition:
|
|||||||
|
|
||||||
**Responsive breakpoints** (Bootstrap defaults do NOT work):
|
**Responsive breakpoints** (Bootstrap defaults do NOT work):
|
||||||
- Tier 1: `mobile` (0-1023px), `desktop` (1024px+)
|
- Tier 1: `mobile` (0-1023px), `desktop` (1024px+)
|
||||||
- Tier 2: `phone`, `tablet`, `desktop-sm`, `desktop-md`, `desktop-lg`, `desktop-xl`
|
- Tier 2: `phone`, `phone-sm`, `phone-lg`, `tablet`, `desktop-sm`, `desktop-md`, `desktop-lg`, `desktop-xl`
|
||||||
- SCSS: `@include mobile { }`, `@include desktop-xl { }`
|
- SCSS: `@include mobile { }`, `@include phone-sm { }`, `@include phone-lg { }`, `@include desktop-xl { }`
|
||||||
- Classes: `.col-mobile-12`, `.d-tablet-none`, `.mobile-only`
|
- Classes: `.col-mobile-12`, `.d-tablet-none`, `.mobile-only`, `.col-phone-sm-12`, `.col-phone-lg-6`
|
||||||
- Fifth-width columns: `.col-5ths`, `.col-mobile-5ths`, `.col-desktop-5ths`, etc.
|
- Fifth-width columns: `.col-5ths`, `.col-mobile-5ths`, `.col-desktop-5ths`, etc.
|
||||||
- JS: `Responsive.is_mobile()`, `Responsive.is_phone()`
|
- JS: `Responsive.is_mobile()`, `Responsive.is_phone()`
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user