Summary of open issues in Om's blogroll

[scripting]

I'm ready to work on the last CSS issues in the blogroll in the theme used in Om's blogroll.

1. When I click the popup menu it still scrolls to the top of the page. I have changed the # to javascript:void(0).
2. The popup menu items are "underlined" somehow, and there's extra space above some items. Screen shot.
3. There's a bit of "underlining" below the popup menu ellipses. Screen shot.
4. The right edge of the When title doesn't line up with the right edge of the when values. Screen shot
5. When a blog is expanded, the links to the articles should not be "underlined" as in the other cases. Screen shot.

I put underlined in quotes because when you look at the elements in the debugger in Chrome, there is no font-decoration property causing the display. I stared at each of these cases and couldn't figure it out. I'm going to try staring some more.

It seems likely that items 2, 3 and 5 are the same problem.

[NickGreen]

1. I can't remember if you've tried this, but in the past I've added preventDefault to my click event JS, like this example:

   jQuery( "a" ).on( "click", function( event ) {
   event.preventDefault();
   jQuery( "<div>" ) .toggleClass( ".clicked" );
   });

2. The "underline" is coming from this style:

   .entry-content a {
   background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
   }

   This is one possible way to fix that:

   .divBlogrollContainer .dropdown-menu > li > a {
   background: none;
   }

3. Same problem as number 2. It's a background image that needs to be overridden on the <a>

4. It looks like this is because of this style on his site:

   @media screen and (min-width: 43.75em) {
   th, td {
       padding: 8px;
   }
   }

   And your element here doesn't have padding-right specified, so it's picking up that extra 8px of right padding:

   .trBlogrollFeed td {
   padding-left: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
   }

   To solve this, you could declare a value for the padding-right on your td.

5. You got it! Same problem! Applying background: none to those links removes the underlines.

[scripting]

@NickGreen -- thank you for these tips.

1. added the first suggestion, setting background to none on the elements but for some reason the change in blogroll.css is not getting through. To see the new stuff search for /* 4/9/24 by DW */ Update: After staring at it a bit, I added more specific styles, and one by one the extraneous underlining is going away.

2. I added .trBlogrollFeed td {padding-right: 0} in the same part of blogroll.css, it worked, now the When title is right-adusted with the text in that column.

Now that the underline effect is gone from the links to the items, we will need some way to indicate they are links. I've had some comments from more observant users about this. They are right. It's not at all obvious how to get from the link to the actual site. Something to think about, ideas welcome. The key thing is it has to say "you can click here" without being too distracting.

Also, hovering over the links to the stories has never worked properly. I'm using mouseenter and mouseleave events, to toggle the popover. That's not right. Need something better.

I was also able to get the .dividers in the popup menu to work properly by changing box-sizing: content-box; The line previously had been missing.

I added the code you suggested to prevent default, and the bit with ".clicked" class. Also added a console.log to it, but am never seeing it. Added at the end of the blogroll routine.

But on the whole we've taken care of most of the existing problems here. Your help has been invaluable. Thanks.

[scripting]

Update..

1. I added the code below, but it still jumps when I click the ellipses to open the menu.

$(".divBlogrollContainer a").on ("click", function (ev) { //4/9/24 by DW
    console.log ("click handler invoked");
    ev.preventDefault ();
    $( "<div>").toggleClass (".clicked");

The "click handler invoked" message does not appear in my console when I click on the ellispes.

2. The fix for getting rid of the "underlining" apparently introduced a new problem. I found the cause but don't want to try the fix without asking here, out of concern that I might cause new problems.

Here's the problem -- when you roll the cursor up and down the menu to select a command, the background that's usually there to highlight the cursor in the menu is turned off because that was the fix we implemented. Here's a screen shot.

[NickGreen]

1. Dropdown "jumping" problem

Sorry, I gave slightly poor advice. I forgot how the dropdown functionality of Bootstrap is built into the bootstrap.js, and so you don't have the ability to add in a preventDefault into the click event that is added to the anchor. I would go ahead and remove the chunk of JS that you added on 4/9/24. I think I have another valid solution for you.

I think you can just remove the href attribute completely. My understanding is that this is still valid HTML, and in my testing, doesn't cause the "jumping" behavior.

So, on line 273 of blogroll.js, can you try changing it to:

const aMenuLink = $("<a class=\"dropdown-toggle\" role=\"button\" id=\"dropdownMenuLink\" data-toggle=\"dropdown\" aria-expanded=\"false\"><i class=\"fas fa-ellipsis-v\"></i></a>");

2. Link background problem

It looks like maybe you've already found a solution to this, by adding a hover style behind the white text? Looks good from this end:

[scripting]

Good news, the first suggestion worked. It's funny I thought of doing that at one point, but for some reason didn't try it.

I didn't find a solution to the second problem, it's still missing the background highlight in the blogroll on scripting.com.

https://github.com/scripting/feedlandBlogrollToolkit/assets/1686843/65497323-6020-4940-b5ad-98fc0b01b677

[scripting]

Now maybe I can figure out what adding a hover style would do. ;-)

[scripting]

And I think I might just have figured it out!

.divBlogrollContainer .dropdown-menu li a:hover {
    background: dodgerblue;
    }