Switch to Bootstrap

.gitignore

@@ -22,11 +22,6 @@ erl_crash.dump
 # Ignore package tarball (built via "mix hex.build").
 frenzy-*.tar
 
-# Since we are building assets from assets/,
-# we ignore priv/static. You may want to comment
-# this depending on your deployment strategy.
-/priv/static/
-
 # Files matching config/*.secret.exs pattern contain sensitive
 # data and you should not commit them into version control.
 #

lib/frenzy_web/templates/account/change_fever_password.html.eex

@@ -1,11 +1,15 @@
 <h2>Change Fever Password</h2>
 
 <%= form_tag Routes.account_path(@conn, :do_change_fever_password), method: :post do %>
-  <div class="form-group">
+  <div class="form-group row">
-    <label for="new_password">New Fever Password</label>
+    <label for="new_password" class="col-sm-2 col-form-label">New Fever Password</label>
-    <input type="password" name="new_password" id="new_password" minlength="8">
+    <div class="col-sm-10">
+      <input type="password" name="new_password" id="new_password" minlength="8" class="form-control">
+    </div>
+  </div>
+  <div class="form-group row">
+    <div class="col-sm-10">
+      <%= submit "Change Fever Password", class: "btn btn-primary" %>
     </div>
-  <div class="form-group">
-    <%= submit "Change Fever Password" %>
   </div>
 <% end %>

lib/frenzy_web/templates/account/change_password.html.eex

@@ -1,19 +1,27 @@
 <h2>Change Password</h2>
 
 <%= form_tag Routes.account_path(@conn, :do_change_password), method: :post do %>
-  <div class="form-group">
+  <div class="form-group row">
-    <label for="old_password">Old Password</label>
+    <label for="old_password" class="col-sm-2 col-form-label">Old Password</label>
-    <input type="password" name="old_password" id="old_password" minlength="8">
+    <div class="col-sm-10">
+      <input type="password" name="old_password" id="old_password" minlength="8" class="form-control">
     </div>
-  <div class="form-group">
-    <label for="new_password">New Password</label>
-    <input type="password" name="new_password" id="new_password" minlength="8">
   </div>
-  <div class="form-group">
+  <div class="form-group row">
-    <label for="confirm_new_password">Confirm New Password</label>
+    <label for="new_password" class="col-sm-2 col-form-label">New Password</label>
-    <input type="password" name="confirm_new_password" id="confirm_new_password" minlength="8">
+    <div class="col-sm-10">
+      <input type="password" name="new_password" id="new_password" minlength="8" class="form-control">
+    </div>
+  </div>
+  <div class="form-group row">
+    <label for="confirm_new_password" class="col-sm-2 col-form-label">Confirm New Password</label>
+    <div class="col-sm-10">
+      <input type="password" name="confirm_new_password" id="confirm_new_password" minlength="8" class="form-control">
+    </div>
+  </div>
+  <div class="form-group row">
+    <div class="col-sm-10">
+      <%= submit "Change Password", class: "btn btn-primary" %>
     </div>
-  <div class="form-group">
-    <%= submit "Change Password" %>
   </div>
 <% end %>

lib/frenzy_web/templates/account/show.html.eex

@@ -1,17 +1,20 @@
 <h1>User Settings</h1>
-<h2><%= @user.username %></h2>
+<h2><pre><%= @user.username %></pre></h2>
 
-<a href="<%= Routes.account_path(@conn, :change_password) %>" class="button">Change Password</a>
+<a href="<%= Routes.account_path(@conn, :change_password) %>" class="btn btn-secondary">Change Password</a>
 
-<a href="<%= Routes.account_path(@conn, :change_fever_password) %>" class="button">Change Fever Password</a>
+<a href="<%= Routes.account_path(@conn, :change_fever_password) %>" class="btn btn-secondary">Change Fever Password</a>
 
-<h2>Approved Clients</h2>
+<h2 class="mt-4">Approved Clients</h2>
 
-<table>
+<table class="table table-striped">
+  <thead>
     <tr>
       <th>Client</th>
       <th>Revoke Access</th>
     </tr>
+  </thead>
+  <tbody>
     <%= for {approved, fervor} <- @clients do %>
       <tr>
         <td>
@@ -24,9 +27,10 @@
         <td>
           <%= form_tag Routes.account_path(@conn, :remove_client), method: :post do %>
             <input type="hidden" name="client_id" value="<%= approved.client_id %>">
-          <%= submit "Revoke" %>
+            <%= submit "Revoke", class: "btn btn-danger" %>
           <% end %>
         </td>
       </tr>
     <% end %>
+  </tbody>
 </table>

lib/frenzy_web/templates/feed/show.html.eex

@@ -1,28 +1,32 @@
-<%= form_tag Routes.feed_path(@conn, :refresh, @feed.id), method: :post do %>
+<h2><%= @feed.title %></h2>
-  <%= submit "Refresh Feed" %>
-<% end %>
 
+<%= form_tag Routes.feed_path(@conn, :refresh, @feed.id), method: :post, class: "d-inline" do %>
+  <%= submit "Refresh Feed", class: "btn btn-primary" %>
+<% end %>
 
 <%= if @feed.filter_enabled do %>
-  <%= form_tag Routes.feed_path(@conn, :disable_filter, @feed.id), method: :post do %>
+  <%= form_tag Routes.feed_path(@conn, :disable_filter, @feed.id), method: :post, class: "d-inline" do %>
-    <%= submit "Disable Filter" %>
+    <%= submit "Disable Filter", class: "btn btn-secondary" %>
   <% end %>
 
-  <%= form_tag Routes.filter_path(@conn, :edit, @feed.filter.id), method: :get do %>
+  <%= form_tag Routes.filter_path(@conn, :edit, @feed.filter.id), method: :get, class: "d-inline" do %>
-    <%= submit "Edit Filter" %>
+    <%= submit "Edit Filter", class: "btn btn-secondary" %>
   <% end %>
 <% else %>
-  <%= form_tag Routes.feed_path(@conn, :enable_filter, @feed.id), method: :post do %>
+  <%= form_tag Routes.feed_path(@conn, :enable_filter, @feed.id), method: :post, class: "d-inline" do %>
-    <%= submit "Enable Filter" %>
+    <%= submit "Enable Filter", class: "btn btn-secondary" %>
   <% end %>
 <% end %>
 
-<%= form_tag Routes.feed_path(@conn, :delete, @feed.id), method: :delete do %>
+<%= form_tag Routes.feed_path(@conn, :delete, @feed.id), method: :delete, class: "d-inline" do %>
-  <%= submit "Delete Feed" %>
+  <%= submit "Delete Feed", class: "btn btn-danger" %>
 <% end %>
 
 
-<table>
+<h3 class="mt-4">Items</h3>
+
+<table class="table table-striped">
+  <tbody>
     <%= for item <- @items do %>
       <tr <%= if item.read do %>class="item-read"<% end %>>
         <td>
@@ -34,4 +38,5 @@
         </td>
       </tr>
     <% end %>
+  </tbody>
 </table>

lib/frenzy_web/templates/fervor/oauth/authorize.html.eex

@@ -1,4 +1,4 @@
-<h1><%= @client.client_name %> wants to access your account</h1>
+<h2><%= @client.client_name %> wants to access your account</h2>
 
 <%= form_tag Routes.oauth_path(@conn, :authorize_post), method: :post do %>
   <input type="hidden" name="client_id" value="<%= @client.client_id %>">
@@ -6,6 +6,7 @@
     <input type="hidden" name="state" value="<%= @state %>">
   <% end %>
   <div class="form-group">
-    <%= submit "Grant access" %>
+    <%= submit "Grant access", class: "btn btn-primary" %>
+    <p>To reject the request, close this page.</p>
   </div>
 <% end %>

lib/frenzy_web/templates/filter/edit.html.eex

@@ -1,34 +1,46 @@
 <h2>Filter</h2>
 <%= form_for @changeset, Routes.filter_path(@conn, :update, @changeset.data.id), fn form -> %>
-  <div class="form-group">
+  <div class="form-group row">
-    <label for="mode">Mode</label>
+    <label for="mode" class="col-sm-2 col-form-label">Mode</label>
-    <%= select form, :mode, [{"Accept", :accept}, {"Reject", :reject}] %>
+    <div class="col-sm-10">
+      <%= select form, :mode, [{"Accept", :accept}, {"Reject", :reject}], class: "form-control" %>
+    </div>
+  </div>
+  <div class="form-group row">
+    <label for="score" class="col-sm-2 col-form-label">Score</label>
+    <div class="col-sm-10">
+      <%= number_input form, :score, class: "form-control" %>
     </div>
-  <div class="form-group">
-    <label for="score">Score</label>
-    <%= number_input form, :score %>
   </div>
 
-  <table>
+  <div class="card mt-5 mb-5">
+    <div class="card-body">
+      <h3>Rules</h3>
+
+      <table class="table">
+        <thead>
           <tr>
             <th>Property</th>
             <th>Mode</th>
             <th>Param</th>
             <th>Weight</th>
+            <th></th>
           </tr>
+        </thead>
+        <tbody>
           <%= inputs_for form, :rules, fn p -> %>
             <tr>
               <td>
-          <%= select p, :property, [{"URL", :url}, {"Title", :title}, {"Author", :author}, {"Content", :content}] %>
+                <%= select p, :property, [{"URL", :url}, {"Title", :title}, {"Author", :author}, {"Content", :content}], class: "form-control" %>
               </td>
               <td>
-          <%= select p, :mode, [{"contains", :contains_string}, {"matches regex", :matches_regex}] %>
+                <%= select p, :mode, [{"contains", :contains_string}, {"matches regex", :matches_regex}], class: "form-control" %>
               </td>
               <td>
-          <%= text_input p, :param %>
+                <%= text_input p, :param, class: "form-control" %>
               </td>
               <td>
-          <%= number_input p, :weight %>
+                <%= number_input p, :weight, class: "form-control" %>
               </td>
               <td>
                 <%# when nesting form tags, the first nested one seems to get removed %>
@@ -37,17 +49,27 @@
                 <%# but is present and invisible in subsequent rows %>
                 <form style="display: none;"></form>
                 <%= form_tag Routes.filter_path(@conn, :remove_rule, @changeset.data.id, [rule_id: p.data.id]), method: :post do %>
-            <%= submit "Delete" %>
+                  <%= submit "Delete", class: "btn btn-danger" %>
                 <% end %>
               </td>
             </tr>
           <% end %>
+        </tbody>
       </table>
 
-  <div class="form-group">
+      <div class="form-group row">
-    <%= submit "Update Filter" %>
+        <div class="col-sm-10">
+          <%= form_tag Routes.filter_path(@conn, :add_rule, @changeset.data.id), method: :post do %>
+            <%= submit "Add Rule", class: "btn btn-secondary" %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <div class="col-sm-10">
+      <%= submit "Update Filter", class: "btn btn-primary" %>
+    </div>
   </div>
 <% end %>
-<%= form_tag Routes.filter_path(@conn, :add_rule, @changeset.data.id), method: :post do %>
-  <%= submit "Add Rule" %>
-<% end %>

lib/frenzy_web/templates/group/index.html.eex

@@ -1,6 +1,13 @@
-<a href="<%= Routes.group_path(@conn, :new) %>" class="button">Add Group</a>
+<a href="<%= Routes.group_path(@conn, :new) %>" class="btn btn-primary">Add Group</a>
 
-<table>
+<table class="table table-striped mt-4">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
     <%= for group <- @groups do %>
       <tr>
         <td>
@@ -14,4 +21,5 @@
         </td>
       </tr>
     <% end %>
+  </tbody>
 </table>

lib/frenzy_web/templates/group/new.html.eex

@@ -1,9 +1,13 @@
 <%= form_for @changeset, Routes.group_path(@conn, :create), fn form -> %>
-  <div class="form-group">
+  <div class="form-group row">
-    <label for="title">Title</label>
+    <label for="title" class="col-sm-2 col-form-label">Title</label>
-    <%= text_input form, :title %>
+    <div class="col-sm-10">
+      <%= text_input form, :title, placeholder: "My New Group", class: "form-control" %>
+    </div>
+  </div>
+  <div class="form-group row">
+    <div class="col-sm-10">
+      <%= submit "Create Group", class: "btn btn-primary" %>
     </div>
-  <div class="form-group">
-    <%= submit "Create Group" %>
   </div>
 <% end %>

lib/frenzy_web/templates/group/show.html.eex

@@ -1,21 +1,28 @@
 <h2><%= @group.title %></h2>
 
-<%= form_tag Routes.group_path(@conn, :delete, @group.id), method: :delete do %>
-  <%= submit "Delete Group" %>
-<% end %>
-
 <%= form_for @create_feed_changeset, Routes.feed_path(@conn, :create), fn form -> %>
   <%= hidden_input form, :group_id %>
-  <div class="form-group">
+  <div class="form-group row">
-    <%= label form, :feed_url, "Feed URL" %>
+    <%= label form, :feed_url, "Feed URL", class: "col-sm-2 col-form-label" %>
-    <%= text_input form, :feed_url %>
+    <div class="col-sm-10">
+      <%= text_input form, :feed_url, placeholder: "https://example.com/feed.xml", class: "form-control" %>
+    </div>
+  </div>
+  <div class="form-group row">
+    <div class="col-sm-10">
+      <%= submit "Add Feed", class: "btn btn-primary" %>
     </div>
-  <div class="form-group">
-    <%= submit "Add Feed" %>
   </div>
 <% end %>
 
-<table>
+<%= form_tag Routes.group_path(@conn, :delete, @group.id), method: :delete do %>
+  <%= submit "Delete Group", class: "btn btn-danger" %>
+<% end %>
+
+<h3 class="mt-4">Feeds</h3>
+
+<table class="table table-striped">
+  <tbody>
     <%= for feed <- @group.feeds do %>
       <tr>
         <td>
@@ -26,4 +33,5 @@
         </td>
       </tr>
     <% end %>
+  </tbody>
 </table>

lib/frenzy_web/templates/item/show.html.eex

@@ -1,17 +1,17 @@
-<%= if @item.read do %>
-  <%= form_tag Routes.item_path(@conn, :unread, @item.id), method: :post do %>
-    <%= submit "Mark as Unread" %>
-  <% end %>
-<% else %>
-  <%= form_tag Routes.item_path(@conn, :read, @item.id), method: :post do %>
-    <%= submit "Mark as Read" %>
-  <% end %>
-<% end %>
-
-<a href="<%= Routes.feed_path(@conn, :show, @feed.id) %>"><%= @feed.title %></a>
 <h1>
   <a href="<%= @item.url %>"><%= @item.title %></a>    
 </h1>
-<article>
+
+<%= if @item.read do %>
+  <%= form_tag Routes.item_path(@conn, :unread, @item.id), method: :post do %>
+    <%= submit "Mark as Unread", class: "btn btn-secondary" %>
+  <% end %>
+<% else %>
+  <%= form_tag Routes.item_path(@conn, :read, @item.id), method: :post do %>
+    <%= submit "Mark as Read", class: "btn btn-secondary" %>
+  <% end %>
+<% end %>
+
+<article class="mt-4">
   <%= raw(@item.content) %>
 </article>

lib/frenzy_web/templates/layout/app.html.eex

@@ -3,29 +3,47 @@
   <head>
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
-    <title>Frenzy · Phoenix Framework</title>
+
+    <title>Frenzy</title>
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
   </head>
   <body>
     <header>
-      <section class="container">
+      <nav rol="navigation" class="navbar navbar-expand-lg navbar-light bg-light">
-        <nav role="navigation">
+        <div class="container">
-          <ul>
+          <a href="/" class="navbar-brand">Frenzy</a>
-            <li><a href="/">Frenzy</a></li>
+
+          <div class="" id="navbarContent">
+            <ul class="navbar-nav mr-auto">
+            </ul>
+            <ul class="navbar-nav flex-row ml-md-auto">
               <%= unless is_nil(@conn.assigns[:user]) do %>
-              <li><a href="<%= Routes.account_path(@conn, :show) %>">Account</a></li>
+                <li class="nav-item"><a href="<%= Routes.account_path(@conn, :show) %>" class="nav-link">Account</a></li>
-              <li><a href="<%= Routes.login_path(@conn, :logout) %>">Log Out</a></li>
+                <li class="nav-item"><a href="<%= Routes.login_path(@conn, :logout) %>" class="nav-link">Log Out</a></li>
               <% end %>
             </ul>
+          </div>
+        </div>
       </nav>
-      </section>
     </header>
-    <main role="main" class="container">
+    <main role="main" class="main mt-4">
-      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
+      <div class="container">
+        <%= if get_flash(@conn, :info) do %>
+          <p class="alert alert-primary" role="alert"><%= get_flash(@conn, :info) %></p>
+        <% end %>
+        <%= if get_flash(@conn, :error) do %>
           <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+        <% end %>
+
         <%= render @view_module, @view_template, assigns %>
+      </div>
     </main>
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
     <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </body>
 </html>

lib/frenzy_web/templates/login/login.html.eex

@@ -2,15 +2,21 @@
   <%= if @continue do %>
     <input type="hidden" name="continue" value="<%= @continue %>">
   <% end %>
-  <div class="form-group">
+  <div class="form-group row">
-    <label for="username">Username</label>
+    <label for="username" class="col-sm-2 col-form-label">Username</label>
-    <input type="text" name="username" id="username">
+    <div class="col-sm-10">
+      <input type="text" name="username" id="username" class="form-control">
     </div>
-  <div class="form-group">
-    <label for="password">Password</label>
-    <input type="password" name="password" id="password">
   </div>
-  <div class="form-group">
+  <div class="form-group row">
-    <%= submit "Log In" %>
+    <label for="password" class="col-sm-2 col-form-label">Password</label>
+    <div class="col-sm-10">
+      <input type="password" name="password" id="password" class="form-control">
+    </div>
+  </div>
+  <div class="form-group row">
+    <div class="col-sm-10">
+      <%= submit "Log In", class: "btn btn-primary" %>
+    </div>
   </div>
 <% end %>

lib/frenzy_web/views/fervor/oauth_view.ex

@@ -0,0 +1,3 @@
+defmodule FrenzyWeb.Fervor.OauthView do
+  use FrenzyWeb, :view
+end

lib/frenzy_web/views/oauth_view.ex

@@ -1,3 +0,0 @@
-defmodule FrenzyWeb.OauthView do
-  use FrenzyWeb, :view
-end

priv/static/css/app.css

@@ -0,0 +1,5 @@
+/* This file is for your main application css. */
+
+.item-read a {
+  color: #606c76;
+}

priv/static/js/app.js

@@ -0,0 +1,3 @@
+// for phoenix_html support, including form and button helpers
+// copy the following scripts into your javascript bundle:
+// * https://raw.githubusercontent.com/phoenixframework/phoenix_html/v2.10.0/priv/static/phoenix_html.js

priv/static/robots.txt

@@ -0,0 +1,5 @@
+# See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file
+#
+# To ban all spiders from the entire site uncomment the next two lines:
+User-agent: *
+Disallow: /