Laravel blade directives and php helpers for serverside rendered content, based on browser window size WITHOUT css

Related tags

laravel-window-size
Overview

Laravel Window Size and Breakpoints

Laravel blade directives and php helpers for server side rendered content, based on browser window size WITHOUT css.

An example to show the purpose of this package:

<?php

if(windowXs()) {
 //execute a tiny Eloquent query and return a minimalistic view
}
if(window2xl()) {
 //execute a huge Eloquent query and return a gigantic view
}

Software License Travis Total Downloads

Requirements

  • php 8
  • Laravel 8
  • IE11 not supported, (but you can update the blade component yourself :).

Do you use Livewire?

There is a Livewire version of this package. Link >>>

Description

The main purpose of this package is not to avoid duplicated html, but to avoid unnecessary server side code execution, just to render content that will never be seen.

  • Vanilla JS syncs the browsers inner width and height, in realtime (debounced 750ms), when the browser window is resized.
  • The corresponding Laravel controller will store the values to the Laravel Session.
  • The package has a config/breakpoints file where you set your breakpoints
  • The package provides multiple @blade directives and Laravel helpers()
  • You have access to the browser window width/height via session('windowW') and session('windowH')
  • You can change the config dynamically with Laravel Config::set(...)
  • The route is throttling the request 15:1. (The route is: /update-laravel-window-size)

Important note

It's important to understand the difference between the server side rendered breakpoints, that this package provides, and css media queries.

When using css, the content of the page will update in realtime as the user resizes the window, whereas this package debounces a network request and updates the page on the next page request.

It's important that you place the <x-window-size::save-to-session /> at first point of contact with the user, for your application to look its best. I have it in my app.blade.php and on the login/register pages.

Installation

composer require tanthammar/laravel-window-size

Publish config

php artisan vendor:publish --tag=laravel-window-size

The default settings are based on TailwindCSS breakpoints

'window-width' => [
    // 0 = undefined|false
    // @windowXs (>= 1px && < Sm)
    'Sm' => 640, // => @windowSm (>= 640px && < Md)
    'Md' => 768, // => @windowMd (>= 768px && < Lg)
    'Lg' => 1024, // => @windowLg (>= 1024px && < Xl)
    'Xl' => 1280, // => @windowXl (>= 1280px && < 2xl)
    '2xl' => 1536, // => @window2xl (>= 1536px)
],

Add the component to your layout

  • Add this to all layouts where you want to keep track of the browser window size.
  • You will have access to the browser window width/height via session('windowW') and session('windowH')

Example: app.blade.php

<x-window-size::save-to-session />

Blade directives

@elsif..., @else..., @end..., @unless... and @endif works with all the directives. Explanation in Laravel docs.

//Browser width, with example values
@windowWidthLessThan(400)
@windowWidthGreaterThan(399)
@windowWidthBetween(400, 1500)

//Browser height, with example values
@windowHeightLessThan(500)
@windowHeightGreaterThan(499)
@windowHeightBetween(400, 900)

//Breakpoints based on config values
@windowXs()
@windowSm()
@windowMd()
@windowLg()
@windowXl()
@window2xl()

Example

@windowXs()
<div>This window is extra small</div>
@endif

@window2xl()
<div>This window is very large</div>
@endif

Helpers

Same name as Blade directives

//Browser width, with example values
windowWidthLessThan(400)
windowWidthGreaterThan(399)
windowWidthBetween(400, 1500)

//Browser height, with example values
windowHeightLessThan(500)
windowHeightGreaterThan(499)
windowHeightBetween(400, 900)

//Breakpoints based on config values
windowXs()
windowSm()
windowMd()
windowLg()
windowXl()
window2xl()

Example php

if(windowXs()) {
 //execute a tiny Eloquent query and return a minimalistic view
}
if(window2xl()) {
 //execute a huge Eloquent query and return a gigantic view
}

Blade directives test component

Add this to any blade view to test the blade directives

<x-window-size::test-windowsize />

💬 Let's connect

Credits

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

License

The MIT License (MIT). Please see License File for more information.

Releases(1.0.0)
Owner
Tina Hammar
Laravel packages
Tina Hammar
Please see the Diglactic fork.

Update: 18 October 2020 There is now an official fork of Laravel Breadcrumbs: https://github.com/diglactic/laravel-breadcrumbs Blog post: https://news

Dave James Miller 2.4k Jun 17, 2021
A package to easily make use of Iconic icons in your Laravel Blade views.

Blade Iconic A package to easily make use of Iconic icons in your Laravel Blade views. For a full list of available icons see the SVG directory. Iconi

Malik Alleyne-Jones 14 Jun 9, 2021
A package to easily make use of Simple Icons in your Laravel Blade views.

Blade Simple Icons A package to easily make use of Simple Icons in your Laravel Blade views. For a full list of available icons see the SVG directory.

UB Labs 6 Jun 8, 2021
Cache chunks of your Blade markup with ease. 🔪

Blade Cache Directive Cache chunks of your Blade markup with ease. Installation You can install the package via Composer: composer require ryangjchand

Ryan Chandler 48 Jun 14, 2021
Inertia.js Events for Laravel Dusk

Inertia.js Events for Laravel Dusk Requirements PHP 7.4+ Vue Laravel 8.0 and higher Support We proudly support the community by developing Laravel pac

Protone Media 9 Jun 14, 2021
Laravel Impersonate is a plugin that allows you to authenticate as your users.

Laravel Impersonate Laravel Impersonate makes it easy to authenticate as your users. Add a simple trait to your user model and impersonate as one of y

404lab 1.3k Jun 13, 2021
Generate and autoload custom Helpers, Builder Scope, Service class, Trait

laravel-make-extender Generate and autoload custom helpers, It can generate multilevel helpers in the context of the directory. Generate Service class

Limewell 22 Jun 10, 2021
A CommonMark wrapper for Laravel

Laravel Markdown Laravel Markdown was created by, and is maintained by Graham Campbell, and is a CommonMark wrapper for Laravel. It ships with integra

Graham Campbell 1.1k Jun 10, 2021
Awes.io // boilerplate based on Vue, Nuxt, TailwindCSS plus Laravel as a backend. 🤟

Platform for Interactive Business Applications 10x faster to create than the traditional way • 3x increase application experiences • 60% decrease in d

Awes.io 640 Jun 15, 2021
Laravel SEO - This is a simple and extensible package for improving SEO via meta tags, such as OpenGraph tags.

This is a simple and extensible package for improving SEO via meta tags, such as OpenGraph tags.

ARCHTECH 51 Jun 15, 2021
👀 Manage your views in Laravel projects through artisan

Artisan View This package adds a handful of view-related commands to Artisan in your Laravel project. Generate blade files that extend other views, sc

Sven Luijten 732 Jun 4, 2021
Laravel Video Chat using Socket.IO and WebRTC

Laravel Video Chat Laravel Video Chat using Socket.IO and WebRTC Installation composer require php-junior/laravel-video-chat Laravel 5.5 uses Package

Nyi Nyi Lwin 668 Jun 7, 2021
Laravel Stats Tracker

Laravel Stats Tracker Tracker gathers a lot of information from your requests to identify and store: Sessions Page Views (hits on routes) Users (logge

Antonio Carlos Ribeiro 2.6k Jun 13, 2021
Winbox.js wrapper in PHP.

Winbox PHP A wrapper for using Winbox.js just coding in PHP. Based on: JS Repo - https://github.com/nextapps-de/winbox Installation Clone the repo or

null 8 May 23, 2021