#47 Add hamburger menu for side navbar when using a mobile device
Opened 3 years ago by harshitmodi. Modified 2 years ago

  • Add the hamburger menu for navigation links while on mobile

Metadata Update from @jonatoni:
- Issue tagged with: newcomers

2 years ago

Hi! I am an Outreachy applicant and I would like to work on this :)

Hello, my name is Eloisa, I am an Outreachy applicant and I would like to work on this or any other tasks related to changes on the website, please let me know if there's anything I can do!

Looking forward to start contributing to this project!

@reby1 feel free to work on it, if you have questions ping me.

@eloisasmorais can you please check another issue, especially those that have the tag newcomers https://pagure.io/fedora-commops/fedora-happiness-packets/issues?status=Open&tags=newcomers - I'm adding some other issues now as well. Ping me if you need help :)

Metadata Update from @jonatoni:
- Issue assigned to reby1

2 years ago

Metadata Update from @jflory7:
- Issue untagged with: good first issue
- Issue priority set to: needs review (was: awaiting triage)
- Issue tagged with: improvement, needs info, type - frontend

2 years ago

I drafted contributing guidelines based on recent feedback for new contributions to fedora-happiness-packets. This change should be submitted to our upstream mxsasha/happinesspackets project since it also benefits them. If the upstream merges this, we can apply the patch downstream.

Metadata Update from @jflory7:
- Issue tagged with: type - summer coding

2 years ago

@reby1 Are you still working on this? if not then I would like to take this up.

@richa208 , yes...actually I had a problem with jQuery during the implementation... this week I am a little busy and I didn't have time enough to finish this... ;)

Hi @reby1, do you have any updates on your progress? Anything we can do to help?

Hi @jflory7, yes...actually I am with a problem with jQuery when I add a collapse from Bootstrap.

I did some test on console to check the jQuery in the projects, like this:

var el
document.querySelectorAll(".navbar-toggle").forEach((x) => el = x)
djdt.jQuery(el)
djdt.jQuery(el).collapse() // bootstrap function does not work
djdt.jQuery(el).hide() // jquery functions works
djdt.jQuery(el).show() // jquery functions works

I added <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script> in a "base.html"

But still, appear this error:

IMAGE_2019-03-08_113442.jpg

I asked help for some experienced developers, but we didn't find a solution. I never did anything using Phyton, so I don't know if I'm doing something wrong.

If someone could help on this would be good.

Tks :)

Hi @reby1
I think I understand what's happening here.

Firstly, check if jQuery is added in the head tag.

If yes, add it BEFORE bootstrap files.
If no, add <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> BEFORE the bootstrap files.

Let me know if this works :smile: :smile: :smile: :smile: :smile:

Metadata Update from @jflory7:
- Issue untagged with: needs info
- Issue priority set to: waiting on assignee (was: needs review)
- Issue tagged with: PASSED, good first issue

2 years ago

@phoenixabhishek thanks for the help. I'll try to do this 😃

Hi @reby1, are you still working on this ticket?

@jflory7 , unfortunately, I'm super busy these last weeks, and I didn't have time enough to dedicate on this issue. Please, if you want, assignee to another person to close this issue.

@reby1 Thanks for updating us. No worries! :thumbsup:

@phoenixabhishek Sure. What are your thoughts on how to implement this?

Metadata Update from @jflory7:
- Assignee reset

2 years ago

@jflory7 Actually I was thinking that since this is not implemented yet, and is also not a high priority, I can add it up to my list of redesigns I am working on for #139

This will bring some changes in my current design, but I can surely integrate it.

P.S. In case this is needed on priority, we can go for the basic responsive hamburger menu option that is available with bootstrap.
Link to example

@phoenixabhishek I think this is important enough to work on sooner than later. It is tedious to scroll down the page on a mobile device since the menu gets put at the top of every page.

Since you are already working on #139, I prefer to keep this one unassigned if you are not planning to work on it immediately, so someone else with extra time could take this ticket.

@jflory7 in that case, I'll work on this and check it for complexity and let you know about how soon can this be implemented.

In case the solution comes out to be an easy one to implement, It can be open to others to work on and I'll be open to helping them out if needed.

Metadata Update from @jflory7:
- Custom field Requirement # adjusted to 25

2 years ago

Login to comment on this ticket.

Metadata
Attachments 1