Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug - Share menu css does not have latest changes from wet-boew which gives incorrect icons to most share links #2456

Closed
radmorecameron opened this issue Dec 18, 2024 · 4 comments
Closed

Bug - Share menu css does not have latest changes from wet-boew which gives incorrect icons to most share links #2456

radmorecameron opened this issue Dec 18, 2024 · 4 comments

Comments

@radmorecameron
Copy link

Describe the bug

Note: If your request is related to security, please do not open a publicly visible "issue"; refer to SECURITY.md.

To Reproduce

Steps to reproduce the behaviour:

  1. With the latest versions of wet-boew (4.0.83) and GCWeb (v16.0.0), create a sample page that uses the share-widget
  2. Open the share widget
  3. Notice an icon is missing next to bluesky and most of the other icons are incorrect

Example

Put this file in the root directory as GCWeb and wet-boew cdn files:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Share Widget incorrect</title>
    <link rel="stylesheet" href="./GCWeb/css/theme.css" />
    <link href="https://cdn.jsdelivr.net/gh/wet-boew/[email protected]/assets/favicon-mobile.png" rel="apple-touch-icon" sizes="57x57 72x72 114x114 144x144 150x150" />
    <link href="https://cdn.jsdelivr.net/gh/wet-boew/[email protected]/assets/favicon.ico" rel="icon" type="image/x-icon" />
    <script src="./wet-boew/js/jquery/2.2.4/jquery.js"></script>
</head>
<body>

    <main>
        <h1>Share Widget Incorrect</h1>
        <div class="wb-share" data-wb-share='{"pnlId": "pnl6", "lnkClass": "btn btn-default"}'></div>
    </main>

    <script src="./wet-boew/js/wet-boew.js"></script>
    <script src="./GCWeb/js/theme.js"></script>
</body>
</html>

Current behaviour

The icons are messed up because the css wasn't updated to include Bluesky (I believe this is supposed to happen automatically?):
screenshot of share widget where an icon is missing and most icons are incorrect

Expected behaviour

This is how it looks on the wet-boew demo page (https://wet-boew.github.io/wet-boew/demos/share/share-en.html):
scrreenshot of wet-boew share widget where all icons are correct and no missing icons

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Edge
  • Version: 10
@EricDunsworth
Copy link
Member

EricDunsworth commented Jan 24, 2025 •
edited
Loading

I tried building GCWeb's latest commit locally and added the share widget in a random test page... got the expected behaviour :).

But GCWeb's share this page demo on github.io still matches your current behaviour screenshot... :(.

What seems to be happening is that WET's build system generates an "all-in-one" PNG file containing all of the share this page widget's social media icons/sprites. To make use of that image, an SCSS file (_sprites_share.scss) is also generated with various info about the icons (like the image's path, pixel sizes, background-position offsets, etc...). That info is ultimately "baked into" WET's "compiled" CSS files.

As for what's going on with GCWeb... WET's build system outputs the aforementioned SCSS file to src/plugins/share/sprites as an untracked file. As a result, GCWeb's CI build can't easily refer to it.

To deal with it, GCWeb's CI build was setup to download a copy of src/plugins/share/sprites from GitHub Gist...

GCWeb/.github/workflows/cd.yml

Lines 80 to 83 in add25e0

- name: Copy the missing _sprite_share.scss file - related to GCWeb#1737 about wet-boew#cc340a6 commit
run: |
curl https://gist.githubusercontent.com/duboisp/d69787b300eb1f4d40f937508e10d013/raw/86e7a0b15ad6a695754599e9793e986b460bf514/_sprites_share.scss >> _sprites_share.scss
mv _sprites_share.scss node_modules/wet-boew/src/plugins/share/sprites/_sprites_share.scss

But the gist file was never updated after wet-boew/wet-boew#9829 got merged. End result is that GCWeb currently isn't aware of the Bluesky icon and is using offsets that were meant for an older incarnation of the "all-in-one" PNG image (resulting in incorrect icons appearing for other social media platforms :P).

To fix it, @duboisp and/or @Garneauma will need to update that gist file and adjust the CI build's reference accordingly.

Hope this helps :)!

Related:

@radmorecameron
Copy link
Author

radmorecameron commented Jan 24, 2025 •
edited
Loading

Thanks for the info :)

@Garneauma Garneauma mentioned this issue Jan 29, 2025
Merged
@Garneauma
Copy link
Contributor

Closed by the release of release v16.1.0.

@EricDunsworth
Copy link
Member

EricDunsworth commented Jan 29, 2025 •
edited
Loading

@Garneauma I think this was actually fixed in v16.1.1 (#2468).

That's the latest release from yesterday. It edited the CI build's workflow to point to an updated version of the _sprites_share.scss gist file.

Btw thanks for resolving it :)!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@EricDunsworth @Garneauma @radmorecameron