I can’t get a Logout button (or plain link) to look good in either a Bootstrap or Bulma navbar. My general question is: how do you make a <form> that wraps an <a class="button"...>...</a> render the same as the <a> alone?
Per the Phoenix book, logging out is done with:
link("Log out", to: session_path(conn, :delete, current_user)
… producing something like:
<form action="/sessions/4" class="link" method="post">
<input name="_method" type="hidden" value="delete">
<input name="_csrf_token" type="hidden" value="JBxGTxkhJX09aUM+IjEVNwQHFF8jEAAAbPi+AtgRE+5sMuDRLfFmjg==">
<a data-submit="parent" href="#" rel="nofollow">
Log out</a>
</form>
I can’t figure out how to wrap this or adorn it with class= such that it works across devices.
For example, I can get Logout to look right with Bootstrap in a wide window, but I get a misaligned entry in a phone-sized window:
In Bulma, which seems pretty nice, the result of:
<span class="nav-item">
<form action="/sessions/4" method="post">
<input name="_method" type="hidden" value="delete">
<input name="_csrf_token" type="hidden" value="JBxGTxkhJX09aUM+IjEVNwQHFF8jEAAAbPi+AtgRE+5sMuDRLfFmjg==">
<a class="button" data-submit="parent" href="#" rel="nofollow">
Log out
</a>
</form>
<a class="button is-info">
Sign up
</a>
</span>
… is buttons with no space between them in wide view:
… whereas two plain <a class="button"...> tags have a nice gap between them. (There’s a different problem in layout view.)
I’m getting too close to giving up on any server-side rendering and doing everything in Elm on the client side. Save me from myself!
