brianhansonxyz/rspade_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update responsive breakpoints and migration stub examples

Browse Source 
🤖 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
Download Patch File Download Diff File Expand all files Collapse all files

19
app/RSpade/Core/Js/Responsive.js
View File

@@ -6,7 +6,7 @@
* *
* Two-tier system: * Two-tier system:
* Tier 1 (Semantic): is_mobile() / is_desktop() - broad categories * 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: * Usage:
* if (Responsive.is_mobile()) { ... } * 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} * @returns {boolean}
*/ */
static is_desktop_sm() { 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} * @returns {boolean}
*/ */
static is_desktop_md() { 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} * @returns {boolean}
*/ */
static is_desktop_lg() { 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');
} }
} }

9
docs/CLAUDE.dist.md
View File

@@ -436,11 +436,14 @@ RSX replaces Bootstrap breakpoints with semantic names. **Bootstrap defaults (co
|--------|-------|--------|-------| |--------|-------|--------|-------|
| `mobile` | 0-1023px | `phone` | 0-799px | | `mobile` | 0-1023px | `phone` | 0-799px |
| `desktop` | 1024px+ | `tablet` | 800-1023px | | `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` **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` Details: `php artisan rsx:man responsive`

2
stubs/migration.stub
View File

@@ -29,7 +29,7 @@ return new class extends Migration
// id BIGINT NOT NULL AUTO_INCREMENT PRIMARY KEY, // id BIGINT NOT NULL AUTO_INCREMENT PRIMARY KEY,
// name VARCHAR(255) // 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'"); // DB::statement("UPDATE posts SET published = 1 WHERE created_at < '2024-01-01'");
} }

4
stubs/migration.update.stub
View File

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