v3 & Harmony diary / thoughts / code snippets

[DownPW]

@phenomlab said in v3 / Harmony diary:

Today’s playground

Here’s a video… still needs a bit more work, but… Notice the newer scroll and progress bar I was talking about earlier…

https://sudonix.com/assets/uploads/files/footer-added.webm

Hello Mark,

I just tested the functioning of the scroll bar and I saw this bug:

https://i.imgur.com/VQw5zw5.mp4

It should be moved to the left so as not to encroach on the collapse button of the custom footer navbar.

Then, when we play with the collapse button of the custom footer navbar we should:

• When the custom footer navbar is deactivated: it sticks to the bottom right while not encroaching on the right sidebar. All this taking into account the collapse of the right sidebar (not obvious, I don’t know if I’m clear )

• When the custom footer navbar is activated: it moves just to the left of the floatright block or can be above the floatright block?

The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

Keep the good work my friend

[DownPW]

Edit: [- https://i.imgur.com/VQw5zw5.mp4 -]

[phenomlab]

@DownPW fixed in Dev. Have a look. Many improvements and I think you’ll like it. Try it on both desktop and mobile.

[phenomlab]

@DownPW said in v3 / Harmony diary:

The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

Nope. The newest version of Harmony appears to have the same pagination as Flarum and Discourse, so it’s been moved into the content area

[DownPW]

@phenomlab

yessss fixed. Love it

[DownPW]

@phenomlab

No javascript ?

I wanted to inspect the code but I can’t find any JS

[phenomlab]

@DownPW it’s definitely there. Won’t work without it

[DownPW]

@phenomlab

I guess, I don’t find it in inspector lol .I will search

[DownPW]

@phenomlab

Can I test it on my dev env ?

EDIT: I test it. If you don’t want tell me Mark

If I have problem, can I ask you @phenomlab ?

[phenomlab]

@DownPW no problems.

[DownPW]

@phenomlab said in v3 / Harmony diary:

@DownPW no problems.

Seems I miss something @phenomlab but good start

[- https://i.imgur.com/cN0YeN0.mp4 -]

EDIT: Maybe find

EDIT 2: @phenomlab

Find --> I have forget toAbove and toBottom css directives
It’s better now, just seems toBottom doesn’t work :

.toBottom {
  bottom: 0px !important;
  right: 0px!important;
}

.toAbove {
  bottom: -5px !important;
  right: 400px !important;
}

[phenomlab]

@DownPW likely you are missing z-index on that class. As you are using position: absolute the index is needed to bring that specific element forward. By default, it’ll sit behind the progress bar meaning it cannot be clicked, but can be seen.

[DownPW]

@phenomlab

Thanks for your reply my friend

I will test tomorrow and again, it’s a very great job, I like it a lot.

[phenomlab]

@DownPW no problems. Let me know if you have issues and I can take a look. Can’t release the code formally yet as it’s still beta (and does have very minor bugs).

[phenomlab]

Not sure why, but for a while I’ve been looking at the size of the CSS file that runs the dev site, and I couldn’t understand why it was almost twice the size of what it should be in terms of overall lines.

This eventually got the better of me and I landed up going through the file and removing what appears to be a large amount of duplicated CSS. I primarily work offline using VSCode (my go-to editor), but periodically “fix” things on the fly. The problem with this is that if you make changes online then copy these from the CSS editor in the ACP back to VSCode, they seem to be copied twice - in other words, appended to the existing file despite all text being selected, which should in fact overwrite, but it doesn’t

Just something for everyone else to watch out for. I spent a fair amount of time this afternoon purging duplicate classes, and the end result is a much leaner file.

[phenomlab]

Thanks to @cagatay for finding a bug with the CSS in relation to tags in DEV. This has been fixed. I also found another bug whilst addressing this one in the sense that the progress bar on mobile (and desktop, but limited intrusion) shows over the tag div when the composer is active.

Changed the scrollbar function so that it does not fire if the composer is visible. Here’s the block of code that detects if it’s active or not

            if ($(window).scrollTop() > 0 && (!$('[component="composer"]').is(":visible"))) {
                bar.addClass('show');
            } else {
                bar.removeClass('show');
            }

Above, we now have 2 conditions. The first is to fire only if the top marker is higher than 0 - for example, hide if we are at the top of the screen. The second condition is that we also only fire if the composer isn’t active - detected by is(":visible")

Keep 'em coming in terms of identified bugs - reporting them is much appreciated.

[DownPW]

Hello @phenomlab

I keep working on my CSS
On v2, I displayed user groups in topics like this :

but I can’t seem to get any result. I can’t target the right element

Ideas ?

Many thanks

[phenomlab]

@DownPW hmm. Haven’t tried this myself (yet) but will have a look later this afternoon.

[phenomlab]

@DownPW This should work under v3

a.badge.rounded-1.text-uppercase.text-truncate.text-decoration-none {
    border-radius: 999px !important;
    margin-left: -10px;
    width: 22px;
    max-width: 22px;
}

[DownPW]

Hi @phenomlab

Thanks my friend.
I have this result with code you provided :

It’s better but not perfect.
But it allowed me to target the right element

–> Here is a code improvement for those who are interested :

/* Desktop */
a.badge.rounded-1.text-uppercase.text-truncate.text-decoration-none {
    border-radius: 999px !important;
    margin-right: -10px;
    padding-left: 6px;
    padding-top: 5px;
    width: 20px;
    max-width: 20px !important; 
}

.d-flex.gap-1.hidden-xs.align-items-center {
    margin-left: 15px;
} 

i.fa.fa-edit.text-muted.pointer.edit-icon {
    margin-left: 8px;
}

/* Smartphone */
@media (max-width: 767px) {
a.badge.rounded-1.text-uppercase.text-truncate.text-decoration-none {
    padding-left: 4px;
}
}

Better result :

cya