Update to bootstrap 5

assets/css/frenzy.scss

@@ -83,15 +83,20 @@ label.sidebar-toggle > .oi {
 .sidebar .nav-item a {
 	font-weight: 500;
 	color: #333;
+	transition: none;
 }
 
 .sidebar .nav-item a:hover {
 	text-decoration: none;
-	color: var(--blue);
+	color: var(--bs-link-color);
 }
 
 .sidebar .nav-link.active {
-	color: var(--blue);
+	color: var(--bs-link-color);
+}
+
+.sidebar .nav-item details summary a {
+	padding: 0;
 }
 
 .sidebar .nav-item details summary a:hover {

lib/frenzy_web/live/configure_stage/conditional_stage_live.html.heex

@@ -4,10 +4,10 @@
   <% end %>
 
   <%= form_for @opts, "#", [as: :opts, phx_change: :update_stage, phx_target: @myself], fn f -> %>
-    <div class="form-group row">
+    <div class="row mb-2">
       <label class="col-sm-2 col-form-label" for={"#{@id}-stage"}>Module</label>
       <div class="col-sm-10">
-        <%= select f, :stage, @stages, prompt: "Select a stage...", id: "#{@id}-stage", class: "custom-select" %>
+        <%= select f, :stage, @stages, prompt: "Select a stage...", id: "#{@id}-stage", class: "form-select" %>
       </div>
     </div>
   <% end %>
@@ -31,7 +31,7 @@
           <div class="col">
             <h4 class="m-0">Condition: Filter</h4>
           </div>
-          <div class="col text-right">
+          <div class="col text-end">
             <button phx-click="convert_to_rule" phx-target={@id} class="btn btn-primary btn-sm">Convert to Rule</button>
           </div>
         </div>
@@ -55,7 +55,7 @@
           <div class="col">
             <h4 class="m-0">Condition: Rule</h4>
           </div>
-          <div class="col text-right">
+          <div class="col text-end">
             <button phx-click="convert_to_filter" phx-target={@id} class="btn btn-primary btn-sm">Convert to Filter</button>
           </div>
         </div>

lib/frenzy_web/live/configure_stage/scrape_stage_live.html.heex

@@ -3,14 +3,14 @@
     <pre><%= Jason.encode!(@opts, pretty: true) %></pre>
   <% end %>
   <%= form_for @opts, "#", [as: :opts, phx_change: :update_stage, phx_target: @myself], fn f -> %>
-    <div class="form-group form-check">
+    <div class="form-check mb-2">
       <%= checkbox f, :convert_to_data_uris, id: "#{@id}-convert_to_data_uris", class: "form-check-input" %>
       <label class="form-check-label" for={"#{@id}-convert_to_data_uris"}>Convert Images to Embedded Data URIs</label>
     </div>
-    <div class="form-group row">
+    <div class="row mb-2">
       <label class="col-sm-2 col-form-label" for={"#{@id}-extractor"}>Extractor</label>
       <div class="col-sm-10">
-        <%= select f, :extractor, @extractors, id: "#{@id}-extractor", class: "custom-select" %>
+        <%= select f, :extractor, @extractors, id: "#{@id}-extractor", class: "form-select" %>
       </div>
     </div>
   <% end %>

lib/frenzy_web/live/edit_pipeline_live.html.heex

@@ -9,7 +9,7 @@
         <div class="col">
           <h4 class="m-0"><%= stage["module_name"] %></h4>
         </div>
-        <div class="col text-right">
+        <div class="col text-end">
           <%= content_tag :button, "Move Up", [phx_click: :move_up, phx_value_index: index, disabled: index == 0, class: "btn btn-secondary btn-sm"] %>
 
           <%= content_tag :button, "Move Down", [phx_click: :move_down, phx_value_index: index, disabled: index == length(@pipeline.stages) - 1, class: "btn btn-secondary btn-sm"] %>
@@ -25,10 +25,10 @@
 <% end %>
 
 <%= form_for :stage, "#", [class: "mt-4 mb-4", phx_submit: :add_stage], fn f -> %>
-  <div class="form-group row">
+  <div class="row mb-2">
     <label class="col-sm-2 col-form-label" for="module_name">Module</label>
     <div class="col-sm-10">
-      <%= select f, :module_name, @stages, class: "custom-select" %>
+      <%= select f, :module_name, @stages, class: "form-select" %>
     </div>
   </div>
   <%= submit "Add Stage", class: "btn btn-primary" %>

lib/frenzy_web/live/filter/filter_live.html.heex

@@ -1,12 +1,12 @@
 <div id={@id}>
   <%= form_for @filter, "#", [phx_change: :update_filter, phx_target: "##{@parent_id}"], fn f -> %>
-    <div class="form-group row">
+    <div class="row mb-2">
       <label class="col-sm-2 col-form-label" for={"#{@id}-mode"}>Mode</label>
       <div class="col-sm-10">
-        <%= select f, :mode, @modes, id: "#{@id}-mode", class: "custom-select" %>
+        <%= select f, :mode, @modes, id: "#{@id}-mode", class: "form-select" %>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="row mb-2">
       <label class="col-sm-2 col-form-label" for={"#{@id}-score"}>Score</label>
       <div class="col-sm-10">
         <%= number_input f, :score, id: "#{@id}-score", class: "form-control" %>
@@ -20,7 +20,7 @@
           <div class="col">
             <h4 class="m-0">Rule <%= index %></h4>
           </div>
-          <div class="col text-right">
+          <div class="col text-end">
             <button phx-click="delete_rule" phx-value-index={index} phx-target={"##{@id}"} class="btn btn-danger btn-sm">Delete</button>
           </div>
         </div>

lib/frenzy_web/live/filter/filter_rule_live.html.heex

@@ -3,16 +3,16 @@
     <%= hidden_input f, :index, value: @index %>
     <div class="row">
       <div class="col-3">
-        <%= select f, :property, @properties, id: "#{@id}-property", class: "custom-select" %>
+        <%= select f, :property, @properties, id: "#{@id}-property", class: "form-select" %>
       </div>
       <div class="col-3">
-        <%= select f, :mode, @modes, id: "#{@id}-mode", class: "custom-select" %>
+        <%= select f, :mode, @modes, id: "#{@id}-mode", class: "form-select" %>
       </div>
       <div class="col">
         <%= text_input f, :param, id: "#{@id}-param", placeholder: if(@rule["mode"] == "contains_string", do: "substring", else: "regex"), class: "form-control text-monospace" %>
       </div>
     </div>
-    <div class="form-group row mb-0 mt-4">
+    <div class="row mb-0 mt-4">
       <label class="col-sm-2 col-form-label" for={"#{@id}-weight"}>Rule Weight</label>
       <div class="col-sm-10">
         <%= number_input f, :weight, id: "#{@id}-weight", class: "form-control" %> 

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

@@ -1,15 +1,15 @@
 <h2>Change Fever Password</h2>
 
 <%= form_tag Routes.account_path(@conn, :do_change_fever_password), method: :post do %>
-  <div class="form-group row">
+  <div class="row mb-2">
     <label for="new_password" class="col-sm-2 col-form-label">New Fever Password</label>
     <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="row mb-2">
     <div class="col-sm-10">
       <%= submit "Change Fever Password", class: "btn btn-primary" %>
     </div>
   </div>
-<% end %>
+<% end %>

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

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

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

@@ -1,32 +1,32 @@
 <h1>Edit Feed</h1>
 
 <%= form_for @changeset, Routes.feed_path(@conn, :update, @feed.id), fn f -> %>
-  <div class="form-group row">
+  <div class="row mb-2">
     <label class="col-sm-2 col-form-label" for="feed_url">Feed URL</label>
     <div class="col-sm-10">
       <%= text_input f, :feed_url, class: "form-control" %>
     </div>
   </div>
-  <div class="form-group row">
+  <div class="row mb-2">
     <label class="col-sm-2 col-form-label" for="refresh_frequency">Refresh Frequency</label>
     <div class="col-sm-10">
-      <%= select f, :refresh_frequency, @refresh_frequencies, class: "custom-select" %>
+      <%= select f, :refresh_frequency, @refresh_frequencies, class: "form-select" %>
     </div>
   </div>
-  <div class="form-group row">
+  <div class="row mb-2">
     <label class="col-sm-2 col-form-label" for="pipeline_id">Pipeline ID</label>
     <div class="col-sm-10">
-      <%= select f, :pipeline_id, @pipelines, class: "custom-select" %>
+      <%= select f, :pipeline_id, @pipelines, class: "form-select" %>
     </div>
   </div>
   <%= if @feed.pipeline_id do %>
-    <div class="form-group row">
+    <div class="row mb-2">
       <div class="col-sm-10">
           <a href="<%= Routes.pipeline_path(@conn, :show, @feed.pipeline_id) %>" class="col-sm-2">View Pipeline</a>
       </div>
     </div>
   <% end %>
-  <div class="form-group row">
+  <div class="row mb-2">
     <div class="col-sm-10">
       <%= submit "Update Feed", class: "btn btn-primary" %>
     </div>

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

@@ -5,8 +5,8 @@
   <%= if @state do %>
     <input type="hidden" name="state" value="<%= @state %>">
   <% end %>
-  <div class="form-group">
+  <div>
     <%= submit "Grant access", class: "btn btn-primary" %>
     <p>To reject the request, close this page.</p>
   </div>
-<% end %>
+<% end %>

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

@@ -1,13 +1,15 @@
 <h1>Edit Group</h1>
 
 <%= form_for @changeset, Routes.group_path(@conn, :update, @group.id), fn f -> %>
-  <div class="form-group row">
+  <div class="row mb-2">
     <label class="col-sm-2 col-form-label" for="title">Title</label>
     <div class="col-sm-10">
       <%= text_input f, :title, class: "form-control" %>
     </div>
   </div>
-  <div class="form-group row">
-    <%= submit "Update Group", class: "btn btn-primary" %>
+  <div class="mb-2">
+    <div class="col-sm-10">
+      <%= submit "Update Group", class: "btn btn-primary" %>
+    </div>
   </div>
 <% end %>

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

@@ -1,13 +1,13 @@
 <h1>New Group</h1>
 
 <%= form_for @changeset, Routes.group_path(@conn, :create), fn form -> %>
-  <div class="form-group row">
+  <div class="row mb-2">
     <label for="title" class="col-sm-2 col-form-label">Title</label>
     <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="row mb-2">
     <div class="col-sm-10">
       <%= submit "Create Group", class: "btn btn-primary" %>
     </div>

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

@@ -49,7 +49,7 @@
                   <li class="nav-item">
                     <details open="">
                       <summary>
-                        <a href="<%= Routes.group_path(@conn, :show, group.id) %>"><%= group.title %></a>
+                        <a href="<%= Routes.group_path(@conn, :show, group.id) %>" class="nav-link"><%= group.title %></a>
                       </summary>
                       <ul class="nav flex-column">
                         <%= for feed <- group.feeds do %>

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

@@ -4,19 +4,19 @@
   <%= if @continue do %>
     <input type="hidden" name="continue" value="<%= @continue %>">
   <% end %>
-  <div class="form-group row">
+  <div class="row mb-2">
     <label for="username" class="col-sm-2 col-form-label">Username</label>
     <div class="col-sm-10">
       <input type="text" name="username" id="username" class="form-control">
     </div>
   </div>
-  <div class="form-group row">
+  <div class="row mb-2">
     <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="row mb-2">
     <div class="col-sm-10">
       <%= submit "Log In", class: "btn btn-primary" %>
     </div>

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

@@ -3,16 +3,16 @@
 <a href="<%= Routes.pipeline_path(@conn, :edit, @pipeline.id) %>" class="btn btn-primary">Edit UI</a>
 
 <%= form_tag Routes.pipeline_path(@conn, :update, @pipeline.id), method: :put do %>
-  <div class="form-group row">
+  <div class="row mb-2">
     <label class="col-sm-2 col-form-label" for="name">Name</label>
     <div class="col-sm-10">
       <%= text_input :pipeline, :name, value: @name, placeholder: "My New Pipeline", class: "form-control" %>
     </div>
   </div>
-  <div class="form-group row">
+  <div class="row mb-2">
     <%= textarea :pipeline, :stages, value: @stages_json, class: "form-control", rows: 15, style: "font-family: monospace;" %>
   </div>
-  <div class="form-group row">
+  <div class="row mb-2">
     <div class="col-sm-10">
       <%= submit "Edit Pipeline", class: "btn btn-primary" %>
     </div>

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

@@ -1,14 +1,14 @@
 <%= form_for @changeset, Routes.pipeline_path(@conn, :create), fn form -> %>
-  <div class="form-group row">
+  <div class="row mb-2">
     <label class="col-sm-2 col-form-label" for="name">Name</label>
     <div class="col-sm-10">
       <%= text_input form, :name, placeholder: "My New Pipeline", class: "form-control" %>
     </div>
   </div>
-  <div class="form-group row">
+  <div class="row mb-2">
     <%= textarea form, :stages, class: "form-control", rows: 15, style: "font-family: monospace;" %>
   </div>
-  <div class="form-group row">
+  <div class="row mb-2">
     <div class="col-sm-10">
       <%= submit "Create Pipeline", class: "btn btn-primary" %>
     </div>