D8CORE-6953: fixes to local task tabs

[jenbreese]

READY FOR REVIEW

Summary

• Fixes to the blue tab buttons for edits

Review By (Date)

• 10/12

Criticality

• Normal

Urgency

• Normal

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Rebuild Cache and import config drush cr ; drush ci
3. Navigate to a node page.
4. Verify the editing tabs look correct again

Site Configuration Sync

• Is there a config:export in this PR that changes the config sync directory? NO

Front End Validation

• Design is approved by @ user?
• HTML validation: Is the markup using the appropriate semantic tags and passes validation? Or, QA request ticket created?
• Cross-browser testing: Has been performed? Or, QA request ticket created?
• Automated accessibility: Scans performed? Or, QA request ticket created?
• Manual accessibility: Manually tested? Or, QA request ticket created?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

- D8CORE-6953

Resources

• AMP Tool
• Accessibility Manual Test Script
• HTML Validator
• Browserstack and link to Browserstack Credentials

[jdwjdwjdw]

Looking good for the most part! Two things - Can you remove the underline from the a tags to match our current implementation, and address the funkiness that I'm seeing for smaller screen sizes?

[jenbreese]

@jdwjdwjdw Ok! All fixed up. I left the buttons on one line rather than wrapping them. Let me know what you think.

[jdwjdwjdw]

Looks good, thanks @jenbreese!

[pookmish]

@jenbreese please review this when on a mobile device.

[jenbreese]

@pookmish Ok I will look again. I thought it was fixed in my fix up pr that @jdwjdwjdw said it was good. What device are you on?

[pookmish]

That screenshot was just taking using firefox on my desktop browser. Chrome looks fine though.

[jenbreese]

@pookmish @jdwjdwjdw What do you think of doing this at the xsmall and small breakpoints?

[pookmish]

I think that would be fine. They don't have to be pretty, just functional. Can you make them always visible too without the hover? I absolutely hate the hover effect on all screen sizes personally.

[jenbreese]

Yes I hate the hover too. Do we want them visible at all times at all screen sizes?

[pookmish]

That would be my preference. Can you comment out that hover part but leave it there in case we get any push back. I doubt we will.

[jenbreese]

I made a new PR for the requested changes above. #722
I did move the Delete button to the end when the buttons are all in the block.