diff --git a/Gemfile.lock b/Gemfile.lock index 9ff2d31..c488385 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -164,7 +164,14 @@ GEM multipart-post (~> 2.0) faraday-net_http (3.4.0) net-http (>= 0.5.0) + ffi (1.17.1-aarch64-linux-gnu) + ffi (1.17.1-aarch64-linux-musl) + ffi (1.17.1-arm-linux-gnu) + ffi (1.17.1-arm-linux-musl) ffi (1.17.1-arm64-darwin) + ffi (1.17.1-x86_64-darwin) + ffi (1.17.1-x86_64-linux-gnu) + ffi (1.17.1-x86_64-linux-musl) formtastic (5.0.0) actionpack (>= 6.0.0) formtastic_i18n (0.7.0) diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 312a4fc..bc471f7 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -1,3 +1,4 @@ +@import "photoswipe/dist/photoswipe.css"; @tailwind base; @tailwind components; diff --git a/app/javascript/application.js b/app/javascript/application.js index 1aad597..63ba9e1 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -1,5 +1,6 @@ // Entry point for the build script in your package.json import "@hotwired/turbo-rails" +import "@hotwired/stimulus" import "@fontsource/playfair-display/400.css"; import "@fontsource/playfair-display/700.css"; import "@fontsource/raleway/400.css"; diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index d0685d3..40cfc50 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -6,3 +6,9 @@ import { application } from "./application" import HelloController from "./hello_controller" application.register("hello", HelloController) + +import PhotoSwipeLightBoxController from "./photo_swipe_lightbox_controller" + +console.log("ready to register photo-swipe") +application.register("photo-swipe-lightbox", PhotoSwipeLightBoxController) +console.log("successful to register photo-swipe") diff --git a/app/javascript/controllers/photo_swipe_lightbox_controller.js b/app/javascript/controllers/photo_swipe_lightbox_controller.js new file mode 100644 index 0000000..2dad88c --- /dev/null +++ b/app/javascript/controllers/photo_swipe_lightbox_controller.js @@ -0,0 +1,42 @@ +import { Controller } from "@hotwired/stimulus" +import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm' +import PhotoSwipe from 'photoswipe/dist/photoswipe.esm' +import 'photoswipe/dist/photoswipe.css' + +export default class extends Controller { + static targets = ['image', 'gallery'] + + connect() { + this.initPhotoSwipeLightbox() + } + + initPhotoSwipeLightbox() { + const lightbox = new PhotoSwipeLightbox({ + gallery: this.galleryTarget, + children: 'a', + pswpModule: PhotoSwipe, + initialZoomInEndEvent: 'mousedown', + dataSource: (items) => { + return items.map((item) => ({ + src: item.dataset.pswpSrc, + w: parseInt(item.dataset.pswpWidth, 10), + h: parseInt(item.dataset.pswpHeight, 10), + title: item.dataset.pswpCaption, + })) + }, + padding: { top: 0, bottom: 0, left: 0, right: 0 }, // 自定义图片与页面边界的填充 + closeOnScroll: false, + zoom: true, // 启用缩放功能 + bgOpacity: 0.9, // 背景透明度 + pswpUIOptions: { + arrowPrev: true, + arrowNext: true, + zoom: true, // 添加缩放按钮 + fullscreen: true, // 添加全屏按钮 + counter: true, // 显示当前图片编号 + } + }) + lightbox.init() + // console.log('PhotoSwipeLightbox instance:', lightbox); + } +} \ No newline at end of file diff --git a/app/models/weather_art.rb b/app/models/weather_art.rb index 078a58e..f764058 100644 --- a/app/models/weather_art.rb +++ b/app/models/weather_art.rb @@ -51,4 +51,8 @@ class WeatherArt < ApplicationRecord Ahoy::Event.where("properties::jsonb->>'event_type' = 'weather_art_view' AND (properties::jsonb->>'weather_art_id')::integer = ?", self.id).count end end + + def image_url + image.attached? ? image.blob : nil + end end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index bf4b014..f468d23 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -33,22 +33,22 @@ <%# Includes all stylesheet files in app/assets/stylesheets %> <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> - + - + - - + + - + + diff --git a/app/views/weather_arts/_weather_stat.html.erb b/app/views/weather_arts/_weather_stat.html.erb deleted file mode 100644 index 486975f..0000000 --- a/app/views/weather_arts/_weather_stat.html.erb +++ /dev/null @@ -1,11 +0,0 @@ - -
-
- - - -
<%= title %>
-
-
<%= value %>
-
<%= desc %>
-
\ No newline at end of file diff --git a/app/views/weather_arts/_weather_stats.html.erb b/app/views/weather_arts/_weather_stats.html.erb new file mode 100644 index 0000000..df082f5 --- /dev/null +++ b/app/views/weather_arts/_weather_stats.html.erb @@ -0,0 +1,37 @@ +<%# Partial _weather_stats.html.erb %> + +
+
Temperature
+
<%= weather_art.temperature %>°C
+
Feels like <%= weather_art.feeling_temp %>°C
+
+ +
+
Wind
+
<%= weather_art.wind_scale %>
+
<%= weather_art.wind_speed %> km/h
+
+ +
+
Humidity
+
<%= weather_art.humidity %>%
+
Relative humidity
+
+ +
+
Visibility
+
<%= weather_art.visibility %> km
+
Clear view distance
+
+ +
+
Pressure
+
<%= weather_art.pressure %> hPa
+
Atmospheric pressure
+
+ +
+
Cloud Cover
+
<%= weather_art.cloud %>%
+
Sky coverage
+
\ No newline at end of file diff --git a/app/views/weather_arts/show.html.erb b/app/views/weather_arts/show.html.erb index 4806f3d..ba9d2b0 100644 --- a/app/views/weather_arts/show.html.erb +++ b/app/views/weather_arts/show.html.erb @@ -4,155 +4,88 @@ <% end %> -
- - <% if @weather_art.image.attached? %> -
- <%= image_tag @weather_art.image, - class: "absolute w-full h-full object-cover scale-110 filter blur-2xl opacity-25" %> -
-
- <% end %> +
+
+
- -
- -
- <%= link_to city_path(@weather_art.city), - class: "btn btn-ghost btn-lg gap-2 bg-base-100/50 backdrop-blur-sm hover:bg-base-100/70 transition-all duration-300" do %> - - - - Back to <%= @weather_art.city.name %> - <% end %> -
+ +
+ <%= link_to city_path(@weather_art.city), + class: "btn btn-ghost btn-md gap-2 bg-base-200 hover:bg-base-300 transition-all duration-300" do %> + + + + Back to <%= @weather_art.city.name %> + <% end %> +
-
-
- -
-
- - - - <%= @weather_art.city.full_name %> -
+ +
+
-

- - Weather Art - -

+ + <% if @weather_art.image.attached? %> +
+ +
+ <% end %> -
-
- - - - <%= @weather_art.weather_date.strftime("%B %d, %Y") %> -
-
- - - - <%= @weather_art.weather_date.strftime("%H:%M") %> -
-
-
+ +
+
+

+ Weather Art +

- -
-
- <% if @weather_art.image.attached? %> - <%= image_tag @weather_art.image, - class: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" %> -
- <% end %> -
+
+
+ <%= @weather_art.weather_date.strftime("%B %d, %Y") %> +
+
+ <%= @weather_art.weather_date.strftime("%H:%M") %> +
+
-
-
-

+

<%= weather_description_icon(@weather_art.description) %> <%= @weather_art.description %>

-
- -
-
-
- <%= weather_stat_icon("temperature") %> -
Temperature
-
-
<%= @weather_art.temperature %>°C
-
Feels like <%= @weather_art.feeling_temp %>°C
-
- -
-
- <%= weather_stat_icon("wind") %> -
Wind
-
-
<%= @weather_art.wind_scale %>
-
<%= @weather_art.wind_speed %> km/h
-
- -
-
- <%= weather_stat_icon("humidity") %> -
Humidity
-
-
<%= @weather_art.humidity %>%
-
Relative humidity
-
- -
-
- <%= weather_stat_icon("visibility") %> -
Visibility
-
-
<%= @weather_art.visibility %> km
-
Clear view distance
-
- -
-
- <%= weather_stat_icon("pressure") %> -
Pressure
-
-
<%= @weather_art.pressure %> hPa
-
Atmospheric pressure
-
- -
-
- <%= weather_stat_icon("cloud") %> -
Cloud Cover
-
-
<%= @weather_art.cloud %>%
-
Sky coverage
-
-
- - -
-
-
- - - -

AI Prompt

-
-

- <%= @weather_art.prompt %> -

+
+ <%= render 'weather_stats', weather_art: @weather_art %>
+ + +
+
+ + + +

AI Prompt

+
+

+ <%= @weather_art.prompt %> +

+
\ No newline at end of file diff --git a/package.json b/package.json index 3f93649..8b11caf 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "autoprefixer": "^10.4.20", "jquery": "^3.7.1", "jquery-ui": "^1.14.1", + "photoswipe": "^5.4.4", "postcss": "^8.5.1", "sass": "^1.83.4", "tailwindcss": "^3.4.17" diff --git a/yarn.lock b/yarn.lock index 91e1d6e..29ceef2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -153,7 +153,7 @@ "@hotwired/stimulus@^3.2.2": version "3.2.2" - resolved "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.2.tgz" + resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608" integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A== "@hotwired/turbo-rails@^8.0.12": @@ -722,20 +722,13 @@ jiti@^1.21.6: resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz" integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A== -jquery-ui@^1.13.3: +jquery-ui@^1.13.3, jquery-ui@^1.14.1: version "1.14.1" resolved "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.14.1.tgz" integrity sha512-DhzsYH8VeIvOaxwi+B/2BCsFFT5EGjShdzOcm5DssWjtcpGWIMsn66rJciDA6jBruzNiLf1q0KvwMoX1uGNvnQ== dependencies: jquery ">=1.12.0 <5.0.0" -jquery-ui@^1.14.1: - version "1.14.1" - resolved "https://registry.yarnpkg.com/jquery-ui/-/jquery-ui-1.14.1.tgz#ba342ea3ffff662b787595391f607d923313e040" - integrity sha512-DhzsYH8VeIvOaxwi+B/2BCsFFT5EGjShdzOcm5DssWjtcpGWIMsn66rJciDA6jBruzNiLf1q0KvwMoX1uGNvnQ== - dependencies: - jquery ">=1.12.0 <5.0.0" - jquery-ujs@^1.2.2: version "1.2.3" resolved "https://registry.npmjs.org/jquery-ujs/-/jquery-ujs-1.2.3.tgz" @@ -853,6 +846,11 @@ path-scurry@^1.11.1: lru-cache "^10.2.0" minipass "^5.0.0 || ^6.0.2 || ^7.0.0" +photoswipe@^5.4.4: + version "5.4.4" + resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.4.tgz#e045dc036453493188d5c8665b0e8f1000ac4d6e" + integrity sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA== + picocolors@^1, picocolors@^1.0.1, picocolors@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"