Style & layout improvements #126

robyngit · 2021-10-12T20:11:25Z

Remove repeated layout code (make DRY)

In order to facilitate changing the CSS for these layouts

Combine all of the similar list.html layouts into one
Combine all of the cards partial templates into one - use this template in the homepage
Combine the data-banner and sub-goals partials into one cardsTitle partial
Fix cards template to use proper BEM conventions (no grandchild elements; elements with modifier classes should also have the main class to avoid repeating style rules in the scss)
Change some HTML tags to the semantic version in layouts
Consolidate button shortcodes. Delete buttons code, use two button codes instead.

Improvements to Index (Home Page)

Make text on homepage configurable from markdown
Make sections and section headers, boxes, and text work on both small and large screens
Use semantic HTML tags + BEM conventions in layout
Remove unused CSS styles
General style improvements (make more similar to original homepage)

Make the default 3-column layout work on mobile

Move left, right, center col styles to the layout style sheet since they use the same variables and styles are dependent on one another
Fix the full-page container style used in the 3-col layout. Add a full-width container as well.
Move the navigation that is normally on the right-hand side; as well as the logo + "Overview" text, above the main content on mobile screens

Make the cards template work on mobile

Cards will switch between a 3 and 2 col layout when screen re-sizes, and each card's width is somewhat flexible

Misc. responsive enhancements

Make header text fit on mobile screens
Fix padding issue with scores globe
Align breadcrumb with rest of content

Improve general styles; clean up CSS files

Remove unused CSS style rules and files
Fix issue where the controls for the globe viz were overlapping the nav on mobile
Style the right-side nav
Tweak some misc styles
Enable emojis
Add styles to all the common markdown tags (mostly for content rendered from markdown, which has no classes)
Make the csvTable styles the general table style
Consolidate similar buttons styles used throughout the website into one single 'button' class

- Move left, right, center col styles to the layout style sheet since they use the same variables and styles are dependent on one another - Fix the full-page container style used in the 3-col layout. Add a full-width container as well. - Make the 3-col layout work on smaller screens - Remove unused CSS styles - Fix issue where the controls for the globe viz were overlapping the nav on mobile - Style the right-side nav - Tweak some misc styles Relates to #103, #17, #28, #67, #93

- Combine all of the list.html layouts into one where possible (make DRY) - Combine all of the cards partial templates into one - Combine the data-banner and sub-goals partials into one cardsTitle partial - Fix cards template to use proper BEM conventions - Make the cards template work on all screen sizes

- Use the term 'boxes' to avoid confusion and class mix-ups with the cards partial - Use BEM conventions. Make 'white' the default class, 'blue' the modifier class. Relates to #28

Relates to #17

- Make sections and section headers responsive on index page - General style improvements to homepage (make more similar to original homepage) - Use semantic HTML tags + BEM conventions in index layout - Remove unused CSS styles - Rename cardsTitle layout to cards-title to be consistent with other filenames - Configure canonical urls (might help with images in demo site?) Relates to #28, #17, #103

Try to fix the issue with images not appearing on demo site

Temporarily - to demo style changes made in PR #126

To try and trigger the GH workflow

Temporarily - to demo style changes made in PR #126

- Links, images, and fonts not being referenced correctly on deployed demo

- Try and fix issue with fonts not showing up in the /OHI-science/ demo

- Enable emojis - Add styles to all the common markdown tags (mostly for content rendered from markdown, which has no classes) - Change some HTML tags to the semantic version in layouts - Make the csvTable styles the general table styles - Remove some CSS styles that were not needed Relates to #67, #28, #103

Melsteroni · 2021-10-14T00:12:53Z

@bshalpern (aesthetic changes that look different from https://ohi-science.org/OHI-website vs. http://probable-cattle.nceas.ucsb.edu/)

The changes all seem good to me. The only issue I noticed was that the left margin on the "Scores by Country" tab seem to small on my browser/screen. This is what I see:

bshalpern · 2021-10-14T00:17:06Z

issue: when on a country's scores page, in the menu upper left, if you click on Regions (in the Home -> Regions -> Country name menu) it takes you to a blank page

On 10/13/21 5:13 PM, Melsteroni wrote: @bshalpern <https://github.com/bshalpern> (aesthetic changes that look different from https://ohi-science.org/OHI-website <https://ohi-science.org/OHI-website> vs. http://probable-cattle.nceas.ucsb.edu/ <http://probable-cattle.nceas.ucsb.edu/>) The changes all seem good to me. The only issue I noticed was that the left margin on the "Scores by Country" tab seem to small on my browser/screen. This is what I see: image <https://user-images.githubusercontent.com/5685517/137229590-25df585d-f15b-4fa3-ad32-5249e0f5e961.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#126 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABXMU6Z4DYP4E7Z4UKW3LLTUGYOA7ANCNFSM5F3O3LJQ>. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

-- ********************************* Benjamin S. Halpern Director, Nat'l. Center for Ecol. Anal. & Synth. (NCEAS) University of California 735 State St., Suite 300, Santa Barbara, CA 93101 (ph) 805.893.7527 (web) http://www.nceas.ucsb.edu Professor, Bren School of Environmental Science and Management UCSB, Santa Barbara, CA 93106 *********************************

- Make header text fit on mobile screens - Align breadcrumb with rest of navigation - Consolidate similar buttons styles used throughout the website into one single 'button' class - Consolidate button shortcodess. Delete buttons code, use two button codes instead. Relates to #117, #28, #17, #103

- Make sure that legend doesn't extend beyond edge of screen Relates to #17

- Instead, the cards template will look for a cards_text property in the page. - Add page_description to the two data sub-pages. Relates to #125

- The icons were not being displayed on the demo page

ThomasThelen

These are awesome changes and the site is going to totally benefit from these!

robyngit linked an issue Oct 13, 2021 that may be closed by this pull request

Use the default list and single templates #30

Closed

robyngit added 5 commits October 13, 2021 08:34

Make text on homepage configurable from markdown

9098b38

Rename index__cards -> boxes; Use BEM conventions

914a378

- Use the term 'boxes' to avoid confusion and class mix-ups with the cards partial - Use BEM conventions. Make 'white' the default class, 'blue' the modifier class. Relates to #28

Make homepage boxes responsive; improve styling

6161037

Relates to #17

Add baseUrl to SCSS image references

29fd88d

Try to fix the issue with images not appearing on demo site

robyngit added a commit that referenced this pull request Oct 13, 2021

Switch GH pages demo to the css_refactor branch

63782d7

Temporarily - to demo style changes made in PR #126

robyngit added 7 commits October 13, 2021 12:18

Update README

5738270

To try and trigger the GH workflow

Switch GH pages demo to the css_refactor branch

451f0fe

Temporarily - to demo style changes made in PR #126

Reset canonifyURLs to false in config

7d536a3

- Links, images, and fonts not being referenced correctly on deployed demo

Fix font paths

1d17eb2

- Try and fix issue with fonts not showing up in the /OHI-science/ demo

Fix issue with header-gradient from recent commit

f13f936

Add metadata to head; load all fonts.

1999c36

robyngit linked an issue Oct 14, 2021 that may be closed by this pull request

Fix buttons shortcode #117

Closed

robyngit mentioned this pull request Oct 14, 2021

Top Nav Display #120

Closed

robyngit added 2 commits October 13, 2021 21:06

Fix padding on scores globe

886c3bf

- Make sure that legend doesn't extend beyond edge of screen Relates to #17

Don't automatically use page description in cards

cad9110

- Instead, the cards template will look for a cards_text property in the page. - Add page_description to the two data sub-pages. Relates to #125

robyngit mentioned this pull request Oct 14, 2021

Fix buttons shortcode #117

Closed

This was referenced Oct 14, 2021

Scale/Resize site dimensions #103

Closed

Make the website responsive #17

Closed

Allow more varied layout in markdown #67

Open

robyngit removed a link to an issue Oct 14, 2021

Allow more varied layout in markdown #67

Open

3 tasks

This was referenced Oct 14, 2021

Fix full-width areas used within markdown content #93

Closed

Use the default list and single templates #30

Closed

Tidy-up CSS classes: remove unused classes & use a naming convention #28

Closed

Use the colour variables defined in _variables.scss #29

Closed

robyngit removed a link to an issue Oct 14, 2021

Use the colour variables defined in _variables.scss #29

Closed

robyngit requested a review from ThomasThelen October 14, 2021 01:35

robyngit marked this pull request as ready for review October 14, 2021 01:35

Use absolute URL for button icons

e440b1e

- The icons were not being displayed on the demo page

ThomasThelen approved these changes Oct 14, 2021

View reviewed changes

ThomasThelen merged commit de23d3f into main Oct 14, 2021

ThomasThelen deleted the css_refactor branch October 14, 2021 17:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Style & layout improvements #126

Style & layout improvements #126

robyngit commented Oct 12, 2021 •

edited

Loading

Melsteroni commented Oct 14, 2021

bshalpern commented Oct 14, 2021 via email

ThomasThelen left a comment

Style & layout improvements #126

Style & layout improvements #126

Conversation

robyngit commented Oct 12, 2021 • edited Loading

Remove repeated layout code (make DRY)

Improvements to Index (Home Page)

Make the default 3-column layout work on mobile

Make the cards template work on mobile

Misc. responsive enhancements

Improve general styles; clean up CSS files

Melsteroni commented Oct 14, 2021

bshalpern commented Oct 14, 2021 via email

ThomasThelen left a comment

Choose a reason for hiding this comment

robyngit commented Oct 12, 2021 •

edited

Loading