update html forms / tables to be more visually appealing #95

dwyl · Aug 31, 2020 · 3100d28 · 3100d28
1 parent 52c0828
commit 3100d28
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 29 deletions.
diff --git a/lib/auth_web/templates/app/form.html.eex b/lib/auth_web/templates/app/form.html.eex
@@ -5,23 +5,26 @@
     </div>
   <% end %>
 
-  <%= label f, :name %>
-  <%= text_input f, :name %>
+  <%= label f, :name%>
+  <%= text_input f, :name, class: "db w-100 mt2 pa2 ba b--dark-grey",
+    placeholder: "A distinctive name"%>
   <%= error_tag f, :name %>
-
-  <%= label f, :description %>
-  <%= text_input f, :description %>
+  <br />
+  <%= label f, :description, class: "mt3" %>
+  <%= textarea f, :description, class: "db w-100 mt2 pa2 ba b--black",
+    placeholder: "Be as descriptive as possible." %>
   <%= error_tag f, :description %>
-
-  <%= label f, :url %>
-  <%= text_input f, :url %>
+  <br />
+  <%= label f, :url, class: "pt3" %>
+  <%= text_input f, :url, class: "db w-100 mt2 pa2 ba b--dark-grey",
+  placeholder: "The URL of your app e.g: http://localhost:4000 or dwyl.com"
+  %>
   <%= error_tag f, :url %>
 
-  <%= label f, :end %>
-  <%= datetime_select f, :end %>
-  <%= error_tag f, :end %>
-
-  <div>
-    <%= submit "Save" %>
+  <div class="mt2 fr">
+    <%= submit "Save",
+    class: "pointer br2 ba b--dark-green bg-green white pa3 ml1 mv1 f4
+    shadow-hover bg-animate hover-bg-dark-green border-box no-underline"
+    %>
   </div>
 <% end %>
diff --git a/lib/auth_web/templates/app/index.html.eex b/lib/auth_web/templates/app/index.html.eex
@@ -1,14 +1,11 @@
-<h1>Listing Apps</h1>
+<h1 class="tc mb4">Apps</h1>
 
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Description</th>
-      <th>Url</th>
-      <th>End</th>
-
-      <th></th>
+  <table class="w-100 f3">
+    <thead>
+      <tr class="f3">
+        <th>Name</th>
+        <th>Description</th>
+        <th>Url</th>
     </tr>
   </thead>
   <tbody>
@@ -17,8 +14,6 @@
       <td><%= app.name %></td>
       <td><%= app.description %></td>
       <td><%= app.url %></td>
-      <td><%= app.end %></td>
-
       <td>
         <span><%= link "Show", to: Routes.app_path(@conn, :show, app) %></span>
         <span><%= link "Edit", to: Routes.app_path(@conn, :edit, app) %></span>
@@ -30,3 +25,14 @@
 </table>
 
 <span><%= link "New App", to: Routes.app_path(@conn, :new) %></span>
+
+  <style> /* stackoverflow.com/questions/9789723/css-text-overflow-table-cell */
+  td {
+      max-width: 400px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-align: center;
+      padding: 10px;
+  }
+  </style>
diff --git a/lib/auth_web/templates/app/new.html.eex b/lib/auth_web/templates/app/new.html.eex
@@ -1,5 +1,13 @@
-<h1>New App</h1>
+<div class="f3 w-60 center">
+  <h1>New App</h1>
 
-<%= render "form.html", Map.put(assigns, :action, Routes.app_path(@conn, :create)) %>
+  <%= render "form.html", Map.put(assigns, :action, Routes.app_path(@conn, :create)) %>
 
-<span><%= link "Back", to: Routes.app_path(@conn, :index) %></span>
+  <span><%= link "< Back", to: Routes.app_path(@conn, :index),
+  class: "fl pointer br2 ba b--orange bg-gold white pa3 f4 mt3
+  shadow-hover bg-animate hover-bg-orange border-box no-underline",
+  data:
+   [confirm: "Are you sure you want to disguard this form?
+    (The data cannot be recovered!)"]
+  %></span>
+</div>