Posted by dawehner on January 30, 2013 at 11:46pm
19 followers
| Project: | Drupal core |
| Version: | 8.x-dev |
| Component: | views.module |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
| Issue tags: | #SprintWeekend, accessibility, needs accessibility review, VDC |
Issue Summary
Nowadays I think that providing a grid using tables doesn't seem to be really modern.
There are probably thousands of techniques out there to provide a grid using css, let's discuss which one to use,
and then implement that. This sounds like a really good task to get some new people involved with a strong theming background.
Comments
#1
Ive been looking to get involved on the theming side of Drupal 8 with twig, etc. If this is an opportunity to do so count me in. Any preferred method?
#2
display: inline-block;seems like a good candidate.#3
Wouldn't/couldn't this be covered by the twig guys in their template conversion?
#4
No, because they should be doing 1:1 conversions.
Also making the divs is the "easy" part compared to the CSS.
#5
Meh, I know nothing about this stuff. I did mention in the twig sandbox queue that we have no visibility of the work they are doing. I think we should have an issue per template maybe?
#6
Spoke with timplunkett in #dc and here is our suggested solution:
Reimplement as divs (either float: left or display: block-inline) and use entity #attached to include some dynamically generated css that sets the width of the items as the correct percentage (100%/5columns = 20%) of 100%. Otherwise I'll also assume that we want to carry over the "first-row", "last-row" and similar css classes that were attached. Unless of course #1649780: Remove first/last/odd/even classes in favor of CSS3 pseudo selectors lands. ;)
#7
Tables for layout is poor a11y.
#8
With proper use of caption & summary elements, tables can be fine for accessibility, but we still aren't there yet - #843708: Add option to set caption & remove summary in the html table (Accessibility) (help needed btw)
One advantage of moving to div's though for the grid is that it would be much easier to make it mobile friendly.
There's also the general rule to eliminate div's for formatting and that's essentially what we've got here.
#9
Heres something to start with.
I'm adding a variable called style which is the percentage width of the grid and outputting it as inline styling for the floated grid elements.
I think we could do this as defined css classes, but we would have to define each of those classes and limit column count to a fixed set of choices.
#10
Great work so far. I'm wondering whether we could somehow either generate the css file on the fly (ctools had some utilities for that) or just define a limited amount of grid-sizes as css, in order to avoid inline style.
#11
Good idea, this would do it:
<?php
$width = (100/$columns);
$css = ".views-grid-item{width:$width%;}";
$css_file = ctools_css_cache($css, FALSE);
drupal_add_css($css_file);
?>
is ctools_css_cache() available/refactored in 8.x ?
#12
hi,
i don't want to derail this issue, but i'm interested so here are some thoughts.
when using mobile-first, responsive design you start with just one column on mobile devices and add multiple columns for larger device widths.
this is easy to achieve using sass and for example the susy grid framework, here's an example where 2 & 3 block column layouts are established for narrow and wide device widths.
the previous comments suggest to generate css which sets the item widths. this sounds feasible, still if you want it in a responsive way you need some extra logic. i'm not aware of what road people want to go for in drupal core, but with breakpoint module in core, looking for integration options might be interesting. i guess the plan is to generate css based on breakpoint configurations.
also i'd like to reference this article
http://www.leveltendesign.com/blog/ian-whitcomb/using-views-responsive-g...
#13
I like the idea of modernizing the grid and pulling out ideas from this sandbox:
http://drupal.org/sandbox/iwhitcomb/1879012
I don't see that as derailing this issue, just making it kick ass.
That being said, there's a lot of work to make it happen in D8 by the feature freeze.
#14
That's about 48 hours away.
#15
Are we sure this is a feature and not just a simple markup cleanup?
Sure you could aruge this as a feature, but from my perspective this should be still possible.
#16
It's categorized as a task for a reason.
#17
One point which I would like to bring to notice is that grids in views are not responsive. So, even a defualt drupal 8 site displaying views grid will not be accessible on mobile.
Shall I add a task mentioning make views grid responsive?
#18
Well, wouldn't porting to divs sort of make it responsible automatically? Table views are responsible, because we ported them to be so.
#19
@dawehner: Sorry, I have no idea about that. :/
#20
We can get some help from this module http://drupal.org/project/views_responsive_grid . I will ask their maintainers.
#21
So where do we begin getting views_responsive_grid into D8?
#22
@iwhitcomb, first, port the module to work in D8. Then we can revamp it as part of views itself.
#23
Yeah we should really take a look at that module and find out what is the core of it. There seems to be quite a lot of settings,
so it feels like we don't want/need them all. If someone needs all these features, they can still use that module.
#24
I just posted a D8-port patch in the contrib module: #1932830: Views Responsive Grid in drupal 8 core.
views_responsive_grid itself does not provide any CSS to make the layout work. Im wondering if the core themes provide default styles for building grids. If so we could use views_responsive_grid as the base for a grid to repsonsiveGrid conversion.
#25
#26
Just adding my $0.02 worth: #1931466-5: Converting views grid table to bootstrap div grid.
I think there will always be use-cases for tables. Granted, its the original intent of a table that should be considered (data, and lots of it). Despite the fact that anti-table layouts have been around for years, I think that the latest responsive craze tends to want to completely eliminate them. We really shouldn't. Just to re-iterate what I posted in the issue mentioned above:
I agree that using a table for a layout is bad, so don't. Consider though: You need to display large amounts of actual data (1000's of rows, 30+ columns), complete with headers (maybe even a column header)... tables just make sense, why re-invent the wheel? Also, I seriously doubt you'd willingly look at that much data on a mobile device (responsive or otherwise) and would probably head over to a desktop anyway. I am really against replacing the grid. Instead, there should just be another option for layouts so they can be responsive.
Also, most modern browsers handle copy & paste for tables.... not so much with divs.
#27
Afterthought: I'd much rather have just one "Grid" style that has the option inside the style settings to toggle between using a div or table. In the spirit of crushing tables though, we could easily it to default to a div layout. At least then we have an available option and not another blog post on how to hack views.
#28
@Mark Carver
Thanks for your comment. One major point we should consider is that we have the possibility to do it right now. If you want to display a table, and not show something in a "tabled"-way views will always ship with a table style, which will, not only for semantic reasons, output a table. For the grid, which looks totally different, we should do it in a proper way, which from my standpoint seems to be a responsive grid. If contrib really wants to be able to switch between tables and divs, go for it (there is no technical problem with that), though for core this seems to be a really bad pattern.
#29
@dawehner: I'm not entirely sure if I completely understand what you're trying to say. Are you saying that you believe the grid style should, by default, display divs and if you want tables you'll have to use a contrib module?
If so, I'm rather disappointed to hear this.
This is exactly the point I was trying to make above: "I think that the latest responsive craze tends to want to completely eliminate them [tables]". This is a very poor way to rationalize the removal of tables. Responsive is simply just the current solution for displaying content on a mobile device. It does not, nor should it, negate the need for using tables where the use case is appropriate.
Am I missing something? How is it a bad pattern to provide the ability to toggle between two, actively, used style configurations? The grid style already has settings to toggle between horizontal and vertical data directions. By that statement, then those settings shouldn't be in core either... but they will be because it's already part of the grid plugin. So why can't we take a little time to make to make sure it's right and supply a setting to determine the type of grid: div or table (unless that's what you meant and if so, then I misunderstood... sorry lol).
Also, I agree with #23. The additional class settings from http://dgo.to/views_reponsive_grid should not be migrated. Those can be altered with preprocessing, no need to have them in core and make it even more difficult to configure.
#30
@mark Carver
If you want to display something as a grid, the markup should be divs. That's it.
, negate the need for using tables where the use case is appropriate.Okay just to be clear. If the user want's to display a table, views still outputs a table. Views tables are responsible due to drupal core. We really just talk about the grid style here.
#31
I apologize. I honestly simply forgot there is an actual table style, separate from the grid. I guess I tend to mesh them both in my head because they both use tables for output. I had to go look at the provided styles again. Ok, don't mind me then lol I'm ok with the grid being converted. Just wanted to make sure that tables weren't completely coming out (mainly due to the issues I mentioned).
#32
No problem. Please try out the responsive table feature in core, it's really great!
#33
Is there a way to do this in a simpler way? I am just worried that there really hasn't been much progress on this issue since it was introduced earlier in the year.