mkrieger/byos_laravel
1
0
Fork 0
mirror of https://github.com/usetrmnl/byos_laravel.git synced 2026-01-13 15:07:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: markup examples updated to Design Framework 1.1

Browse source
This commit is contained in:
Benjamin Nussbaum 2025-06-16 14:07:39 +02:00
parent 4bc31e5c60
commit 42c25fc403
1 changed files with 71 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

134
resources/views/livewire/plugins/markup.blade.php
View file

@ -67,63 +67,69 @@ new class extends Component {
public function renderHelloWorld(): string public function renderHelloWorld(): string
{ {
return <<<HTML return <<<HTML
<x-trmnl::view> <x-trmnl::screen>
<x-trmnl::layout> <x-trmnl::view>
<x-trmnl::markdown gapSize="large"> <x-trmnl::layout>
<x-trmnl::title>TRMNL BYOS Laravel</x-trmnl::title> <x-trmnl::markdown gapSize="large">
<x-trmnl::content>“This screen was rendered by BYOS Laravel”</x-trmnl::content> <x-trmnl::title>TRMNL BYOS Laravel</x-trmnl::title>
<x-trmnl::label variant="underline">Benjamin Nussbaum</x-trmnl::label> <x-trmnl::content>“This screen was rendered by BYOS Laravel”</x-trmnl::content>
</x-trmnl::markdown> <x-trmnl::label variant="underline">Benjamin Nussbaum</x-trmnl::label>
</x-trmnl::layout> </x-trmnl::markdown>
<x-trmnl::title-bar/> </x-trmnl::layout>
</x-trmnl::view> <x-trmnl::title-bar/>
</x-trmnl::view>
</x-trmnl::screen>
HTML; HTML;
} }
public function renderQuote(): string public function renderQuote(): string
{ {
return <<<HTML return <<<HTML
<x-trmnl::view> <x-trmnl::screen>
<x-trmnl::layout> <x-trmnl::view>
<x-trmnl::markdown gapSize="large"> <x-trmnl::layout>
<x-trmnl::title>Motivational Quote</x-trmnl::title> <x-trmnl::markdown gapSize="large">
<x-trmnl::content>“I love inside jokes. I hope to be a part of one someday.”</x-trmnl::content> <x-trmnl::title>Motivational Quote</x-trmnl::title>
<x-trmnl::label variant="underline">Michael Scott</x-trmnl::label> <x-trmnl::content>“I love inside jokes. I hope to be a part of one someday.”</x-trmnl::content>
</x-trmnl::markdown> <x-trmnl::label variant="underline">Michael Scott</x-trmnl::label>
</x-trmnl::layout> </x-trmnl::markdown>
<x-trmnl::title-bar/> </x-trmnl::layout>
</x-trmnl::view> <x-trmnl::title-bar/>
</x-trmnl::view>
</x-trmnl::screen>
HTML; HTML;
} }
public function renderTrainMonitor() public function renderTrainMonitor()
{ {
return <<<HTML return <<<HTML
<x-trmnl::view> <x-trmnl::screen>
<x-trmnl::layout> <x-trmnl::view>
<x-trmnl::table> <x-trmnl::layout>
<thead> <x-trmnl::table>
<tr> <thead>
<th><x-trmnl::title>Abfahrt</x-trmnl::title></th>
<th><x-trmnl::title>Aktuell</x-trmnl::title></th>
<th><x-trmnl::title>Zug</x-trmnl::title></th>
<th><x-trmnl::title>Ziel</x-trmnl::title></th>
<th><x-trmnl::title>Steig</x-trmnl::title></th>
</tr>
</thead>
<tbody>
<tr> <tr>
<td><x-trmnl::label>08:51</x-trmnl::label></td> <th><x-trmnl::title>Abfahrt</x-trmnl::title></th>
<td><x-trmnl::label>08:52</x-trmnl::label></td> <th><x-trmnl::title>Aktuell</x-trmnl::title></th>
<td><x-trmnl::label>REX 1</x-trmnl::label></td> <th><x-trmnl::title>Zug</x-trmnl::title></th>
<td><x-trmnl::label>Vienna Main Station</x-trmnl::label></td> <th><x-trmnl::title>Ziel</x-trmnl::title></th>
<td><x-trmnl::label>3</x-trmnl::label></td> <th><x-trmnl::title>Steig</x-trmnl::title></th>
</tr> </tr>
</tbody> </thead>
</x-trmnl::table> <tbody>
</x-trmnl::layout> <tr>
<x-trmnl::title-bar title="Train Monitor"/> <td><x-trmnl::label>08:51</x-trmnl::label></td>
</x-trmnl::view> <td><x-trmnl::label>08:52</x-trmnl::label></td>
<td><x-trmnl::label>REX 1</x-trmnl::label></td>
<td><x-trmnl::label>Vienna Main Station</x-trmnl::label></td>
<td><x-trmnl::label>3</x-trmnl::label></td>
</tr>
</tbody>
</x-trmnl::table>
</x-trmnl::layout>
<x-trmnl::title-bar title="Train Monitor"/>
</x-trmnl::view>
</x-trmnl::screen>
HTML; HTML;
} }
@ -131,26 +137,28 @@ HTML;
public function renderHomeAssistant() public function renderHomeAssistant()
{ {
return <<<HTML return <<<HTML
<x-trmnl::view> <x-trmnl::screen>
<x-trmnl::layout class="layout--col gap--space-between"> <x-trmnl::view>
<x-trmnl::grid cols="4"> <x-trmnl::layout class="layout--col gap--space-between">
<x-trmnl::col position="center"> <x-trmnl::grid cols="4">
<x-trmnl::item> <x-trmnl::col position="center">
<x-trmnl::meta/> <x-trmnl::item>
<x-trmnl::content> <x-trmnl::meta/>
<x-trmnl::value size="large">23.3°</x-trmnl::value> <x-trmnl::content>
<x-trmnl::label class="w--full flex"> <x-trmnl::value size="large">23.3°</x-trmnl::value>
<flux:icon icon="droplet" style="max-height: 24px;"/> <x-trmnl::label class="w--full flex">
47.52 % <flux:icon icon="droplet" style="max-height: 24px;"/>
</x-trmnl::label> 47.52 %
<x-trmnl::label class="w--full flex">Sensor 1</x-trmnl::label> </x-trmnl::label>
</x-trmnl::content> <x-trmnl::label class="w--full flex">Sensor 1</x-trmnl::label>
</x-trmnl::item> </x-trmnl::content>
</x-trmnl::col> </x-trmnl::item>
</x-trmnl::grid> </x-trmnl::col>
</x-trmnl::layout> </x-trmnl::grid>
<x-trmnl::title-bar title="Home Assistant"/> </x-trmnl::layout>
</x-trmnl::view> <x-trmnl::title-bar title="Home Assistant"/>
</x-trmnl::view>
</x-trmnl::screen>
HTML; HTML;
} }