Plots2: [Enhancement]On home page links in the footer area stand out

[afzal442]

Please describe the problem (or idea)

What happened just before the problem occurred? Or what problem could this idea solve?

On the home page, the footer section shows different from other pages' footer which stands out in this sense.
Compare both for more details.

Also, divide the links section into two lists,

What did you expect to see that you didn't?

The result should be as below.

Please show us where to look

Compare https://publiclab.org/ with https://publiclab.org/wiki/welcome

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[welcome[bot]]

Thanks for opening your first issue! This space is protected by our Code of Conduct - and we're here to help.
Please follow the issue template to help us help you 👍🎉😄
If you have screenshots or a gif to share demonstrating the issue, that's really helpful! 📸
Do join our Gitter channel for some brainstorming discussions.

[Elukoye]

@afzal442 can I work on this. ?

[afzal442]

Sure you can, let me know if you need any help.

[afzal442]

@Elukoye plz draft a PR for this to get some reviews.

[cgrkzlkn]

@afzal442 @Elukoye i would like to work on this too, but i am new to this project, it would be great if someone help me with it (which files to change for example). I already installed plots2. As i see now, footer not visible in local development.

[afzal442]

Hi @cgrkzlkn, welcome here.

Could post any screenshot of what you see on your local machine? Thanks.

[cgrkzlkn]

Thanks @afzal442 , here is screenshot:

[afzal442]

Thanks for sharing. Let me work around it!

[afzal442]

Hello @cesswairimu! could you help with this?

[afzal442]

As I can see footer tag is defined on main page as below:

footer a{
color: #444
}

which is not on other pages.

[afzal442]

So this makes the difference!

[cgrkzlkn]

As I can see footer tag is defined on main page as below:

footer a{
color: #444
}

which is not on other pages.

In which file that definition is?

[cgrkzlkn]

As i see in home.html.erb, footer is cached:
<% cache('feature_home-footer', skip_digest: true) do %> <%= feature("home-footer") %> <% end %>

And in the DATA_MODEL.MD:

Features, of type "feature", are blocks of content which can be included (hard-coded) throughout the site, but can only be made by admins.

So it means we can't change it? @afzal442

[Elukoye]

@cgrkzlkn ,go ahead and work on it ,will look at it and let you know what I think

[afzal442]

As I can see a element of footer tag is defined on the main page as below:

footer a{
color: #444
}

which is not on other pages.

@cesswairimu @Elukoye what do you think?

[cgrkzlkn]

@Elukoye Is there any improvement on the subject?

[afzal442]

@17sushmita could you help with this?

[17sushmita]

Hi @afzal442, Thank you so much for bringing this out. I just checked out the issue. You are in the right direction about this

As I can see footer tag is defined on main page as below:

footer a{
color: #444
}

which is not on other pages.

But, the issue I can see is that this styling is coming from a CSS library we have imported in application.css. So, I'm not sure if we can change/remove these lines. But we can do one thing that we add

footer a {
    color: #007bff !important;
}

in our code. This will override the previous styling of footer a. Although, this will work if we add this line to application.css, but I'm not sure if it is the most appropriate file to add our code in. You may create a new file and require it in application.css too or you can add it to some other appropriate file.

See the output below after adding it to our compiled application.css file (on the right)

Hope it helps. Thank you :)

[afzal442]

Thanks! That really makes sense. I was also wondering if we can override the CSS property.
Steps to be taken:
Create a file in this folder https://github.com/publiclab/plots2/tree/main/app/assets/stylesheets namely footer.css and include the CSS tag.
And require it in this file https://github.com/publiclab/plots2/blob/main/app/assets/stylesheets/application.css

Or investigate any proper file to add that CSS tag.

[cgrkzlkn]

@17sushmita @afzal442 Thanks for help! Now i understand how we'll change the style of the footer. Is that okay if we add that CSS tag to style.css ? Other footer elements are in that file too.

[17sushmita]

@cgrkzlkn, Yes, styles.css seems good to me. Thank you for investigating!!🎉

[cesswairimu]

Great collaboration here :tada: :tada: , thanks so much all and sorry I missed this, This is looking great