Easy Blog Menu issue on small screens and mobile...

While on easy mode the display on mobile devices or small screens didn't display correctly... Page contents also do not display well.

Whithout easy mode and with default wordpress buttons works correctly.

It's possible to have like an auto hide when click on new-post and/or when selection any other menu section?
It's posible to have an easy mode with the backend default buttons instead of the predifined easy mode themes?

I also need to hide the Add Forms button and jetpack publicize options from the new-post page for easy mode users.

Any suggestions,

  • PC
    • WPMU DEV Initiate

    Hey there,

    Thanks for posting on the forums.

    Easy Blogging in not responsive at the moment and would not play well with the mobile screens while working on the backend.

    However I will suggest to use a WordPress Mobile app or create your own App using the plugins here : https://premium.wpmudev.org/project/wp-for-ios/ and https://premium.wpmudev.org/project/wp-for-android/

    Using the App will provide you minimal options and would also look better and easy to navigate.

    I have however called in @Vladislav for his feedback on if its possible to remove the easy mode on a mobile screen and see if that can be done.

    He should be around soon.

    Cheers, PC

  • PC
    • WPMU DEV Initiate

    Hey there

    Sorry for the delay in response as I was away due to bad health and could not get back to this any sooner. Please accept my apologies for the uninformed delay and any inconvenience it may have caused.

    Glad to help. Please feel free to ask if you have more questions on the same.

    Cheers, PC

  • agotay
    • Flash Drive

    No problem!

    I'm still pending on the review of the Mobile app's. I don't have experience before on build app's. But, I remember started to download several pre-requirements and/or others softwares needed. Was confuse and leave it for later time...

    Does @Vladislav provide something?

    I only want that easy blogging left menu doesn't intercept or join with the blog post area and right contents. Like a fixed page instead of responsive for the moment.

    I can deal with manual zoom like any image or regular webpage does in smartphones and tablets.

    Thanks again,

  • PC
    • WPMU DEV Initiate

    Hey there,

    thanks for posting back.

    I have sent another note to @Vladislav to chime in on this thread with his feedback.

    I think if we can add a fixed width CSS to Easyblogging, that could do it but just to make sure, I will need @Vladislav here.

    He should be around soon.

    Cheers, PC

  • agotay
    • Flash Drive

    I was playing with the inspect element the browser provide in order you can see better what occurs when using Easy Blogging on mobile or tablets. I found that on style.css:146 if you uncheck margin-left: 200px: you can see whats happen on mobile devices or tablet screen. I made that temporary so you can see and maybe help me.

    CSS CODE: style.css:146
    #primary_right .inner {
    clear: both;
    float: left;
    margin-left: 200px;
    min-width: 78%;
    padding: 10px 20px 30px 30px;
    position: relative;

    What can I do, so the contents didn't cross to the left menu?

    Thanks,
    AGOTAY

  • PC
    • WPMU DEV Initiate

    Hey there agotay,

    Sorry for the delay here.

    I tested this on my lab site and see the same issue. Its currently not responsive in the backend.

    I have not been able to get @Vladislav here yet. Let me send him another note to chime in and help us out here.

    I have also sent a note to @Patrick Cohen to see if he can figure out the CSS which I can not :slight_smile:

    Cheers, PC

  • PC
    • WPMU DEV Initiate

    Hey there,

    While we are waiting for our CSS champ, my colleague @Michael Bissett said that he has got a few ideas on this one.

    I have invited him to this thread so that he can share them with us :slight_smile:

    Cheers, PC

  • Michael Bissett
    • Recruit

    Hey there @agotay,

    Apologies for the delay, I just had to work on the code some more. I will say that this is BETA code, so it's not perfect. I should also note that the changes will be replaced on an update to the plugin (I tried to use a CSS plugin to make the changes, but that didn't work, unfortunately).

    But, it should work for your purposes. Here's what you need to do:

    1. Deactivate our Easy Blogging plugin.

    2. Click on the edit link for our Easy Blogging plugin, and open the wdeb_global.css file (it'll show up on the right as easyblogging/css/wdeb_global.css)

    3. Scroll down to the end of the document, hit Enter a few times after the last entry to make some white space, and paste the CSS code from the page linked below into that area:

    http://pastebin.com/gmJnixNt

    (The code to copy is inside the box above the "RAW Paste Data" area)

    4. Save the changes, reactivate the plugin, and give it a try. :slight_smile:

    I'm flagging the developer here, to see about getting this integrated in a future version of the plugin. Please let me know if the solution posted works for you.

    Regards,
    Michael

  • agotay
    • Flash Drive

    Sorry for the delay,

    I'm currently working with others mayor changes on that site and maybe Easy Blogging will not be used anymore. We now prefer the default admin bar and I hide many areas with the ultimate branding plugin and other plugin that controls users permissions and access. That did the whole trick...

    But, I definitely will check if that code fix it or works better on other site later.

    I let you know,

    Thanks,
    AGOTAY

  • Tobias
    • Flash Drive

    Hi Michael,

    i tried the code and saw no difference. the menu left is still fixed in position. i thought that would become a toggle button or similar as it takes up too much space for mobile devices.

    any chance to turn the menu into a button in top left corner that opens a drop down when pressed?

    Thank you
    Tobias

  • Michael Bissett
    • Recruit

    Hey @Tobias, hope you're doing well today. :slight_smile:

    i tried the code and saw no difference. the menu left is still fixed in position. i thought that would become a toggle button or similar as it takes up too much space for mobile devices.

    Are you viewing this from a smartphone, or a tablet? Right now, the code only works for smartphones, since that's where the issue lay earlier on in the thread.

    If possible, could you send over a screenshot of what this looks like when you're viewing the page? That would help me out a lot here. :slight_smile:

    any chance to turn the menu into a button in top left corner that opens a drop down when pressed?

    It's possible to do that, but it would take more time to research and develop, since that requires Javascript to be employed, as well as CSS.

    Most likely though, if this is being viewed from a smartphone, the button would be below the logo, since that's the way it's laid out at present.

    I haven't developed a CSS fix for tablets yet, I'd have to work on that more before I could say where the menu would be for that, though tentatively speaking it'd probably be below the logo as well.

    Regards,
    Michael

  • Tobias
    • Flash Drive

    Hi Michael,

    i tried google chrome on my smartphone and it worked better - or it was a chaching issue with the other browser (next browser).

    when u say:

    Most likely though, if this is being viewed from a smartphone, the button would be below the logo, since that's the way it's laid out at present.

    do you mean with ur css code there should b a button under e menu on a smartphone? for m it showed e complete menu straight away n i couldnt find a button.

    good thing: with this discussion i found your wp for android app which would be e better solution :slight_smile: i ve a few questions but will post them in a new thread.

    thank you
    Tobias

  • Michael Bissett
    • Recruit

    Hey @Tobias,

    do you mean with ur css code there should b a button under e menu on a smartphone? for m it showed e complete menu straight away n i couldnt find a button.

    What I meant was, if a button were implemented here, it would end up being under the logo while viewing the page on a smartphone. Right now, it's the full menu, since that's what I had to work with at the time.

    The code developed to make this mobile friendly wasn't intended to be a finished product, but more so a temporary fix until a real solution could be developed (which would take more time).

    Glad that the WP for Android plugin works for your needs, and thanks for being a member here! :slight_smile:

    Regards,
    Michael

  • wp.network
    • The Bug Hunter

    Hey @Michael Bissett

    I tried your solution; it worked, but only kinda...

    Significant issues remaining:
    a) In vertical orientation, 'easy bar' is loaded over logo, should be above
    b) 'Help & Screen Option' are totally hidden on mobiles, mostly hidden on tablets

    Basically, the product needs an overhaul; imho, presently its pretty non-viable (will take a lot of work to make presentable, if even possible=too unknown/risky).

    Since a modified version of the WP core experience is likely to offer a better interface for modern devices and usage patterns, maybe this plugin should get some dev time :slight_smile:

    Cheers,
    Max

    edit: btw, imho, apps can be cool, but if one's site admin area is basically non-functional on mobile/tablet without the app then there are some serious problems with the site moving forward. Thus the need for an updated Easy Blogging plugin :slight_smile:

  • Vinod Dalvi
    • WP Unicorn

    Hi Max,

    Thank you for posting on the forum.

    Are you using latest version of Easy Blogging plugin?

    Are the issues that you have mentioned reproduce able using https://www.responsinator.com or they only occur on real devices?

    If you can please share us the screenshot of it so that it will help us to troubleshoot it.

    I have also notified @Michael Bissett to look into it as he has already dealt with this issue.

    Regards,
    Vinod Dalvi

  • wp.network
    • The Bug Hunter

    Hi @Vinod Dalvi

    Thanks for your response :slight_smile:

    1) Latest version of everything :slight_smile:
    2) Not replicable via Responsinator - tool doesn't seem to be able to handle login pages even, let alone logging in to test the admin section...
    2a) Have tested with real devices
    2a1) iPhone 4 - Safari & Chrome
    2a2) Samsung Galaxy III - OEM Browser & Chrome
    2a3) Asus Transformer Pad (Win8) - IE, Chrome & Firefox
    3) I don't have easy means to take screenshots on the two smartphones, will post a few from the tablet :slight_smile:
    4) It seems to me that the issue of the 'Easy Bar' riding over the 'Help & Screen Options' as well as the logo on even smaller screens may be one issue really.
    5) Based on what I've seen of the plugin's behavior and read on the forums, I have abandoned any thought of using it as is: If a user needs it, odds are they are paying me to make their experience seamless and expect a polished look & feel to their interface.
    5a) I posted this mostly just to contribute some feedback for future dev time allocation decisions.

    Hope that this can be helpful :slight_smile:

    I don't expect or need immediate troubleshooting; I would be very interested to see this plugin optimized for all device sizes.

    Cheers, Max

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.