Responsive Message Controls Menu

Responsive Message Controls Menu 1.1.2

No permission to download
Overview Updates (4) Reviews (4) History Discussion
Supplementary question. Which template is used for the menu? I want to make sure the font awesome icons appear in it.
 
I have this working, not sure if it will overwrite your current setup or what effect it would have. On a default setup with the menu installed this is how it looks.

upload_2014-9-22_14-58-20.webp
upload_2014-9-22_14-58-27.webp

CSS

Code: 
.item.control.like:before, .item.control.reply:before, .item.control.bookmarks:before, .item.control.edit:before, .item.control.report:before, .item.control.warn:before, .item.control.ip:before,
.item.control.deleteSpam:before, .item.control.history:before, .item.control.delete:before
{
display: inline-block;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right: 5px;
}
.item.control.like:before
{
content: "\f087";
}
.item.control.reply:before
{
content: "\f122";
}
.item.control.bookmarks:before
{
content: "\f02e";
}
.item.control.edit:before
{
content: "\f040";
}
.item.control.report:before
{
content: "\f071";
}
.item.control.warn:before
{
content: "\f12a";
}
.item.control.ip:before
{
content: "\f002";
}
.item.control.deleteSpam:before
{
content: "\f024";
}
.item.control.history:before
{
content: "\f1da";
}

.item.control.delete:before
{
content: "\f00d";
}

Edit: REvised the CSS to be less..
 
Last edited:
Steve F said:
Edit: REvised the CSS to be less..
Click to expand...
Steve I have just implemented this on AVForums. Because the text in the menu does line up (because the Font Awesome icons are variable width), may I suggest that you replace margin-right: 5px; with width: 1.3em; ? And maybe add text-align: center; ?
 
Last edited:
Stuart Wright said:
Steve I have just implemented this on AVForums. Because the text in the menu does line up (because the Font Awesome icons are variable width), may I suggest that you replace margin-right: 5px; with width: 1.3em; ? And maybe add text-align: center; ?
Click to expand...

Sure I can look at it. I have some ideas I would like to add to this as well as adding the fa fixed width in the icon class.
 
Steve F said:
Sure I can look at it. I have some ideas I would like to add to this as well as adding the fa fixed width in the icon class.
Click to expand...
fa-fw just sets the width to 1.2 something em, so it's the same thing. I already did it and it looks fine. Although I implemented it for the menu only. Not the buttons.
 
The template modification would need edited to add the classes.

hiddenResponsiveWide
visibleResponsiveWide
 
Has anyone got this working correctly on all devices? If so please share how you did it. Trying to get it to work properly on the iPad.

Thank you.
 
Never mind, this works. Thanks @Stuart Wright

Code: 
.messageMeta .InlineModCheck,
.messageMeta .authorEnd,
.messageMeta2 .authorEnd,
.messageMeta .datePermalink,
.messageMeta2 .Popup.privateControlsPopup.item
{
  display: none;
}

.messageMeta2 .InlineModCheck,
.messageMeta2 .datePermalink
{
  display: block;
}
 
tommydamic68 said:
Never mind, this works. Thanks @Stuart Wright

Code: 
.messageMeta .InlineModCheck,
.messageMeta .authorEnd,
.messageMeta2 .authorEnd,
.messageMeta .datePermalink,
.messageMeta2 .Popup.privateControlsPopup.item
{
  display: none;
}

.messageMeta2 .InlineModCheck,
.messageMeta2 .datePermalink
{
  display: block;
}
Click to expand...
This doesn't work, it removes items on a regular desk top...
 
The good news is, when your members are logged in it looks ok on all devices including iPad, however, if you have a moderator or admin with moderation access to additional buttons and inline moderation, it all becomes a mess with the buttons, so this add on is not truly responsive...hopefully there will be an updated fix to work responsive on all size devices.
 
This addon works correctly.

It only applies the menu when the space is reduced and the items start to wrap to a new line.
 
Steve F said:
This addon works correctly.

It only applies the menu when the space is reduced and the items start to wrap to a new line.
Click to expand...
I guess the name of the add on lead me astray...so then why does it not work on the iPad the same way?
 
Joe Link said:
Nice work @Steve F!

How do I get the hamburger? Right now my forums just display the word 'menu'.

Thanks!
Click to expand...
I think your looking for something in here, play with it to your liking. Throw it in your EXTRA.css
Code: 
/* Responsive menu controls */

.item.control.like:before, .item.control.reply:before, .item.control.bookmarks:before, .item.control.edit:before, .item.control.report:before, .item.control.warn:before, .item.control.ip:before,
.item.control.deleteSpam:before, .item.control.history:before, .item.control.delete:before
{
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
     margin-right: 5px;
}
.item.control.like:before
{
    content: "\f087";
}
.item.control.reply:before
{
    content: "\f122";
}
.item.control.bookmarks:before
{
    content: "\f02e";
}
.item.control.edit:before
{
    content: "\f040";
}
.item.control.report:before
{
    content: "\f071";
}
.item.control.warn:before
{
    content: "\f12a";
}
.item.control.ip:before
{
    content: "\f002";
}
.item.control.deleteSpam:before
{
    content: "\f024";
}
.item.control.history:before
{
    content: "\f1da";
}

.item.control.delete:before
{
    content: "\f00d";
}

.messageMeta .visibleResponsiveMedium .authorEnd,
.messageMeta .visibleResponsiveMedium .datePermalink
{
    display: none;
}

.messageMeta2 .visibleResponsiveMedium .authorEnd,
.messageMeta2 .visibleResponsiveMedium .datePermalink
{
    display: block;
}
 
You must log in or register to reply here.
Back
Top Bottom