feat(#29): mashup

* update templates to be more responsive
This commit is contained in:
Benjamin Nussbaum 2025-06-06 23:06:31 +02:00
parent ed9d03d0b8
commit 56638b26e8
28 changed files with 1067 additions and 346 deletions

View file

@ -1,15 +1,18 @@
{{--@dump($data)--}}
<x-trmnl::view>
@props(['size' => 'full'])
<x-trmnl::view size="{{$size}}">
<x-trmnl::layout class="layout--col gap--space-between">
<div class="grid" style="gap: 9px;">
<div class="row row--center col--span-3 col--end">
<img class="weather-image" style="max-height: 150px; margin:auto;" src="https://usetrmnl.com/images/plugins/weather/wi-thermometer.svg">
<img class="weather-image" style="max-height: 150px; margin:auto;"
src="https://usetrmnl.com/images/plugins/weather/wi-thermometer.svg">
</div>
<div class="col col--span-3 col--end">
<div class="item h--full">
<div class="col col--span-3 col--center">
<div class="item">
<div class="meta"></div>
<div class="justify-center">
<span class="value value--xxlarge" data-fit-value="true">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.air_temperature', 'N/A')}}</span>
<span class="value @if($size == 'full' || $size == 'half_horizontal') value--xxlarge @else value--medium @endif"
data-fit-value="true">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.air_temperature', 'N/A')}}</span>
<span class="label">Temperature</span>
</div>
</div>
@ -18,10 +21,11 @@
<div class="item">
<div class="meta"></div>
<div class="icon">
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-thermometer.svg">--}}
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-thermometer.svg">--}}
</div>
<div class="content">
<span class="value value--small">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.wind_speed', 'N/A')}}</span>
<span
class="value value--small">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.wind_speed', 'N/A')}}</span>
<span class="label">Wind Speed (km/h)</span>
</div>
</div>
@ -29,7 +33,7 @@
<div class="item">
<div class="meta"></div>
<div class="icon">
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-raindrops.svg">--}}
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-raindrops.svg">--}}
</div>
<div class="content">
<span class="value value--small">{{Arr::get($data, 'properties.timeseries.0.data.instant.details.relative_humidity', 'N/A')}}%</span>
@ -40,10 +44,11 @@
<div class="item">
<div class="meta"></div>
<div class="icon">
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-day-sunny.svg">--}}
{{-- <img class="weather-icon" src="https://usetrmnl.com/images/weather/wi-day-sunny.svg">--}}
</div>
<div class="content">
<span class="value value--xsmall">{{Str::title(Arr::get($data, 'properties.timeseries.0.data.next_1_hours.summary.symbol_code', 'N/A'))}}</span>
<span
class="value value--xsmall">{{Str::title(Arr::get($data, 'properties.timeseries.0.data.next_1_hours.summary.symbol_code', 'N/A'))}}</span>
<span class="label">Right Now</span>
</div>
</div>