Style main navigation/actions on entry page (#607)

* Style entry navigation

* Add icons to entry navigation

app/assets/styles/application.css

@@ -1,5 +1,11 @@
 @import url("./base/index.css");
+@import url("./components/icon.css");
 @import url("./components/entries.css");
+@import url("./components/entry-nav.css");
 @import url("./components/forms.css");
 @import url("./components/homepage.css");
 @import url("./components/page.css");
+
+.table__cell--actions {
+  white-space: nowrap;
+}

app/assets/styles/base/index.css

@@ -6,12 +6,3 @@ html {
   font-size: var(--text-base);
   font-family: var(--font-body);
 }
-
-.table__cell--actions {
-  white-space: nowrap;
-}
-
-.icon {
-  width: 2rem;
-  height: 2rem;
-}

app/assets/styles/base/theme.css

@@ -24,4 +24,8 @@
   /* Colours */
   --color-white: oklch(100% 0 0deg);
   --color-black: oklch(24.42% 0.006 0.59deg);
+
+  /* Border radius */
+  --rounded: 1rem;
+  --rounded-full: 9999px;
 }

app/assets/styles/components/entries.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  margin-block-end: 2.5rem;
 }
 
 .entry__title {

app/assets/styles/components/entry-nav.css

@@ -0,0 +1,80 @@
+.entry-nav {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  width: 100vw;
+  color: var(--color-white);
+  border-radius: var(--rounded) var(--rounded) 0 0;
+  background-color: var(--color-black);
+  background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
+  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
+  backdrop-filter: blur(4px);
+  overflow: hidden;
+  border-block-start: 1px solid
+    color-mix(in oklab, var(--color-black) 80%, transparent);
+
+  @media (--screen-md) {
+    inset-block-end: 0.5rem;
+    place-self: center;
+    width: max-content;
+    border-radius: var(--rounded-full);
+  }
+}
+
+.entry-nav__item {
+  width: 100%;
+  border-inline: 1px solid
+    color-mix(in oklab, var(--color-black) 80%, transparent);
+}
+
+.entry-nav__item--link,
+.entry-nav__button {
+  display: flex;
+  gap: 0.625rem;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding-block: 0.875rem 0.75rem;
+  padding-inline: 1rem;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  @media (--screen-md) {
+    padding-inline: 2rem;
+  }
+
+  &:hover {
+    text-decoration: underline;
+    background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+  }
+
+  &:focus-visible {
+    outline-offset: -4px;
+  }
+}
+
+.entry-nav__item--status {
+  grid-column-start: 2;
+}
+
+.entry-nav__item--next {
+  grid-column-start: 3;
+}
+
+.entry-nav__icon {
+  transition: transform 250ms ease-in-out;
+}
+
+.entry-nav__item--prev:hover .entry-nav__icon {
+  transform: translateX(-35%);
+}
+
+.entry-nav__item--next:hover .entry-nav__icon {
+  transform: translateX(35%);
+}

app/assets/styles/components/icon.css

@@ -0,0 +1,10 @@
+.icon {
+  --size: 2rem;
+
+  width: var(--size);
+  height: var(--size);
+}
+
+.icon--sm {
+  --size: 1.25rem;
+}

app/views/entries/show.html.erb

@@ -1,20 +1,23 @@
 <%= content_for :page_title, t('.page_title', subscription_name: @entry.subscription.name, entry_title: @entry.title) %>
 
-<%- if @entry.read? %>
-  <%= button_to t('.mark_as_unread'), entry_path(@entry, params: { entry: { read: false } }), method: :patch %>
-<%- else %>
-  <%= button_to t('.mark_as_read'), entry_path(@entry, params: { entry: { read: true } }), method: :patch %>
-<%- end %>
-
 <%= link_to t('.delete'), entry_path(@entry), data: { turbo_confirm: t('.delete_confirm'), turbo_method: :delete } %>
 
-<%= render EntryComponent.new(entry: @entry) %>
-
-<%= content_tag :nav, aria: { label: t('.nav_pagination_label') } do %>
+<%= content_tag :nav, class: 'entry-nav', aria: { label: t('.nav_pagination_label') } do %>
   <%- if @previous_entry.present? %>
-    <%= link_to t('.previous'), entry_path(@previous_entry) %>
+    <%= link_to entry_path(@previous_entry), class: 'entry-nav__item entry-nav__item--link entry-nav__item--prev' do %>
+      <%= inline_svg_tag 'images/icons/arrow-left.svg', class: 'entry-nav__icon icon icon--sm', aria_hidden: true %>
+      <%= t('.previous') %>
+    <% end %>
   <%- end %>
+
+  <%= button_to t(@entry.read? ? '.mark_as_unread' : '.mark_as_read'), entry_path(@entry, params: { entry: { read: [email protected]? } }), method: :patch, form_class: 'entry-nav__item entry-nav__item--status entry-nav__item--form', class: 'entry-nav__button' %>
+
   <%- if @next_entry.present? %>
-    <%= link_to t('.next'), entry_path(@next_entry) %>
+    <%= link_to entry_path(@next_entry), class: 'entry-nav__item entry-nav__item--link entry-nav__item--next' do %>
+        <%= t('.next') %>
+        <%= inline_svg_tag 'images/icons/arrow-right.svg', class: 'entry-nav__icon icon icon--sm', aria_hidden: true %>
+    <% end %>
   <%- end %>
 <%- end %>
+
+<%= render EntryComponent.new(entry: @entry) %>

config/locales/en.yml

@@ -24,9 +24,9 @@ en:
       delete: Delete
       delete_confirm: "Are you sure? This can not be undone. Note that rss feed entries might show up again when the feed refreshes."
       mark_all_as_read: Mark all as read
-      next: "Next entry"
-      previous: "Previous entry"
-      nav_pagination_label: "Pagination navigation"
+      next: "Next"
+      previous: "Previous"
+      nav_pagination_label: "Entry pagination"
   subscriptions:
     form:
       category_hint: "You can nest categories using `>`. For example: `Music > Bands`"