up-for-grabs.net
up-for-grabs.net copied to clipboard
up-for-grabs
Improving Frontend
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.
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.
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 Can you host this on your fork? it will be easy to review that way.
@NjalTheKnut I meant if you can host this as github pages on your fork so that we can see it live.
@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.
@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.
@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.
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
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.
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}
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.
@ritwik12 I have some ideas for improving FE of the project and enhance user-experience:
- Add task filter by last update (First of all active).
- Сhange layout of the page, in particular, move filters to the side menu. Thereby solve the problem of unused space.
- Add night-mode (many people do not like to look at the white screen).
- 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?)
@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.
@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.
@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.
@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
@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.
@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.
@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.
@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.
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
@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.
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