Improve Pro Options Panel header when logo is hidden

[renzms]

See wpsharks/comment-mail#284

[renzms]

@raamdev

• Removed the Restore button
• Made it a link
• Tested, link prompts the dialog box asking if user is sure they want to restore settings

With Logo

Problem

---

Without Logo

Header has extra white space and margin for positioning the gray division bar.

Editing the padding and margins moves around the division bar between heading and content.

Adjusted the CSS to make it so that the body's positioning would determine the position of the bar, since the header is variable (logo optional, different pro/lite header links, etc). Since the body would always have a fixed position, made it's new position before the body.

For some reason though, the division bar ends at the bottom of the panel, although the CSS is using ::before

[jaswrks]

@renzms I updated this PR with some tweaks to assist you. Please review and if you find it acceptable please notify Raam so he can do a review and merge.

Screenshots

---

---

---

[jaswrks]

@renzms writes...

division bar ends at the bottom of the panel, although the CSS is using ::before

The ::before pseudo selector decides where the content element will be inserted into the DOM. It doesn't decide how it is positioned inside the element it's inserted into. In this case, the element is inserted into the DOM ::before all other elements, and then positioning absolutely to the bottom: 0.

[renzms]

@jaswsinc Thanks for the assist! It all looks better to me! So instead of a division bar, it will have the "note" to divide the header and the content?

@raamdev What do you think?

[jaswrks]

@renzms writes...

have the "note" to divide the header and the content?

The notice is there, but it's not responsible for being the divider, because it may or may not apply; i.e., it may not be shown in all cases, so we can't rely upon that element. That notice just needs to fit properly whenever it is present is all.

What I did is I set a new ::after pseudo selector to force a clearing of the heading. Then I removed the padding and adjusted the margin on the notice when it's present. See: 96ad8fb#diff-6d5698e58e9090f25b226ff8f1ce1769R682

[renzms]

Added in work from #75 :

Add social links to plugin options page

LITE

PRO

[renzms]

@raamdev

Hi Raam, between the work from #75 : (Add social links to plugin options page) and @jaswsinc 's updated responsive tweaks above, is there anything else we can improve upon for this featured branch?

[raamdev]

@renzms This looks great! I just ran it through a few tests. Beautiful! I love how the whole thing adapts to the browser even when it's mobile-size.

[raamdev]

There was a small issue with the spacing between links:

Fixed in 85428a3: