-
Notifications
You must be signed in to change notification settings - Fork 139
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Testing: Page building improvements #2148
Comments
I haven't tested it yet, but - with the new CSS grid elements, has anyone checked to see if the CSS Editor module can point to them all? |
Doing some settings comparisons on grid (3 columns): http://dev.omeka.org/amayer/amayer-s/omeka-s/s/my-omeka-s-site/page/my-grid-page
|
I don't know where these styles went, but they're back in now.
We currently center blocks with the selector
CSS float operates differently from
The left margin is because the block is floated right. The column and row gaps are specific to grid layout. It might be that the float styles don't really make sense within a grid context...
Fixed.
Maybe more specifically if the page title block has a background?
The gap settings are being set as inline styles on the grid container, and affect first level children of that container. It's difficult for me to imagine how to implement taking the user-submitted gap value and applying it to everywhere we're setting
This is a result of block groups distancing their children from the grid container that has the inline style for the gaps. Much easier to fix though. |
Yeah, I agree with this. Simplifying the options in the admin side sounds good to me.
Also agreed! |
The problem above was fixed by a commit by @zerocrates yesterday. Can we set the margin-top on On a normal flow page the text lines up next to a floating object like this: But on a grid page it has all this extra whitespace: I also want a margin-bottom that doesn't apply to the last
ETA: |
In testing the migration of the blocks from 4.0.4 to 4.1, with a media embed block that was set to align center, in the migrated instance the alignment is copied both to the Block Alignment and the Text Alignment. In contrast, a media embed block that was floated right only transfered the alignment to the Block Alignment, and the Text Alignment remains Default. The block that was Item Showcase successfully converts to Media Embed with alignment for the block and the text set to default. |
* Remove "float" from block alignment settings. * Make floated styles specific to normal flow.
@allanaaa Your margin fixes should be in now, ready for a look. |
The hope was that it covered all mentioned, but mainly excess top and bottom margins for children of html blocks, inconsistent block margins, and floated element margins appearing in grid.
I've made the selectors more specific, so those alignment-specific margins should be taking now.
These grid styles are specific to media embed's horizontal layout. They're our default styles for presenting a sort of gallery view of multiple item attachments. |
Ah. It's having unintended consequences on the width of the floating block. It's supposed to be as small as its content, not always at the max-width of 33%. Specifically the line |
On the question about wrapping divs inside blocks like the preview, I decided for the moment to keep them. You're right that for many/most they're not really needed anymore now that the page is just wrapping a div around each block, but I chose to keep the old ones just to try to avoid problems where existing themes might be targeting the classes used with those old wrappers. |
Paragraphs and headers still have margin-tops that are having inconsistent effects; sometimes collapsing with others, sometimes not. I would just add
and be done with it. |
Would you consider adding positions and span settings to block groups? |
A CSS answer to your problem of backgrounds undesirably extending that doesn't require an inner div: set |
It's possible pending further user feedback from this initial feature release. The amount of development it would take is outside the scope of the 4.1 release. |
Is this something simple enough that we could make it a toggle somewhere in the admin side? The actual size of the grid element doesn't matter, since nothing else can go in that space anyways, so it's really just a visual setting when you're using backgrounds. |
It would probably make for a good layout setting. I'll make a feature issue for it so we can plan to include it in maybe 4.2. |
I think we've covered everything in this issue and released the feature in 4.1. If there are any remaining problems to address or new related issues, we should separate them out into their own issue for readability. |
We’ve added quite a few new features to the page building interface. With these features, we hope to give users more control over page building without the need to modify the HTML or CSS of their themes.
Layout (page and block)
Above the blocks, you'll notice the new page layout controls. The controls include a "Layout" select, where users can select between two layouts:
When the user selects "Grid" the page layout controls will include a "Columns" select, and each block will include a "Position" select and a "Span" select in their headers.
We've added a "Restore" button to the page layout controls that restores the saved state of the layout. Setting a grid can be complicated, so users will likely want to restore the previous state without having to reload the page and possibly lose other settings in the process.
To help users visualize the layout without having to save the form and view the public page, we've added "Preview layout" buttons that open a sidebar containing a simplified, visual representation of the layout. The page layout controls and each block header have a preview button. When a user clicks a preview button on a block, the preview sidebar opens with that block highlighted.
Layout configuration (page and block)
To provide even more options for page builders, we've added "Configure layout" buttons that open a sidebar containing a configuration form. These settings affect the style of the layout in multiple ways (see below for the list of configuration settings). The page layout controls and each block header have a configure button. The "Page layout configuration" form includes the following settings:
The "Block layout configuration" form includes the following settings:
Block groups
In addition, we've added a new, special "Block group" block. Block groups are one way to ensure that related blocks with different content types can sit with each other on the page. Within a robustly populated page builder interface, block groups allow for easier reordering of related content.
Users can add a block group using the "Add block group" button in the "Add a new block" sidebar header. Once the block group is on the page, users may drag-and-drop blocks into the group. A block group cannot contain other block groups. Users may also drag-and-drop groups up and down the page. Collapsing a block group will collapse all child blocks.
Similar to standard blocks, users may configure the block group layout. The configuration form contains a subset of the normal form, including class, padding, and background. Users can provide a theme-specific class that styles all the blocks within the block group the same way. They can also provide a background image for a group of related blocks.
Migration
Note that we’ve migrated a few block settings to block layout settings. Blocks that had a "Class" setting (HTML) should now have a corresponding "Class" block layout setting. Blocks that had an "Alignment" setting (Asset, Media) should now have a corresponding "Block alignment" block layout setting, with ones set to a "center" alignment converted to a center "Text alignment" block layout setting. Please make sure to test this migration by setting a class to the HTML block, and an alignment to Asset or Media blocks prior to updating.
The text was updated successfully, but these errors were encountered: