mkrieger/byos_laravel
1
0
Fork 0
mirror of https://github.com/usetrmnl/byos_laravel.git synced 2026-03-14 20:33:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(#149): add css_name and css_variables to DeviceModel and update related views

Browse source
This commit is contained in:
Benjamin Nussbaum 2026-02-17 21:10:54 +01:00
parent 89a2edfcbb
commit d884ac0a58
15 changed files with 285 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

21
resources/views/vendor/trmnl/components/screen.blade.php vendored
View file

@ -1,19 +1,13 @@
@props([
'noBleed' => false,
'darkMode' => false,
'deviceVariant' => 'og',
'deviceVariant' => 'ogv2',
'deviceOrientation' => null,
'colorDepth' => '1bit',
'scaleLevel' => null,
'cssVariables' => null,
])
@php
// HOTFIX Github Issue https://github.com/usetrmnl/byos_laravel/issues/190
if ($colorDepth == '2bit'){
$deviceVariant = 'ogv2';
}
@endphp
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
@ -33,9 +27,18 @@ if ($colorDepth == '2bit'){
<script src="{{ config('services.trmnl.base_url') }}/js/{{ config('trmnl-blade.framework_js_version') ?? config('trmnl-blade.framework_version', '2.1.0') }}/plugins.js"></script>
@endif
<title>{{ $title ?? config('app.name') }}</title>
@if(config('app.puppeteer_window_size_strategy') === 'v2' && !empty($cssVariables) && is_array($cssVariables))
<style>
:root {
@foreach($cssVariables as $name => $value)
{{ $name }}: {{ $value }};
@endforeach
}
</style>
@endif
</head>
<body class="environment trmnl">
<div class="screen {{$noBleed ? 'screen--no-bleed' : ''}} {{ $darkMode ? 'dark-mode' : '' }} {{$deviceVariant ? 'screen--' . $deviceVariant : ''}} {{ $deviceOrientation ? 'screen--' . $deviceOrientation : ''}} {{ $colorDepth ? 'screen--' . $colorDepth : ''}} {{ $scaleLevel ? 'screen--scale-' . $scaleLevel : ''}}">
<div class="screen {{ $noBleed ? 'screen--no-bleed' : '' }} {{ $darkMode ? 'dark-mode' : '' }} {{ $deviceVariant ? 'screen--' . $deviceVariant : '' }} {{ $deviceOrientation ? 'screen--' . $deviceOrientation : '' }} {{ $colorDepth ? 'screen--' . $colorDepth : '' }} {{ $scaleLevel ? 'screen--scale-' . $scaleLevel : '' }}">
{{ $slot }}
</div>
</body>