Merge pull request #6613 from Simounet/feat/entry-info-ui

Feat/entry info UI
This commit is contained in:
Jérémy Benoist 2023-06-16 09:37:36 +02:00 committed by GitHub
commit 7689d06b3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 83 additions and 26 deletions

View file

@ -108,11 +108,12 @@
.entry-info {
.tools {
display: flex;
flex-flow: row wrap;
margin: 8px 5px 5px;
flex-wrap: wrap;
.stats {
margin: 0;
font-size: 0.7em;
margin: 8px 5px 5px;
li {
display: inline-flex;
@ -133,18 +134,21 @@
}
.tags {
float: right;
margin: 5px 15px 10px;
display: flex;
margin: 0;
align-items: center;
gap: 5px;
}
}
.chip {
background-color: #9e9e9e;
padding: 0 15px 0 10px;
margin: auto 2px;
border-radius: 6px;
height: 18px;
line-height: 18px;
display: flex;
margin: 0;
padding: 0;
height: 25px;
line-height: 25px;
align-items: center;
background-color: transparent;
a,
i {
@ -152,13 +156,43 @@
}
i.material-icons {
float: right;
font-size: 16px;
line-height: 18px;
padding-left: 8px;
vertical-align: sub;
}
}
.chip-label {
padding-left: 10px;
padding-right: 5px;
background-color: #9e9e9e;
border-radius: 6px 0 0 6px;
}
.chip-action {
padding: 0 5px;
background-color: #868686;
border-radius: 0 6px 6px 0;
}
.chip-label,
.chip-action {
min-width: 30px;
text-align: center;
}
.chip-label:hover,
.chip-label:active,
.chip-label:focus,
.chip-action:hover,
.chip-action:active,
.chip-action:focus {
background-color: #5e5e5e;
}
}
}
.entry-info {
margin-bottom: 40px;
}
.reader-mode {
@ -200,3 +234,28 @@
margin: 0;
z-index: 9999;
}
@media only screen and (max-width: 640px) {
.entry-info {
margin-bottom: 20px;
}
#article .entry-info .tools {
margin-left: 0;
margin-right: 0;
}
#article .entry-info .tools .tags {
gap: 10px;
}
#article .entry-info .chip {
height: 32px;
line-height: 32px;
}
#article .entry-info .chip-label,
#article .entry-info .chip-action {
min-width: 40px;
}
}

View file

@ -81,10 +81,6 @@
color: #dfdfdf !important;
}
#article .chip {
background-color: #373737;
}
.side-nav li.active {
background-color: #2f2f2f;
}

View file

@ -1,10 +1,10 @@
{% if tags is iterable and tags is not empty %}
<ul class="tags{{ listClass|default("") }}">
{% for tag in tags %}
<li class="chip" title="{{ tag.label }}">
<a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
<li class="chip">
<a class="chip-label" href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
{% if withRemove is defined and withRemove == true %}
<a href="{{ path('remove_tag', {'entry': entryId, 'tag': tag.id}) }}" onclick="return confirm('{{ 'entry.confirm.delete_tag'|trans|escape('js') }}')">
<a class="chip-action" href="{{ path('remove_tag', {'entry': entryId, 'tag': tag.id}) }}" onclick="return confirm('{{ 'entry.confirm.delete_tag'|trans|escape('js') }}')">
<i class="material-icons vertical-align-middle">delete</i>
</a>
{% endif %}

View file

@ -266,10 +266,12 @@
{{ entry.domainName|removeWww }}
</a>
</li>
{% if entry.annotations|length %}
<li>
<i class="material-icons grey-text">comment</i>
{{ 'entry.view.annotations_on_the_entry'|transchoice(entry.annotations|length) }}
</li>
{% endif %}
{% if entry.originUrl is not empty %}
<li>
<i class="material-icons grey-text" title="{{ 'entry.view.provided_by'|trans }}">launch</i>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long