Merge pull request #5664 from Simounet/feat/home-entries-updated

This commit is contained in:
Jérémy Benoist 2022-03-15 09:34:00 +01:00 committed by GitHub
commit eb99cacf43
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 94 additions and 63 deletions

View file

@ -7,17 +7,12 @@ main {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
ul.row { .row {
margin: 0.4rem 0 0; margin: 0.4rem 0 0;
padding: 0 0.75rem; padding: 0 0.75rem;
} }
} }
.data .card .card-body {
height: 19em;
overflow: hidden;
}
@mixin mixin-reading-time { @mixin mixin-reading-time {
.reading-time { .reading-time {
display: inline-flex; display: inline-flex;
@ -37,6 +32,16 @@ main {
} }
.card { .card {
display: flex;
margin: 0;
height: 100%;
flex-direction: column;
.card-content {
padding-bottom: 12px;
flex-grow: 1;
}
.card-content .card-title, .card-content .card-title,
.card-reveal .card-title { .card-reveal .card-title {
line-height: 22.8px; line-height: 22.8px;
@ -95,7 +100,7 @@ main {
} }
.card-action { .card-action {
padding: 10px 5px 10px 15px; padding: 10px 10px 10px 15px;
ul.links { ul.links {
margin: 0; margin: 0;
@ -112,8 +117,9 @@ main {
color: #fff; color: #fff;
} }
ul.tools li a.tool { .tool {
margin-right: 5px !important; display: flex;
margin-right: 0 !important;
} }
@include mixin-reading-time; @include mixin-reading-time;
@ -134,6 +140,12 @@ main {
} }
} }
.card-body {
display: flex;
flex-grow: 1;
flex-direction: column;
}
a.original:not(.waves-effect) { a.original:not(.waves-effect) {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -311,3 +323,13 @@ a.original:not(.waves-effect) {
.settings .div_tabs { .settings .div_tabs {
padding-bottom: 15px; padding-bottom: 15px;
} }
.row {
display: grid;
gap: 20px;
}
.tools {
display: flex;
gap: 10px;
}

View file

@ -3,7 +3,7 @@
* ========================================================================== */ * ========================================================================== */
.mass-buttons { .mass-buttons {
margin: 5px; margin: 10px 5px 10px 20px;
#selectAll { #selectAll {
position: relative; position: relative;
@ -38,8 +38,13 @@
} }
} }
.entries {
list-style: none;
}
.collection { .collection {
margin: 15px 15px 0; margin: 5px 15px 0;
padding: 0;
.collection-item { .collection-item {
padding: 7px; padding: 7px;

View file

@ -2,6 +2,12 @@
Media queries Media queries
========================================================================== */ ========================================================================== */
@media only screen and (min-width: 450px) {
.row {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
}
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
nav, nav,
body:not(.entry):not(.login) main, body:not(.entry):not(.login) main,
@ -180,15 +186,6 @@
} }
} }
@media screen and (max-width: 310px),
screen and (min-width: 601px) and (max-width: 660px),
screen and (min-width: 993px) and (max-width: 1050px),
screen and (min-width: 1201px) and (max-width: 1250px) {
.card .card-action .reading-time .card-created-at {
display: none;
}
}
@media only print { @media only print {
body { body {
display: block; display: block;

View file

@ -9,9 +9,13 @@
<ul class="tools right"> <ul class="tools right">
<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 %}unarchive{% endif %}</i></a> <a title="{{ 'entry.list.toogle_as_read'|trans }}" class="tool grey-text" href="{{ path('archive_entry', { 'id': entry.id }) }}" data-action="archived" data-entry-id="{{ entry.id }}"><i class="material-icons">{% if entry.isArchived == 0 %}done{% else %}unarchive{% 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> </li>
<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>
<a title="{{ 'entry.list.toogle_as_star'|trans }}" class="tool grey-text" href="{{ path('star_entry', { 'id': entry.id }) }}" data-action="star" data-entry-id="{{ entry.id }}"><i class="material-icons">{% if entry.isStarred == 0 %}star_border{% else %}star{% endif %}</i></a>
</li>
<li>
<a title="{{ 'entry.list.delete'|trans }}" data-action-confirm="{{ 'entry.confirm.delete'|trans }}" class="tool grey-text delete" href="{{ path('delete_entry', { 'id': entry.id }) }}" data-action="delete" data-entry-id="{{ entry.id }}"><i class="material-icons">delete</i></a>
</li> </li>
</ul> </ul>
</div> </div>

View file

@ -39,9 +39,8 @@
{% endif %} {% endif %}
</div> </div>
<ul class="{% if listMode == 1 %}collection{% else %}row data{% endif %}"> {% if listMode == 1 %}
<div class="mass-buttons">
<li class="mass-buttons">
{% if entries.count > 0 and listMode == 1 %} {% if entries.count > 0 and listMode == 1 %}
<span> <span>
<input id="selectAll" type="checkbox" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />&nbsp; <input id="selectAll" type="checkbox" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />&nbsp;
@ -53,10 +52,13 @@
<button class="btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button> <button class="btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button>
</span> </span>
{% endif %} {% endif %}
</li> </div>
{% endif %}
<ol class="entries {% if listMode == 1 %}collection{% else %}row data{% endif %}">
{% for entry in entries %} {% for entry in entries %}
<li id="entry-{{ entry.id|e }}" class="entry col {% if listMode == 0 %}l3 m6{% else %}collection-item{% endif %} s12"> <li id="entry-{{ entry.id|e }}" class="{% if listMode != 0 %}col collection-item{% endif %} s12" data-entry-id="{{ entry.id|e }}" data-test="entry">
{% if listMode == 1 %} {% if listMode == 1 %}
{% include "@WallabagCore/themes/material/Entry/_card_list.html.twig" with {'entry': entry, 'currentRoute': currentRoute, 'routes': entriesWithArchivedClassRoutes} only %} {% include "@WallabagCore/themes/material/Entry/_card_list.html.twig" with {'entry': entry, 'currentRoute': currentRoute, 'routes': entriesWithArchivedClassRoutes} only %}
{% elseif not entry.previewPicture is null and entry.mimetype starts with 'image/' %} {% elseif not entry.previewPicture is null and entry.mimetype starts with 'image/' %}
@ -66,7 +68,7 @@
{% endif %} {% endif %}
</li> </li>
{% endfor %} {% endfor %}
</ul> </ol>
</form> </form>
{% if entries.getNbPages > 1 %} {% if entries.getNbPages > 1 %}

View file

@ -14,6 +14,7 @@ class EntryControllerTest extends WallabagCoreTestCase
const AN_URL_CONTAINING_AN_ARTICLE_WITH_IMAGE = 'https://www.lemonde.fr/judo/article/2017/11/11/judo-la-decima-de-teddy-riner_5213605_1556020.html'; const AN_URL_CONTAINING_AN_ARTICLE_WITH_IMAGE = 'https://www.lemonde.fr/judo/article/2017/11/11/judo-la-decima-de-teddy-riner_5213605_1556020.html';
public $downloadImagesEnabled = false; public $downloadImagesEnabled = false;
public $url = 'https://www.lemonde.fr/pixels/article/2019/06/18/ce-qu-il-faut-savoir-sur-le-libra-la-cryptomonnaie-de-facebook_5477887_4408996.html'; public $url = 'https://www.lemonde.fr/pixels/article/2019/06/18/ce-qu-il-faut-savoir-sur-le-libra-la-cryptomonnaie-de-facebook_5477887_4408996.html';
private $entryDataTestAttribute = '[data-test="entry"]';
/** /**
* @after * @after
@ -100,14 +101,14 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->request('GET', '/'); $crawler = $client->request('GET', '/');
$this->assertCount(4, $crawler->filter('li.entry')); $this->assertCount(4, $crawler->filter($this->entryDataTestAttribute));
// Good URL // Good URL
$client->request('GET', '/bookmarklet', ['url' => $this->url]); $client->request('GET', '/bookmarklet', ['url' => $this->url]);
$this->assertSame(302, $client->getResponse()->getStatusCode()); $this->assertSame(302, $client->getResponse()->getStatusCode());
$client->followRedirect(); $client->followRedirect();
$crawler = $client->request('GET', '/'); $crawler = $client->request('GET', '/');
$this->assertCount(5, $crawler->filter('li.entry')); $this->assertCount(5, $crawler->filter($this->entryDataTestAttribute));
$em = $client->getContainer() $em = $client->getContainer()
->get('doctrine.orm.entity_manager'); ->get('doctrine.orm.entity_manager');
@ -759,7 +760,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(1, $crawler->filter('li.entry')); $this->assertCount(1, $crawler->filter($this->entryDataTestAttribute));
} }
public function testFilterOnReadingTimeWithNegativeValue() public function testFilterOnReadingTimeWithNegativeValue()
@ -779,7 +780,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
// forcing negative value results in no entry displayed // forcing negative value results in no entry displayed
$this->assertCount(0, $crawler->filter('li.entry')); $this->assertCount(0, $crawler->filter($this->entryDataTestAttribute));
} }
public function testFilterOnReadingTimeOnlyUpper() public function testFilterOnReadingTimeOnlyUpper()
@ -788,7 +789,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$client = $this->getClient(); $client = $this->getClient();
$crawler = $client->request('GET', '/all/list'); $crawler = $client->request('GET', '/all/list');
$this->assertCount(5, $crawler->filter('li.entry')); $this->assertCount(5, $crawler->filter($this->entryDataTestAttribute));
$entry = new Entry($this->getLoggedInUser()); $entry = new Entry($this->getLoggedInUser());
$entry->setUrl($this->url); $entry->setUrl($this->url);
@ -797,7 +798,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$this->getEntityManager()->flush(); $this->getEntityManager()->flush();
$crawler = $client->request('GET', '/all/list'); $crawler = $client->request('GET', '/all/list');
$this->assertCount(6, $crawler->filter('li.entry')); $this->assertCount(6, $crawler->filter($this->entryDataTestAttribute));
$form = $crawler->filter('button[id=submit-filter]')->form(); $form = $crawler->filter('button[id=submit-filter]')->form();
@ -807,7 +808,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(5, $crawler->filter('li.entry')); $this->assertCount(5, $crawler->filter($this->entryDataTestAttribute));
} }
public function testFilterOnReadingTimeOnlyLower() public function testFilterOnReadingTimeOnlyLower()
@ -825,7 +826,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(0, $crawler->filter('li.entry')); $this->assertCount(0, $crawler->filter($this->entryDataTestAttribute));
$entry = new Entry($this->getLoggedInUser()); $entry = new Entry($this->getLoggedInUser());
$entry->setUrl($this->url); $entry->setUrl($this->url);
@ -834,7 +835,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$this->getEntityManager()->flush(); $this->getEntityManager()->flush();
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(1, $crawler->filter('li.entry')); $this->assertCount(1, $crawler->filter($this->entryDataTestAttribute));
} }
public function testFilterOnUnreadStatus() public function testFilterOnUnreadStatus()
@ -852,7 +853,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(4, $crawler->filter('li.entry')); $this->assertCount(4, $crawler->filter($this->entryDataTestAttribute));
$entry = new Entry($this->getLoggedInUser()); $entry = new Entry($this->getLoggedInUser());
$entry->setUrl($this->url); $entry->setUrl($this->url);
@ -862,7 +863,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(5, $crawler->filter('li.entry')); $this->assertCount(5, $crawler->filter($this->entryDataTestAttribute));
} }
public function testFilterOnCreationDate() public function testFilterOnCreationDate()
@ -893,7 +894,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(4, $crawler->filter('li.entry')); $this->assertCount(4, $crawler->filter($this->entryDataTestAttribute));
$data = [ $data = [
'entry_filter[createdAt][left_date]' => $today->format('Y-m-d'), 'entry_filter[createdAt][left_date]' => $today->format('Y-m-d'),
@ -902,7 +903,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(4, $crawler->filter('li.entry')); $this->assertCount(4, $crawler->filter($this->entryDataTestAttribute));
$data = [ $data = [
'entry_filter[createdAt][left_date]' => '1970-01-01', 'entry_filter[createdAt][left_date]' => '1970-01-01',
@ -911,7 +912,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(0, $crawler->filter('li.entry')); $this->assertCount(0, $crawler->filter($this->entryDataTestAttribute));
} }
public function testPaginationWithFilter() public function testPaginationWithFilter()
@ -955,7 +956,7 @@ class EntryControllerTest extends WallabagCoreTestCase
]; ];
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(4, $crawler->filter('li.entry')); $this->assertCount(4, $crawler->filter($this->entryDataTestAttribute));
$crawler = $client->request('GET', '/unread/list'); $crawler = $client->request('GET', '/unread/list');
$form = $crawler->filter('button[id=submit-filter]')->form(); $form = $crawler->filter('button[id=submit-filter]')->form();
@ -964,7 +965,7 @@ class EntryControllerTest extends WallabagCoreTestCase
]; ];
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(4, $crawler->filter('li.entry')); $this->assertCount(4, $crawler->filter($this->entryDataTestAttribute));
$form = $crawler->filter('button[id=submit-filter]')->form(); $form = $crawler->filter('button[id=submit-filter]')->form();
$data = [ $data = [
@ -972,7 +973,7 @@ class EntryControllerTest extends WallabagCoreTestCase
]; ];
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(0, $crawler->filter('li.entry')); $this->assertCount(0, $crawler->filter($this->entryDataTestAttribute));
} }
public function testFilterOnStatus() public function testFilterOnStatus()
@ -987,14 +988,14 @@ class EntryControllerTest extends WallabagCoreTestCase
$form['entry_filter[isUnread]']->untick(); $form['entry_filter[isUnread]']->untick();
$crawler = $client->submit($form); $crawler = $client->submit($form);
$this->assertCount(1, $crawler->filter('li.entry')); $this->assertCount(1, $crawler->filter($this->entryDataTestAttribute));
$form = $crawler->filter('button[id=submit-filter]')->form(); $form = $crawler->filter('button[id=submit-filter]')->form();
$form['entry_filter[isArchived]']->untick(); $form['entry_filter[isArchived]']->untick();
$form['entry_filter[isStarred]']->tick(); $form['entry_filter[isStarred]']->tick();
$crawler = $client->submit($form); $crawler = $client->submit($form);
$this->assertCount(1, $crawler->filter('li.entry')); $this->assertCount(1, $crawler->filter($this->entryDataTestAttribute));
} }
public function testFilterPreselectedStatus() public function testFilterPreselectedStatus()
@ -1031,7 +1032,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$form['entry_filter[isPublic]']->tick(); $form['entry_filter[isPublic]']->tick();
$crawler = $client->submit($form); $crawler = $client->submit($form);
$this->assertCount(0, $crawler->filter('li.entry')); $this->assertCount(0, $crawler->filter($this->entryDataTestAttribute));
} }
public function testPreviewPictureFilter() public function testPreviewPictureFilter()
@ -1044,7 +1045,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$form['entry_filter[previewPicture]']->tick(); $form['entry_filter[previewPicture]']->tick();
$crawler = $client->submit($form); $crawler = $client->submit($form);
$this->assertCount(1, $crawler->filter('li.entry')); $this->assertCount(1, $crawler->filter($this->entryDataTestAttribute));
} }
public function testFilterOnLanguage() public function testFilterOnLanguage()
@ -1065,7 +1066,7 @@ class EntryControllerTest extends WallabagCoreTestCase
]; ];
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(3, $crawler->filter('li.entry')); $this->assertCount(3, $crawler->filter($this->entryDataTestAttribute));
$form = $crawler->filter('button[id=submit-filter]')->form(); $form = $crawler->filter('button[id=submit-filter]')->form();
$data = [ $data = [
@ -1073,7 +1074,7 @@ class EntryControllerTest extends WallabagCoreTestCase
]; ];
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(2, $crawler->filter('li.entry')); $this->assertCount(2, $crawler->filter($this->entryDataTestAttribute));
} }
public function testShareEntryPublicly() public function testShareEntryPublicly()
@ -1276,7 +1277,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(1, $crawler->filter('li.entry')); $this->assertCount(1, $crawler->filter($this->entryDataTestAttribute));
$entry = new Entry($this->getLoggedInUser()); $entry = new Entry($this->getLoggedInUser());
$entry->setUrl($this->url); $entry->setUrl($this->url);
@ -1299,7 +1300,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(2, $crawler->filter('li.entry')); $this->assertCount(2, $crawler->filter($this->entryDataTestAttribute));
$crawler = $client->request('GET', '/all/list'); $crawler = $client->request('GET', '/all/list');
$form = $crawler->filter('button[id=submit-filter]')->form(); $form = $crawler->filter('button[id=submit-filter]')->form();
@ -1310,7 +1311,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(8, $crawler->filter('li.entry')); $this->assertCount(8, $crawler->filter($this->entryDataTestAttribute));
} }
public function testSearch() public function testSearch()
@ -1334,7 +1335,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(4, $crawler->filter('li.entry')); $this->assertCount(4, $crawler->filter($this->entryDataTestAttribute));
// Search on starred list // Search on starred list
$crawler = $client->request('GET', '/starred/list'); $crawler = $client->request('GET', '/starred/list');
@ -1353,7 +1354,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(1, $crawler->filter('li.entry')); $this->assertCount(1, $crawler->filter($this->entryDataTestAttribute));
$crawler = $client->request('GET', '/archive/list'); $crawler = $client->request('GET', '/archive/list');
@ -1372,7 +1373,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(1, $crawler->filter('li.entry')); $this->assertCount(1, $crawler->filter($this->entryDataTestAttribute));
$client->request('GET', '/delete/' . $entry->getId()); $client->request('GET', '/delete/' . $entry->getId());
// test on list of all articles // test on list of all articles
@ -1385,7 +1386,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(0, $crawler->filter('li.entry')); $this->assertCount(0, $crawler->filter($this->entryDataTestAttribute));
// test url search on list of all articles // test url search on list of all articles
$entry = new Entry($this->getLoggedInUser()); $entry = new Entry($this->getLoggedInUser());
@ -1404,7 +1405,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(1, $crawler->filter('li.entry')); $this->assertCount(1, $crawler->filter($this->entryDataTestAttribute));
// same as previous test but for case-sensitivity // same as previous test but for case-sensitivity
$crawler = $client->request('GET', '/all/list'); $crawler = $client->request('GET', '/all/list');
@ -1416,7 +1417,7 @@ class EntryControllerTest extends WallabagCoreTestCase
$crawler = $client->submit($form, $data); $crawler = $client->submit($form, $data);
$this->assertCount(1, $crawler->filter('li.entry')); $this->assertCount(1, $crawler->filter($this->entryDataTestAttribute));
} }
public function dataForLanguage() public function dataForLanguage()

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long