Update responsive breakpoints and migration stub examples

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
2025-12-28 06:52:39 +00:00
parent 61fec79af0
commit e1d4ea6592
4 changed files with 23 additions and 11 deletions

View File

@@ -6,7 +6,7 @@
*
* Two-tier system:
* Tier 1 (Semantic): is_mobile() / is_desktop() - broad categories
* Tier 2 (Granular): is_phone() / is_tablet() / is_desktop_sm() / is_desktop_md() / is_desktop_lg()
* Tier 2 (Granular): is_phone() / is_tablet() / is_desktop_sm() / is_desktop_md() / is_desktop_lg() / is_desktop_xl()
*
* Usage:
* if (Responsive.is_mobile()) { ... }
@@ -79,7 +79,7 @@ class Responsive {
}
/**
* Tier 2: Check if viewport is desktop-sm (1024 - 1699px)
* Tier 2: Check if viewport is desktop-sm (1024 - 1199px)
* @returns {boolean}
*/
static is_desktop_sm() {
@@ -88,7 +88,7 @@ class Responsive {
}
/**
* Tier 2: Check if viewport is desktop-md (1700 - 2199px)
* Tier 2: Check if viewport is desktop-md (1200 - 1639px)
* @returns {boolean}
*/
static is_desktop_md() {
@@ -97,10 +97,19 @@ class Responsive {
}
/**
* Tier 2: Check if viewport is desktop-lg (2200px+)
* Tier 2: Check if viewport is desktop-lg (1640 - 2199px)
* @returns {boolean}
*/
static is_desktop_lg() {
return this._viewport() >= this._get_breakpoint('desktop-lg');
const vp = this._viewport();
return vp >= this._get_breakpoint('desktop-lg') && vp < this._get_breakpoint('desktop-xl');
}
/**
* Tier 2: Check if viewport is desktop-xl (2200px+)
* @returns {boolean}
*/
static is_desktop_xl() {
return this._viewport() >= this._get_breakpoint('desktop-xl');
}
}

View File

@@ -436,11 +436,14 @@ RSX replaces Bootstrap breakpoints with semantic names. **Bootstrap defaults (co
|--------|-------|--------|-------|
| `mobile` | 0-1023px | `phone` | 0-799px |
| `desktop` | 1024px+ | `tablet` | 800-1023px |
| | | `desktop-sm/md/lg` | 1024+ |
| | | `desktop-sm` | 1024-1199px |
| | | `desktop-md` | 1200-1639px |
| | | `desktop-lg` | 1640-2199px |
| | | `desktop-xl` | 2200px+ |
**SCSS**: `@include mobile { }`, `@include desktop { }`, `@include phone { }`, etc.
**SCSS**: `@include mobile { }`, `@include desktop { }`, `@include phone { }`, `@include desktop-xl { }`, etc.
**Classes**: `.col-mobile-6`, `.d-desktop-none`, `.mobile-only`, `.hide-tablet`
**JS**: `Responsive.is_mobile()`, `Responsive.is_phone()`, `Responsive.is_desktop_sm()`, etc.
**JS**: `Responsive.is_mobile()`, `Responsive.is_phone()`, `Responsive.is_desktop_xl()`, etc.
Details: `php artisan rsx:man responsive`

View File

@@ -29,7 +29,7 @@ return new class extends Migration
// id BIGINT NOT NULL AUTO_INCREMENT PRIMARY KEY,
// name VARCHAR(255)
// )");
// DB::statement("ALTER TABLE users ADD COLUMN status VARCHAR(20) DEFAULT 'active'");
// DB::statement("ALTER TABLE users ADD COLUMN name VARCHAR(255) NOT NULL");
// DB::statement("UPDATE posts SET published = 1 WHERE created_at < '2024-01-01'");
}

View File

@@ -19,8 +19,8 @@ return new class extends Migration
public function up()
{
// Examples:
// DB::statement("ALTER TABLE {{ table }} ADD COLUMN status VARCHAR(20) DEFAULT 'active'");
// DB::statement("ALTER TABLE {{ table }} ADD INDEX idx_status (status)");
// DB::statement("ALTER TABLE {{ table }} ADD COLUMN name VARCHAR(255) NOT NULL");
// DB::statement("ALTER TABLE {{ table }} ADD INDEX idx_name (name)");
// DB::statement("UPDATE {{ table }} SET updated_at = NOW() WHERE updated_at IS NULL");
}