Clean up the "Tabs" component in Bartik [#2542582]

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

Problem/Motivation

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

Proposed resolution

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

CSS formatting tasks to do

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 architecture tasks to do

Replace references of HTML elements, for eg H2 with useful classes - see guidelines here.
Try and replace the combined elements and class rules. For eg. replace "div.tabs" with just ".tabs".

CSS cleanup tasks to do

Remove any CSS that repeats styles from elsewhere in Bartik and therefore not needed in this file.
Check all of the selector rules are correct and are currently in use on the frontend of Bartik.

Remaining tasks

Write a patch containing as much as the above as possible.
Post a patch with screenshots.
Visual review of a patch - check tabs 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

Comment	File	Size	Author
#6	clean_up_the_tabs-2542582-6.patch	426 bytes	Manjit.Singh
#5	Screen Shot 2015-08-01 at 18.40.23.png	81.8 KB	emma.maria
#1	clean_up_the_tabs-2542582-1.patch	777 bytes	pmcclory

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

pmcclory CreditAttribution: pmcclory at Curve Agency commented 31 July 2015 at 16:23

File	Size
clean_up_the_tabs-2542582-1.patch	777 bytes

My first patch ever, not just core :)
Completed the 'CSS formatting task' item 1.

Comment #2

emma.maria

she/her

CreditAttribution: emma.maria at Amazee Labs commented 31 July 2015 at 21:53

Status:

Active

» Needs review

Comment #3

Manjit.Singh

Hindi

Chandigarh

CreditAttribution: Manjit.Singh at Srijan | A Material+ Company commented 1 August 2015 at 15:04

+++ b/core/themes/bartik/css/components/tabs.css
@@ -1,65 +1,69 @@
.tabs ul.primary li a {
  float: left; /* not LTR */
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

@emma.maria As there is no [RTL] css for tabs ul.primary li a So Is there any need to write /* not LTR */ inline comment (line no. 66).

Comment #4

emma.maria

she/her

CreditAttribution: emma.maria at Amazee Labs commented 1 August 2015 at 16:17

@Manjit.Singh we do not have this method in the Drupal standards so we can't introduce */ not LTR /*. I will take a look at the code as I review it to check what is going on with tabs ul.primary li a.

Comment #5

emma.maria

she/her

CreditAttribution: emma.maria at Amazee Labs commented 1 August 2015 at 16:51

Issue summary:

View changes

File	Size
Screen Shot 2015-08-01 at 18.40.23.png	81.8 KB

+++ b/core/themes/bartik/css/components/tabs.css
@@ -1,4 +1,7 @@
-/* --------------- System Tabs  --------------- */
+/**
+ * @file
+ * Toolbar module overrides for Bartik.
+ */

These styles are for the tabs on pages. Like the View, Edit tabs. See screenshot.

Can this comment be re-worded to "Styles for tabs in Bartik." please.

I am going to go through and check if any CSS styles can be removed also.

Comment #6

Manjit.Singh

Hindi

Chandigarh

CreditAttribution: Manjit.Singh at Srijan | A Material+ Company commented 1 August 2015 at 19:03

File	Size
clean_up_the_tabs-2542582-6.patch	426 bytes

@emma.maria File comment updated :) Also please do the needful for #3

Comment #7

drupal a11y CreditAttribution: drupal a11y as a volunteer commented 2 August 2015 at 09:54

Is this an error in the css file or is "1.9" really wanted?

.tabs ul.primary li a {
  color: #000;
  background-color: #ededed;
  border-color: #bbb;
  border-style: solid solid none solid;
  border-width: 1px;
  height: 1.8em;
  line-height: 1.9; -> is "em" missing ?

Comment #8

emma.maria

she/her

CreditAttribution: emma.maria at Amazee Labs commented 2 August 2015 at 10:12

Status:

Needs review

» Postponed

Bartik's markup is getting a major overhaul in this issue #1999182: Dream mark up for tabs so we should not duplicate that work in this issue.

Tabs are also becoming a block within this issue #507488: Convert page elements (local tasks, actions) into blocks.

Therefore we should stick to just adding the file comment for now and also postponing this issue until the above two are committed.

Comment #9

Manjit.Singh

Hindi

Chandigarh

CreditAttribution: Manjit.Singh at Srijan | A Material+ Company commented 4 August 2015 at 09:57

Re: #7 @mori we can also set the line-height without em :) so this is not an issue.

Comment #10

mgifford

he/him

English

CreditAttribution: mgifford at OpenConcept Consulting Inc. commented 22 September 2015 at 17:02

Status:	Postponed	» Needs review
Related issues:		+#507488: Convert page elements (local tasks, actions) into blocks

#507488: Convert page elements (local tasks, actions) into blocks is in now.

Comment #11

22 September 2015 at 17:02

mgifford queued 6: clean_up_the_tabs-2542582-6.patch for re-testing.

Comment #12

emma.maria

she/her

CreditAttribution: emma.maria at Amazee Labs commented 23 September 2015 at 11:45

Status:

Needs review

» Postponed

This issue that cleans up the markup in Bartik is still open #1999182: Dream mark up for tabs. We need to also wait for this to be committed as per the instructions in #8. If you want to clean up the markup please go to that issue :) ^^

Comment #13

emma.maria

she/her

CreditAttribution: emma.maria commented 30 January 2016 at 17:14

Version:

8.0.x-dev

» 8.1.x-dev

Still waiting on #1999182: Dream mark up for tabs to be committed, please go there and help.

Comment #14

30 January 2016 at 17:14

Version:

8.1.x-dev

» 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Comment #15

30 January 2016 at 17:14

Version:

8.2.x-dev

» 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Comment #16

30 January 2016 at 17:14

Version:

8.3.x-dev

» 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Comment #17

30 January 2016 at 17:14

Version:

8.4.x-dev

» 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Comment #18

30 January 2016 at 17:14

Version:

8.5.x-dev

» 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Comment #19

30 January 2016 at 17:14

Version:

8.6.x-dev

» 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Comment #20

30 January 2016 at 17:14

Version:

8.7.x-dev

» 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Comment #21

30 January 2016 at 17:14

Version:

8.8.x-dev

» 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Comment #22

30 January 2016 at 17:14

Version:

8.9.x-dev

» 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Comment #23

30 January 2016 at 17:14

Version:

9.1.x-dev

» 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Comment #24

30 January 2016 at 17:14

Version:

9.2.x-dev

» 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Comment #25

30 January 2016 at 17:14

Version:

9.3.x-dev

» 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Comment #26

30 January 2016 at 17:14

Version:

9.4.x-dev

» 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.