Fix fork button

[jolheiser]

Fixes #6222

When disabling only the first part, I didn't like how semantic displayed it.

So instead I moved the basic class into an if-else.
It appears basic when a user can fork (no change from existing style)
It appears normal (but disabled) if they cannot fork. (image below)

There was also the case of a non-signed in user, which is why this is a separate if-else within the element to avoid any doubled up classes in favor of another logic flow.

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@6460cff). Click here to learn what that means.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #6223   +/-   ##
=========================================
  Coverage          ?   38.83%           
=========================================
  Files             ?      355           
  Lines             ?    50256           
  Branches          ?        0           
=========================================
  Hits              ?    19518           
  Misses            ?    27909           
  Partials          ?     2829

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6460cff...673fa03. Read the comment docs.

[silverwind]

Still looks kind of weird, I'd fix the disabled CSS to use something like opacity: .5 on the whole button. Plus points for also adding cursor: not-allowed.

[silverwind]

Also, I think some manual styling to make border-right change on hover would be nice.

[jolheiser]

After messing with CSS for a bit, this is what I came up with. Note that the right-button to get to forks is still available and the cursor is a pointer like normal.
It adds the cursor: not-allowed; change as well to the left-button. Since I needed to manually counteract any prior hover event styling, there's a chance I missed something that would show up differently in another browser.
Please let me know what further changes, if any, are needed.

[silverwind]

I'd change the disabled class to something a bit more more generic like .disabled-repo-button so it could be used on the other buttons too. Or even go full out on overriding the .disabled class. pointer-events: none might be required to actually make the button unclickable.

Some lightly tested suggestions (the margin change on the label makes border-right on the left button show). I'm sure more improvements are possible (the color/box-shadow change seems unneccessary):

.repo-buttons .disabled-repo-button .label {
  opacity: .5;
}

.repo-buttons .disabled-repo-button a.button {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.repo-buttons .disabled-repo-button a.button:hover {
  background: none !important;
  color: rgba(0,0,0,.6) !important;
  box-shadow: 0 0 0 1px rgba(34,36,38,.15) inset !important;
}

.repo-buttons .button > .label {
  border-left: none !important;
  margin: 0 !important;
}

[jolheiser]

I left pointer-events on because otherwise you lose the cursor and tooltip.
Clicking on it didn't seem to do anything in Chromium (which is intended behavior), however at the moment I cannot test on other browsers.

[silverwind]

Almost there, but we need to modify the last style to make the inner border show:

.repo-buttons .ui.labeled.button > .label {
  margin: 0 !important;
}

Reason being the !important in Semantic here:

[jolheiser]

Okay, updated. Thanks for the input, @silverwind
I can make UI changes, but I am definitely not a styling expert. 😅

[hexfs]

Conflict

[jolheiser]

Conflict

Resolved

[hexfs]

@techknowlogick GTM