[fix] Fixed transparent element of notification widget that covered page #130

[niteshsinha17]

The issue was related to div having class ".ow-notifications". It was taking css property bottom=-1 and it was positioned absolutely that's why it was taking complete height. So it made bottom = auto.

Fixes #130

[pandafy]

Thanks for contributing @niteshsinha17.

This surely fixes the bug, but I don't think it is the appropriate solution. The problem occurs due to bottom: 1px in ow-notifications class. From what I can see, it is there to align the notification bell with the text, see below.

I think we can get the same effect with padding: 1px 20px 0px 1px and removing bottom: -1px in ow-notifications. With this, we will not need to add another property in the media query. The class will become something like this.

.ow-notifications {
    float: right;
    display: block;
    padding: 1px 20px 0px 20px;
    color: #fff;
    line-height: 40px;
    border: 0 none !important;
    position: relative;
    right: -5px;
    margin-left: 10px;
    cursor: pointer;
}

What do think about this?

[niteshsinha17]

Thanks for reviewing @pandafy.

I think whole setup is made to align user, nav-icon and bell-icon when width>1042px and to align nav-icon and bell-icon when width < 1024.

Your solution also solves the issue but it creates misalignment between bell-icon and nav-icon when width<1024 which is not in my solution.

I have two solutions which don't need any addition of extra properties.

1. remove bottom:-1px from ow-notifications , remove top:-1px from bell-icon. It will produce the same effect which is in your solution. To solve the misalignment of bell and nav icons, we can remove top:-1px from nav-icon.

2. In your solution we can do one thing to solve the alignment issue. Make top:41px in ow-notifications in the media of max width:1024. So the classes will look like this.

.ow-notifications {
    float: right;
    display: block;
    padding: 1px 20px 0px 20px;
    color: #fff;
    line-height: 40px;
    border: 0 none !important;
    position: relative;
    right: -5px;
    margin-left: 10px;
    cursor: pointer;
}

@media (max-width: 1024px)
.ow-notifications {
    display: block !important;
    line-height: 40px !important;
    position: absolute;
    top: 41px;
    right: 113px;
}

What do you think about this?

[pandafy]

Thanks for your keen observation @niteshsinha17

1. remove bottom:-1px from ow-notifications , remove top:-1px from bell-icon. It will produce the same effect which is in your solution. To solve the misalignment of bell and nav icons, we can remove top:-1px from nav-icon.

I will not prefer modifying CSS for nav-icon since it is not added in openwisp-notifications, it is a feature of openwisp-utils and it will be better to add any such modifications over there only. Honestly, I don't like this solution.

2. In your solution we can do one thing to solve the alignment issue. Make top:41px in ow-notifications in the media of max width:1024. So the classes will look like this.

This solution sounds more appropriate to me, but it should be top: 42px instead of top: 43px. You can go ahead with this one.

[niteshsinha17]

Thanks @pandafy

I also like the 2nd solution more.

[pandafy]

LGTM, thanks @niteshsinha17 !

Merging deferred to @nemesisdesign 😄

[nemesifier]

Thanks a lot @niteshsinha17 and @pandafy 👏 👍