Improving Frontend

[ritwik12]

At present, up-for-grabs.net is great content wise and is also good in front-end, But I can see a lot of potential for improvement as there are so many great web designers who can make up-for-grabs.net a very beautiful website. I would recommend awwwards for getting ideas.

Few points to work on as per @camilosampedro suggestions in the comments:

• [ ] Add task filter by last update (First of all active).
• [x] Сhange layout of the page, in particular, move filters to the side menu. Thereby solving the problem of unused space.
• [x] Add dark (night) mode.
• [ ] Fix dark mode contrast.
• [ ] Set nicer colors and fonts.

[NjalTheKnut]

I have an idea that might help tremendously. I could attempt to implement a scrolling "back to top" button that would allow users who have scrolled way down the page to get back up to the search bar without needing to scroll all the way back manually. Other suggestions may come to me as I use the site.

[ritwik12]

@NjalTheKnut That will be a good feature, go for it.

[sunilkumarvalmiki]

hi,can i undertake the work proposed by NjalTheKnut...

[NjalTheKnut]

I actually found out how to do it recently. I am willing to do it and have a second person go over the code to ensure I am doing things in the best fashion possible.

Being somewhat inexperienced with remote team mechanics, I would appreciate a little guidance acquiring the code and making certain I don't foul up production branches in the VCS.

Also, am I allowed to introduce jQuery, if it is not already used in this project?

[sunilkumarvalmiki]

up-for-grabs.net-gh-pages 2.zip

i have completed the task...

[ritwik12]

@sunilkumarvalmiki Can you host this on your fork? it will be easy to review that way.

[sunilkumarvalmiki]

yes, i forked it to my profile.

[ritwik12]

@NjalTheKnut I meant if you can host this as github pages on your fork so that we can see it live.

[Supreme-Kai]

@ritwik12 Hey there! I actually wanted to make some changes to the front-end, but I noticed the _site folder holding the index.html and stylesheets is in git.ignore. Just wanted to know if I can "un-ignore" the file or if not, how I can proceed.

[shiftkey]

@Supreme-Kai

Hey there! I actually wanted to make some changes to the front-end, but I noticed the _site folder holding the index.html and stylesheets is in git.ignore. Just wanted to know if I can "un-ignore" the file or if not, how I can proceed.

Those files are not supposed to be committed, as they are regenerated by Jekyll - the engine underneath GitHub Pages.

If you want to test things out on your fork, this guide should help ensure it is configured right. Alternatively, you can try and get Jekyll running locally or use the included Dockerfile in this repository.

[Supreme-Kai]

@shiftkey Hey thanks for responding. I had the environment running locally already, I was just testing the index and stylesheet from the _site folder and so naturally my changes weren't showing when I ran git status. My fault. That said can I be assigned to this? I have some ideas on how to tweak this style wise.

[shiftkey]

That said can I be assigned to this? I have some ideas on how to tweak this style wise.

@Supreme-Kai the assignee field is based on organization membership, but feel free to work on this and propose changes in a PR

[Supreme-Kai]

Oh right, got it. Awesome, I'll do that. Thanks.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ritwik12]

These two white spaces at the sides always trouble me :P Let's use that empty space a lit bit to improve readability.

How about if we just increase the Centre block on both sides so that The projects with Long description will at least get in few lines than so many lines as shown in this image.

Also, we can improve the button on the bottom right corner to a good design. For now, it is simply a bold look.

[rustmn]

@ritwik12 I have some ideas for improving FE of the project and enhance user-experience:

1. Add task filter by last update (First of all active).
2. Сhange layout of the page, in particular, move filters to the side menu. Thereby solve the problem of unused space.
3. Add night-mode (many people do not like to look at the white screen).
4. Set nicer colors and fonts.

I can write this in TypeScript using react / next.js, if you will allow. (I know that using a framework for such a simple project can be overkill but maybe he will grow into something more?)

[ritwik12]

@rustmn I think it will be good. Can you please share a design or something to see how that would look like before actually making it. @shiftkey can you suggest the improvements for the front end that we would want to see on the site.

[rustmn]

@ritwik12 ok, I will make PSD layout.

[rustmn]

@ritwik12 okay... something like this. Of course, design is not final and i'm open for your suggestions. Also, current logo is not suitable for the dark theme, if you have .eps / .ai or .svg of it, i can fix this.

[ritwik12]

@rustmn That's good. From my point of view I would love to have the old look and improve that. The current look is awesome and lets improve that. For Dark mode. It will be good if we have a toggle or button to switch between Dark and Light modes of the site. Will prefer the Light mode for default though.

I really like the left part, Your views @shiftkey for left side area.

[ritwik12]

@rustmn If it's not a long work, can you try and add the left part to the present website and share how it looks. Check the tone of color for whichever looks better there. I guess black would suite too

[rustmn]

@ritwik12 ok, done. It might look something like this: view - 31.131.27.205:4000 changes - https://github.com/rustmn/up-for-grabs.net/commit/7697b7397b1661dd4b9a087fc2646f33d9a27ed9

The search does not work correctly yet, because I have not figured out how it works.

Also, when I open your site, my screen locks for 2 seconds, due to the fact that all projects are rendered at the same time. I can fix this. If this is done for web scrapers, I can make api for this.

[ritwik12]

@rustmn Not able to see the view :(

[rustmn]

@ritwik12 hm... strange.

Then so: https://rustmn.github.io

[ritwik12]

@shiftkey This is a raw structure, can you suggest what to use and improve in this https://rustmn.github.io

Also, if you have some design to improve the Front end. Please share.

[ritwik12]

@rustmn Thanks a lot. For now left side looks pretty good but isn't matching with the current design :(

Also, the right side is stretched a lot. better keep the original only.

[ritwik12]

@Jai2305 Thanks for the contributions. I wanted to change the current Look of the site which is mostly focused at the center. If you are interested. Please have a look at that.

[Jai2305]

Hi, @ritwik12 first of sorry for late reply, firstly if you have scrolled down to say 50 projects , u have to come all the way up again to use different filters (I know there is a button Scroll to Top) but still the website should have a fixed navigation bar or menu which stays on top ( let me know your opinion ) , secondly as you said currently now the website is just displaying content in the center leaving too much space on the left and right , which is not my personal preference as in web design , but as we know website is made using jekyll and is using a template for rendering pages, now in my opinion what we can do is

• use another template or
• make changes in / customize the current template ( which seems to be much more safe than the previous one ) let me know your thoughts

[ritwik12]

@Jai2305 Makes sense for having to scroll up all the time. it is always better to have Menu bar or pagination at least. we can use another template also and customize the current one too. Though a lot of automated stuff is currently going on with the current template so changing it would mean a lot of work. It is better if we just change the styling and all to get it done with ease.

[Jai2305]

Then we should customize the current template , I will try to come up with a design , it may take a while though, so I guess should make this open for everyone interested , if anyone comes up with the a front end design then they can post a message here or open a pull request and tag this issue within, so that people who are interested can work together

[ritwik12]

@Jai2305 Sure, please take your time. yes this is open to everyone. Any can contribute and work together.

[elvinuchendu]

Hi, is this issue still ongoing? I would like to take part.

[ritwik12]

@elvinuchendu Yes, for now @Jai2305 showed interest and if you have any ideas. We would be happy if you can contribute.

[elvinuchendu]

@elvinuchendu Yes, for now @Jai2305 showed interest and if you have any ideas. We would be happy if you can contribute.

Awesome! Are you able to assign this to me?

[ritwik12]

@elvinuchendu This Issue consists of multiple parts so won't be able to assign as others might be working too. but since you called out here. Consider it assigned. Just call out what you are working on so that someone else will not be working on the same at this time.

[ghost]

@ritwik12 I have some ideas for improving FE of the project and enhance user-experience:

1. Add task filter by last update (First of all active).
2. Сhange layout of the page, in particular, move filters to the side menu. Thereby solve the problem of unused space.
3. Add night-mode (many people do not like to look at the white screen).
4. Set nicer colors and fonts.

I can write this in TypeScript using react / next.js, if you will allow. (I know that using a framework for such a simple project can be overkill but maybe he will grow into something more?)

You are definitely right about the dark mode option. IMO, I think a dark mode option should be the default one.

[ghost]

By the way, on the dark mode, the contrast really isn't that great (especially for the logo).

[ritwik12]

@ConnorAhern Those points are good to have, I have added those in the first comment of this issue as action items.

[ritwik12]

@ConnorAhern If you are up for working on this, please feel free to drop samples of the work or PR.

[ritwik12]

By the way, on the dark mode, the contrast really isn't that great (especially for the logo).

@ConnorAhern Yeah, it needs to be worked on. Thanks for the nudge.

[ghost]

@ConnorAhern If you are up for working on this, please feel free to drop samples of the work or PR.

Alright!

[ghost]

Do we want the layout to look like this as @rustmn mentioned? I could start on that, but we'd need to get other PRs merged first so that there aren't merge conflicts.

[ritwik12]

@ConnorAhern This is one of the good ideas, if you have other ideas it would be good to go with them. if you don't want to start from scratch and this looks good to you, it should be fine too.

[ghost]

@ConnorAhern This is one of the good ideas, if you have other ideas it would be good to go with them. if you don't want to start from scratch and this looks good to you, it should be fine too.

I'd be happy working on implementing that design. It looks great to me.

[ritwik12]

Go with it please @ConnorAhern

[ghost]

Alright. I can start with it today.

[ghost]

Do we want the layout to look like this as @rustmn mentioned? I could start on that, but we'd need to get other PRs merged first so that there aren't merge conflicts.

Does anyone know what font is used in this?

[ritwik12]

Current up-for-grabs.net font is good, lets keep it that way for now.

[ghost]

Current up-for-grabs.net font is good, lets keep it that way for now.

Alright

[ghost]

Can we do some kind of survey of the users of the site and ask if they prefer light mode or dark mode as a default?