mirror of
https://github.com/wallabag/wallabag.git
synced 2024-09-29 14:51:58 +00:00
Add some flex magic
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
812c980fa5
commit
91775f36fe
4 changed files with 64 additions and 53 deletions
|
@ -175,30 +175,63 @@ a.original:not(.waves-effect) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-stacked {
|
.card-stacked {
|
||||||
&:hover ul.tools-list {
|
display: flex;
|
||||||
display: block;
|
flex-flow: row wrap;
|
||||||
}
|
|
||||||
|
|
||||||
ul.tools-list {
|
&:hover ul.tools-list {
|
||||||
display: none;
|
display: inline;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview {
|
.preview {
|
||||||
float: left;
|
max-width: 100px;
|
||||||
width: 90px;
|
height: auto;
|
||||||
height: 50px;
|
margin-right: 10px;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-height: 50px;
|
max-width: 100%;
|
||||||
padding-right: 10px;
|
max-height: 100%;
|
||||||
width: 80px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.domain,
|
div.metadata {
|
||||||
.footer {
|
.chip {
|
||||||
font-size: 12px;
|
background-color: $blueAccentColor;
|
||||||
|
padding: 0 15px 0 10px;
|
||||||
|
margin: auto 2px;
|
||||||
|
|
||||||
|
a,
|
||||||
|
i {
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
i.material-icons {
|
||||||
|
float: right;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 32px;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.card-content {
|
||||||
|
flex: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.tools-list {
|
||||||
|
flex: 1;
|
||||||
|
display: none;
|
||||||
|
flex-basis: 5em;
|
||||||
|
align-self: flex-end;
|
||||||
|
float: right;
|
||||||
|
max-width: 6em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#content .collection .collection-item {
|
||||||
|
min-height: 65px;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quickstart .card .card-action a,
|
.quickstart .card .card-action a,
|
||||||
|
|
|
@ -30,23 +30,3 @@ nav .input-field input {
|
||||||
.tab {
|
.tab {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip {
|
|
||||||
margin: auto 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #eee;
|
|
||||||
font-weight: normal;
|
|
||||||
height: 20px;
|
|
||||||
line-height: normal;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #9e9e9e;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.material-icons {
|
|
||||||
float: right;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 32px;
|
|
||||||
padding-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,30 +1,28 @@
|
||||||
<div class="card-stacked">
|
<div class="card-stacked">
|
||||||
|
<div class="preview">{% if entry.previewPicture is not null %}<img src="{{ entry.previewPicture }}" />{% endif %}</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="preview"><img src="{{ entry.previewPicture }}" /></div>
|
|
||||||
<span class="card-title dot-ellipsis dot-resize-update">
|
<span class="card-title dot-ellipsis dot-resize-update">
|
||||||
<a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title | striptags | e('html_attr') }}">
|
<a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title | striptags | e('html_attr') }}">
|
||||||
{{ entry.title| striptags | truncate(120, true, '…') | raw }}
|
{{ entry.title| striptags | truncate(120, true, '…') | raw }}
|
||||||
</a>
|
</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="metadata">
|
||||||
<a href="{{ entry.url|e }}" class="grey-text domain" target="_blank" title="{{ entry.domainName|removeWww }}">
|
<a href="{{ entry.url|e }}" class="grey-text domain" target="_blank" title="{{ entry.domainName|removeWww }}">
|
||||||
<span>{{ entry.domainName|removeWww }}</span>
|
<span>{{ entry.domainName|removeWww }}</span>
|
||||||
</a>
|
</a>
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
{% for tag in entry.tags | slice(0, 3) %}
|
{% for tag in entry.tags | slice(0, 3) %}
|
||||||
<span class="chip hide-on-med-and-down">
|
<span class="chip hide-on-med-and-down">
|
||||||
<a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
|
<a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
|
||||||
</span>
|
</span>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
</div>
|
||||||
<ul class="tools-list right">
|
</div>
|
||||||
|
<ul class="tools-list hide-on-small-only">
|
||||||
<li>
|
<li>
|
||||||
<a title="{{ 'entry.list.toogle_as_read'|trans }}" class="tool grey-text" href="{{ path('archive_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isArchived == 0 %}done{% else %}redo{% endif %}</i></a>
|
<a title="{{ 'entry.list.toogle_as_read'|trans }}" class="tool grey-text" href="{{ path('archive_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isArchived == 0 %}done{% else %}redo{% endif %}</i></a>
|
||||||
<a title="{{ 'entry.list.toogle_as_star'|trans }}" class="tool grey-text" href="{{ path('star_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isStarred == 0 %}star_border{% else %}star{% endif %}</i></a>
|
<a title="{{ 'entry.list.toogle_as_star'|trans }}" class="tool grey-text" href="{{ path('star_entry', { 'id': entry.id }) }}"><i class="material-icons">{% if entry.isStarred == 0 %}star_border{% else %}star{% endif %}</i></a>
|
||||||
<a title="{{ 'entry.list.delete'|trans }}" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" class="tool grey-text delete" href="{{ path('delete_entry', { 'id': entry.id }) }}"><i class="material-icons">delete</i></a>
|
<a title="{{ 'entry.list.delete'|trans }}" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" class="tool grey-text delete" href="{{ path('delete_entry', { 'id': entry.id }) }}"><i class="material-icons">delete</i></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue