mirror of
https://github.com/wallabag/wallabag.git
synced 2024-12-25 00:50:29 +00:00
Merge pull request #6613 from Simounet/feat/entry-info-ui
Feat/entry info UI
This commit is contained in:
commit
7689d06b3e
6 changed files with 83 additions and 26 deletions
|
@ -108,11 +108,12 @@
|
||||||
.entry-info {
|
.entry-info {
|
||||||
.tools {
|
.tools {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
margin: 8px 5px 5px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
.stats {
|
.stats {
|
||||||
|
margin: 0;
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
margin: 8px 5px 5px;
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
@ -133,18 +134,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tags {
|
.tags {
|
||||||
float: right;
|
display: flex;
|
||||||
margin: 5px 15px 10px;
|
margin: 0;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip {
|
.chip {
|
||||||
background-color: #9e9e9e;
|
display: flex;
|
||||||
padding: 0 15px 0 10px;
|
margin: 0;
|
||||||
margin: auto 2px;
|
padding: 0;
|
||||||
border-radius: 6px;
|
height: 25px;
|
||||||
height: 18px;
|
line-height: 25px;
|
||||||
line-height: 18px;
|
align-items: center;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
a,
|
a,
|
||||||
i {
|
i {
|
||||||
|
@ -152,13 +156,43 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
i.material-icons {
|
i.material-icons {
|
||||||
float: right;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 18px;
|
vertical-align: sub;
|
||||||
padding-left: 8px;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
.reader-mode {
|
||||||
|
@ -200,3 +234,28 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
z-index: 9999;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -81,10 +81,6 @@
|
||||||
color: #dfdfdf !important;
|
color: #dfdfdf !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#article .chip {
|
|
||||||
background-color: #373737;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-nav li.active {
|
.side-nav li.active {
|
||||||
background-color: #2f2f2f;
|
background-color: #2f2f2f;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
{% if tags is iterable and tags is not empty %}
|
{% if tags is iterable and tags is not empty %}
|
||||||
<ul class="tags{{ listClass|default("") }}">
|
<ul class="tags{{ listClass|default("") }}">
|
||||||
{% for tag in tags %}
|
{% for tag in tags %}
|
||||||
<li class="chip" title="{{ tag.label }}">
|
<li class="chip">
|
||||||
<a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
|
<a class="chip-label" href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
|
||||||
{% if withRemove is defined and withRemove == true %}
|
{% 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>
|
<i class="material-icons vertical-align-middle">delete</i>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -266,10 +266,12 @@
|
||||||
{{ entry.domainName|removeWww }}
|
{{ entry.domainName|removeWww }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
{% if entry.annotations|length %}
|
||||||
<li>
|
<li>
|
||||||
<i class="material-icons grey-text">comment</i>
|
<i class="material-icons grey-text">comment</i>
|
||||||
{{ 'entry.view.annotations_on_the_entry'|transchoice(entry.annotations|length) }}
|
{{ 'entry.view.annotations_on_the_entry'|transchoice(entry.annotations|length) }}
|
||||||
</li>
|
</li>
|
||||||
|
{% endif %}
|
||||||
{% if entry.originUrl is not empty %}
|
{% if entry.originUrl is not empty %}
|
||||||
<li>
|
<li>
|
||||||
<i class="material-icons grey-text" title="{{ 'entry.view.provided_by'|trans }}">launch</i>
|
<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
Loading…
Reference in a new issue