Skip to content

Commit edc5c4a

Browse files
robbevprobbevp
authored
Style main navigation/actions on entry page (#607)
* Style entry navigation * Add icons to entry navigation
1 parent 583d530 commit edc5c4a

File tree

10 files changed

+124
-23
lines changed

10 files changed

+124
-23
lines changed

‎app/assets/images/icons/arrow-left.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/assets/images/icons/arrow-right.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/assets/styles/application.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
@import url("./base/index.css");
2+
@import url("./components/icon.css");
23
@import url("./components/entries.css");
4+
@import url("./components/entry-nav.css");
35
@import url("./components/forms.css");
46
@import url("./components/homepage.css");
57
@import url("./components/page.css");
8+
9+
.table__cell--actions {
10+
white-space: nowrap;
11+
}

‎app/assets/styles/base/index.css‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,3 @@ html {
66
font-size: var(--text-base);
77
font-family: var(--font-body);
88
}
9-
10-
.table__cell--actions {
11-
white-space: nowrap;
12-
}
13-
14-
.icon {
15-
width: 2rem;
16-
height: 2rem;
17-
}

‎app/assets/styles/base/theme.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,8 @@
2424
/* Colours */
2525
--color-white: oklch(100% 0 0deg);
2626
--color-black: oklch(24.42% 0.006 0.59deg);
27+
28+
/* Border radius */
29+
--rounded: 1rem;
30+
--rounded-full: 9999px;
2731
}

‎app/assets/styles/components/entries.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
display: flex;
33
flex-direction: column;
44
gap: 0.25rem;
5+
margin-block-end: 2.5rem;
56
}
67

78
.entry__title {

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.entry-nav {
2+
position: fixed;
3+
inset-block-end: 0;
4+
inset-inline: 0;
5+
display: grid;
6+
grid-template-columns: repeat(3, minmax(0, 1fr));
7+
width: 100vw;
8+
color: var(--color-white);
9+
border-radius: var(--rounded) var(--rounded) 0 0;
10+
background-color: var(--color-black);
11+
background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
12+
box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
13+
backdrop-filter: blur(4px);
14+
overflow: hidden;
15+
border-block-start: 1px solid
16+
color-mix(in oklab, var(--color-black) 80%, transparent);
17+
18+
@media (--screen-md) {
19+
inset-block-end: 0.5rem;
20+
place-self: center;
21+
width: max-content;
22+
border-radius: var(--rounded-full);
23+
}
24+
}
25+
26+
.entry-nav__item {
27+
width: 100%;
28+
border-inline: 1px solid
29+
color-mix(in oklab, var(--color-black) 80%, transparent);
30+
}
31+
32+
.entry-nav__item--link,
33+
.entry-nav__button {
34+
display: flex;
35+
gap: 0.625rem;
36+
justify-content: center;
37+
align-items: center;
38+
width: 100%;
39+
padding-block: 0.875rem 0.75rem;
40+
padding-inline: 1rem;
41+
color: inherit;
42+
text-align: center;
43+
text-decoration: none;
44+
border: none;
45+
background-color: transparent;
46+
cursor: pointer;
47+
48+
@media (--screen-md) {
49+
padding-inline: 2rem;
50+
}
51+
52+
&:hover {
53+
text-decoration: underline;
54+
background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
55+
}
56+
57+
&:focus-visible {
58+
outline-offset: -4px;
59+
}
60+
}
61+
62+
.entry-nav__item--status {
63+
grid-column-start: 2;
64+
}
65+
66+
.entry-nav__item--next {
67+
grid-column-start: 3;
68+
}
69+
70+
.entry-nav__icon {
71+
transition: transform 250ms ease-in-out;
72+
}
73+
74+
.entry-nav__item--prev:hover .entry-nav__icon {
75+
transform: translateX(-35%);
76+
}
77+
78+
.entry-nav__item--next:hover .entry-nav__icon {
79+
transform: translateX(35%);
80+
}

‎app/assets/styles/components/icon.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.icon {
2+
--size: 2rem;
3+
4+
width: var(--size);
5+
height: var(--size);
6+
}
7+
8+
.icon--sm {
9+
--size: 1.25rem;
10+
}

‎app/views/entries/show.html.erb‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
<%= content_for :page_title, t('.page_title', subscription_name: @entry.subscription.name, entry_title: @entry.title) %>
22

3-
<%- if @entry.read? %>
4-
<%= button_to t('.mark_as_unread'), entry_path(@entry, params: { entry: { read: false } }), method: :patch %>
5-
<%- else %>
6-
<%= button_to t('.mark_as_read'), entry_path(@entry, params: { entry: { read: true } }), method: :patch %>
7-
<%- end %>
8-
93
<%= link_to t('.delete'), entry_path(@entry), data: { turbo_confirm: t('.delete_confirm'), turbo_method: :delete } %>
104

11-
<%= render EntryComponent.new(entry: @entry) %>
12-
13-
<%= content_tag :nav, aria: { label: t('.nav_pagination_label') } do %>
5+
<%= content_tag :nav, class: 'entry-nav', aria: { label: t('.nav_pagination_label') } do %>
146
<%- if @previous_entry.present? %>
15-
<%= link_to t('.previous'), entry_path(@previous_entry) %>
7+
<%= link_to entry_path(@previous_entry), class: 'entry-nav__item entry-nav__item--link entry-nav__item--prev' do %>
8+
<%= inline_svg_tag 'images/icons/arrow-left.svg', class: 'entry-nav__icon icon icon--sm', aria_hidden: true %>
9+
<%= t('.previous') %>
10+
<% end %>
1611
<%- end %>
12+
13+
<%= button_to t(@entry.read? ? '.mark_as_unread' : '.mark_as_read'), entry_path(@entry, params: { entry: { read: !@entry.read? } }), method: :patch, form_class: 'entry-nav__item entry-nav__item--status entry-nav__item--form', class: 'entry-nav__button' %>
14+
1715
<%- if @next_entry.present? %>
18-
<%= link_to t('.next'), entry_path(@next_entry) %>
16+
<%= link_to entry_path(@next_entry), class: 'entry-nav__item entry-nav__item--link entry-nav__item--next' do %>
17+
<%= t('.next') %>
18+
<%= inline_svg_tag 'images/icons/arrow-right.svg', class: 'entry-nav__icon icon icon--sm', aria_hidden: true %>
19+
<% end %>
1920
<%- end %>
2021
<%- end %>
22+
23+
<%= render EntryComponent.new(entry: @entry) %>

‎config/locales/en.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ en:
2424
delete: Delete
2525
delete_confirm: "Are you sure? This can not be undone. Note that rss feed entries might show up again when the feed refreshes."
2626
mark_all_as_read: Mark all as read
27-
next: "Next entry"
28-
previous: "Previous entry"
29-
nav_pagination_label: "Pagination navigation"
27+
next: "Next"
28+
previous: "Previous"
29+
nav_pagination_label: "Entry pagination"
3030
subscriptions:
3131
form:
3232
category_hint: "You can nest categories using `>`. For example: `Music > Bands`"

0 commit comments

Comments
 (0)