Signature window offset and too small

[ArcheNoah77]

Please confirm you have done the following before posting your bug report:

• [x ] I have enabled debug mode
• [x ] I have read checked the Common Issues page

Describe the bug
When signing for an asset, the signature window cant be used full size and the signature (or the pen i write with) is offset, ca. 1cm to the right.
It happens on all devices in all browsers.

Expected behavior
Use the full signature window

Screenshots

Server (please complete the following information):

• Snipe-IT Version: 5.0.2
• OS: Ubuntu 18.04
• Web Server: Apache
• PHP Version: 7.2.24

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome, Internet Exporer, New Edge

[snipe]

So this is fun...

(See #8656)

It's too big and too small. Schrödinger signature box :D

We're looking into this.

[snipe]

Can anyone tell me if this happens only on mobile v desktop?

[tarlety]

The signature-pad.min.css is missing.

It looks like webpack.mix.js tries to minify signature-pad.css, but it's just not there.

mix
    .copy('./resources/assets/css/signature-pad.css', './public/css/dist')
    .minify('./public/css/build/signature-pad.css');

Here is my attempt to fix it (b031593) by correct copy target path and commit minified css file.

mix
    .copy('./resources/assets/css/signature-pad.css', './public/css/signature-pad.css')
    .minify('./public/css/signature-pad.css');

Quick fix

Download the minified css file (b031593) and signature pad size shall be correct.

$ curl https://raw.githubusercontent.com/tarlety/snipe-it/b0315930659ded6fe1583cca21eafb2aafa744e3/public/css/build/signature-pad.min.css -o /var/www/html/public/css/signature-pad.min.css

[snipe]

We call it directly in the file.

https://github.com/snipe/snipe-it/blob/master/resources/views/account/accept-asset.blade.php#L14

GitHub

snipe/snipe-it

A free open source IT asset/license management system - snipe/snipe-it

[snipe]

If you copy signature-pad.css in public/css to public/css/signature-pad.min.css does that help?

[snipe]

(Should not need to re-run npm for assets)

[tarlety]

If you copy signature-pad.css in public/css to public/css/signature-pad.min.css does that help?

On my self-hosted instance, yes it does help.
I am using snipe-it 5.0.4.

[snipe]

Okay, that's on develop now, will be in the next release

[denzfarid]

The signature-pad.min.css is missing.

It looks like webpack.mix.js tries to minify signature-pad.css, but it's just not there.

mix
    .copy('./resources/assets/css/signature-pad.css', './public/css/dist')
    .minify('./public/css/build/signature-pad.css');

Here is my attempt to fix it (b031593) by correct copy target path and commit minified css file.

mix
    .copy('./resources/assets/css/signature-pad.css', './public/css/signature-pad.css')
    .minify('./public/css/signature-pad.css');

Quick fix

Download the minified css file (b031593) and signature pad size shall be correct.

$ curl https://raw.githubusercontent.com/tarlety/snipe-it/b0315930659ded6fe1583cca21eafb2aafa744e3/public/css/build/signature-pad.min.css -o /var/www/html/public/css/signature-pad.min.css

thanks man! I really appreciate,
I tried the quick fix
and it's working

Firefox dekstop 82.0.2 (64-bit)

mobile version iphone x, portrait

mobile version iphone x , landscape

[snipe]

Awesome, thanks for the confirmation!

[denzfarid]

If you copy signature-pad.css in public/css to public/css/signature-pad.min.css does that help?

confirmed!
I also tried this way
and it works too
cp resources/assets/css/signature-pad.css public/css/signature-pad.min.css

[snipe]

I think the issue was that the asset-acceptance.blade.php was looking in the wrong dir for the minified file.

<link rel="stylesheet" href="{{ mix('css/signature-pad.min.css') }}">
(not working)

vs

<link rel="stylesheet" href="{{ mix('css/build/signature-pad.min.css') }}">
(working)

[denzfarid]

signature-pad.min.css

maybe,
because previously I did not find the file
signature-pad.min.css in the public/css directory, but when that file is added, PHEW!!! , it seems like magic

[snipe]

It's the build part that was missing. Webpack minifies the source css from the resources/assets/css file, and puts it into the public/css/build directory, but our CSS link in that blade was omitting the build part of the path I think.

[denzfarid]

It's the build part that was missing. Webpack minifies the source css from the resources/assets/css file, and puts it into the public/css/build directory, but our CSS link in that blade was omitting the build part of the path I think.

absolutely right and i agree with that,

thank you so much @snipe and all team 🙏🏼

[snipe]

No problem - I'm glad we could get you sorted. :)

[ArcheNoah77]

Thanks for the help! I will try it in the next days.