From 3304450584fc9bb46b6227ac667dc02308928021 Mon Sep 17 00:00:00 2001 From: Miguel Michelson Date: Fri, 11 Aug 2023 10:55:19 -0400 Subject: [PATCH] medium zoom on article --- .../stylesheets/application.tailwind.css | 66 +++++++++++++++++++ app/javascript/controllers/index.js | 4 +- .../controllers/medium_controller.js | 11 ++++ app/services/dante/image_block_renderer.rb | 17 ++--- app/services/dante/renderer.rb | 2 +- app/views/articles/show.html.erb | 5 +- package.json | 1 + 7 files changed, 93 insertions(+), 13 deletions(-) create mode 100644 app/javascript/controllers/medium_controller.js diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 98173ad..95d0de5 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -6,6 +6,72 @@ @layer components { + .post-wrapper .aspectRatioPlaceholder { + margin: 0px auto; + position: relative; + width: 100%; + } + + .post-wrapper .aspectRatioPlaceholder img { + height: 100%; + left: 0px; + position: absolute; + top: 0px; + width: 100%; + } + + .post-wrapper .imageCaption { + text-align: center; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + letter-spacing: 0px; + font-weight: 400; + font-size: 13px; + line-height: 1.4; + color: rgb(255, 255, 255); + outline: 0px; + z-index: 300; + margin-top: 40px; + } + + .post-wrapper .graf--mixtapeEmbed { + border-color: rgb(51, 51, 51); + border-radius: 5px; + border-style: solid; + border-width: 1px; + box-sizing: border-box; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 12px; + font-style: normal; + font-weight: 300; + letter-spacing: -0.02em; + margin-bottom: 40px; + margin-top: 40px; + max-height: 310px; + overflow: hidden; + padding: 30px; + position: relative; + } + + .post-wrapper .graf--mixtapeEmbed .mixtapeImage { + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + float: right; + height: 310px; + margin: -30px -30px 0px 25px; + width: 310px; + } + + .post-wrapper .graf--mixtapeEmbed .markup--mixtapeEmbed-strong { + display: block; + font-size: 30px; + font-style: normal; + font-weight: 300; + letter-spacing: -0.02em; + line-height: 1.2; + margin-bottom: 0px; + } + .aaa { @apply bg-white; } diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 799e1da..21b9cfc 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -31,6 +31,7 @@ import player_info_controller from './player_info_controller' import track_detector_controller from './track_detector_controller' import play_button_controller from './play_button_controller' import panel from "./panel_controller" +import MediumZoom from "./medium_controller.js" //import GeoChart from './geo_chart_controller' @@ -63,4 +64,5 @@ application.register("redirect", redirect_controller) application.register("player-info", player_info_controller) application.register("track-detector", track_detector_controller) application.register("play-button", play_button_controller) -application.register("panel", panel) \ No newline at end of file +application.register("panel", panel) +application.register("medium-zoom", MediumZoom) \ No newline at end of file diff --git a/app/javascript/controllers/medium_controller.js b/app/javascript/controllers/medium_controller.js new file mode 100644 index 0000000..f5c2cb8 --- /dev/null +++ b/app/javascript/controllers/medium_controller.js @@ -0,0 +1,11 @@ +import mediumZoom from 'medium-zoom' + +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + + connect() { + mediumZoom(document.querySelectorAll(".medium-zoom-image")) + } + +} \ No newline at end of file diff --git a/app/services/dante/image_block_renderer.rb b/app/services/dante/image_block_renderer.rb index 51e561f..2dc4092 100644 --- a/app/services/dante/image_block_renderer.rb +++ b/app/services/dante/image_block_renderer.rb @@ -1,8 +1,9 @@ class Dante::ImageBlockRenderer - def initialize(block_key:, data:, domain: nil) + def initialize(block_key:, data:, domain: nil, text: nil) @block_key = block_key @data = data @domain = domain + @text = (text || []).join(" ") end def render @@ -24,13 +25,13 @@ def render figure = <<~HTML
-
-
-
- #{caption} -
+ +
+
+ #{caption}
- #{caption_html(caption)} + + #{caption_html(@text)}
HTML @@ -57,7 +58,7 @@ def get_url(url, domain) end def caption_html(caption) - return "" unless caption && caption != "type a caption (optional)" + # return "" unless caption && caption == "type a caption (optional)" <<~HTML
diff --git a/app/services/dante/renderer.rb b/app/services/dante/renderer.rb index 088d888..2b1e24d 100644 --- a/app/services/dante/renderer.rb +++ b/app/services/dante/renderer.rb @@ -35,7 +35,7 @@ def convert_node_to_element(node) handle_text_node(node) when "ImageBlock" - renderer = Dante::ImageBlockRenderer.new(block_key: node[:id], data: node[:attrs], domain: domain) + renderer = Dante::ImageBlockRenderer.new(text: traverse_nodes(node[:content]), block_key: node[:id], data: node[:attrs], domain: domain) renderer.render when "FileBlock" diff --git a/app/views/articles/show.html.erb b/app/views/articles/show.html.erb index 1ea6dab..12e9954 100644 --- a/app/views/articles/show.html.erb +++ b/app/views/articles/show.html.erb @@ -107,10 +107,9 @@
<%= serialized_to_html(@post.body.with_indifferent_access).html_safe %> diff --git a/package.json b/package.json index a2b533b..b8cf10e 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "chart.js": "^3.8.0", "dante3": "^1.2.8", "esbuild": "^0.18.16", + "medium-zoom": "^1.0.8", "postcss": "^8.4.27", "prop-types": "^15.8.1", "react": "^18.2.0",