Update default bootstrap version to 4 (latest cdn)

spec/support/fixtures/render_fixtures.cr

@@ -13,8 +13,8 @@ module RenderFixtures
       <div class="form-group">
         <textarea class="form-control" rows="10" name="content" placeholder="Content">out there in the cold</textarea>
       </div>
-      <button class="btn btn-primary btn-xs" type="submit">Submit</button>
-      <a class="btn btn-default btn-xs" href="/posts">back</a>
+      <button class="btn btn-primary btn-sm" type="submit">Submit</button>
+      <a class="btn btn-light btn-sm" href="/posts">back</a>
     </form>
     HTML
   end

spec/support/sample/views/test/_form.slang

@@ -3,6 +3,6 @@ form action="/posts" method="post"
   div.form-group
     input.form-control type="text" name="title" placeholder="Title" value="hey you"
   div.form-group
-    textarea.form-control rows="10" name="content" placeholder="Content" = "out there in the cold" 
-  button.btn.btn-primary.btn-xs type="submit" Submit
-  a.btn.btn-default.btn-xs href="/posts" back
+    textarea.form-control rows="10" name="content" placeholder="Content" = "out there in the cold"
+  button.btn.btn-primary.btn-sm type="submit" Submit
+  a.btn.btn-light.btn-sm href="/posts" back

src/amber/cli/templates/app/src/assets/stylesheets/main.scss

@@ -90,3 +90,7 @@ h6, .h6 {
     display: none;
   }
 }
+
+.table td, .table th {
+  vertical-align: middle;
+}

src/amber/cli/templates/app/src/views/home/index.ecr.ecr

@@ -1,10 +1,12 @@
-<div id="logo" class="col-sm-6"></div>
-<div class="col-sm-6">
-  <h2><%= "<" %>%= t "welcome_to_amber" %></h2>
-  <p>Thank you for trying out the Amber Framework.  We are working hard to provide a super fast and reliable framework that provides all the productivity tools you are used to without sacrificing the speed.</p>
-  <div class="list-group">
-    <a class="list-group-item list-group-item-action" target="_blank" href="https://docs.amberframework.org">Getting Started with Amber Framework</a>
-    <a class="list-group-item list-group-item-action" target="_blank" href="https://github.com/veelenga/awesome-crystal">List of Awesome Crystal projects and shards</a>
-    <a class="list-group-item list-group-item-action" target="_blank" href="https://crystalshards.xyz">What's hot in Crystal right now</a>
+<div class="row">
+  <div id="logo"></div>
+  <div class="col-sm-6">
+    <h2><%= "<" %>%= t "welcome_to_amber" %></h2>
+    <p>Thank you for trying out the Amber Framework.  We are working hard to provide a super fast and reliable framework that provides all the productivity tools you are used to without sacrificing the speed.</p>
+    <div class="list-group">
+      <a class="list-group-item list-group-item-action" target="_blank" href="https://docs.amberframework.org">Getting Started with Amber Framework</a>
+      <a class="list-group-item list-group-item-action" target="_blank" href="https://github.com/veelenga/awesome-crystal">List of Awesome Crystal projects and shards</a>
+      <a class="list-group-item list-group-item-action" target="_blank" href="https://crystalshards.xyz">What's hot in Crystal right now</a>
+    </div>
   </div>
 </div>

src/amber/cli/templates/app/src/views/home/index.slang.ecr

@@ -1,8 +1,9 @@
-div#logo.col-sm-6
-div.col-sm-6
-  h2 = t "welcome_to_amber"
-  p Thank you for trying out the Amber Framework.  We are working hard to provide a super fast and reliable framework that provides all the productivity tools you are used to without sacrificing the speed.
-  div.list-group
-    a.list-group-item.list-group-item-action target="_blank" href="https://docs.amberframework.org" Getting Started with Amber Framework
-    a.list-group-item.list-group-item-action target="_blank" href="https://github.com/veelenga/awesome-crystal" List of Awesome Crystal projects and shards
-    a.list-group-item.list-group-item-action target="_blank" href="https://crystalshards.xyz" What's hot in Crystal right now
+div.row
+  div#logo
+  div.col-sm-6
+    h2 = t "welcome_to_amber"
+    p Thank you for trying out the Amber Framework.  We are working hard to provide a super fast and reliable framework that provides all the productivity tools you are used to without sacrificing the speed.
+    div.list-group
+      a.list-group-item.list-group-item-action target="_blank" href="https://docs.amberframework.org" Getting Started with Amber Framework
+      a.list-group-item.list-group-item-action target="_blank" href="https://github.com/veelenga/awesome-crystal" List of Awesome Crystal projects and shards
+      a.list-group-item.list-group-item-action target="_blank" href="https://crystalshards.xyz" What's hot in Crystal right now

src/amber/cli/templates/app/src/views/layouts/application.ecr.ecr

@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="/dist/main.bundle.css">
   <head>
   <body>
@@ -19,11 +19,13 @@
 
     <div class="container">
       <div class="row">
-        <%="<"%>%- flash.each do |key, value| %>
-          <div class="alert alert-<%="<"%>%= key %>">
-            <p><%="<"%>%= flash[key] %></p>
-          </div>
-        <%="<"%>%- end %>
+        <div class="col-sm">
+          <%="<"%>%- flash.each do |key, value| %>
+            <div class="alert alert-<%="<"%>%= key %>">
+              <p><%="<"%>%= flash[key] %></p>
+            </div>
+          <%="<"%>%- end %>
+        </div>
       </div>
 
       <div class="row">
@@ -32,8 +34,9 @@
         </div>
       </div>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
     <script src="/dist/main.bundle.js"></script>
   </body>
 </html>

src/amber/cli/templates/app/src/views/layouts/application.slang.ecr

@@ -5,7 +5,7 @@ html
     meta charset="utf-8"
     meta http-equiv="X-UA-Compatible" content="IE=edge"
     meta name="viewport" content="width=device-width, initial-scale=1"
-    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+    link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
     link rel="stylesheet" href="/dist/main.bundle.css"
 
   body
@@ -15,13 +15,15 @@ html
           == render(partial: "layouts/_nav.slang")
     div.container
       div.row
-        - flash.each do |key, value|
-          div class="alert alert-#{key}"
-            p = flash[key]
+	      div.col-sm
+          - flash.each do |key, value|
+            div class="alert alert-#{key}"
+              p = flash[key]
       div.row
         div.col-sm-12.main
           == content
 
-    script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
-    script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
+    script src="https://code.jquery.com/jquery-3.3.1.min.js"
+    script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+    script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
     script src="/dist/main.bundle.js"

src/amber/cli/templates/auth/src/views/layouts/+_nav.ecr.ecr

@@ -1,10 +1,10 @@
 <%="<"%>%- if (current_<%= @name %> = context.current_<%= @name %>) %>
-  <a class="nav-item pull-right" href="/signout">| Sign Out</a>
+  <a class="nav-item ml-auto" href="/signout">| Sign Out</a>
   <%="<"%>%- active = context.request.path == "/profile" ? "active" : "" %>
-  <a class="nav-item <%="<"%>%= active %> pull-right" href="/profile"><%="<"%>%= current_<%= @name %>.email %></a>
+  <a class="nav-item <%="<"%>%= active %>" href="/profile"><%="<"%>%= current_<%= @name %>.email %></a>
 <%="<"%>%- else %>
   <%="<"%>%- active = context.request.path == "/signup" ? "active" : "" %>
-  <a class="nav-item <%="<"%>%= active %> pull-right" href="/signup">| Sign Up</a>
+  <a class="nav-item  ml-auto <%="<"%>%= active %>" href="/signup">| Sign Up</a>
   <%="<"%>%- active = context.request.path == "/signin" ? "active" : "" %>
-  <a class="nav-item <%="<"%>%= active %> pull-right" href="/signin">| Sign In</a>
+  <a class="nav-item <%="<"%>%= active %>" href="/signin">| Sign In</a>
 <%="<"%>%- end %>

src/amber/cli/templates/auth/src/views/layouts/+_nav.slang.ecr

@@ -1,13 +1,13 @@
 - if (current_<%= @name %> = context.current_<%= @name %>)
-  a.nav-item.pull-right href="/signout"
+  a.nav-item.ml-auto href="/signout"
     | Sign Out
   - active = context.request.path == "/profile" ? "active" : ""
-  a class="nav-item #{active} pull-right" href="/profile"
+  a class="nav-item #{active}" href="/profile"
     == current_<%= @name %>.email
 - else
   - active = context.request.path == "/signup" ? "active" : ""
-  a class="nav-item #{active} pull-right" href="/signup"
+  a class="nav-item ml-auto #{active}" href="/signup"
     | Sign Up
   - active = context.request.path == "/signin" ? "active" : ""
-  a class="nav-item #{active} pull-right" href="/signin"
+  a class="nav-item #{active}" href="/signin"
     | Sign In

src/amber/cli/templates/auth/src/views/registration/new.ecr.ecr

@@ -16,7 +16,7 @@
   <div class="form-group">
     <input class="form-control" type="password" name="password" placeholder="Password"/>
   </div>
-  <button class="btn btn-primary btn-xs" type="submit">Register</button>
+  <button class="btn btn-primary btn-sm" type="submit">Register</button>
 </form>
 <hr/>
 <%="<"%>%= link_to("Already have an account?", "/signin") -%>

src/amber/cli/templates/auth/src/views/registration/new.slang.ecr

@@ -11,7 +11,7 @@ form action="/registration" method="post"
     input.form-control type="email" name="email" placeholder="Email"
   .form-group
     input.form-control type="password" name="password" placeholder="Password"
-  button.btn.btn-primary.btn-xs type="submit"
+  button.btn.btn-primary.btn-sm type="submit"
     | Register
 <hr/>
 == link_to("Already have an account?", "/signin")

src/amber/cli/templates/auth/src/views/session/new.ecr.ecr

@@ -16,7 +16,7 @@
   <div class="form-group">
     <input class="form-control" type="password" name="password" placeholder="Password"/>
   </div>
-  <button class="btn btn-primary btn-xs" type="submit">Sign In</button>
+  <button class="btn btn-primary btn-sm" type="submit">Sign In</button>
 </form>
 <hr/>
 <%="<"%>%= link_to("Don't have an account yet?", "/signup") -%>

src/amber/cli/templates/auth/src/views/session/new.slang.ecr

@@ -11,6 +11,6 @@ form action="/session" method="post"
     input.form-control type="email" name="email" placeholder="Email"
   div.form-group
     input.form-control type="password" name="password" placeholder="Password"
-  button.btn.btn-primary.btn-xs type="submit" Sign In
+  button.btn.btn-primary.btn-sm type="submit" Sign In
 <hr/>
 == link_to("Don't have an account yet?", "/signup")

src/amber/cli/templates/auth/src/views/{{name}}/edit.ecr.ecr

@@ -13,6 +13,6 @@
   <div class="form-group">
     <input class="form-control" type="email" name="email" placeholder="Email" value="<%="<"%>%= <%= @name %>.email %>" />
   </div>
-  <%="<"%>%= submit("Update", class: "btn btn-primary btn-xs") %>
-  <%="<"%>%= link_to("profile", "/profile", class: "btn btn-default btn-xs") %>
+  <%="<"%>%= submit("Update", class: "btn btn-primary btn-sm") %>
+  <%="<"%>%= link_to("profile", "/profile", class: "btn btn-light btn-sm") %>
 </form>

src/amber/cli/templates/auth/src/views/{{name}}/edit.slang.ecr

@@ -9,5 +9,5 @@ h1 Edit Profile
   == csrf_tag
   .form-group
     input.form-control type="email" name="email" placeholder="Email" value="#{<%= @name %>.email}"
-  == submit("Update", class: "btn btn-primary btn-xs")
-  == link_to("profile", "/profile", class: "btn btn-default btn-xs")
+  == submit("Update", class: "btn btn-primary btn-sm")
+  == link_to("profile", "/profile", class: "btn btn-light btn-sm")

src/amber/cli/templates/auth/src/views/{{name}}/show.ecr.ecr

@@ -1,5 +1,5 @@
 <h1>Profile</h1>
 <p>
   <%="<"%>%= <%= @name %>.email %>
-  <%="<"%>%= link_to("edit", "/profile/edit", class: "btn btn-success btn-xs") %>
+  <%="<"%>%= link_to("edit", "/profile/edit", class: "btn btn-success btn-sm") %>
 </p>

src/amber/cli/templates/auth/src/views/{{name}}/show.slang.ecr

@@ -1,4 +1,4 @@
 h1 Profile
 p
   == <%= @name %>.email
-  == link_to("edit", "/profile/edit", class: "btn btn-success btn-xs")
+  == link_to("edit", "/profile/edit", class: "btn btn-success btn-sm")

src/amber/cli/templates/scaffold/view/src/views/{{name}}/_form.ecr.ecr

@@ -21,8 +21,8 @@
    when "text" -%>
     <%="<"%>%= text_area(name: "<%= field.name -%>", content: <%= @name %>.<%= field.name %>, placeholder: "<%= field.name.capitalize %>", class: "form-control", size: "30x10") -%>
 <% when "boolean" -%>
-    <div class="checkbox">
-      <%="<"%>%= label(<%=":#{field.name}"%>) { check_box(<%=":#{field.name}, checked: #{@name}.#{field.name}.to_s == \"1\""%>) } -%>
+    <div class="form-check">
+      <%="<"%>%= label(<%=":#{field.name}"%>, class: "form-check-label") { check_box(<%=":#{field.name}, checked: #{@name}.#{field.name}.to_s == \"1\"", class: "form-check-input"%>) } -%>
     </div>
 <% when "reference" -%>
     <%="<"%>%= label(<%=":#{field.name}"%>) -%>
@@ -32,6 +32,6 @@
 <% end -%>
   </div>
 <% end -%>
-  <%="<"%>%= submit("Submit", class: "btn btn-primary btn-xs") -%>
-  <%="<"%>%= link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-default btn-xs") -%>
+  <%="<"%>%= submit("Submit", class: "btn btn-primary btn-sm") -%>
+  <%="<"%>%= link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-light btn-sm") -%>
 </form>

src/amber/cli/templates/scaffold/view/src/views/{{name}}/_form.slang.ecr

@@ -11,15 +11,15 @@
      when "text" -%>
     == text_area(name: "<%= field.name -%>", content: <%= @name %>.<%= field.name %>, placeholder: "<%= field.name.capitalize %>", class: "form-control", size: "30x10")
   <%- when "boolean" -%>
-    div.checkbox
-      == label(<%=":#{field.name}"%>) do
-        == check_box(<%=":#{field.name}, checked: #{@name}.#{field.name}.to_s == \"1\""%>)
+    div.form-check
+      == label(<%=":#{field.name}"%>, class: "form-check-label") do
+        == check_box(<%=":#{field.name}, checked: #{@name}.#{field.name}.to_s == \"1\""%>, class: "form-check-input")
   <%- when "reference" -%>
     == label(<%=":#{field.name}"%>)
     == select_field(name: "<%= field.name %>_id", collection: <%= field.name.capitalize %>.all.map{|<%= field.name %>| [<%= field.name %>.id, <%= field.name %>.id]}, selected: <%= @name %>.<%= field.name %>_id, class: "form-control")
   <%- else -%>
     == text_field(name: "<%= field.name %>", value: <%= @name %>.<%= field.name %>, placeholder: "<%= field.name.capitalize %>", class: "form-control")
   <%- end -%>
 <%- end -%>
-  == submit("Submit", class: "btn btn-primary btn-xs")
-  == link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-default btn-xs")
+  == submit("Submit", class: "btn btn-primary btn-sm")
+  == link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-light btn-sm")

src/amber/cli/templates/scaffold/view/src/views/{{name}}/index.ecr.ecr

@@ -3,7 +3,7 @@
     <h2><%= Inflector.pluralize(display_name) %></h2>
   </div>
   <div class="col-sm-1">
-    <a class="btn btn-success btn-xs" href="/<%= Inflector.pluralize(@name) %>/new">New</a>
+    <a class="btn btn-success btn-sm" href="/<%= Inflector.pluralize(@name) %>/new">New</a>
   </div>
 </div>
 
@@ -24,9 +24,9 @@
 <% end -%>
         <td>
           <span>
-            <%="<"%>%= link_to("read", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}", class: "btn btn-primary btn-xs") -%>
-            <%="<"%>%= link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-xs") -%>
-            <%="<"%>%= link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-xs") -%>
+            <%="<"%>%= link_to("read", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}", class: "btn btn-primary btn-sm") -%>
+            <%="<"%>%= link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-sm") -%>
+            <%="<"%>%= link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-sm") -%>
           </span>
         </td>
       </tr>

src/amber/cli/templates/scaffold/view/src/views/{{name}}/index.slang.ecr

@@ -2,7 +2,7 @@ div.row
   div.col-sm-11
     h2 <%= Inflector.pluralize(display_name) %>
   div.col-sm-1
-    a.btn.btn-success.btn-xs href="/<%= Inflector.pluralize(@name) %>/new" New
+    a.btn.btn-success.btn-sm href="/<%= Inflector.pluralize(@name) %>/new" New
 div.table-responsive
   table.table.table-striped
     thead
@@ -19,6 +19,6 @@ div.table-responsive
           <%- end -%>
           td
             span
-              == link_to("read", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}", class: "btn btn-primary btn-xs")
-              == link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-xs")
-              == link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{ <%= @name %>.id }?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-xs")
+              == link_to("read", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}", class: "btn btn-primary btn-sm")
+              == link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-sm")
+              == link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{ <%= @name %>.id }?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-sm")

src/amber/cli/templates/scaffold/view/src/views/{{name}}/show.ecr.ecr

@@ -4,7 +4,7 @@
 <p><%="<"%>%= <%= @name %>.<%= field.name %><%= field.reference? ? ".id" : "" %> %></p>
 <% end -%>
 <p>
-  <%="<"%>%= link_to("back", "/<%= Inflector.pluralize(@name) %>s", class: "btn btn-default btn-xs") -%>
-  <%="<"%>%= link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-xs") -%>
-  <%="<"%>%= link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-xs") -%>
+  <%="<"%>%= link_to("back", "/<%= Inflector.pluralize(@name) %>s", class: "btn btn-light btn-sm") -%>
+  <%="<"%>%= link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-sm") -%>
+  <%="<"%>%= link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-sm") -%>
 </p>

src/amber/cli/templates/scaffold/view/src/views/{{name}}/show.slang.ecr

@@ -3,6 +3,6 @@ h1 Show <%= display_name %>
 p = <%= @name %>.<%= field.name %><%= field.reference? ? ".id" : "" %>
 <% end -%>
 p
-  == link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-default btn-xs")
-  == link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-xs")
-  == link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-xs")
+  == link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-light btn-sm")
+  == link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-sm")
+  == link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-sm")