Turn some links into buttons

pulibrary · Aug 20, 2024 · 9556939 · 9556939
1 parent c35b0f1
commit 9556939
Show file tree

Hide file tree

Showing 16 changed files with 56 additions and 27 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -17,3 +17,4 @@
 @import "card";
 @import "home_page";
 @import "locker_applications";
+@import "lockers";
diff --git a/app/assets/stylesheets/lockers.scss b/app/assets/stylesheets/lockers.scss
@@ -1,3 +1,11 @@
 // Place all the styles related to the Lockers controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+main.lux {
+    margin-bottom: var(--space-base);
+}
+
+nav.lux-wrapper.button-well {
+    margin-top: var(--space-small);
+    margin-bottom: var(--space-small);
+}
diff --git a/app/views/locker_applications/assign.html.erb b/app/views/locker_applications/assign.html.erb
@@ -7,4 +7,6 @@ Assign application
 
 <%= render '/locker_assignments/form', locker_assignment: @locker_assignment %>
 
-<%= link_to 'Back', awaiting_assignment_locker_applications_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= awaiting_assignment_locker_applications_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
diff --git a/app/views/locker_applications/awaiting_assignment.html.erb b/app/views/locker_applications/awaiting_assignment.html.erb
@@ -19,4 +19,7 @@ Applications awaiting assignment
 <%# Note the double equals sign "==" which marks the output as trusted and html safe: %>
 <%== pagy_nav(@pagy) %>
 
-<%= link_to 'Firestone Library Locker Application', new_locker_application_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= new_locker_application_path %>" variation="button solid">New Locker Application</lux-hyperlink>
+<% end %>
+
diff --git a/app/views/locker_applications/show.html.erb b/app/views/locker_applications/show.html.erb
@@ -7,7 +7,9 @@ View application
 
 <%= render 'view', locker_application: @locker_application %>
 
-<% if @locker_application.building == current_user&.building %>
-  <%= link_to 'Edit', edit_locker_application_path(@locker_application) %> |
+<%= render layout: '/shared/related_actions' do %>
+  <% if @locker_application.building == current_user&.building %>
+    <lux-hyperlink href="<%= edit_locker_application_path(@locker_application) %>" variation="button solid">Edit</lux-hyperlink>
+  <% end %>
+  <lux-hyperlink href="<%= locker_applications_path %>" variation="button solid">Back</lux-hyperlink>
 <% end %>
-<%= link_to 'Back', locker_applications_path %>
diff --git a/app/views/locker_assignments/_form.html.erb b/app/views/locker_assignments/_form.html.erb
@@ -56,4 +56,5 @@
       <lux-input-button type="submit" variation="solid">Submit Locker Assignment</lux-input-button>
     </lux-grid-item>
   </lux-grid-container>
+  </lux-card>
 <% end %>
diff --git a/app/views/lockers/edit.html.erb b/app/views/lockers/edit.html.erb
@@ -3,13 +3,8 @@ Editing Locker
 <% end %>
 <lux-card size="full-width"><lux-heading level="h1">Editing Locker</lux-heading></lux-card>
 <%= render 'form', locker: @locker %>
-<lux-card size="medium">
-  <lux-grid-container>
-    <lux-grid-item columns="lg-6 md-6 sm-6">
-      <%= link_to 'Show', @locker %>
-    </lux-grid-item>
-    <lux-grid-item columns="lg-6 md-6 sm-6">
-      <%= link_to 'Back', lockers_path %>
-    </lux-grid-item>
-  </lux-grid-container>
-</lux-card>
+
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= locker_path(@locker) %>" variation="button solid">Show</lux-hyperlink>
+  <lux-hyperlink href="<%= lockers_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
diff --git a/app/views/lockers/index.html.erb b/app/views/lockers/index.html.erb
@@ -26,4 +26,6 @@
 <%# Note the double equals sign "==" which marks the output as trusted and html safe: %>
 <%== pagy_nav(@pagy) %>
 
-<%= link_to 'New Locker', new_locker_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= new_locker_path %>" variation="button solid">New Locker</lux-hyperlink>
+<% end %>
diff --git a/app/views/lockers/new.html.erb b/app/views/lockers/new.html.erb
@@ -4,4 +4,6 @@ New Locker
 <lux-card size="full-width"><lux-heading level="h1">New Locker</lux-heading></lux-card>
 <%= render 'form', locker: @locker %>
 
-<%= link_to 'Back', lockers_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= lockers_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
diff --git a/app/views/lockers/show.html.erb b/app/views/lockers/show.html.erb
@@ -56,12 +56,12 @@ Locker <%[email protected] %>
       <strong>Notes:</strong>
       <span><%= @locker.notes %></span>
     </lux-grid-item>
-    <lux-grid-item columns="lg-12 md-12 sm-12">
-      <%= link_to 'Edit', edit_locker_path(@locker) %>
-      <%= link_to 'Back', lockers_path %>
-    </lux-grid-item>
    </lux-grid-container>
 </lux-card>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= edit_locker_path(@locker) %>" variation="button solid">Edit</lux-hyperlink>
+  <lux-hyperlink href="<%= lockers_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
 <% if @locker.current_assignment.present? %>
 <lux-card size="full-width">
   <lux-heading level="h2" size="h4">Currently Assigned to Applicant</lux-heading>

diff --git a/app/views/shared/_related_actions.html.erb b/app/views/shared/_related_actions.html.erb
@@ -0,0 +1,3 @@
+<lux-wrapper class="button-well" type="nav">
+  <%= yield %>
+</lux-wrapper>
diff --git a/app/views/study_room_assignments/index.html.erb b/app/views/study_room_assignments/index.html.erb
@@ -38,4 +38,6 @@ Study Room Assignments
 <%== pagy_nav(@pagy) %>
 
 
-<%= link_to 'New Study Room Assignment', new_study_room_assignment_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= new_study_room_assignment_path %>" variation="button solid">New Study Room Assignment</lux-hyperlink>
+<% end %>
diff --git a/app/views/study_room_assignments/new.html.erb b/app/views/study_room_assignments/new.html.erb
@@ -5,4 +5,6 @@ New Study Room Assignment
 
 <%= render 'form', study_room_assignment: @study_room_assignment %>
 
-<%= link_to 'Back', study_room_assignments_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= study_room_assignments_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
diff --git a/app/views/study_rooms/index.html.erb b/app/views/study_rooms/index.html.erb
@@ -25,4 +25,6 @@ Study Rooms
 <%# Note the double equals sign "==" which marks the output as trusted and html safe: %>
 <%== pagy_nav(@pagy) %>
 
-<%= link_to 'New Study Room', new_study_room_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= new_study_room_path %>" variation="button solid">New Study Room</lux-hyperlink>
+<% end %>
diff --git a/app/views/study_rooms/new.html.erb b/app/views/study_rooms/new.html.erb
@@ -5,4 +5,6 @@ New Study Room
 
 <%= render 'form', study_room: @study_room %>
 
-<%= link_to 'Back', study_rooms_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= study_rooms_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
diff --git a/app/views/study_rooms/show.html.erb b/app/views/study_rooms/show.html.erb
@@ -20,5 +20,7 @@
   <%= @study_room.notes %>
 </p>
 
-<%= link_to 'Edit', edit_study_room_path(@study_room) %> |
-<%= link_to 'Back', study_rooms_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= edit_study_room_path(@study_room) %>" variation="button solid">Edit</lux-hyperlink>
+  <lux-hyperlink href="<%= study_rooms_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>