Improve appearance of all settings screens for mobile about all-in-one-seo-pack HOT 19 CLOSED

When we checked the current code to fix the mobile layout, we found that current code has many issues, including (mentioning couple here)

1. Style is defined in php file
2. Class or id is not following the standards as defined in given documents. One example is “–“ should be used instead of ”_” for defining a class

Therefore, To fix issues for mobile responsive and optimizing code to follow given standard practice, we first need to standardized the code written for Desktop version.
A screenshot is attached.

The point is, Its not that we cannot directly fix the mobile responsive version. We can even do it using media query as done in desktop but it will not be standardized which is your priority.
Please suggest!!! what approach should we follow for now

Question:
At the moment the layout defined for sections shows that in mobile view, right-section will appear first i.e. about, support and then left-section which includes all settings i.e. general settings, home page settings. Ideally in mobile responsive view about us, support should not appear as we already have a lengthy page. OR these should appear after left-section (general, home etc.)
Your thoughts??? do you have a layout in mind (section-wise)

from all-in-one-seo-pack.

Hi @iko-dev These are great comments and great questions. I'm glad you asked.

As discussed in the guidelines, some of the current code isn't according to standards at the moment, and should be cleaned up and brought to standards as you go. We don't want to add more bad code to already bad code.

You are correct that we want new code to be written according to the WordPress standards, and change the old code to be according to the standards as well.

from all-in-one-seo-pack.

@wpsmort What are your thoughts on the layout question?

from all-in-one-seo-pack.

I agree. Best practice is to fix the current code to bring it inline with the WordPress coding standards first and then make the improvements to the appearance on mobile devices.

@iko-dev In answer to your layout question, I think the best approach would be to compress the Join Our Mailing List, About and Support sections down to bars with the title and a Click to Expand button/link and keep it at the top so it takes up less real estate.

from all-in-one-seo-pack.

@iko-dev I've created a branch called iko-dev off the development branch. Make your changes there and do a pull request to that branch.

https://github.com/semperfiwebdesign/all-in-one-seo-pack/tree/iko-dev

from all-in-one-seo-pack.

@michaeltorbert Thanks for appreciating it. We just wanted to double check it before implementing as we are on trial. So needed to confirm we we should fix it as per standards.
We would review the branch and will reciprocate accordingly.

@wpsmort Thanks for explaining, we got your point. Join our mailing list, About and support at top but minimized/compressed.

from all-in-one-seo-pack.

Hi @iko-dev, I have created a separate issue for the code cleanup and assigned it to you. That issue is #138

from all-in-one-seo-pack.

Today's progress.

Pulled from given source.

We worked around 3 hours and fixed many issues for desktop version related to task#2. Then worked on General settings for mobile,

• "Join our mailing list, About and support" are displaying on top and are collapsed by default. We used JS for this.
• Then comes ads. Working on ads collaps
• The other tabs remain expanded.

from all-in-one-seo-pack.

@iko-dev Make sure to submit a pull request to your branch with your changes.

from all-in-one-seo-pack.

@michaeltorbert I have tried to push the changes to the branch but it gave me the following error

ERROR: Permission to semperfiwebdesign/all-in-one-seo-pack.git denied to iko-dev.
fatal: Could not read from remote repository.

from all-in-one-seo-pack.

@michaeltorbert

Today, we worked on issue #2
The layout is responsive now. Additionally, we want to increase the space between 2 rows in a section to make it visually appealing. But "Help" question mark is using position absolute. It looks fine on many instances where text has 2-3 words but wherever large text is used it overlaps. Again, to fix this, we have to work on desktop version to separate both "label" and "question mark".

So want to know if you are OK with the current responsive layout or want us to enhance it further.

The code is ready to pushed, did not pushed it yesterday as work was not complete.

If you check and confirm that task #2 is complete, we will move to task#138 especially "CSS naming convention"

from all-in-one-seo-pack.

@iko-dev You can't do a push, you have to do a pull request to the iko-dev branch

from all-in-one-seo-pack.

We pulled from iko-dev before start of the task
As the task is completed now, and we want to submit/push the code where should we submit/push the code?

Please explain so you can review our work.

from all-in-one-seo-pack.

Here are the steps to contribute to our Github repository:

1. Fork our all-in-one-seo-pack repository to your Github account
2. Clone your forked repository
3. Create a branch for each issue you are working on, please use a naming convention that identifies the issue, i.e. iko-dev_issue2
4. Perform all development work in your repository in the appropriate branch
5. When you are ready to submit your code to us, select the branch and click the New Pull Request button. You must then select your iko-dev branch in the base dropdown. Make sure you reference the issue number n the comment field
6. We will then pull your code into our repository and review it
7. Submit a new Pull Request for each issue you work on and reference the issue number in your Pull Request comment field

There is a good explanation of this process here - http://www.pontikis.net/blog/how-to-collaborate-on-github-open-source-projects

Please note that if you do not follow these steps then we cannot pull your code from you.

from all-in-one-seo-pack.

Thanks for explaining in detail. Our Monday working will start in less than 12 hours. We will contribute the code and task details.

Just for reference, code is attached here.
all-in-one-seo-pack.zip

from all-in-one-seo-pack.

We followed the procedure to contributed the code. Please check and confirm.

from all-in-one-seo-pack.

@wpsmort This has been pulled into the iko dev branch and is ready for testing.

from all-in-one-seo-pack.

@wpsmort This code is in the iko-dev branch and needs to be tested to see if you're satisfied this ticket can be closed.

from all-in-one-seo-pack.

@michaeltorbert
Tested with Chrome Mobile, all tabs are responsive.
Can be code reviewed.

from all-in-one-seo-pack.