Plots2: Vertically center align menu button and title in header

[nstjean]

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

🤔 What you will need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

📋 Step by Step

• [ ] 🙋 Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!

• [ ] 📝 Update the file _header.html in the plots2 repository (press the little pen Icon) and edit the line as shown below.

See this page for some help in taking your first steps!

See how the Public Lab title and menu button aren't vertically centered in the screenshot of the https://publiclab.org navbar header? Let's fix that!

https://github.com/publiclab/plots2/blob/a0861eb62c70e819f7b4804a5608c8e7d13c6530/app/views/layouts/_header.html.erb#L136

Change to this:
<li id="md-ham" class="d-xl-none dropdown d-flex align-items-center">

• [ ] 📝 Update the file style.css in the plots2 repository (press the little pen Icon) and edit the line as shown below.

https://github.com/publiclab/plots2/blob/a0861eb62c70e819f7b4804a5608c8e7d13c6530/app/assets/stylesheets/style.css#L207-L220

Change those lines to this:

#header .navbar-brand {
  color: white;
  font-family: "Junction Light", lucida grande,lucida sans console,sans-serif;
  font-size: 22px;
  line-height: 22px;
  padding-top: .5rem;
  padding-bottom: .2rem;
}

@media (max-width: 768px) {
  #header #brand,
  #header #brand-compact {
    /* padding-top: 22px; */
    padding-right: 4px;
  }
}

The final result should look like this at screen widths between 768px and 1200px:

• [ ] 💾 Commit your changes

• [ ] 🔀 Start a Pull Request. There are two ways how you can start a pull request:

1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

2. You can also edit files directly in your browser and open a pull request from there.

• [ ] 🏁 Done Ask in comments for a review :)

Please keep us updated

💬⏰ - We encourage contributors to be respectful to the community and provide an update within a week of claiming a first-timers-only issue. We're happy to keep it assigned to you as long as you need if you update us with a request for more time or help, but if we don't see any activity a week after you claim it we may reassign it to give someone else a chance. Thank you in advance!

If this happens to you, don't sweat it! Grab another open issue.

Is someone else already working on this?

🔗- We encourage contributors to link to the original issue in their pull request so all users can easily see if someone's already started on it.

👥- If someone seems stuck, offer them some help! Otherwise, take a look at some other issues you can help with. Thanks!

🤔❓ Questions?

Leave a comment below!

[nstjean]

This is for @shailzaa :) Thank you!

[shailzaa]

This is for @shailzaa :) Thank you!

Thanks. I'll start working on this.

[ivaibhavkr]

I'm really interested in this this issue. Can I claim it?

[nstjean]

Hi @ivaibhavkr ! Someone is already working on this issue, but you can sign up to get a first time issue here if you would like: https://github.com/publiclab/plots2/issues/6206 Thanks and welcome!

[Anjalizi]

could you please assign me an FTO issue?

[nstjean]

could you please assign me an FTO issue?

Hi @Anjalizi ! The best place to find a FTO is in this thread: https://github.com/publiclab/plots2/issues/6206 If you post your request there they will add you to the list!

[avinash080]

Hi is the issue open ? I am new here . so i want to make contributions

[Angelvicks]

Hello Please i will like to work on this issue for outreachy 2020

[nstjean]

@Angelvicks If you still need a FTO to complete please go ahead!

[Angelvicks]

@nstjean Thanks for your response. But am not quite sure to know an FTO can you tell me please ?

[nstjean]

@Angelvicks Oh yes! FTO = "first timers only". You will see them tagged by that name! https://github.com/publiclab/plots2/labels/first-timers-only We ask everyone joining our community completes one as a really easy way to get started. :)

[Angelvicks]

@nstjean thanks

[jywarren]

This is still available! Thanks all!

[jywarren]

Hi! If you want to start with #6851, that'd be great! Thanks for you help
and if you'd like another issue after, please let me know!

On Thu, Oct 8, 2020, 8:36 AM Emekoma Hafsah [e-mail]
wrote:

Hi. Can I work on this for the outreachy internship?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/plots2/issues/6446#issuecomment-705538545,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAF6J54TLVJJJCMC5GEHP3SJWW4RANCNFSM4I73HFOA
.

[jywarren]

Hi, just checking if you've gotten stuck on this at all, or if I could help in any way? Thanks!

[madhhuurrii]

Hii @jywarren, can I work on this issue as a first timer?

[SharmaTanish]

Hi @nstjean ! I am very exited to work on this issue , if it is still open . I have learnt web development from coding ninjas and all my basic concepts are clear also made Major project using CSS ( uploaded on linkedin ) . I am very hardworking and have scored 94.2% in 12th . You can also go through my linkedIn profile - https://www.linkedin.com/in/tanish-a54b771b3 .
Looking forward for your reply .

[RuthNjeri]

Hi @SharmaTanish thanks for reaching out, I have assigned it to you

[SharmaTanish]

Thank you @RuthNjeri for replying . Please tell me what to do and how ?

[RuthNjeri]

@SharmaTanish you can begin by going through the contribution guidelines and steps here https://github.com/publiclab/plots2#contributing

[SharmaTanish]

The index.html file is not same as the official webpage of publiclab !
Where is the HTML file which opens the page in which we have this issue ?
The index.html file looks like :

[SharmaTanish]

@RuthNjeri ?

[RuthNjeri]

Hi @SharmaTanish, please allow me to get back to you on this by Tomorrow/Wednesday.

[RuthNjeri]

Hi, @shaibrown5 the header is displayed in the /dashboard URL...
You need to log in or create an account to view it https://publiclab.org/dashboard

If you have set up the database locally using the instructions on the README on the repo, you can login using

username: user, password: password
username: moderator, password: password
username: admin, password: password

Let me know if this makes sense.

[SharmaTanish]

I have installed "ruby" as well as "rails" in my system but still I am not able to run ".html.erb" file on browser as it shows code language is not supported or defined .
Also I have enabled "Windows for Linux" setting for "bash" but still I am not able to install "rvm" .
@RuthNjeri please help me out of this ( also I have created publiclab account as well ) ?

[RuthNjeri]

Hi @SharmaTanish, please share some screenshots.

Also, are you running the application locally on your terminal rails s for the rails server and redis-server for the redis server?

There is a comprehensive installation guide https://github.com/publiclab/plots2#installation that describes the proper installation steps. Have you gone through it?

[SharmaTanish]

Is it necessary to have dual bot , i.e . both Ubuntu along with windows I have , to run .html.erb file ?
@RuthNjeri

[RuthNjeri]

You do not require a dual bot. The .html.erb file is not run individually, you have to set up and run the whole application using passenger start as described in the contributions guidelines or rails s then redis-server

Have you followed these installation steps? https://github.com/publiclab/plots2#installation

[RuthNjeri]

Alternatively you can contribute via the browser using Gitpod https://gitpod.io/#https://github.com/publiclab/plots2

[SharmaTanish]

Thank you @RuthNjeri for introducing Gitpod to me !
I have changed the style.css file as per the instructions provided at top of this issue , but there @nstjean had mentioned that in header.html.erb we need to change <li id="md-ham" class="d-xl-none dropdown"> this line , but in code base there exist no as it is line but there is slight difference ,i.e., in place of "xl" there id "lg" that's it as you can see in screenshot below .
So should I replace that line only or not .

[RuthNjeri]

Hi @SharmaTanish thanks for sharing that, it would seem that it was changed in an effort to make it more responsive https://github.com/publiclab/plots2/issues/6995. You can test the changes to see if the current update from this issue makes it a much better solution in responsiveness than what currently exists. Let me know.

[SharmaTanish]

@RuthNjeri I think there is no need of updating header.html.erb file , our changed line hardly make any difference in output , there is negligible change . So I think the already written <li id="md-ham" class="d-lg-none dropdown"> this line is approperiate .
So can I make pull request now?
You can see the output in below screenshot !

[RuthNjeri]

Hi @sharmamansi, thanks for looking into this, if you think the existing line is appropriate then I think we can close this issue without creating a Pull Request for it since the new changes are not needed and it is already responsive. Would you like to pick up another First timer issue? and I can close this issue

[SharmaTanish]

But @RuthNjeri the vertical alignment of brand name is not proper before , i.e. , we need not to change the header.html.erb file only but we must change style.css file for perfect responsiveness . According to me as we have made changes in some lines of style.css , so we should must merge that changes as it is at least better than the previous .
So I request you to please not close this issue before merging these small changes and I should make pull request now ?

Thank you

[SharmaTanish]

Also @RuthNjeri I want to ask that as you can see in the screenshots i send , that public lab website there come in preview is not same as the actual website https://publiclab.org/ . So to make more contributions , how would we able to relate it with the actual website . Please tell me the way by which in preview i can able to see the actual website ?
Also please merge the pull request that i will make regarding this issue .

Thank you

[RuthNjeri]

Hi @SharmaTanish, that's alright. Please share the link to the PR you have created.

[SharmaTanish]

@RuthNjeri please have a look to this pull request , if you have not yet ?

Thank you

[SharmaTanish]

Hi @RuthNjeri , can you please check why the Gitpod test is not passing of of above pull request?

[RuthNjeri]

Hi @SharmaTanish, sorry for the late response, I am just clocking in now....I see that your PR was merged. Congratulations 🎉 and thank you for working on this.

[SharmaTanish]

Thank you @RuthNjeri for your wonderful guidance and support !