[Layout]Rework Partials, Index and Single Page Layout #5
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Move the "container" class upwards to the top. It should contain not just the {{.Content}} partial but also the {{partial .Params.id}} too.
- Footer Partial is special but not such special to live outside of the global layout. Now it belongs inside the "container" class.
- Script Partial can live wherever it wants so keep it at the bottom next to the close Body tag.
- Remove Div id="all".
- Let the Header live outside the Container because it just implements the Navigation menu through "partial nav.html" and this special Partial is out of the normal flow of the page.
- Partials should start with a div class="row",unless really rare cases, to not break the Bootstrap structure. - Remove the "container" otherwise we would end with this container nested inside the main container in Single.html, which is not forbidden but not a good practice. - This simplifies the layout and make it much more maneagable
- Any partial should start with "row". - Remove the Container to avoid multiple containers nested. - Create two rows inside the Footer tag, one for blog entries and one for copyright. Useful when needed to style them.
Just formatting changes only tab vs spaces
Remove the id=All and add a responsive class="Container-fluid" for the Home Page.
- Partials should start with a "row" class. - Add the row class to the Section. - Remove the inner Container. - Rework the Carousel (simplifying it) to keep the Bootstrap flow of Col-Row-Col - Remove the dark-mask div, which is basically creating a background-color (KISS). - The only bit missing (since there is no ros-design.css file yet, and it is unpolite to touch the Theme css one) is to add the background-color to home-carousel class. For now the background color is white then.
This reverts commit 3804f30.
DarkMask is intended to be an overlay, so lets keep it here just in case it is needed.
- Sections should start with "Row" - Remove inner Container and use Offsetting classes. - Keep the Dark-Mask where it is since it is moved out of normal flow due its positioning:absolute.
- Partials should start with a row class - Remove inner container - Create two Rows. First one being Title and Description. Second one, the columned posts. That way the layout is more responsive.
Member
|
@vicmarcal @learn-more
Please address these things in a further PR. |
learn-more
added
deploy-pr
3 tasks
learn-more
added
deploy-pr
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Reworked Home page and Single.html to make them more responsive following Bootstrap design rules.
That should fix ONLINE-830 ( https://jira.reactos.org/browse/ONLINE-830 )
Rework Partials that are used by Single.html (Layout for Pages) and Index.html to avoid nested containers, and force them to start with a row class.
Clean code from Carousel to make it responsive.
More info in the commits...