mirror of
https://github.com/usetrmnl/plugins.git
synced 2026-08-13 14:26:58 -07:00
add Weather markups
This commit is contained in:
Ryan Kulp
@@ -16,6 +16,7 @@ community Recipes:
|
||||
- [Lunch Money](/lib/lunch_money)
|
||||
- [Stock Price](/lib/stock_price)
|
||||
- [Tempest Weather Station](/lib/tempest_weather_station)
|
||||
- [Weather (generic)](/lib/weather)
|
||||
|
||||
native plugin structure:
|
||||
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<style>
|
||||
.view--full .weather-image {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.view--full .weather-icon {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.view--quadrant .weather-image {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
/* was 298 before forecast */
|
||||
.view--half_vertical .weather-image {
|
||||
width: 288px;
|
||||
}
|
||||
|
||||
.view--half_horizontal .weather-image {
|
||||
width: 170px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<div class="view view--full">
|
||||
<div class="layout layout--col gap--space-between">
|
||||
<div class="grid">
|
||||
<div class="row row--center col--span-3 col--end">
|
||||
<img class="weather-image" src="<%= Rails.application.credentials.base_url %>/images/weather/<%= weather_image %>.svg" />
|
||||
</div>
|
||||
<div class="col col--span-3 col--end">
|
||||
<div class="item h--full">
|
||||
<div class="meta"></div>
|
||||
<div class="content">
|
||||
<span class="value value--xxxlarge" data-fit-value="true"><%= temperature&.round %>°</span>
|
||||
<span class="label"><%= t('renders.weather.temperature') %></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col--span-3 col--end gap--medium">
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="icon">
|
||||
<img class="weather-icon" src="<%= Rails.application.credentials.base_url %>/images/weather/wi-thermometer.svg" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<span class="value value--small"><%= feels_like&.round %>°</span>
|
||||
<span class="label"><%= t('renders.weather.feels_like') %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="icon">
|
||||
<img class="weather-icon" src="<%= Rails.application.credentials.base_url %>/images/weather/wi-raindrops.svg" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<span class="value value--small"><%= humidity %>%</span>
|
||||
<span class="label"><%= t('renders.weather.humidity') %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="icon">
|
||||
<img class="weather-icon" src="<%= Rails.application.credentials.base_url %>/images/weather/<%= weather_image %>.svg" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<span class="value value--xsmall"><%= conditions %></span>
|
||||
<span class="label"><%= t('renders.weather.right_now') %></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full b-h-gray-5"></div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col gap--large">
|
||||
<div class="grid">
|
||||
<div class="item col--span-3">
|
||||
<div class="meta"></div>
|
||||
<div class="icon">
|
||||
<img class="weather-icon" src="<%= Rails.application.credentials.base_url %>/images/weather/<%= today_weather_image %>.svg" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<span class="value value--xsmall"><%= forecast[:today][:conditions] %></span>
|
||||
<span class="label"><%= forecast[:today][:day_override] || t('renders.weather.today') %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item col--span-3">
|
||||
<div class="meta"></div>
|
||||
<div class="icon">
|
||||
<img class="weather-icon" src="<%= Rails.application.credentials.base_url %>/images/weather/wi-hot.svg" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<span class="value value--xsmall"><%= forecast[:today][:uv_index] %></span>
|
||||
<span class="label"><%= t('renders.weather.uv') %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col--span-3">
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="icon">
|
||||
<img class="weather-icon" src="<%= Rails.application.credentials.base_url %>/images/weather/wi-thermometer.svg" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="content w--20">
|
||||
<span class="value value--small"><%= forecast[:today][:mintemp]&.round %>°</span>
|
||||
<span class="label"><%= t('renders.weather.low') %></span>
|
||||
</div>
|
||||
<div class="content w--20">
|
||||
<span class="value value--small"><%= forecast[:today][:maxtemp]&.round %>°</span>
|
||||
<span class="label"><%= t('renders.weather.high') %></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="item col--span-3">
|
||||
<div class="meta"></div>
|
||||
<div class="icon">
|
||||
<img class="weather-icon" src="<%= Rails.application.credentials.base_url %>/images/weather/<%= tomorrow_weather_image %>.svg" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<span class="value value--xsmall"><%= forecast[:tomorrow][:conditions] %></span>
|
||||
<span class="label"><%= forecast[:tomorrow][:day_override] || t('renders.weather.tomorrow') %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item col--span-3">
|
||||
<div class="meta"></div>
|
||||
<div class="icon">
|
||||
<img class="weather-icon" src="<%= Rails.application.credentials.base_url %>/images/weather/wi-hot.svg" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<span class="value value--xsmall"><%= forecast[:tomorrow][:uv_index] %></span>
|
||||
<span class="label"><%= t('renders.weather.uv') %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row col--span-3">
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="icon">
|
||||
<img class="weather-icon" src="<%= Rails.application.credentials.base_url %>/images/weather/wi-thermometer.svg" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="content w--20">
|
||||
<span class="value value--small"><%= forecast[:tomorrow][:mintemp]&.round %>°</span>
|
||||
<span class="label"><%= t('renders.weather.low') %></span>
|
||||
</div>
|
||||
<div class="content w--20">
|
||||
<span class="value value--small"><%= forecast[:tomorrow][:maxtemp]&.round %>°</span>
|
||||
<span class="label"><%= t('renders.weather.high') %></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title_bar">
|
||||
<img class="image" src="<%= Rails.application.credentials.base_url %>/images/plugins/weather--render.svg" />
|
||||
<h1 class="title"><%= t('renders.weather.title') %></h1>
|
||||
<span class="instance"><%= instance_name %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= render 'plugins/weather/common' %>
|
||||
@@ -0,0 +1,37 @@
|
||||
<div class="view view--half_horizontal">
|
||||
<div class="layout">
|
||||
<div class="grid">
|
||||
<div class="col col--span-1 col--center">
|
||||
<div class="row row--center">
|
||||
<img class="weather-image" src="<%= Rails.application.credentials.base_url %>/images/weather/<%= weather_image %>.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col--span-2 col--center">
|
||||
<div class="grid grid--cols-2">
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="content">
|
||||
<span class="value value--xlarge" data-fit-value="true"><%= temperature&.round %>°</span>
|
||||
<span class="label"><%= t('renders.weather.temperature') %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="content">
|
||||
<span class="value value"><%= conditions %></span>
|
||||
<span class="label">Conditions</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title_bar">
|
||||
<img class="image" src="<%= Rails.application.credentials.base_url %>/images/plugins/weather--render.svg" />
|
||||
<h1 class="title"><%= t('renders.weather.title') %></h1>
|
||||
<span class="instance"><%= instance_name %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= render 'plugins/weather/common' %>
|
||||
@@ -0,0 +1,34 @@
|
||||
<div class="view view--half_vertical">
|
||||
<div class="layout layout--col">
|
||||
<img class="weather-image" src="<%= Rails.application.credentials.base_url %>/images/weather/<%= weather_image %>.svg" />
|
||||
|
||||
<div class="grid grid--cols-2">
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="content">
|
||||
<span class="value value--large" data-fit-value="true"><%= temperature&.round %>°</span>
|
||||
<span class="label"><%= conditions %></span>
|
||||
<span class="label"><%= forecast[:today][:mintemp] %>° - <%= forecast[:today][:maxtemp] %>°</span>
|
||||
<span class="label">UV <%= forecast[:today][:uv_index] %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="content gap">
|
||||
<span class="label label--inverted"><%= forecast[:tomorrow][:day_override] || t('renders.weather.tomorrow') %></span>
|
||||
<span class="label"><%= forecast[:tomorrow][:conditions] %></span>
|
||||
<span class="label">[L/H] <%= forecast[:tomorrow][:mintemp] %>° - <%= forecast[:tomorrow][:maxtemp] %>°</span>
|
||||
<span class="label">[UV] <%= forecast[:tomorrow][:uv_index] %></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title_bar">
|
||||
<img class="image" src="<%= Rails.application.credentials.base_url %>/images/plugins/weather--render.svg" />
|
||||
<h1 class="title"><%= t('renders.weather.title') %></h1>
|
||||
<span class="instance"><%= instance_name %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= render 'plugins/weather/common' %>
|
||||
@@ -0,0 +1,36 @@
|
||||
<div class="view view--quadrant">
|
||||
<div class="layout">
|
||||
<div class="grid grid--cols-2">
|
||||
<div class="row row--center">
|
||||
<img class="weather-image" src="<%= Rails.application.credentials.base_url %>/images/weather/<%= weather_image %>.svg" />
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col gap--space-between">
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="content">
|
||||
<span class="value value--large" data-fit-value="true"><%= temperature&.round %>°</span>
|
||||
<span class="label"><%= conditions %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="meta"></div>
|
||||
<div class="content">
|
||||
<span class="label"><%= forecast[:today][:mintemp] %>° - <%= forecast[:today][:maxtemp] %>°</span>
|
||||
<span class="label">UV <%= forecast[:today][:uv_index] %></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title_bar">
|
||||
<img class="image" src="<%= Rails.application.credentials.base_url %>/images/plugins/weather--render.svg" />
|
||||
<h1 class="title"><%= t('renders.weather.title') %></h1>
|
||||
<span class="instance"><%= instance_name %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= render 'plugins/weather/common' %>
|
||||
Reference in New Issue
Block a user