Follow-up to #1342054: [META] Clean up templates and CSS

Problem/Motivation

  1. Bartik's template files need to be assessed and cleaned up of redundant markup, bad formatting and ID's.
  2. Bartik's CSS files need to follow Drupal's CSS Coding Standards.

Proposed resolution

For this issue we take "buttons.css" within Bartik in css/components/buttons.css plus any template file associated with the CSS and clean them up.

CSS formatting tasks to do

  1. The CSS file needs to have the correct File comment at the top of the page - see guidelines here and also reference other fixed Bartik CSS files for wording guidelines.

CSS file structure tasks

  1. Move any selectors that do not start with "buttons" to another appropriate CSS file that starts with the name of the first selector. For eg. "image-button..." styles should be moved to a image-button.css file

Remaining tasks

  • Write a patch containing as much as the above as possible.
  • Post a patch with screenshots.
  • Visual review of a patch - check the buttons visually with and without patch applied. Take screenshots.
  • Code review of a patch - check the code follows coding standards, suggest improvements if needed in a comment.
  • Produce a new patch with improvements if needed.

User interface changes

None

API changes

None

Data model changes

None

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Task because it is refactoring CSS and templates in Bartik
Issue priority Not critical because Bartik functions fine we are just doing cleanup tasks
Unfrozen changes Unfrozen because it only changes CSS and markup
Prioritized changes The main goal of this issue is usability of the Bartik's codebase
Disruption non-Disruptive as it is just changing markup and CSS
CommentFileSizeAuthor
#8 image_button.png198.27 KBg.oechsler
#4 after.png40.07 KBdanharper
#4 before.png39.44 KBdanharper
#3 Clean_up_the_buttons_component_in_Bartik-issue-2542604-2.diff2.47 KBdanharper

Comments

danharper’s picture

danharper commented
Assigned: Unassigned » danharper
danharper’s picture

danharper commented

Patch attached with screenshots, could find specific markup where the image button class was used so that needs testing.

danharper’s picture

danharper commented
StatusFileSize
new Clean_up_the_buttons_component_in_Bartik-issue-2542604-2.diff2.47 KB
danharper’s picture

danharper commented
StatusFileSize
new before.png39.44 KB
new after.png40.07 KB

danharper’s picture

danharper commented
Status: Active » Needs review
emma.maria’s picture

emma.maria
she/her
commented
Assigned: danharper » Unassigned

Unassigning so people can see that they can review it.

lewisnyman’s picture

lewisnyman
he/him
commented
Issue tags: +Needs manual testing

I ran these files through CSSlint and it returns happy. I also manually tested this patch and I'm happy with the CSS being applied. We just need someone to manually test image_buttons by adding them to a form.

g.oechsler’s picture

g.oechsler commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new image_button.png198.27 KB

I altered the login form appending an enabled and a disabled image button.
As you can see on the attached screenshot, the styles for disabled image buttons are applied.

I'd call this RTBC.

lewisnyman’s picture

lewisnyman
he/him
commented
Issue tags: -Novice, -Needs manual testing
alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Status: Reviewed & tested by the community » Fixed

Committed f8755a6 and pushed to 8.0.x. Thanks!

Thanks for adding the beta evaluation to the issue summary.

  • alexpott committed f8755a6 on 8.0.x 
    Issue #2542604 by danharper, g.oechsler: Clean up the "buttons"...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.