Table drag handle icons should not have an underline in Bartik.

Fixed styles for draggable dots. Check styles for ltr & rtl on screens

Sorry, removed unnecessary lines

@Emma @rachel I was thinking that why we are aligned this dragholder line n all , I mean, Is there any requirement to do this in Bartik ? Can't we remove the underline from dragholders from all tables ?
I have checked the Seven theme there is no underline in Draggable element.

Here is the screenshot that what i want to say.

So please, let's make it correct. Do we need this border or what? Describe a task, what should we do?

Maybe needs design?

Bartik is supposed to be a front-end theme with support for adding/editing content (which is an overriding option in the Administration theme settings and also within user permissions).

If we need to override styles within the theme itself to make it serve more than the purpose it is supposed to have, it is too much.

I'm going to postpone this issue and a few other admin type ones, based on wanting to explore this issue further #550102: Allow a theme to set itself as an admin or frontend theme exclusively.

My only reservation is table drag seems like a UI that for better or for worse would also be exposed sometimes to front-facing users, or at least to users with less permissions (such as access admin theme).

But I do agree we probably shouldn't go too far in this direction in general.

Getting rid of a redundant "theme" in the title.

Agree with the Feedbacks on #10 and #11.
But Is there any possibility that there would not a major structure breaking frontend issues, Otherwise it's good.

As the crosshair is visible on the node add /edit pages (which we should visually support for Bartik), I'm opening this issue back up.
 

 
The patch in #4 only focuses on margin and I would like to have the underline removed from crosshairs please.
Please try and follow the Drupal CSS standards for choosing good CSS selectors here https://www.drupal.org/coding-standards/css/architecture#goals .

I also want to stress again that Bartik should *not* be supported as a full admin theme, but I very much appreciate the attention to visual detail that people pay towards Bartik.

Thanks everyone!

Removed border for handle icons in Bartik theme

Looks good in Chrome.

but this is still visible in Firefox.

There are a few improvements that need to be made to the patch.

1. The underline on the <abbr> tag and the padding change on the tabledrag are out of scope for this issue, we should only be removing the border bottom on the tabledrag component.

 

2. We are not following the CSS coding standards for the selector.

   1. Avoid reliance on HTML structure #
   

   • - CSS should define the appearance of an element anywhere and everywhere it appears.
   • - Use classes to assign appearance to markup. Never use id selectors in CSS.
   • - Keep selectors short. The best selector is a single class or element!

   Referenced from CSS Architecture - Best practices
    
   Therefore we should be using the class on the <a> for the tabledrag icon.

 

3. The CSS in the patch subsequently needs to be put in a *new* component file that matches the class name to follow the SMACSS conventions. For further explanation take a peek in other files in the components CSS folder.

Thanks

Thanks for the patch, Rachel. I did a review on 8.1.x:

1. +++ b/core/themes/bartik/css/components/table.css
   @@ -47,6 +47,17 @@ tr th {
   +  overflow: hidden;
   

   This line has no visual effect on the tabledrag component and can be removed.

2. +++ b/core/themes/bartik/css/components/table.css
   @@ -47,6 +47,17 @@ tr th {
   +tr.draggable a.tabledrag-handle {
   

   The selector can be simplified to .tabledrag-handle

3. +++ b/core/themes/bartik/css/components/table.css
   @@ -47,6 +47,17 @@ tr th {
   +  margin-left: -0.5em; /* LTR */
   

   This margin adds indentation to the drag handle, which removed the vertical alignment with the row header. This change seems unnecessary to me, I would like to suggest we follow Seven and align the tabledrag handle with the row header.

4. +++ b/core/themes/bartik/css/components/table.css
   @@ -47,6 +47,17 @@ tr th {
   +  border: none;
   

   By using border-bottom-width: 0; the border is effectively removed.

5. +++ b/core/themes/bartik/css/components/table.css
   @@ -47,6 +47,17 @@ tr th {
   +[dir="rtl"] tr.draggable a.tabledrag-handle {
   

   This statement can be removed if the margin-left above is removed.

6. +++ b/core/themes/bartik/css/components/table.css
   @@ -47,6 +47,17 @@ tr th {
   +tr.draggable abbr.tabledrag-changed {
   

   This selector can be simplified to abbr.tabledrag-changed in line with Seven.

@idebr! It's so good to see you!

I agree with all of #22 apart from the tr.draggable abbr.tabledrag-changed { styles are out of scope for this issue, the abbreviated text on the end of a block title has nothing to do with the tabledrag icon itself. So these changes can be removed please :-)

Hi Rachel,

This underline issue in firefox is resolved and as well as do the changes as per comment #22, please review the patch.

As per comment number #18 resolved this dotted underline issue in firefox.

Hi @NitinSP, thanks for the updated patch.

The dotted underline on the abbreviation is out of scope for this issue. We are only focussing on the tabledrag icon itself.

I have stated this clearly in #21 and #23.

The following code needs to be removed.

+++ b/core/themes/bartik/css/components/table.css
@@ -45,8 +45,17 @@ table tbody tr th {
+abbr.tabledrag-changed {
+  text-decoration: none;
 }

Thanks!

Ah! I had this issue open for a long time and didn't see the updated patch from @rachel_norfolk. Putting back to "Needs review".

Drupalcon NOLA 2016 Reviewed and tested. It is working

This is reviewed and tested successfully.

I have attached screenshots of the fix in Chrome and FireFox.

HI radioflyer,

Having "before" screenshots, in addition to the "after", would be helpful. The before screenshots earlier in this issue are of a different interface, with makes it difficult to compare.

Also, I noticed in the screenshots that the bottom arrow of the icon is being cut off. This should be addressed.

nathanc is working with edutrul on this issue at drupalcon 2016

we are going to upload the before and after screenshots within the correct interface

These are the before and after applying the patch images...

BEFORE

AFTER

This is for RTBC

This is emallove first patch to Drupal 8 core, I mentored him on getting this in.

patch https://www.drupal.org/node/2683433#comment-11187379 working fine for me :)

RTBC++

RTBC++

I need to point out something.

The patch in #37 (which was also duplicate posted in #38 and #39) has none of the same content as the patch that was 99% close to RTBC in #30.

The code in #37 does not meet CSS coding standards
(we shouldn't have an element in the selector and this code does not belong in elements.css either that file is for raw HTML element styling only).

The patch that should have always been considered for commit is in #30.

Unfortunately there is nothing to suggest that the recent screenshots are for the patch in #30.

Can someone please create review screenshots for the patch in #30 and specify that you have tested that specific patch please?

The CSS is all correct and has been thoroughly reviewed above it, we just need some final screenshots.

Thanks all!

@emma.maria I have reviewed the patch #30 and its working fine for me on my windows machine in Chrome and Firefox.
I have added a after screenshots. Please find the attached files.

Ok, I just hide all these outdated patches and just left #30.

Also I put the images of #60 in the description of the issue so we can see how this look with #30.

So I think this RTBC but I will wait for emma.maria in case she wants to give this one final review.

Great work, thanks!

Checked on IE and Safari as well.No issue found in that after applying the #30 patch. Added two more screenshots for more clarity.

I am mentoring vidushi and I have tested it with her. RTBC++ for #30

Has RTL testing been done? We are adding LTR comments (which is great!) but not adding RTL rules in #30.

Nice, I like keeping this focused. Thanks @rachel_norfolk!

The hover state looks like it needs a bit of work. The text jumps up and there is a solid 3px border on the bottom. Well these are definitely related of course :)

Hover state in block UI

Edit: @rachel_norfolk can you please add the related issue you mentioned as a related issue here? I looked quickly but didn't find it referenced here.

Ok, In this patch I just fixed the problem exposed at #69

#70 Looks good to me.

I functionally tested on El Capitan running the latest versions of the following browsers:

Chrome
Firefox
Safari

They all look similar to this when not hovering:

They all look similar to this when hovering:

Hi ccjjmartin!

This one seems ready to go, Can you RTBC this patch, please?

Thanks!

I am working on this during DevDaysMilan,
I have tested it manually on local, Looks good to me :) moving it to RTBC.

Committed 0fb2352 and pushed to 8.2.x. Thanks!

As a CSS fix for Bartik, committing to 8.2.x only.