Improve Design and Layout

[smcgregor]

(This is intended to be an introductory issue, teaching new people how to use the build system)

Some options for making improvements are:

• Improve the display of information on the help page.
• Improve the organization of the options page on the Chrome extension.
• Improve the metadata section.
• Anything you don't like!

I am intentionally being vague in what can be improved since you are new to the project and will have better ideas of what needs improvement than someone who has already contributed. If you want to fix something specific, then I suggest you move the information block so it snaps to the footer of the page instead of floating up to meet the content. You can see this on the "New Message" page, when you make the window tall.

You may need to read about Twitter Bootstrap to make changes. Bootstrap is a "responsive" library, meaning it helps change the layout of the page in response to many different screen resolutions.

[prastut]

Redesign of Options page.

Reasons to change:

• Felt there were only 4 options and people mostly browse on 15" inch to 17" and they shouldn't scroll just for 4 simple options.
• Symmetry influenced by homepage (the icons).

Some more suggestions:

• Use of Switch or Toggle button for changing state of Privly button. http://www.bootstrap-switch.org/examples.html

[smcgregor]

Hi @prastut! I think this is an improvement, so long as you implemented it with Bootstrap's responsive columns. Want to open a PR?

[prastut]

@smcgregor
Yup used Bootstrap's responsive columns as effectively as possible. The horizontal dividers have the class visible-xs and visible-sm for small devices.

I would love to but I am facing a little difficulty in understanding the workflow. I will elaborate the steps, correct me where I am wrong.

• I first forked and cloned the privly-chrome repo because I wanted to work on chrome development for Privly. Got the local extension setup and working.
• Later I realized the issues I intended to work upon where in privly-applications repo. So I forked and cloned it and started working on it.
• I realized that privly-applications alone can't build the full chrome extension. Nevertheless started working using the following procedure
  • Edited the particular subtemplate and not the HTML (as mentioned in the privly dev pages).
  • Run python build for chrome to see the changes.

I think I have some misunderstanding since the dev pages say to clone the platform related repo (in my case chrome) recursively.

[smcgregor]

You should clone one of the projects that incorporate privly-applications as a submodule. When you use the --recursive flag, privly-applications will automatically be cloned into a folder within the repo (privly-applications is the name of the folder within privly-chrome). At this point you will want to change the remote of the privly-application module to be the remote of your fork on github of privly-applications. Now you can commit to your local copy of privly-applications and push it to your fork so you can make a pull request. Does this make sense?

[prastut]

@smcgregor Makes sense! Thanks :D

I cleaned my branch but had a doubt. If I build the system, there are a lot changes shown amidst the ones I actually did. Is this normal?

[irdan]

@prastut That is normal. Do not commit any built html files, just the templates.

[prastut]

Please review PR #357.

Should I rework the rest of the pages mentioned in the issue or leave it for the others who would be coming in, and move to either another Level1 issue or Level2 issue? Let me know.

[smcgregor]

You can make more templating changes if you like, but it is generally good to move on to the higher levels if you understand what is happening with the lower ones.