forks/miniflux
1
0
Fork 0
Code Releases Activity

Align entry actions to the left

Browse source 
- Attempt to avoid awkward alignment on smartphone screens
- Keep the read/star actions aligned to the left
- Remove css flex to allow easier override with custom CSS
This commit is contained in:
Frédéric Guillot 2020-07-28 20:51:55 -07:00
parent 8fb71366f8
commit 943e7a7317
4 changed files with 59 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
template/common.go
View file

@ -246,6 +246,25 @@ SOFTWARE.
{{ end }}
</ul>
<ul class="item-meta-icons">
<li>
<a href="#"
title="{{ t "entry.status.title" }}"
data-toggle-status="true"
data-label-read="✔&nbsp;{{ t "entry.status.read" }}"
data-label-unread="✘&nbsp;{{ t "entry.status.unread" }}"
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
><span class="icon-label">{{ if eq .entry.Status "read" }}✘&nbsp;{{ t "entry.status.unread" }}{{ else }}✔&nbsp;{{ t "entry.status.read" }}{{ end }}</span></a>
</li>
<li>
<a href="#"
data-toggle-bookmark="true"
data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
data-label-loading="{{ t "entry.state.saving" }}"
data-label-star="☆&nbsp;{{ t "entry.bookmark.toggle.on" }}"
data-label-unstar="★&nbsp;{{ t "entry.bookmark.toggle.off" }}"
data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
><span class="icon-label">{{ if .entry.Starred }}★&nbsp;{{ t "entry.bookmark.toggle.off" }}{{ else }}☆&nbsp;{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
</li>
{{ if .entry.ShareCode }}
<li>
<a href="{{ route "sharedEntry" "shareCode" .entry.ShareCode }}"
@ -281,25 +300,6 @@ SOFTWARE.
data-comments-link="true">{{ template "icon_comment" }}<span class="icon-label">{{ t "entry.comments.label" }}</span></a>
</li>
{{ end }}
<li>
<a href="#"
data-toggle-bookmark="true"
data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
data-label-loading="{{ t "entry.state.saving" }}"
data-label-star="☆&nbsp;{{ t "entry.bookmark.toggle.on" }}"
data-label-unstar="★&nbsp;{{ t "entry.bookmark.toggle.off" }}"
data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
><span class="icon-label">{{ if .entry.Starred }}★&nbsp;{{ t "entry.bookmark.toggle.off" }}{{ else }}☆&nbsp;{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
</li>
<li>
<a href="#"
title="{{ t "entry.status.title" }}"
data-toggle-status="true"
data-label-read="✔&nbsp;{{ t "entry.status.read" }}"
data-label-unread="✘&nbsp;{{ t "entry.status.unread" }}"
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
><span class="icon-label">{{ if eq .entry.Status "read" }}✘&nbsp;{{ t "entry.status.unread" }}{{ else }}✔&nbsp;{{ t "entry.status.read" }}{{ end }}</span></a>
</li>
</ul>
</div>
{{ end }}
@ -517,7 +517,7 @@ var templateCommonMapChecksums = map[string]string{
"feed_list": "30acc9ecc413811e73a1dad120b5d44e29564de3ba794fb07ee886b30addfb19",
"feed_menu": "318d8662dda5ca9dfc75b909c8461e79c86fb5082df1428f67aaf856f19f4b50",
"icons": "3dbe754a98f524a227111191d76b8c6944711b13613cc548ee9e9808fe0bffb4",
"item_meta": "a5b686c7af6348fdbd9a147e3fcfacc4a0b442c3b9637f3dce026ccf367fc312",
"item_meta": "8306adf3ef9966de3e3dc74ca1042e51d778b027ab8cf0a60a2e94a0115982dc",
"layout": "91d2ab3f683a2ced5e9ce5cd04919e74b3e3f329a5eedcc60015b8d49ecb1b77",
"pagination": "7b61288e86283c4cf0dc83bcbf8bf1c00c7cb29e60201c8c0b633b2450d2911f",
"settings_menu": "e2b777630c0efdbc529800303c01d6744ed3af80ec505ac5a5b3f99c9b989156",

38
template/html/common/item_meta.html
View file

@ -16,6 +16,25 @@
{{ end }}
</ul>
<ul class="item-meta-icons">
<li>
<a href="#"
title="{{ t "entry.status.title" }}"
data-toggle-status="true"
data-label-read="✔&nbsp;{{ t "entry.status.read" }}"
data-label-unread="✘&nbsp;{{ t "entry.status.unread" }}"
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
><span class="icon-label">{{ if eq .entry.Status "read" }}✘&nbsp;{{ t "entry.status.unread" }}{{ else }}✔&nbsp;{{ t "entry.status.read" }}{{ end }}</span></a>
</li>
<li>
<a href="#"
data-toggle-bookmark="true"
data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
data-label-loading="{{ t "entry.state.saving" }}"
data-label-star="☆&nbsp;{{ t "entry.bookmark.toggle.on" }}"
data-label-unstar="★&nbsp;{{ t "entry.bookmark.toggle.off" }}"
data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
><span class="icon-label">{{ if .entry.Starred }}★&nbsp;{{ t "entry.bookmark.toggle.off" }}{{ else }}☆&nbsp;{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
</li>
{{ if .entry.ShareCode }}
<li>
<a href="{{ route "sharedEntry" "shareCode" .entry.ShareCode }}"
@ -51,25 +70,6 @@
data-comments-link="true">{{ template "icon_comment" }}<span class="icon-label">{{ t "entry.comments.label" }}</span></a>
</li>
{{ end }}
<li>
<a href="#"
data-toggle-bookmark="true"
data-bookmark-url="{{ route "toggleBookmark" "entryID" .entry.ID }}"
data-label-loading="{{ t "entry.state.saving" }}"
data-label-star="☆&nbsp;{{ t "entry.bookmark.toggle.on" }}"
data-label-unstar="★&nbsp;{{ t "entry.bookmark.toggle.off" }}"
data-value="{{ if .entry.Starred }}star{{ else }}unstar{{ end }}"
><span class="icon-label">{{ if .entry.Starred }}★&nbsp;{{ t "entry.bookmark.toggle.off" }}{{ else }}☆&nbsp;{{ t "entry.bookmark.toggle.on" }}{{ end }}</span></a>
</li>
<li>
<a href="#"
title="{{ t "entry.status.title" }}"
data-toggle-status="true"
data-label-read="✔&nbsp;{{ t "entry.status.read" }}"
data-label-unread="✘&nbsp;{{ t "entry.status.unread" }}"
data-value="{{ if eq .entry.Status "read" }}read{{ else }}unread{{ end }}"
><span class="icon-label">{{ if eq .entry.Status "read" }}✘&nbsp;{{ t "entry.status.unread" }}{{ else }}✔&nbsp;{{ t "entry.status.read" }}{{ end }}</span></a>
</li>
</ul>
</div>
{{ end }}

24
ui/static/css.go
View file

File diff suppressed because one or more lines are too long

13
ui/static/css/common.css
View file

@ -689,9 +689,6 @@ a.button {
}
.item-meta {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
color: var(--item-meta-focus-color);
font-size: 0.8em;
}
@ -711,7 +708,11 @@ a.button {
}
.item-meta li {
display: inline;
display: inline-block;
}
.item-meta-info {
font-size: 0.85em;
}
.item-meta-info li:after {
@ -724,7 +725,8 @@ a.button {
}
.item-meta-icons li {
margin-right: 5px;
margin-right: 8px;
margin-top: 4px;
}
.item-meta-icons li:last-child {
@ -800,6 +802,7 @@ article.feed-parsing-error {
.entry-actions li {
display: inline-block;
margin-right: 15px;
line-height: 1.7em;
}
.entry-meta {