Mobile Responsiveness: when in full screen, there are unaligned product items

[masarapmabuhay]

Hi Zent, I hope you are doing well.

I have already updated my local version of the Usbong Store server with your newest code commit.

Observation: 1) When in full screen, there are unaligned product items, e.g. there are rows that have only 1 product item, even though there should be 6.

--> Am I correct in my understanding that this is because the updated View files, e.g. textbooks_v2, food_v2, will still be in the next Phase of the Usbong Store Mobile Responsiveness project upgrade?

Thank you.

Peace, Mike

[zent-lim]

Morning Mike,

The problem should not be there.

NOTES:

(1) Here is how textbook catalog should look like on full screen:

  Url: https://store.usbong.ph/index.php/b/textbooks/

  Image:

  Note: broken images are images that are not in my local environment.

(2) Here is how food catalog should look like on full screen:

 Url: https://store.usbong.ph/index.php/b/food/

 Image:

Question:

(1) Was the mobile responsive switch activated on your local core controller?

(2) If yes, please send me screen shot of what you are seeing.

Morning!

[zent-lim]

Hi Mike,

I was able to recreate the problem in chrome.

Analyzing it now.

[zent-lim]

Hi Mike,

I resolved the problem in zent repo fc0546356334ca7ac603740ce2fdc426a5b811e1.

The pull request is in: https://github.com/usbong/UsbongStore/pull/104

REQUEST:

(1) Please check if this solves the problem in your environment.

(2) The file updated was a js file. Please clear your browser cache for the new js file to load.

Morning!

[masarapmabuhay]

Hi Zent, Thank you for the replies.

I have merged your pull request (https://github.com/usbong/UsbongStore/pull/104) with the Usbong Store master.

I have also cleared the browser cache of both my Google Chrome and Mozilla Firefox.

Unfortunately, your update did not resolve the issue.

My ANSWERS to your QUESTIONS:

(1) Yes, I have set the mobile responsive switch to TRUE in my local core controller.

(2) These are screenshots of what I see after merging your newest commit with my local version of the Usbong Store code.

a) Google Chrome

b) Mozilla Firefox

Please never hesitate to tell me if there's anything else that you need.

Thank you.

Peace, Mike

[zent-lim]

Hi Mike,

Thank you for sending me an image.

I'd like to verify your environment's common.js file.

Using chrome, could you do the ff please?

(1) right click on page

(2) choose inspect element (new window appears)

(3) on new window, choose network (list of files appear)

(4) in list of files look for common.js and check line 11

(5) please check if the content of the line reads the ff:

maxHeight = Math.ceil($(this).height());

Thanks!

[masarapmabuhay]

Hi Zent, Thank you for the reply.

When I select common.js and then "Preview", it is blank.

In "Headers", this is what is shown:

a) General:

Request URL: https://store.usbong.ph/assets/js/b/common.js Request Method: GET Status Code: 404 Not Found Remote Address: 52.33.56.147:443 Referrer Policy: no-referrer-when-downgrade

b) Request Headers:

Provisional headers are shown Referer: http://localhost:8080/b/food/ User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

In my application/config/config.php, I use the following: $config['base_url'] = 'http://localhost:8080/';

Thank you.

Peace, Mike

[zent-lim]

Hi Mike,

Thanks for informing of the 404 error.

File: application/views/b/generic_mobile_responsive_catalog.php

Orig Code:

<script src="https://store.usbong.ph/assets/js/responsive_bootstrap_toolkit/bootstrap-toolkit.min.js"></script>

<script src="https://store.usbong.ph/assets/js/b/common.js"></script>

I will update to the ff so it can also run in local environment:

<script src="/assets/js/responsive_bootstrap_toolkit/bootstrap-toolkit.min.js"></script>
<script src="/assets/js/b/common.js"></script>

Please wait a while.

[zent-lim]

Hi Mike,

Kindly check if this resolves the problem:

(1) Code: zent repo 59035d2f80ac7b0578d9415651554f54aa6da362

(2) Pull Request: https://github.com/usbong/UsbongStore/pull/105

Evening!

[masarapmabuhay]

Hi Zent, Thank you for the replies.

I have already merged your pull request with Usbong Store master.

It seems to have resolved the issue, except when I do the following steps:

1) Select the FOOD category. 2) Minimize the browser window that is in full screen. 3) Make the browser window full screen again.

Result: 1) There is a blank row after each row with product items. 2) If I visit another category, e.g. TOYS & COLLECTIBLES, the unaligned product item issue persists.

Thank you.

Peace, Mike

[zent-lim]

Hi Mike,

(1) Re problem 1 - awkward spacing after mazimize then minimize:

I was able to recreate it. Please wait a while as I analyze the problem.

(2) Re problem 2 - Toys pages not rendering properly. I cant seem to recreate in firefox and chrome.

Can you send screen shot?

Morning!

[zent-lim]

Hi Mike,

(1) Re problem 1: i fixed it in pull request below:

https://github.com/usbong/UsbongStore/pull/106

Could you check if this solves the problem using your environment?

(2) Re problem 2: kindly check if problem persists in updated code.

Note: In between updates I was able to recreate it. But I was not able to recreate it yet using the codes pushed to repo. Hopefully, the updated code will already prevent the problem.

Morning!

[masarapmabuhay]

Hi Zent, Thank you for the replies.

I have already merged your newest commit (https://github.com/usbong/UsbongStore/pull/106) with Usbong Store master.

(1) Yes, your newest commit resolved the issue.

(2) Your newest commit also resolved this issue.

This case is now closed.

Thank you.

Peace, Mike