Class: Maquina::Application::IndexModal

Inherits:
Phlex::HTML
  • Object
show all
Includes:
Maquina::ApplicationView
Defined in:
app/views/maquina/application/index_modal.rb

Instance Method Summary collapse

Methods included from Maquina::ApplicationView

#attribute_human_name, #button_to, #image_tag, #link_to, #model_human_name, #svg_icon

Instance Method Details

#view_template ⇒ Object 



9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
# File 'app/views/maquina/application/index_modal.rb', line 9

def view_template
  div(data_controller: "modal", class: "modal", data_modal_backdrop_outlet: ".modal-backdrop") do
    div(class: "hidden fixed inset-0 z-30 overflow-y-auto", aria_labelledby: "modal-title", role: "dialog",
      aria_modal: "true", data_modal_target: "container") do
      div(class: "flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0") do
        div(class: "hidden fixed inset-0 transition-opacity modal-backdrop",
          data_controller: "backdrop",
          data_backdrop_target: "backdrop",
          data_transition_enter: "ease-out duration-300",
          data_transition_enter_active: "opacity-0",
          data_transition_enter_to: "opacity-100",
          data_transition_leave: "ease-in duration-200",
          data_transition_leave_active: "opacity-100",
          data_transition_leave_to: "opacity-0",
          aria_hidden: "true") do
          div(class: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity", aria_hidden: "true")
        end
        span(class: "hidden sm:inline-block sm:align-middle sm:h-screen", aria_hidden: "true") { "​" }
        div(class: "hidden inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6",
          data_modal_target: "modal",
          data_transition_enter: "ease-out duration-300",
          data_transition_enter_active: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
          data_transition_enter_to: "opacity-100 translate-y-0 sm:scale-100",
          data_transition_leave: "ease-in duration-200",
          data_transition_leave_active: "opacity-100 translate-y-0 sm:scale-100",
          data_transition_leave_to: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95") do
          turbo_frame(id: :modal_content, src: "", data: {"modal-target": "frame"}) {}
        end
      end
    end
  end
end