Blocs 3.2 Beta Build 3


#1

Blocs 3.2 Beta Build 3 is here, this release has a few more fixes (more to come) and some new controls for modals.

More fixes on the way…

Download Blocs 3.2 Beta build 3


Modals
You can now create modals (popups) here is how you make them.

  • Add a modal bric to the page, make sure it has an ID.

  • Select a button, link, icon or image and set its interaction to modal and then find the target modals ID in the second dropdown below the interaction one.

  • Enter preview mode and you will see the modal is hidden and will be shown when you click the trigger you assigned the modal interaction too.

Hiding Sidebars
You can now hide the entire Blocs UI apart from the menu bar at the top. There are various ways to do this,

  • The main menu view > Interface contains options for hide/show them (includes keyboard shortcuts).

  • Right clicking the sidebar tab area at the top of each sidebar gives you options to hide them.

  • Right clicking on the design canvas, under the interface option on the context menu.


#2

Do you ever sleep??


#3

Mardi Gras
I love it :wink:
mardigras


#4

I saw that too but it worked OK.


#5

This is probably Norm’s special kind of humour. :sweat_smile:


#6

Yeah I think the compiler broke that. It’s nothing to worry about.


#7

Everything’s fine. Works perfect. I just found it funny.


#8

please fix the issues with the clean url the trailing slash. The redirects hurt your SEO score


#9

That kind of clean url structure needs to be done at the server level.


#10

Now I know why you have not replied back to me. Nice work @Norm


#11

Sit tight I will reply. I move in circles :nerd_face:


#12

@Norm I’ve just uploaded a website to a new server using B3 and messages are coming through from the form, but I’m not seeing the success message. I’m pretty sure this was fine on the previous beta when I last tested it.


#13

I see that we can now select the Modal in the left sidebar, and then choose our preferred size in the “Width” popup menu in the right sidebar. Great! However, using “Fill Screen” and then Previewing in LG mode looks strange because there is a huge amount of white on either side of the modal.

Try this:

  1. New document in Build-3.
  2. Add any Bloc with a button.
  3. Add a Modal below that Bloc.
  4. Link your button in the topmost Bloc to Toggle your Modal.
  5. Select your Modal (just beneath “Column”) in the left sidebar.
  6. In the right sidebar, untick Header and untick Footer and set the Width popup to “Fill Screen”
  7. In the left sidebar, delete the content inside Modal Body.
  8. Add an Image as new content and make the image the big blue stock picture of the mountains.
  9. Preview in LG mode.
  10. Click your button to Toggle the Modal into view. If you have a 27" iMac like I do, make sure the Blocs window spans the width of your display, and then note the thick/wide white gaps in the left and right side of the blue mountain picture.

I guess the blue mountain picture doesn’t span the width of the display because that would put the top and button out of view. However, I think the white border surrounding the image should be the same thickness on all 4 sides. The left and right border should not be thicker than top and bottom. Which brings up another point…

How can we adjust the border thickness or eliminate that border completely?


#14

I’m a bit dim so just took your example Modal bloc and used it to make my JotForm pop up. Very easy, and so quick to replicate on other pages. Bed time now I think zzzzzzzzz


#15

@Highlander Without a screenshot example, I don’t follow what you mean.

In any case, here’s another screenshot example of what I am talking about, this time with the Modal’s “Width” popup set to Large, which when previewed in LG mode, isn’t very large at all, sadly…

The one positive thing about the “Large” setting is that the white border surrounding my image is perfectly the same on all 4 sides, as it should be! I want that same border goodness even when I choose “Width = Fill Screen”!


#16

I think I’m going to recode everything so that I drop the trailing / and make it compatible with Blocs output without the need to redirect. Whether the slash is there or not doesn’t really matter, as long as it’s consistent


#17

Sorry, I was just making a thread comment, not replying to your post.

Modal Bloc is a pop up, it’s not supposed to be full width - you should make a new page if you want that. You can can change the background of the Modal Bloc to whatever you like


#18

I disagree about Modals “not supposed to be full width” for two reasons:

  1. I want overlay content on the same page so as not the lose “context.” For example, I want to sometimes use Modals as a lightbox that contains a single large JPEG photo. It’s silly to create a new page just for that. Again, new pages make you lose context.
  2. Norm added “Fill Screen” with the Modal’s “Width” popup, which means it is now a feature of Modals (as it should be).

It’s just that it has border thickness quirks as my previous two posts have pointed out. So I am curious to hear Norm’s thoughts on resolving that.

–James W.

UPDATE: I just ran another test on my Modal with Width=Fill Screen but this time using a very high resolution photo that I know would fill my 27" display. This time the graphic fills my entire screen in Preview LG mode, and the white border is the same thickness on all 4 sides. Hurrah! So using a very hi-rez image seems to be a hack/work-around for the border thickness problem for now. But it’s still a problem that needs to be fixed. Again, consider the Blue Mountain photo. It’s big but not big enough to fill a 27" iMac’s display. That shouldn’t be a problem, but Blocs is putting those horridly thick white borders on either side in LG mode when you Preview, and my contention is that the white border MUST be the same thickness on all 4 sides, otherwise it looks stupid.


#19

First of all this is not a bug and nothing needs fixing.

So the modal being full width (full screen) has nothing to do with its content. If you place a small image in it, the modal still spans full width of the screen because that’s the setting.

If you place text in it, it will flow the full width of the modal. The only reason you get that odd look with images is because you are on a very large screen using a not so large image and images in bootstrap are designed to display to their max physical size and responsively scale down.

What you are describing is more of an adaptive modal scale size that scales the modal based on the maximum measurements of its content.

To me Full Width means exactly that, it’s going to display full width of the screen regardless of what is placed inside.

I’ll rename the option to full screen it’ll make it more clear.

Also don’t forget there is a light box setting in Blocs.


#20

This is what bootstrap sets as the max size for large. If you want larger I would suggest learning how to sub class and learn the relevant bootstrap classes.