[Free Template] Top Shelf Elements

Top Shelf Templates just released a new template called Top Shelf Elements :point_left: Get it here

This is a Free Template made to help speed up development for all Bubblers and to help everyone create higher quality applications. The template will feature many common elements and designs used in Web Applications that you can simply copy and paste into your own applications.

Currently there is only one element, a mobile responsive Drag and Drop list that re-orders the items in the list. New Elements will occasionally be added, with detailed instructions on how to put the elements into your own applications.

Below is a GIF of the first Element, enjoy!

Or, try it out by clicking HERE

drag-drop-gif


Geoff from Top Shelf Templates

18 Likes

UPDATE

  • Added an Index page
  • Added transparency to a Dragged List Item to see where you are dropping it easier
2 Likes

This is a great idea! Thanks for your contributions to the community!

JB

Hi @gf_wolfer!
Thanks a lot for sharing this with the community and for this overall initiative! :raised_hands:

A note on the drag-and-drop module:
I tested with 3 items: at some point the reordering wonā€™t happen anymore.
Indeed, say your Order Numbers are 1-2-3, at each reordering they get averaged and at some point they will all be 0.33, disabling thereby any further possibility of reordering.
So this method will be just fine for some little reordering but shouldnā€™t work with intensive reordering on a small number of items.
(No intention to disminish the great work and gift! :ok_hand: Just pointing this out for this given use case. If I find a way, I will post it)

1 Like

Thanks for pointing out a bug :+1:

In the case of dropping a Widget on the First and Last spot in the list (more common drop areas when you have a smaller list), there is a value missing which is needed to find the Average calculation. This error comes up for the Last spot on the list (the First spot on the list should constantly use Item #1ā€™s Order Number and Zero - which is an infinitely small number)

Will put a fix in place soon

UPDATE

Pushed a fix for the bug raised by @LucM, where a List was at itā€™s maximum number of Widgets and a User drops a Draggable Widget on the Last spot in the List

There are still edge cases that can pop up depending how you store Order Numbers, and depending on how you are populating the List (be careful if using the various :itemuntil filter)

New Element

A 5 column mobile responsive Table

Check it out here: Responsive Table

3 Likes

New Element

Accordion Lists - Ideal for FAQs, Product or Service descriptions and much more

Accordion 1 allows for Multiple Items to be expanded at once

Accordion 2 only allows 1 item to be expanded at a time - this uses Custom States and so it is also a good learning tool for people wanting to learn more about using Custom States

Check it out here: https://topshelf-elements.bubbleapps.io/accordion

3 Likes

This is fantastic, thanks so much. Itā€™s great to be able to copy and paste elements like this, saves soooo much time with formatting!

1 Like

I can only see the drag and drop table though. I was hoping to use the accordion.

You have to create a new app using the template, the app doesnā€™t automatically update unfortunately :confused:

I just made the App ā€˜Public Read Onlyā€™ :tada:

So for any future updates you can simply go to this link to copy the elements:

2 Likes

That feeling when a problem came up just today (drag and drop ordering) and you see a forum solution for it. Bubble and its community are amazing. :+1:

2 Likes

Hi @gf_wolfer thank you very much for the template.

Iā€™ve successfully replicate your FAQ accordion (one item at a time) but there is a little error right there: the answer (ā€œGrp Collapsed Info 2ā€ in this case) it does not load properly; only a small part of the text is loaded.

You know why is happening this, because I tried many times and without succes?

@gf_wolfer Iā€™ve discovered the issue.

The option ā€œAnimate the collapse operationā€ it was causing the problem.

I donĀ“t know if this is a Bug for Bubble but is annoying for the UX.

I could not recreate the Text being cut off in the Top Shelf Elements app, it seems to be stretching to the correct height of the Text field.

Do you have a screenshot or GIF of it doing this?

Is the app you copied this functionality into on the most recent Bubble version?
(there was a Text Element bug fix in one of the versions)

Hi, @gf_wolfer Iā€™ve made a Gif so you can see it clearly.

When i recreate the Accordion, Iā€™ve done it in my app without copying (and paste) your elements.

%E2%80%9CAnimate%20the%20collapse%20operation%E2%80%9D%20BUG

New Element

Responsive Calendar - use a custom designed Calendar that matches your app instead of the Full Calendar plugin for more flexibility in your app

:+1: Shout out to @codurly for the original code and Forum post on this

Check out the free element here, with instructions on how to simply copy it into your app: https://topshelf-elements.bubbleapps.io/calendar

TsT-calendar%20gif

_*Original forum post on creating a Custom Calendar: http://forum.bubble.io/t/how-to-create-a-custom-calendar-using-repeating-group/26640_

5 Likes

Hi @gf_wolfer: it seems that you havenā€™t deployed the calendar to the app (yet) - I just installed the template and the calendar is missing (both as a page and in the navigation dropdown)ā€¦

EDIT: @gf_wolfer: check the just-installed app with the template at: https://nocalendar.bubbleapps.io/

I think this is because it has to go to Bubble for a review before it can be republished with the updates, should be ready soon. If not I believe the Read Only link further up should work.