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,24 +346,42 @@ class ScssClassScope_CodeQualityRule extends CodeQualityRule_Abstract
|
||||
*/
|
||||
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[] = "The wrapper class '{$wrapper_class}' does not match any known";
|
||||
$lines[] = "action, layout, component, or Blade view.";
|
||||
$lines[] = "";
|
||||
$lines[] = "VALID ASSOCIATIONS:";
|
||||
$lines[] = " - Spa_Action class (e.g., Frontend_Dashboard extends Spa_Action)";
|
||||
$lines[] = " - Spa_Layout class (e.g., Frontend_Layout extends Spa_Layout)";
|
||||
$lines[] = " - Component class (e.g., Sidebar_Nav extends Component)";
|
||||
$lines[] = " - Blade @rsx_id (e.g., @rsx_id('Login_Index'))";
|
||||
$lines[] = "OPTION 1 - STANDALONE COMPONENT:";
|
||||
$lines[] = " If this is a reusable component, create the matching class:";
|
||||
$lines[] = " - Spa_Action: class {$wrapper_class} extends Spa_Action";
|
||||
$lines[] = " - Spa_Layout: class {$wrapper_class} extends Spa_Layout";
|
||||
$lines[] = " - Component: class {$wrapper_class} extends Component";
|
||||
$lines[] = " - Blade view: @rsx_id('{$wrapper_class}')";
|
||||
$lines[] = "";
|
||||
$lines[] = "TO FIX:";
|
||||
$lines[] = " 1. Rename the wrapper class to match your action/layout/component/view";
|
||||
$lines[] = " 2. Or create the missing .js or .blade.php file with this class/id";
|
||||
$lines[] = "OPTION 2 - BEM CHILD ELEMENT (most common):";
|
||||
$lines[] = " If this is part of a parent component (action, layout, or component),";
|
||||
$lines[] = " use BEM naming in the PARENT's SCSS file instead of creating a";
|
||||
$lines[] = " separate file:";
|
||||
$lines[] = "";
|
||||
$lines[] = "NO EXEMPTIONS are allowed. If this file provides shared styles that";
|
||||
$lines[] = "cannot be scoped to a single element, it may need to be moved to";
|
||||
$lines[] = "rsx/theme/ (outside components/) - but this is rare and requires";
|
||||
$lines[] = "explicit developer approval.";
|
||||
$lines[] = " Parent: Frontend_Layout";
|
||||
$lines[] = " Element: {$bem_element}";
|
||||
$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[] = "";
|
||||
$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):
|
||||
- Tier 1: `mobile` (0-1023px), `desktop` (1024px+)
|
||||
- Tier 2: `phone`, `tablet`, `desktop-sm`, `desktop-md`, `desktop-lg`, `desktop-xl`
|
||||
- SCSS: `@include mobile { }`, `@include desktop-xl { }`
|
||||
- Classes: `.col-mobile-12`, `.d-tablet-none`, `.mobile-only`
|
||||
- Tier 2: `phone`, `phone-sm`, `phone-lg`, `tablet`, `desktop-sm`, `desktop-md`, `desktop-lg`, `desktop-xl`
|
||||
- SCSS: `@include mobile { }`, `@include phone-sm { }`, `@include phone-lg { }`, `@include desktop-xl { }`
|
||||
- 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.
|
||||
- JS: `Responsive.is_mobile()`, `Responsive.is_phone()`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user