Some feedback for phoenix live view (from who is getting started)

Phoenix Forum Chat / Discussions
,
1

Some feedback from who is getting started…

  1. The default milligram CSS framework is classless, but not featured. I spent 2 days just trying to switch to bootstrap and make it to work. One example Bootstrap has a great navbar(works great on mobile) and other components. Why not bootstrap by default? If advanced users want to go with another classless framework they will know how to change. Bootstrap has support ARIA by default and all examples include the aria attributes.

  2. it was really confusing the fact that package.json is within assets dir. When trying to make the bootstrap modal to work I did execute yarn add bootstrap jquery popper.js in the root. I could include bootstrap somehow, the styles worked(perhaps because of live dashboard?). Then, I figured that out I need to include in the package.json within the assets dir.

  3. Bootstrap modal was a little bit tricky to keep the fade effect working. I had to ensure the modal was at the DOM and toggle it using phx-hook, it worked. But, now the form fields lost reference somehow and there is no error.

  4. Documentation is great, well written, I am reading it slowly but already trying to code it. If it had the support to bootstrap by default my project was already done. :smiley: Really fast prototyping except by the CSS framework.

2

Hi @sadjow,

There’s a discussion here on the reasons why… Bootstrap 4 final in next Phoenix release? (Update: No... Phoenix 1.4 uses Milligram)

If you ever need any help on things like this, feel free to ask. I’m using bootstrap 4 in a LV project and it was quite straightforward to get going with a couple of small pointers in how the assets setup works. You’ve obviously figured it out now!

1 Like
3

Hi @mindok ! :slightly_smiling_face:

So, I generated the code using phx.gen.live.

In the list of users, that I generated in the admin/ web context. I am trying to render the modal: I did move it out of if @live_action in [:new, :edit] do. Because I wanted to keep the fade effect, show the modal appearing and the modal disappearing. I created the open_modal option based on the boolean. I got it working also without the effect. But, for some reason, the fields/validation are not working anymore and no error is shown.

index.html.leex

<%#= if @live_action in [:new, :edit] do %>

<%# end %>

<%= live_modal @socket, FuderosoWeb.Admin.UserLive.FormComponent,
    id: @user.id || :new,
    title: @page_title,
    action: @live_action,
    user: @user,
    open_modal: @live_action in [:new, :edit],
    return_to: Routes.admin_user_index_path(@socket, :index) %>

modal_component.ex (changed the generated one)

defmodule FuderosoWeb.ModalComponent do
  use FuderosoWeb, :live_component

  @impl true
  def render(assigns) do
    ~L"""
    <div id="<%= @id %>"
      phx-hook="Modal"
      class="modal fade"
      data-focus="true"
      data-show="<%= @opts[:open_modal] %>"
      tabindex="-1"
      role="dialog"
      phx-window-keydown="close"
      phx-key="escape"
      phx-target="#<%= @id %>"
      phx-capture-click="close"
      phx-page-loading>
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <%= live_patch to: @return_to, class: "close", "aria-label": "Close" do %>
              <span aria-hidden="true">&times;</span>
            <% end %>
            <%= live_component @socket, @component, @opts %>
          </div>
        </div>
      </div>
    </div>
    """

    # ~L"""
    # <div id="<%= @id %>" class="phx-modal"
    #   phx-capture-click="close"
    #   phx-window-keydown="close"
    #   phx-key="escape"
    #   phx-target="#<%= @id %>"
    #   phx-page-loading>

    #   <div class="phx-modal-content">
    #     <%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
    #     <%= live_component @socket, @component, @opts %>
    #   </div>
    # </div>
    # """
  end

  @impl true
  def handle_event("close", _, socket) do
    {:noreply, push_patch(socket, to: socket.assigns.return_to)}
  end
end

and in the hooks I was trying something with this:

let Hooks = {};
Hooks.Modal = {
  mounted() {
    if ($(this.el).data("show")) {
      $(this.el).modal("show");
    } else {
      $(this.el).modal("hide");
    }
  },
  updated() {
    if ($(this.el).data("show")) {
      $(this.el).modal("show");
    } else {
      $(this.el).modal("hide");
    }
  },
};

that hooks object is attached to the live connection

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: Hooks,
});
```
4

of course this is not optimized code. I am just trying it out.

5

I gave up the modal fade animation. I did mount it only when it is in the action I did add these classes. The form did not lost any reference to the validation, it was needed to add display: block to .invalid-feedback class.

.invalid-feedback {
  display: block;
}

.modal {
  display: block;
  background-color: change-color(gray, $alpha: 0.5, $lightness: 20%);
}
6

BTW, I think for Information Systems, ERP. animations are not good. Let’s keep without them.

1 Like