search

libertysoft3 / saidit

The reddit open source fork powering SaidIt
https://saidit.net
Other
228 stars 40 forks source link

Visual Revamp #57

Open matdombrock opened 5 years ago

matdombrock commented 5 years ago

This is in reference to the Ask Saidit Thread (I am 0eye)

Link to the banner/icons used in the demo

Here is the CSS:

/*
This code inherents the license from the SaidIt project
https://github.com/libertysoft3/saidit/blob/master/LICENSE
Author: 0eye
*/
#header, .footer-banner{
  background-image:url('http://138.68.219.81/img/saidit/banner.jpg');
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
}
.footer-banner{
  background-position:center bottom;
  min-height:0;
  height:5px;
}
#header-img.default-header{
  height:15rem;
  background-position:98% 10%;
  background-size:200px;
}
.arrow.up{
  background-image: url('http://138.68.219.81/img/saidit/light.png');
}
.arrow.upmod{
  background-image: url('http://138.68.219.81/img/saidit/light-set.png');
}
.arrow.down{
  background-image: url('http://138.68.219.81/img/saidit/fun-alt.png');
}
.arrow.downmod{
  background-image: url('http://138.68.219.81/img/saidit/fun-set-alt.png');
}
.thing .title:visited, .thing.visited .title {
  color:#ff7500;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #999999; 
}
::-webkit-scrollbar-thumb {
  background: #5A90C5; 
}
::-webkit-scrollbar-thumb:hover {
  background: #ef842d; 
}

Issues pointed out by the community:

Other potential issues:

Moving forward:

At this point I think I'm looking for more feedback from the dev team on the above points. I'm willing to try the PR myself but I don't have any knowledge of the back-end code. How hard is it to set up a development environment? From what I've heard its a PITA.

campersurfer commented 5 years ago

Just sent you a PM on saidit. You're welcome to use my brand new installation as a dev environment -- I have no users yet and I'm interested in experimenting with design. However, I understand if you'd rather set up a dev environment of your own. It's a little tricky, but prob much easier for you than it was for me. The hardest part is probably setting up a server with Ubuntu 14.04. You can see my install here: https://portcity.online

libertysoft3 commented 5 years ago

It's "not that bad" setting up a dev environment if you're comfortable with using virtual machines and editing your hosts file and stuff like that. If you want to avoid the hassle, you can just edit the git cloned source code without running it, then submit a PR. The main two files you might want to edit are:

https://github.com/libertysoft3/saidit/blob/master/r2/r2/public/static/css/theme-custom.less (override any styles already present in reddit.less)

https://github.com/libertysoft3/saidit/blob/master/r2/r2/public/static/css/themes/daymode.less

As for all of the community concerns, we should just do icons and maybe link colors to start with. And why recreate icons from scratch? There's probably some CC/open source ones out there that you could work with.

I took this color from the 'new message' icon, should it match the color of the highlighted tab?

There is a lot of #FF4500/orangered going on. It's got to be all that color or all of your new orange. I'd say whichever one looks better in night mode. Or use #FF4500 because it's less effort and css overrides.

matdombrock commented 5 years ago

Environment

Alright. Thanks. I'm going to try to get an environment setup over the next week or so as I have time. If I have too many issues I'll take @campersurfer up on their offer, but I think having it on my local machine would be a bit easier. I have a reasonable amount of experience with this kind of thing so if it's "not that bad" I'll give it a shot.

Maybe I could also just make a new branch or fork and have @campersurfer pull it and test that the changes work. It should be a fairly simple thing to implement so I think there is a fairly good chance I will get it right the first time.

Moving Forward

I'm totally down to just do a few small changes (icons and link colors) and then go from there.

Icons

My concern with using icons that were not created from scratch is that sometimes icons that make it into open source icon packs are taken from paid packs or visually so similar to them that it doesn't matter. Initially I had selected some icons from an open-source icon pack but it turned out they were visually very similar to icons used in iOS.

Normally this isn't something I pay too much attention to (if the author says its open-source or CC I trust them), but this site has the potential to be really big some day in my opinion. Basically I'm just afraid that if we don't make the icons from scratch that they could be "called out" at some point as being something we technically don't have the rights to.

I am not a lawyer and have no legal background, so I really don't know what level of concern we should actually have here. I was just thinking that making the icons from scratch shouldn't take that long and could save some trouble down the road. However, if we can find some icons from a reputable open-source pack and everyone else is happy with that, I don't see an issue.

Orange

So the orange I used originally is the orange from the new message icon (The orange envelope). I didn't realize that wasn't the same shade used by the rest of the site. I agree though that it should just be the #FF4500 color. That will work better on a light theme anyways because it is a slightly darker shade than what I had originally (so more contrast against white).

libertysoft3 commented 5 years ago

Sounds like a plan. I'm also willing to test out your changes in my local environment too. Regarding the icons, totally up to you. I'm not worried about legal ramifications whatsoever, this is a very fringe code base, and if something came up the icons could be quickly swapped out. A good faith effort on our end is good enough imo, whether it be from scratch or from open source. I don't have any icon links handy but I know they're out there somewhere. Let me know if you want a hand finding some.

I used originally is the orange from the new message icon

Hmmm, I didn't realize that either, interesting design decision by Reddit there. Cool, #FF4500 sounds good. Thanks again.

CrystalVulpine commented 2 years ago

It's just CSS, so you should be able to test it on the actual site with your web browser. You don't need to set up a whole new test instance of saidit unless you're changing the actual execution, here you're just editing static files. The exception would be if you're using dynamic CSS templates, but I don't see anything like that in your CSS.