Add support for grid view #986

gpapin · 2019-07-29T19:12:55Z

Not too sure if I should base this on develop or master so feel free to edit.
This is pretty much done but still need to address 2 issues

Fix the alphabetical alphabetical sorting asc and desc in the cover view
Figure out what B,A <-> A B does and fix it in the cover view
Fix tooltip alignment on large displays

Feedback and pointers welcome.

OzzieIsaacs · 2019-07-29T19:17:14Z

The B,A <-> A B shouldn't be visible. It's made for the authors view (displaying surname, first-name or first name surname)

gpapin · 2019-07-29T19:20:00Z

Ah ok that makes sense! Since the grid view doesn't support author at the moment I'll remove it entirely.

gpapin · 2019-07-29T19:48:19Z

I think I found a solution, using the the isotop lib that is included should solve all my problems.

gpapin · 2019-07-29T20:21:11Z

Ok the default theme works but in Caliblur the sorting is still broken...

gpapin · 2019-07-29T21:34:06Z

Ok so the 2 remaining issues are linked

On the default theme: I use the .book class on each items filtering through isotope works fine but the tooltips are a bit off when the display is too wide, presumably because isotope is making each book element a bit wider to fit the screen (instead of using a flex-display for example).
On Caliblur theme: the tooltip seems to work because the theme doesn't use a fixed number of items per rows so the book don't expand and the tooltip is where it should be. However there is some other css rules that mess with isotope that breaks the filtering... if I change my book css class to item for example the filtering start working again! But of course that breaks the tooltips as we see the same issue that we get from the default theme...

OzzieIsaacs · 2019-08-04T12:24:59Z

What about the crazy idea of having the badge in the upper left corner:

OzzieIsaacs · 2019-08-04T13:37:01Z

The sorting problem arises from these lines in caliblur.css.min:

.book {
    width: 225px;
    max-width: 225px;
    //position: relative !important;
    //left: auto !important;
    //top: auto !important;
    //-webkit-transform: none !important;
    //    -ms-transform: none !important;
    //        transform: none !important;
    min-width: 225px;
    display: block;
}

If you comment out the lines like in the code snippet the searching works

gpapin · 2019-08-04T20:01:36Z

Thanks for looking in to this. I'll try out your fix and see if that affects anything else. I would be curious to know why those rules were there in the first place, but it this fist it I'll probably override it just in the grid view so it won't affect any other places this is used.

Regarding the left alignment, like you said this is crazy XD.
Seriously though, I think it's against common practices, in the western world (were we read from left to right, top bottom), any badges you'll see over the internet are on the right hand side of what it represent. Changing that might be confusing.
On the other hand, this would be a very small change and maybe one that could be implemented in a custom theme ? I've seen that there are already some discutions about theme and this isn't easy but what I've seen in some other app is rather than changing the whole theme drastically like Caliblur does, some app let you add custom css that runs after everything else. This is where I would put those changes.

OzzieIsaacs · 2019-08-05T04:36:30Z

The thing I realized about the css, it's shortening the titles of the book, without the css the book titles can be very long and go into the next book.

OzzieIsaacs · 2020-01-19T14:08:26Z

Here is an overview of what got changed by this pull request:

Issues
======
- Added 19
           

Complexity increasing per file
==============================
- cps/ub.py  1
- cps/static/js/filter_grid.js  2

See the complete overview on Codacy

OzzieIsaacs · 2020-01-19T14:08:26Z

cps/static/js/filter_grid.js

+
+var $list = $('#list').isotope({
+  itemSelector: '.book',
+  layoutMode: 'fitRows',


Issue found: Expected indentation of 4 spaces but found 2.

OzzieIsaacs · 2020-01-19T14:08:27Z

cps/static/js/filter_grid.js

+
+$("#asc").click(function() {
+    $list.isotope({
+        sortBy: 'name',


Issue found: Strings must use doublequote.

OzzieIsaacs · 2020-01-19T14:08:28Z

cps/static/js/filter_grid.js

+
+var $list = $('#list').isotope({
+  itemSelector: '.book',
+  layoutMode: 'fitRows',


Issue found: Strings must use doublequote.

OzzieIsaacs · 2020-01-19T14:08:29Z

cps/static/js/filter_grid.js

+ *  along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+var $list = $('#list').isotope({


Issue found: Strings must use doublequote.

OzzieIsaacs · 2020-01-19T14:08:30Z

cps/static/js/filter_grid.js

+  itemSelector: '.book',
+  layoutMode: 'fitRows',
+  getSortData: {
+    title: '.title',


Issue found: Strings must use doublequote.

OzzieIsaacs · 2020-01-19T14:08:31Z

cps/static/js/main.js

+        data = {};
+        data[target] = view;
+        console.debug("Updating view data: ", data);
+        $.post( "/ajax/view", data).done(function( result ) {


Issue found: 'data' is not defined.

OzzieIsaacs · 2020-01-19T14:08:33Z

cps/static/js/filter_grid.js

+  layoutMode: 'fitRows',
+  getSortData: {
+    title: '.title',
+  }


Issue found: Expected indentation of 4 spaces but found 2.

OzzieIsaacs · 2020-01-19T14:08:34Z

cps/static/js/main.js

@@ -239,4 +239,17 @@ $(function() {
        $(".discover .row").isotope("layout");
    });

+    $(".update-view").click(function(e) {
+        var target = $(this).data('target');
+        var view = $(this).data('view');


Issue found: Strings must use doublequote.

OzzieIsaacs · 2020-01-19T14:08:35Z

cps/static/js/filter_grid.js

+ */
+
+var $list = $('#list').isotope({
+  itemSelector: '.book',


Issue found: Strings must use doublequote.

OzzieIsaacs · 2020-01-19T14:08:36Z

cps/static/js/main.js

@@ -239,4 +239,17 @@ $(function() {
        $(".discover .row").isotope("layout");
    });

+    $(".update-view").click(function(e) {
+        var target = $(this).data('target');


Issue found: Strings must use doublequote.

OzzieIsaacs · 2020-01-19T14:08:36Z

cps/static/js/filter_grid.js

+ */
+
+var $list = $('#list').isotope({
+  itemSelector: '.book',


Issue found: Expected indentation of 4 spaces but found 2.

OzzieIsaacs · 2020-01-19T14:08:38Z

cps/static/js/filter_grid.js

+var $list = $('#list').isotope({
+  itemSelector: '.book',
+  layoutMode: 'fitRows',
+  getSortData: {


Issue found: Expected indentation of 4 spaces but found 2.

OzzieIsaacs · 2020-01-19T14:08:39Z

cps/static/js/main.js

+
+        e.preventDefault();
+        e.stopPropagation();
+        data = {};


Issue found: 'data' is not defined.

OzzieIsaacs · 2020-01-19T14:08:40Z

cps/static/js/filter_grid.js

+        }
+    });
+    // We need to trigger the resize event to have all the grid item to re-align.
+    window.dispatchEvent(new Event('resize'));


Issue found: Strings must use doublequote.

OzzieIsaacs · 2020-01-19T14:08:40Z

cps/static/js/main.js

+        data = {};
+        data[target] = view;
+        console.debug("Updating view data: ", data);
+        $.post( "/ajax/view", data).done(function( result ) {


Issue found: 'result' is defined but never used.

OzzieIsaacs · 2020-01-19T14:08:41Z

cps/static/js/main.js

+        e.stopPropagation();
+        data = {};
+        data[target] = view;
+        console.debug("Updating view data: ", data);


Issue found: Unexpected console statement.

OzzieIsaacs · 2020-01-19T14:08:43Z

cps/static/js/main.js

+        e.preventDefault();
+        e.stopPropagation();
+        data = {};
+        data[target] = view;


Issue found: 'data' is not defined.

OzzieIsaacs · 2020-01-19T14:08:44Z

cps/static/js/filter_grid.js

+  itemSelector: '.book',
+  layoutMode: 'fitRows',
+  getSortData: {
+    title: '.title',


Issue found: Expected indentation of 8 spaces but found 4.

OzzieIsaacs · 2020-01-19T14:08:45Z

cps/static/js/main.js

+        e.stopPropagation();
+        data = {};
+        data[target] = view;
+        console.debug("Updating view data: ", data);


Issue found: 'data' is not defined.

gpapin · 2020-01-19T15:43:02Z

I like that! I'm going to update at some point.
Is there a way to run it locally so I can test I haven't missed anything before pushing ?

OzzieIsaacs · 2020-01-19T15:48:02Z

Partly: Codacy is using different "linter" to do the checking.
For javascript it's ESLint and there is a config file in the root folder. For python code I don't have a config.
I'm sorry about all the emails, this was better in the past

gpapin · 2020-01-19T15:54:39Z

Yeah don't worry gmail keeps it tidy in a thread anyway :)
I'm under the water at the moment but I haven't forgotten this feature by the way.

It would be nice to have a make test or make lint that would run the lint in a docker container. This is what I got for my other projects and it prevent me from having to go back and forth

…ad of top right: each element's width in the list seems to be double the size of the image, so right alignment gets tricky. janeczku#986 (comment) suggests top-left alignment which does make a lot of sense. Using this for now. Maintainer might have a better idea to fix it

gpapin · 2020-05-26T09:50:32Z

I guess this can be close now that #1306 has been merged

Add support for grid view

700ff9e

gpapin mentioned this pull request Jul 29, 2019

New view for series #979

Closed

Remove unnecessary filter

4b21504

gpapin mentioned this pull request Jul 29, 2019

[Suggestion] Make previews for authors/series/tags #422

Closed

Save the sorting state

d3afd23

Fix the sorting

d2e5347

gpapin mentioned this pull request Aug 15, 2019

Add support for infinite scroll with Caliblur theme #981

Closed

OzzieIsaacs reviewed Jan 19, 2020

View reviewed changes

cps/static/js/main.js

e.preventDefault();

e.stopPropagation();

data = {};

Copy link

Collaborator

OzzieIsaacs Jan 19, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue found: 'data' is not defined.

OzzieIsaacs reviewed Jan 19, 2020

View reviewed changes

pthiben mentioned this pull request Apr 13, 2020

Add support for grid view (follow-up) #1306

Merged

OzzieIsaacs mentioned this pull request Apr 18, 2020

Improve read status visibility #1214

Closed

gpapin closed this May 26, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for grid view #986

Add support for grid view #986

gpapin commented Jul 29, 2019 •

edited

Loading

OzzieIsaacs commented Jul 29, 2019

gpapin commented Jul 29, 2019

gpapin commented Jul 29, 2019

gpapin commented Jul 29, 2019

gpapin commented Jul 29, 2019 •

edited

Loading

OzzieIsaacs commented Aug 4, 2019

OzzieIsaacs commented Aug 4, 2019

gpapin commented Aug 4, 2019

OzzieIsaacs commented Aug 5, 2019 •

edited

Loading

OzzieIsaacs commented Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

OzzieIsaacs Jan 19, 2020

gpapin commented Jan 19, 2020

OzzieIsaacs commented Jan 19, 2020

gpapin commented Jan 19, 2020

gpapin commented May 26, 2020

Add support for grid view #986

Add support for grid view #986

Conversation

gpapin commented Jul 29, 2019 • edited Loading

OzzieIsaacs commented Jul 29, 2019

gpapin commented Jul 29, 2019

gpapin commented Jul 29, 2019

gpapin commented Jul 29, 2019

gpapin commented Jul 29, 2019 • edited Loading

OzzieIsaacs commented Aug 4, 2019

OzzieIsaacs commented Aug 4, 2019

gpapin commented Aug 4, 2019

OzzieIsaacs commented Aug 5, 2019 • edited Loading

OzzieIsaacs commented Jan 19, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gpapin commented Jan 19, 2020

OzzieIsaacs commented Jan 19, 2020

gpapin commented Jan 19, 2020

gpapin commented May 26, 2020

gpapin commented Jul 29, 2019 •

edited

Loading

gpapin commented Jul 29, 2019 •

edited

Loading

OzzieIsaacs commented Aug 5, 2019 •

edited

Loading