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:
@@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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`
|
||||
|
||||
|
||||
@@ -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'");
|
||||
}
|
||||
|
||||
|
||||
@@ -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");
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user