-
-
Notifications
You must be signed in to change notification settings - Fork 383
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.
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
fix: added barcode-svg #10242
fix: added barcode-svg #10242
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #10242 +/- ##
==========================================
- Coverage 49.54% 49.25% -0.30%
==========================================
Files 67 76 +9
Lines 20650 21872 +1222
Branches 4980 5239 +259
==========================================
+ Hits 10231 10772 +541
- Misses 9131 9778 +647
- Partials 1288 1322 +34 ☔ View full report in Codecov by Sentry. |
//init barcode SVGs if exist on the page | ||
let barcode_svg_elements = document.getElementsByClassName("barcode-svg"); | ||
if(barcode_svg_elements.length!=0){ | ||
JsBarcode(".barcode-svg").init(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since you already have the array, this should be enough:
JsBarcode(".barcode-svg").init(); | |
JsBarcode(barcode_svg_elements).init(); |
JsBarcode
seems to do the same by calling getRenderProperties
internally. Might save some ms by not running the selector again
@@ -490,6 +490,14 @@ <h3 class="title-5 text-medium">[% lang('footer_discover_the_project') %]</h3> | |||
[% END %] | |||
|
|||
</body> | |||
<script src="[% static_subdomain %]/js/dist/JsBarcode.all.min.js"></script> | |||
<script> | |||
//init barcode SVGs if exist on the page |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure what the best place for this snippet is, but in general, we tried to remove most direct JS from the templates in the last few months. Maybe display-product.js? cc @alexgarel @stephanegigandet
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
display-product.js would be the right place I think, we don't need to load this script on every page, just product pages.
In fact we probably want to display the barcode only on desktop (not mobile), as on mobile it takes a lot of space for little added value. On desktop it's very useful so that it can be scanned with a mobile app (like ours, or others).
I'm not sure if we could load the script conditionnaly if the screen is big enough though.
</p> | ||
<svg class="barcode-svg" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
Could you change the display so that it is displayed only on desktop, and at the right of the barcode number, so that we don't lose vertical space? The barcode is very nice to have in order to be able to scan it with a mobile app, but we don't want to push the real content too much down.
e.g. something like that:
After many tryings: My proposal: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @bazylevnik0, this is great.
Moving to _off.scss seems the only remaining item to me !
<style> | ||
#barcode_div_code,#barcode_div_svg{ | ||
display: inline-block; | ||
vertical-align: top; | ||
} | ||
@media only screen and (max-width: 600px) { | ||
#barcode_div_svg,#barcode_br { | ||
display: none; | ||
} | ||
} | ||
</style> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should put it in the main _off.scss file.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed. But I moved styles to _product-page.scss
.
I think it is more reasonable because script is also only on the product page template.
Quality Gate passedIssues Measures |
I updated tests results. |
@bazylevnik0 thanks for this great contribution. Sorry for we were quite under an heavy load last week, and it's only now that I saw it was failing since a long time. I just add to run "make update_test_results" to have all test results updated. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great, thanks !
🤖 I have created a release *beep* *boop* --- ## [2.38.0](v2.37.0...v2.38.0) (2024-07-23) ### Features * add new product event types for redis queue ([#10530](#10530)) ([339dbc4](339dbc4)) * add product data to org table ([#10534](#10534)) ([dce0518](dce0518)) * added a drag and drop zone in pro platform ([#10569](#10569)) ([ce60b8f](ce60b8f)) * allow orgs to not have a main contact if imported from an aggregator ([#10531](#10531)) ([ead1b0c](ead1b0c)) * launch the exports for all organizations that have the checkbox… ([#10561](#10561)) ([c3aa2d1](c3aa2d1)) * Lint spaces in taxonomies ([#10563](#10563)) ([c01cf91](c01cf91)) * make valid org filter field a dropdown ([#10524](#10524)) ([b38e62c](b38e62c)) * measure and log duration of request and mongodb / off-query que… ([#10557](#10557)) ([2cb1b1e](2cb1b1e)) * packaging add Ireland ([#10533](#10533)) ([3f3196e](3f3196e)), closes [#1572](#1572) ### Bug Fixes * add product_type to redis events ([#10550](#10550)) ([6bd1c0e](6bd1c0e)) * added barcode-svg ([#10242](#10242)) ([8da89da](8da89da)) * broken user space on pro platform ([#10541](#10541)) ([b6e3017](b6e3017)) * change_main_contact.pl ([#10548](#10548)) ([b2f90ea](b2f90ea)) * disable caching on pro platform ([#10516](#10516)) ([4ccd714](4ccd714)) * GDSN import from Alnatura ([#10556](#10556)) ([6e2673a](6e2673a)) * improve generated data for a .pl script ([#10532](#10532)) ([1cab04c](1cab04c)) * pro_moderator_owner not stored for the admin/moderator user through org/[orgid] facet ([#10560](#10560)) ([e0441c6](e0441c6)) * rate limiter log config ([#10535](#10535)) ([9a5168d](9a5168d)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).
What
Added support of the barcode SVGs in the page
Screenshot
Related issue(s) and discussion