Test new block templates and special html classes

[kimisgold]

Default now comes with the following block templates and classes, designed to provide more page building options for attractive landing pages. Test that these block templates and classes display as intended and scale well at both mobile and desktop widths.

Asset block template: 3-column grid

This template is best used for displaying page links with asset images. It lays the assets out in a 3-column grid for widths greater than 800px, then scales down to 2 for widths greater than 400px, then a single column for anything smaller.

Media block template: 2-column cards

This presents media attachments as white cards with the media on the left and metadata on the right, each taking up half the card width. At widths above 800px, it shows as 2 columns. Each card should be a uniform height in its row. This template ignores the vertical vs horizontal layout setting. It looks best with an even number of attachments, each set with a short caption.

HTML class: "spotlight"

Available paired classes: "left-image", "light accent", "dark accent"

This is intended to pair a user-assigned decorative background image inline with text content. The user must set a background image using the block configuration. By default, the background image is aligned to the right. Users can pair this class with "left-image" to move the background image to the left. There are also options to set a single color accent background using "light accent" and "dark accent".

[allanaaa]

Assets card looks good and behaves as expected on desktop.

For the media card, it looks good, but should template use maybe grey out the relevant options ("Vertical" and "horizontal" in this case)? Or will that be too hard to implement?

I'm also not getting "half the card width" each - in this case the video thumbnail is taking up most and the text is pushing the box very tall.

That was thumbnail large. This is embed media large:

And embed media medium:

So nothing seems to be set to 50%.

[allanaaa]

How are you calling "light accent" and "dark accent" as classes? light-accent and dark-accent? Or is "accent" one class and "light" or "dark" are others?

[allanaaa]

So these are classes meant to be used on an HTML block? Or will they work on any kind of block?

[kimisgold]

How are you calling "light accent" and "dark accent" as classes? light-accent and dark-accent? Or is "accent" one class and "light" or "dark" are others?

Yes sorry, it should be "light-accent" and "dark-accent", used in tandem with the "spotlight" class. They should work with any block, but I've mainly tested it with HTML.

[kimisgold]

The 50% width for the asset cards should now be fixed.

[kimisgold]

@allanaaa Circling back to this: is there any remaining work to be done before closing this issue?

[allanaaa]

The media cards still have some vestigial CSS problems: the first row is set to vertical, and displays well (although there is a weird top-border effect happening?); the second is set to horizontal, and there is a padding difference so the cards aren't top-aligned:

You can see the top-border problem if you go here and resize the browser width back and forth: http://dev.omeka.org/amayer/amayer-s/omeka-s/s/my-omeka-s-site/page/asset-test

I suppose you can't grey out options in the page edit based on whether you select a template, but that CSS should be overriding the vertical/horizontal differences.

[allanaaa]

Also, if I've got padding set on the media block, this 30px top and bottom margin shouldn't be there. I'm not sure it ever needs to be there?

It's there on the horizontal-set media block too, but it's collapsing.

[kimisgold]

That margin has been removed, and I've provided an override that should fix that misalignment in the second block.

I'm unable to see your top-border issue, using Safari, Firefox, and Chrome on macOS. Not sure what's going on there.

I suppose you can't grey out options in the page edit based on whether you select a template, but that CSS should be overriding the vertical/horizontal differences.

Yeah, I'm not sure what kind of output one would want from vertical/horizontal layouts of this block. We also can't gray out those options with the template selected. I was going to lean on documentation to explain that.

[allanaaa]

Hrmm, that margin change seems to have fixed the 3rd issue too.

I can't see that border line on Windows, but it's still there on my mac. Let's ignore it until it pops up elsewhere.

I tried to break the media template by combining it with a grid layout, which was successful. I think you may have the "2 or 1 column" width measuring the whole page rather than the width of the page block?

I would think each page block would switch from 2 columns to 1 when they are are too narrow, but instead they stay 2-column forever and then the second page block in the row gets rearranged instead.

[kimisgold]

Gotcha, I've set some container queries to make this template scale for grid layout. It's ready for a look.

[allanaaa]

Great! That's working as expected.

From my understanding: "spotlight" just makes space for the image, whether that's "left-image" or the default right. "dark-accent" and "light-accent" can be used on any block that is the full width of the page, it just changes some colours. I'm just hoping those can be used without "spotlight" also being there? It could be more flexible if you can use it to highlight any block (or block group) without it being part of the background-image bit.

[kimisgold]

The light and dark accent classes can now be used with any block. I've pushed a few more styles to accommodate things like link and border combinations with the dark accent.

[allanaaa]

That's great! I think a lot of people will find the accents handy. The spotlight image is a great way to spruce up some of the plainer blocks like tables of contents and page lists. I also love that you could put a Map on one side and then a historical map image from your assets on the other half.

I just started testing on a normal flow page - with the media embed block (and the two-column class), the colours need work (because the media cards have their own colours that should be overriding this):

I'm not sure we need white text on the dark-accent to be honest. It's not that dark a background (although your a11y tests will know better than me). I prefer the black text to the white:

[allanaaa]

dark-accent should also have top and bottom padding just in case the contents are like the media embed block and have things nestled just inside. Or, I guess, we can recommend they add their own padding in the block settings?

[allanaaa]

Not surprisingly, in normal flow, a right-floated object is not playing nicely.

With spotlight + dark-accent on, it's totally obscured -

And with spotlight on and no accent -

I don't know if you have any thoughts about how to wrap these, or if this is a lost cause?

[allanaaa]

Also a problem setting the background colour on buttons with dark-accent:

Line 487 on:

.dark-accent button, .dark-accent a.button, .dark-accent .resource-list.preview+a, .dark-accent [type=submit] { background-color:#ddd; color:#787878; font-weight:normal }

[kimisgold]

Fixed:

• Corrected text color for cards when using .dark-accent.
• Corrected colors for item carousel buttons within .dark-accent block.
• Added top and bottom padding to blocks using .dark-accent or .light-accent.
• Fixed overflow for '.dark-accentand.light-accent` blocks with floated children.

• Ensure .dark-accent and .light-accent clear floated elements, taking up their own line.

  I'm not sure we need white text on the dark-accent to be honest. It's not that dark a background (although your a11y tests will know better than me). I prefer the black text to the white

Both pass accessibility tests, but admittedly I don't enjoy reading the black text on the dark accent background.

Let me know if I've missed anything.

[allanaaa]

I'm getting text overflow in anything that's both "spotlight" and "-accent" - text overflowing the "background" image from the spotlight. On a block that's just "spotlight" the text is staying where it should.

(The following is two blocks side-by-side - the first with a left-image and no -accent; the second with light-accent):

[allanaaa]

In normal flow, with a right-floated element (the vertical media embed), the spotlight (without -accent) underlays its background image along the full width of the page. But the spotlight left-image seems to occupy the space and wrap the text correctly:

The width calculations are the full page either way (it's not subtracting the float from the available space) but I guess text and "background" images behave differently. Any way to fix this?

[kimisgold]

With the floated element colliding into spotlight blocks, I think it's a simple oversight that the spotlight blocks aren't clearing floated elements. For the side by side spotlight blocks, the overflowing text was due to an accidentally overridden right padding rule. Both should be fixed now.