Remove classes from forms, migrate to miligram

phoenixframework · Mar 10, 2018 · 463e9d2 · 463e9d2
1 parent 52e0f0f
commit 463e9d2
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 295 deletions.
diff --git a/guides/docs/contexts.md b/guides/docs/contexts.md
@@ -369,15 +369,13 @@ Next, let's expose our new feature to the web by adding the credentials input to
   ...
 + <div class="form-group">
 +   <%= inputs_for f, :credential, fn cf -> %>
-+     <%= label cf, :email, class: "control-label" %>
-+     <%= text_input cf, :email, class: "form-control" %>
++     <%= label cf, :email %>
++     <%= text_input cf, :email %>
 +     <%= error_tag cf, :email %>
 +   <% end %>
 + </div>
 
-  <div class="form-group">
-    <%= submit "Submit", class: "btn btn-primary" %>
-  </div>
+  <%= submit "Submit" %>
 ```
 
 We used `Phoenix.HTML`'s `inputs_for` function to add an associations nested fields within the parent form. Within the nested inputs, we rendered our credential's email field and included the `label` and `error_tag` helpers just like our other inputs.
@@ -623,11 +621,9 @@ Remember to update your repository by running migrations:
 The `views` attribute on the pages will not be updated directly by the user, so let's remove it from the generated form. Open `lib/hello_web/templates/cms/page/form.html.eex` and remove this part:
 
 ```eex
--  <div class="form-group">
--    <%= label f, :views, class: "control-label" %>
--    <%= number_input f, :views, class: "form-control" %>
--    <%= error_tag f, :views %>
--  </div>
+-  <%= label f, :views %>
+-  <%= number_input f, :views %>
+-  <%= error_tag f, :views %>
 ```
 
 Also, change `lib/hello/cms/page.ex` to remove `:views` from the permitted params:

diff --git a/installer/templates/phx_assets/phoenix.css b/installer/templates/phx_assets/phoenix.css
diff --git a/installer/templates/phx_web/templates/layout/app.html.eex b/installer/templates/phx_web/templates/layout/app.html.eex
@@ -9,23 +9,21 @@
   </head>
   <body>
     <header>
-      <div class="container phx-flex">
+      <section class="container">
         <nav role="navigation">
           <ul>
             <li><a href="http://www.phoenixframework.org/docs">Get Started</a></li>
           </ul>
         </nav>
         <a href="http://phoenixframework.org/" class="phx-logo">
-          <img src="/images/phoenix.png" alt="Phoenix Framework Logo"/>
+          <img src="<%%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
         </a>
       </div>
     </header>
-    <main role="main">
-      <div class="container">
-        <p class="alert alert-info" role="alert"><%%= get_flash(@conn, :info) %></p>
-        <p class="alert alert-danger" role="alert"><%%= get_flash(@conn, :error) %></p>
-        <%%= render @view_module, @view_template, assigns %>
-      </div>
+    <main role="main" class="container">
+      <p class="alert alert-info" role="alert"><%%= get_flash(@conn, :info) %></p>
+      <p class="alert alert-danger" role="alert"><%%= get_flash(@conn, :error) %></p>
+      <%%= render @view_module, @view_template, assigns %>
     </main>
     <script type="text/javascript" src="<%%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </body>

diff --git a/installer/templates/phx_web/templates/page/index.html.eex b/installer/templates/phx_web/templates/page/index.html.eex
@@ -3,8 +3,8 @@
   <p>A productive web framework that<br/>does not compromise speed and maintainability.</p>
 </section>
 
-<section class="container phx-flex phx-marketing">
-  <article>
+<section class="row">
+  <article class="column">
     <h4>Resources</h4>
     <ul>
       <li>
@@ -15,7 +15,7 @@
       </li>
     </ul>
   </article>
-  <article>
+  <article class="column">
     <h4>Help</h4>
     <ul>
       <li>

diff --git a/installer/templates/phx_web/views/error_helpers.ex b/installer/templates/phx_web/views/error_helpers.ex
@@ -9,8 +9,8 @@ defmodule <%= web_namespace %>.ErrorHelpers do
   Generates tag for inlined form input errors.
   """
   def error_tag(form, field) do
-    Enum.map(Keyword.get_values(form.errors, field), fn (error) ->
-      content_tag :span, translate_error(error), class: "phx-validation-error help-block"
+    Enum.map(Keyword.get_values(form.errors, field), fn error ->
+      content_tag :span, translate_error(error), class: "help-block"
     end)
   end
 <% end %>

diff --git a/lib/mix/tasks/phx.gen.html.ex b/lib/mix/tasks/phx.gen.html.ex
@@ -185,34 +185,34 @@ defmodule Mix.Tasks.Phx.Gen.Html do
       {_, {:references, _}} ->
         {nil, nil, nil}
       {key, :integer} ->
-        {label(key), ~s(<%= number_input f, #{inspect(key)}, class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= number_input f, #{inspect(key)} %>), error(key)}
       {key, :float} ->
-        {label(key), ~s(<%= number_input f, #{inspect(key)}, step: "any", class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= number_input f, #{inspect(key)}, step: "any" %>), error(key)}
       {key, :decimal} ->
-        {label(key), ~s(<%= number_input f, #{inspect(key)}, step: "any", class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= number_input f, #{inspect(key)}, step: "any" %>), error(key)}
       {key, :boolean} ->
-        {label(key), ~s(<%= checkbox f, #{inspect(key)}, class: "checkbox" %>), error(key)}
+        {label(key), ~s(<%= checkbox f, #{inspect(key)} %>), error(key)}
       {key, :text} ->
-        {label(key), ~s(<%= textarea f, #{inspect(key)}, class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= textarea f, #{inspect(key)} %>), error(key)}
       {key, :date} ->
-        {label(key), ~s(<%= date_select f, #{inspect(key)}, class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= date_select f, #{inspect(key)} %>), error(key)}
       {key, :time} ->
-        {label(key), ~s(<%= time_select f, #{inspect(key)}, class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= time_select f, #{inspect(key)} %>), error(key)}
       {key, :utc_datetime} ->
-        {label(key), ~s(<%= datetime_select f, #{inspect(key)}, class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= datetime_select f, #{inspect(key)} %>), error(key)}
       {key, :naive_datetime} ->
-        {label(key), ~s(<%= datetime_select f, #{inspect(key)}, class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= datetime_select f, #{inspect(key)} %>), error(key)}
       {key, {:array, :integer}} ->
-        {label(key), ~s(<%= multiple_select f, #{inspect(key)}, ["1": 1, "2": 2], class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= multiple_select f, #{inspect(key)}, ["1": 1, "2": 2] %>), error(key)}
       {key, {:array, _}} ->
-        {label(key), ~s(<%= multiple_select f, #{inspect(key)}, ["Option 1": "option1", "Option 2": "option2"], class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= multiple_select f, #{inspect(key)}, ["Option 1": "option1", "Option 2": "option2"] %>), error(key)}
       {key, _}  ->
-        {label(key), ~s(<%= text_input f, #{inspect(key)}, class: "form-control" %>), error(key)}
+        {label(key), ~s(<%= text_input f, #{inspect(key)} %>), error(key)}
     end)
   end
 
   defp label(key) do
-    ~s(<%= label f, #{inspect(key)}, class: "control-label" %>)
+    ~s(<%= label f, #{inspect(key)} %>)
   end
 
   defp error(field) do

diff --git a/priv/templates/phx.gen.html/edit.html.eex b/priv/templates/phx.gen.html/edit.html.eex
@@ -2,4 +2,4 @@
 
 <%%= render "form.html", Map.put(assigns, :action, Routes.<%= schema.route_helper %>_path(@conn, :update, @<%= schema.singular %>)) %>
 
-<%%= link "Back", to: Routes.<%= schema.route_helper %>_path(@conn, :index) %>
+<span><%%= link "Back", to: Routes.<%= schema.route_helper %>_path(@conn, :index) %></span>
diff --git a/priv/templates/phx.gen.html/form.html.eex b/priv/templates/phx.gen.html/form.html.eex
@@ -5,11 +5,11 @@
     </div>
   <%% end %>
 <%= for {label, input, error} <- inputs, input do %>
-  <div class="form-group">
-    <%= label %>
-    <%= input %>
-    <%= error %>
-  </div>
+  <%= label %>
+  <%= input %>
+  <%= error %>
 <% end %>
-  <%%= submit "Save" %>
+  <div>
+    <%%= submit "Save" %>
+  </div>
 <%% end %>
diff --git a/priv/templates/phx.gen.html/index.html.eex b/priv/templates/phx.gen.html/index.html.eex
@@ -23,4 +23,4 @@
   </tbody>
 </table>
 
-<%%= link "New <%= schema.human_singular %>", to: Routes.<%= schema.route_helper %>_path(@conn, :new) %>
+<span><%%= link "New <%= schema.human_singular %>", to: Routes.<%= schema.route_helper %>_path(@conn, :new) %></span>
diff --git a/priv/templates/phx.gen.html/new.html.eex b/priv/templates/phx.gen.html/new.html.eex
@@ -2,4 +2,4 @@
 
 <%%= render "form.html", Map.put(assigns, :action, Routes.<%= schema.route_helper %>_path(@conn, :create)) %>
 
-<%%= link "Back", to: Routes.<%= schema.route_helper %>_path(@conn, :index) %>
+<span><%%= link "Back", to: Routes.<%= schema.route_helper %>_path(@conn, :index) %></span>
diff --git a/priv/templates/phx.gen.html/show.html.eex b/priv/templates/phx.gen.html/show.html.eex
@@ -1,13 +1,13 @@
 <h2>Show <%= schema.human_singular %></h2>
 
-<dl>
+<ul>
 <%= for {k, _} <- schema.attrs do %>
-  <dt><%= Phoenix.Naming.humanize(Atom.to_string(k)) %></dt>
-  <dd><%%= @<%= schema.singular %>.<%= k %> %></dd>
+  <li>
+    <strong><%= Phoenix.Naming.humanize(Atom.to_string(k)) %>:</strong>
+    <%%= @<%= schema.singular %>.<%= k %> %>
+  </li>
 <% end %>
-</dl>
+</ul>
 
-<div class="phx-flex">
-<%%= link "Edit", to: Routes.<%= schema.route_helper %>_path(@conn, :edit, @<%= schema.singular %>) %>
-<%%= link "Back", to: Routes.<%= schema.route_helper %>_path(@conn, :index) %>
-</div>
+<span><%%= link "Edit", to: Routes.<%= schema.route_helper %>_path(@conn, :edit, @<%= schema.singular %>) %></span>
+<span><%%= link "Back", to: Routes.<%= schema.route_helper %>_path(@conn, :index) %></span>
diff --git a/test/mix/tasks/phx.gen.html_test.exs b/test/mix/tasks/phx.gen.html_test.exs
@@ -105,29 +105,29 @@ defmodule Mix.Tasks.Phx.Gen.HtmlTest do
       end
 
       assert_file "lib/phoenix_web/templates/post/form.html.eex", fn file ->
-        assert file =~ ~s(<%= text_input f, :title, class: "form-control" %>)
-        assert file =~ ~s(<%= number_input f, :votes, class: "form-control" %>)
-        assert file =~ ~s(<%= number_input f, :cost, step: "any", class: "form-control" %>)
-        assert file =~ ~s(<%= multiple_select f, :tags, ["Option 1": "option1", "Option 2": "option2"], class: "form-control" %>)
-        assert file =~ ~s(<%= checkbox f, :popular, class: "checkbox" %>)
-        assert file =~ ~s(<%= datetime_select f, :drafted_at, class: "form-control" %>)
-        assert file =~ ~s(<%= datetime_select f, :published_at, class: "form-control" %>)
-        assert file =~ ~s(<%= datetime_select f, :deleted_at, class: "form-control" %>)
-        assert file =~ ~s(<%= date_select f, :announcement_date, class: "form-control" %>)
-        assert file =~ ~s(<%= time_select f, :alarm, class: "form-control" %>)
-        assert file =~ ~s(<%= text_input f, :secret, class: "form-control" %>)
-
-        assert file =~ ~s(<%= label f, :title, class: "control-label" %>)
-        assert file =~ ~s(<%= label f, :votes, class: "control-label" %>)
-        assert file =~ ~s(<%= label f, :cost, class: "control-label" %>)
-        assert file =~ ~s(<%= label f, :tags, class: "control-label" %>)
-        assert file =~ ~s(<%= label f, :popular, class: "control-label" %>)
-        assert file =~ ~s(<%= label f, :drafted_at, class: "control-label" %>)
-        assert file =~ ~s(<%= label f, :published_at, class: "control-label" %>)
-        assert file =~ ~s(<%= label f, :deleted_at, class: "control-label" %>)
-        assert file =~ ~s(<%= label f, :announcement_date, class: "control-label" %>)
-        assert file =~ ~s(<%= label f, :alarm, class: "control-label" %>)
-        assert file =~ ~s(<%= label f, :secret, class: "control-label" %>)
+        assert file =~ ~s(<%= text_input f, :title %>)
+        assert file =~ ~s(<%= number_input f, :votes %>)
+        assert file =~ ~s(<%= number_input f, :cost, step: "any" %>)
+        assert file =~ ~s(<%= multiple_select f, :tags, ["Option 1": "option1", "Option 2": "option2"] %>)
+        assert file =~ ~s(<%= checkbox f, :popular %>)
+        assert file =~ ~s(<%= datetime_select f, :drafted_at %>)
+        assert file =~ ~s(<%= datetime_select f, :published_at %>)
+        assert file =~ ~s(<%= datetime_select f, :deleted_at %>)
+        assert file =~ ~s(<%= date_select f, :announcement_date %>)
+        assert file =~ ~s(<%= time_select f, :alarm %>)
+        assert file =~ ~s(<%= text_input f, :secret %>)
+
+        assert file =~ ~s(<%= label f, :title %>)
+        assert file =~ ~s(<%= label f, :votes %>)
+        assert file =~ ~s(<%= label f, :cost %>)
+        assert file =~ ~s(<%= label f, :tags %>)
+        assert file =~ ~s(<%= label f, :popular %>)
+        assert file =~ ~s(<%= label f, :drafted_at %>)
+        assert file =~ ~s(<%= label f, :published_at %>)
+        assert file =~ ~s(<%= label f, :deleted_at %>)
+        assert file =~ ~s(<%= label f, :announcement_date %>)
+        assert file =~ ~s(<%= label f, :alarm %>)
+        assert file =~ ~s(<%= label f, :secret %>)
 
         refute file =~ ~s(<%= label f, :user_id)
         refute file =~ ~s(<%= number_input f, :user_id)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@

		<%%= render "form.html", Map.put(assigns, :action, Routes.<%= schema.route_helper %>_path(@conn, :update, @<%= schema.singular %>)) %>

		<%%= link "Back", to: Routes.<%= schema.route_helper %>_path(@conn, :index) %>
		<span><%%= link "Back", to: Routes.<%= schema.route_helper %>_path(@conn, :index) %></span>