<% if header? %>
<%= header %>
<% end %>
-
<% if body? %>
<% actions.each do |action| %>
diff --git a/app/components/DS/dialog.rb b/app/components/DS/dialog.rb
index a8dba3d0d..536febf6c 100644
--- a/app/components/DS/dialog.rb
+++ b/app/components/DS/dialog.rb
@@ -1,9 +1,9 @@
class DS::Dialog < DesignSystemComponent
- renders_one :header, ->(title: nil, subtitle: nil, hide_close_icon: false, **opts, &block) do
+ renders_one :header, ->(title: nil, subtitle: nil, custom_header: false, **opts, &block) do
content_tag(:header, class: "px-4 flex flex-col gap-2", **opts) do
title_div = content_tag(:div, class: "flex items-center justify-between gap-2") do
title = content_tag(:h2, title, class: class_names("font-medium text-primary", drawer? ? "text-lg" : "")) if title
- close_icon = render DS::Button.new(variant: "icon", class: "ml-auto", icon: "x", tabindex: "-1", data: { action: "DS--dialog#close" }) unless hide_close_icon
+ close_icon = close_button unless custom_header
safe_join([ title, close_icon ].compact)
end
@@ -33,7 +33,7 @@ class DS::Dialog < DesignSystemComponent
end
end
- attr_reader :variant, :auto_open, :reload_on_close, :width, :disable_frame, :content_class, :disable_click_outside, :opts
+ attr_reader :variant, :auto_open, :reload_on_close, :width, :disable_frame, :content_class, :disable_click_outside, :opts, :responsive
VARIANTS = %w[modal drawer].freeze
WIDTHS = {
@@ -43,7 +43,7 @@ class DS::Dialog < DesignSystemComponent
full: "lg:max-w-full"
}.freeze
- def initialize(variant: "modal", auto_open: true, reload_on_close: false, width: "md", frame: nil, disable_frame: false, content_class: nil, disable_click_outside: false, **opts)
+ def initialize(variant: "modal", auto_open: true, reload_on_close: false, width: "md", frame: nil, disable_frame: false, content_class: nil, disable_click_outside: false, responsive: false, **opts)
@variant = variant.to_sym
@auto_open = auto_open
@reload_on_close = reload_on_close
@@ -52,6 +52,7 @@ class DS::Dialog < DesignSystemComponent
@disable_frame = disable_frame
@content_class = content_class
@disable_click_outside = disable_click_outside
+ @responsive = responsive
@opts = opts
end
@@ -69,7 +70,9 @@ class DS::Dialog < DesignSystemComponent
end
def dialog_outer_classes
- variant_classes = if drawer?
+ variant_classes = if responsive?
+ "items-center justify-center lg:items-end lg:justify-end"
+ elsif drawer?
"items-end justify-end"
else
"items-center justify-center"
@@ -82,7 +85,9 @@ class DS::Dialog < DesignSystemComponent
end
def dialog_inner_classes
- variant_classes = if drawer?
+ variant_classes = if responsive?
+ "max-h-full lg:h-full lg:w-[550px]"
+ elsif drawer?
"lg:w-[550px] h-full"
else
class_names(
@@ -116,4 +121,20 @@ class DS::Dialog < DesignSystemComponent
def drawer?
variant == :drawer
end
+
+ def responsive?
+ @responsive
+ end
+
+ def close_button
+ classes = responsive? ? "ml-auto hidden lg:flex" : "ml-auto"
+ render DS::Button.new(
+ variant: "icon",
+ class: classes,
+ icon: "x",
+ title: I18n.t("common.close"),
+ aria_label: I18n.t("common.close"),
+ data: { action: "DS--dialog#close" }
+ )
+ end
end
diff --git a/app/views/holdings/show.html.erb b/app/views/holdings/show.html.erb
index 67b4329ba..927d0b9a2 100644
--- a/app/views/holdings/show.html.erb
+++ b/app/views/holdings/show.html.erb
@@ -1,21 +1,22 @@
-<%= render DS::Dialog.new(frame: "drawer") do |dialog| %>
- <% dialog.with_header(hide_close_icon: true) do %>
+<%= render DS::Dialog.new(frame: "drawer", responsive: true) do |dialog| %>
+ <% dialog.with_header(custom_header: true) do %>
<%= tag.h3 @holding.name, class: "text-2xl font-medium text-primary" %>
<%= tag.p @holding.ticker, class: "text-sm text-secondary" %>
-
- <% if @holding.security.brandfetch_icon_url.present? %>
- <%= image_tag @holding.security.brandfetch_icon_url, loading: "lazy", class: "w-9 h-9 rounded-full" %>
- <% elsif @holding.security.logo_url.present? %>
- <%= image_tag @holding.security.logo_url, loading: "lazy", class: "w-9 h-9 rounded-full" %>
- <% else %>
- <%= render DS::FilledIcon.new(variant: :text, text: @holding.name, size: "md", rounded: true) %>
- <% end %>
+
+ <% if @holding.security.brandfetch_icon_url.present? %>
+ <%= image_tag @holding.security.brandfetch_icon_url, loading: "lazy", class: "w-9 h-9 rounded-full" %>
+ <% elsif @holding.security.logo_url.present? %>
+ <%= image_tag @holding.security.logo_url, loading: "lazy", class: "w-9 h-9 rounded-full" %>
+ <% else %>
+ <%= render DS::FilledIcon.new(variant: :text, text: @holding.name, size: "md", rounded: true) %>
+ <% end %>
+ <%= dialog.close_button %>
+
<% end %>
-
<% dialog.with_body do %>
<% dialog.with_section(title: t(".overview"), open: true) do %>
@@ -33,13 +34,12 @@
<% end %>
-
<% if Security.provider.present? %>
<%= form_with url: remap_security_holding_path(@holding), method: :patch, class: "space-y-3" do |f| %>
@@ -64,23 +64,24 @@
<% end %>
-
<%# Average Cost with inline editor %>
<%
currency = Money::Currency.new(@holding.currency)
@@ -103,7 +104,6 @@