Better project pages

[EmilyDirsh]

I think we could do a lot to improve project pages. Some ideas:

• Project description
• Slideshow presentation of files
• Include stats i.e. number of forks, number of files, activity, comments, followers, etc
• Search within a project
• basic per-project visual customization options, a la trello boards - custom backgrounds and custom text colors.
• link to any relevant blog posts
• moonshot: custom URLs: could be subdoms (myproject.myglitter.net) or full user owned domains (myproject.com)

Essentially, I'd like to see the project pages become nice landing pages for the project, that give anyone coming into the page a good feel for what the project is about, and an overview of what is happening with the project.

@sarupbanskota, going to assign this to you, so you can add this to your wireframes.

[sarupbanskota]

Oh sure, I'll also talk to Ryan about them. Although I can only get to this once I'm back home :-)

On Fri, Apr 4, 2014 at 3:48 PM, Emily Dirsh notifications@github.comwrote:

I think we could do a lot to improve project pages. Some ideas:

• Project description
• Slideshow presentation of files
• Include stats i.e. number of forks, number of files, activity, comments, followers, etc
• Search within a project
• basic per-project visual customization options, a la trello boards - custom backgrounds and custom text colors.
• link to any relevant blog posts
• moonshot: custom URLs: could be subdoms (myproject.myglitter.net) or full user owned domains (myproject.com)

Yay, these points are already getting me excited. I was also thinking of an "inspirations" column (from Mo's blogs), but I'm currently not to sure how to go about them.

Essentially, I'd like to see the project pages become nice landing pages for the project, that give anyone coming into the page a good feel for what the project is about, and an overview of what is happening with the project.

@sarupbanskota https://github.com/sarupbanskota, going to assign this to you, so you can add this to your wireframes.

Makes sense. count on me to do a good job :-) Thanks!

Reply to this email directly or view it on GitHubhttps://github.com/glittergallery/GlitterGallery/issues/105 .

[EmilyDirsh]

@sarupbanskota I'm going to take you off of this as the assignee. I think this might be a good enhancement for GSoC, so let's open it up to others if they're interested.

[sbagroy986]

Do you think something like this would look good for the representation of files? http://tympanus.net/Tutorials/ResponsiveImageGallery/

[EmilyDirsh]

@sbagroy986 - that's pretty nice - it could definitely work. Feel free to work on this if you want, just keep in mind this is a pretty big change to the project page, and needs some design work first.

By which I mean, don't start jumping into implementation - first put together some wireframes or mockups of the page, and post them here to get feedback.

[sbagroy986]

I was thinking I could work on this as well as some of the other changes you mentioned here during the summer (GSoC if i get selected), since as you said, this is a pretty big change. Also with the heavy college course load, I don't think I'd be able to work on this properly before summer, either way. I'd definitely want to work on it tho!

[EmilyDirsh]

@sbagroy986 makes sense to me. This would definitely be a good fit for GSoC! :)

[charithhewage]

strong>@sbagroy986</strong If you don't mind I would like to work on this. I am Charith, Final year student at Faculty of Information Technology in University of Moratuwa - Sri Lanka. I have forked this repo and tested in locally (some bug fixes as well). By considering UI/UX concepts I designed some mockups here :) These templates were designed by myself considering the Github, Bitbucket and GitLab. Further more, I used Bootstrap.

But these templates are quite different from sbagroy986's idea. Since this is a github (saas application) this templates will be more effective (user can get the idea and comments easily). strong>@EmilyDirsh</strong, strong>@sarupbanskota</strong If you can kindly have a look into my repo and accept the color theme and template i can continue the work :). Since this is a html design i can finish up this before the summer starts :)

[sbagroy986]

I feel that the design I suggested could very easily be as effective. IMO, I think the ones I suggested are better looking, but its your call Emily and Sarup. I 've already put this in my proposal, so please let me know :)

[charithhewage]

@sbagroy986 Sorry for the inconvenience. That image viewer you mentioned is very nice too.. Then we can continue on that. I just suggest :). Sorry again :)

[sbagroy986]

No problem @charithhewage ! Let's hear what Sarup or Emily have to say and we can go about this accordingly then :)

[sarupbanskota]

Hey everyone - sorry about being late on this thread.

@charithhewage your work on the demo file is clearly more consistent with the popular GitHub interface and the mockups seem fine to me. However, implementation-wise, we intentionally want to stay away from Bootstrap.

Reasons:

• we want to keep the markup separate from the presentation. Bootstrap grid is class name based, which means you specify presentation information on the markup. For starters, that breaks the idea of keeping presentation and structural information separate. Furthermore, when you want to iterate - let's say from a two column layout to a three column one, you'll attack the markup. That's not ideal, in addition to the potential risk of meddling with the actual data you want to show.
• Personally, I haven't done mobile first with Bootstrap before, but my understanding is that it forces you to download styles/content specific to larger devices when viewing on smaller ones.

Not using Bootstrap doesn't come without cons:

• Lesser people don't use Bootstrap - so relatively lesser awareness - relatively lesser support
• Development is relatively slower initially because doing things the other way round isn't plug and play

Currently, we use http://jeet.gs for any grid oriented stuff and the rest was written from ground up. Jeet has everything we currently need, but since we aren't at a completely complex phase yet, as a lower priority enhancement, I'd like to switch to Bourbon or Compass - they're more popular and have many plug and play stuff we'll find handy. Along the way, improving UI isn't a bad idea.

@sbagroy986 Just suggesting, for the images gallery, we could do something like: http://sarupbanskota.github.io/peanuts/watt-a-graphy/photos.html. It's responsively done using CSS flexboxes & CSS3 columns and doesn't have polyfills at the moment, so try it out on a recent Chrome/FF. I think the slideshows would go well as lightboxes. I had done a responsive simple CSS-only implementation here: http://sarupbanskota.github.io/peanuts/ithaka. Click the menu button on the top right. Of course this one is text, but it shouldn't be difficult getting images in there :)

Now again, I hate to break the excitement, but I'll still go back to square one and say that I'd like to see this come through after https://github.com/glittergallery/GlitterGallery/issues/161 and https://github.com/glittergallery/GlitterGallery/issues/162.

[charithhewage]

@sarupbanskota Thank for your comment. I followed Github,Gitlab,bitbucket to manage the content. Yes, As you said, after making the app full functional we can enhance the UI :) I will study http://jeet.gs and Bourbon, Compass as well. :)

[EmilyDirsh]

@charithhewage, your mockups are a bit too much like github IMO. We don't want to recreate the github interface, since we're catering to much different audiences and use cases.

[charithhewage]

Yes @EmilyDirsh , After reading sarup's comment i studied the current template with http://jeet.js framework. So my template should be changed. Now i am working on some bug fixes and writing testcases. As well as the existing code can be refactored more. So i will update you after finishing this :)