Santa Claus wishing list

I know it’s a pretty long list and Christmas is not for tomorrow, but I tried to put the list of things I would love to see for the next Blocs version.
As I’m not a developper I can imagine they’re not all so easy to put in place, but I thought it could be useful to have an idea of what a guy who knows nothing about coding would like to have :slight_smile:

So, here is the list for Santa Claus:

  • Toggleable / Dynamic Tabs (with text and/or icons)
    Like in this website: Bootstrap Tabs and Pills
    (I manage to copy the code and put it in the HTML widget, but I noticed it’s influencing the menu on the top).

  • Navbar that we could stick somewhere else than only the top.

  • Easy way to put the hamburger on the left (with the side bar menu being on the same side)

  • Music player

  • Mouse over interaction

  • Choice of shape for the carousel indicators (thin bars are stylish for example)

  • Filter Tables
    Like there: Bootstrap Filters

  • easy way (or clear) to integrate CSS and JS codes, as I see a bunch of nice things that I would love to use, but it needs to use HTML, CSS and JS at the same time.

  • possibility to integrate other icons in the library.

  • drop up buttons (useful only if we can have a navbar that we can stick at the bottom)

  • The Scrollspy
    Like here: Bootstrap Scrollspy

  • Bloc select left and right too

  • possibility to create a real parallax effect (the image behind is moving, but slower)

  • A date picker
    Like here: https://codepen.io/Yuping/pen/xqrjE

  • A time picker
    Like here: https://codepen.io/KyleDavidE/pen/LCweu

  • Pagination
    Like here: Pagination · Bootstrap
    Progress bars

  • Sliders

  • Toggle buttons

Thanks for this nice product that is Blocs and for constantly improving it.

1 Like

Santa wouldn’t be happy about an incomplete list. Your list is missing:

Responsive Tables (for tabular data)

:slight_smile:

Hi @JDW

Here are two responsive tables that work quite alright.
1 - Making odd/even two tables.
2 - Two Column Responsive Table with Icons

Downside is that you have to put in all text and info in the html widget… not as visual as you’d like it.

1 Like

Jakerlund, thank you for the links, but those videos are of rather simplistic table examples. Please visit the following page on my Japanese website and scroll down until you see the table:

This site was created by SoftPress Freeway and is NOT responsive. If I were to use Blocs to redesign the site, I would still need to display tabular data as complex as what you see in that table. How would one go about that in a responsible website built with Blocs?

@JDW I don’t see the issue. That Japanese page has tables which are not responsive, and mine is. if you use my simple tables you have responsive table.
They will be as complex as what you put in them.
You want table with content and that the tables are responsive?
Or am i missing something?

Do you have an example of a complex table (akin to the complexity of mine) which collapses nicely (responsively)?

I’m no pro at responsive tables.
But how would you expect it to behave other than colapsing?
And whats a complex table? and how would you expect it to behave?

You could of course make tables for different breakpoints and hide/reveal then as needed.

** sigh **

Folks, if anyone out there has a responsive (i.e., “collapsable”) table filled with tabular data and that is about as complex in terms of rows and columns as what you see in the table presented in the middle of the following web page, please post an example link so I can take a lot at how it collapses. That’s all I’m curious about.

But if you have a responsive table that consists of something simple like only a few rows and columns (i.e., not a table as big or complex as what is shown on my example web page above), then there is no need to show it to me, since I am only curious about how complex (i.e., big tables with many rows and columns) tables collapse when made responsive.

And again, before anyone reminds me yet again, yes I full well know my example web page above is NOT responsive. The entire reason I am here is to see how to convert all that content into a collapsable, responsive web page using Blocs. That’s it. My table may be complex, but what I seek is not.

Thanks.

I’ll have a look on your responsive table.
It should be great to use it on a restaurant menu. So, I’ll try it :slight_smile:

I don’t think a responsive table would be that easy to implement, particularly one containing many columns. The problem is having some degree of control over how the table content wraps without the whole thing looking a complete mess.

The only effective way I know of adding a wide, complex table is to make it horizontally scrollable if the viewing device screen becomes too small. This is usually done by creating the table in a div with a style attribute of overflow-x:auto; applied to the div. This will make the table horizontally scrollable on small touch screen devices.

The only other real alternative is to make different tables for each device variant. At least that way, you have full control over the way the content is laid out on each device.

1 Like

You can also use the table responsive class to have a table that responds to different screen widths. But, as I said in my previous post, it could get a bit messy if you have many columns. Copy the code below and paste it into an HTML bric in Blocs. Preview in a browser and then adjust the browser width to see it respond.

This example is ok because it only has 4 table columns - add too many columns an it could look real messy.

    <div class="table-responsive">
<table class="table">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>

You can get more information on making responsive tables, and see more examples HERE

EDIT: This may be a nice one for our resident Bric designers to have a go at. It would be nice to have a bric that gave us the option of creating a table, specifying the number of columns (up to a reasonable maximum), adding and styling columns headers, and adding rows with content - now there’s a challenge!!