mirrors/wallabag
1
0
Fork 0
mirror of https://github.com/wallabag/wallabag.git synced 2024-11-29 12:31:02 +00:00
Code Issues Projects Releases Wiki Activity

CSS grid used for bloc mode entries and flex for card bloc

Browse source
This commit is contained in:
Simounet 2022-03-13 15:18:03 +01:00
parent f6bc76a8ce
commit 85e91f9e67
No known key found for this signature in database
GPG key ID: 77D3B7DC794EB770
6 changed files with 63 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/Resources/static/themes/material/css/cards.scss
View file

@ -13,11 +13,6 @@ main {
} }
} }
.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;
@ -134,6 +139,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 +322,8 @@ a.original:not(.waves-effect) {
.settings .div_tabs { .settings .div_tabs {
padding-bottom: 15px; padding-bottom: 15px;
} }
.row {
display: grid;
gap: 20px;
}

6
app/Resources/static/themes/material/css/media_queries.scss
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,

2
src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig
View file

@ -56,7 +56,7 @@
</li> </li>
{% 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/' %}

65
tests/Wallabag/CoreBundle/Controller/EntryControllerTest.php
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()

2
web/wallassets/material.css
View file

File diff suppressed because one or more lines are too long

2
web/wallassets/material.css.map
View file

File diff suppressed because one or more lines are too long