By Julian on Saturday, 19 August 2017
Posted in General
Replies 11
Likes 0
Views 663
Votes 0
Hi everybody,

I am now thinking again about using the docker. There are some issues about the docker and I wonder if they can be solved now.

1. Overlapping Menus
Have a look at http://www.psychopragmatik.de and scroll down.
Compare it with the Menu at http://www.nlp-deutschland.de

Do you see the menu-conflict?
The Main-Menu floats and is completely covered from the docker.

2. Too many buttons
The whole docker seems like an Advertisement-Bar in Las Vegas. I would like to make nicer. How can I get rid of the search-field in the docker, how can I adjust the alignment and how can I make all of the buttons smaller?

3. Do you see the white gap between the docker and the beginning of the page? How can this be corrected?

All the best, Julian!
The Home-Button on the docker is not leading to the homepage. This is ridiculous, because it has a home-icon. How can this be corrected?

All the best, Julian!
·
Saturday, 19 August 2017 19:22
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Julian,

The docker plugin's "home" icon will automatically go to the dashboard area but I guess we could probably make this configurable in the next version. Temporarily, here's what you can do, edit the file /plugins/system/docker/themes/default.php and at line 22, locate the codes below:

[gist]
<a class="btn btn-docker docker-border--right" href="<?php echo ESR::dashboard();?>">
<i class="fa fa-home"></i>
</a>
[/gist]

Replace it with,

[gist]
<a class="btn btn-docker docker-border--right" href="<?php echo JURI::root();?>">
<i class="fa fa-home"></i>
</a>
[/gist]
·
Saturday, 19 August 2017 22:54
·
0 Likes
·
0 Votes
·
0 Comments
·

1. Overlapping Menus
Have a look at http://www.psychopragmatik.de and scroll down.
Compare it with the Menu at http://www.nlp-deutschland.de

Do you see the menu-conflict?
The Main-Menu floats and is completely covered from the docker.

Hm, I believe there is no real way to properly determine which should have the top most position but it could be easily fixed by adding a custom css on your site. It depends on which menu you want to be on the top.

Perhaps if you can let me know what or how you want it to behave when it's scrolling, I could help you to cook up some css codes.


2. Too many buttons
The whole docker seems like an Advertisement-Bar in Las Vegas. I would like to make nicer. How can I get rid of the search-field in the docker, how can I adjust the alignment and how can I make all of the buttons smaller?

You can turn off the docker's search field by adding the block of css codes below:

[gist]
body .docker__search {
display: none ;
}
[/gist]

Not sure what alignment or button size are you looking at. Can you please advise?


3. Do you see the white gap between the docker and the beginning of the page? How can this be corrected?

Did you mean this white gap? http://take.ms/fhrjC .You could easily fix this by adding the css codes below:

[gist]
body#jsn-master.has-docker.docker-top {
padding-top: 44px !important;
}
[/gist]
·
Saturday, 19 August 2017 23:01
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mark,

will try it, thank you.

By the way: Why should "Home" lead to the community-dashboard? Wouldn´t it make much more sense to lead to the regular homepage? Isn´t this the definition of "Home"?


All the best, Julian!
·
Saturday, 19 August 2017 23:01
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey Julian,

Hm if I recall correctly, we did set it to home initially but customers was asking for it to be linked to the dashboard because on mobile devices, they prefer it to be their main navigation. Since there are just so many different usages, I would rather just make this an option in the plugin so that sites like yours, could configure it differently and sites that wants the home icon to link to the dashboard, could also just configure it.
·
Saturday, 19 August 2017 23:09
·
0 Likes
·
0 Votes
·
0 Comments
·
Perhaps if you can let me know what or how you want it to behave when it's scrolling, I could help you to cook up some css codes.


Well, the docker clearly has to be "on the top" because it does not integrate to the rest of the template. I think it would look terrible to have a menu "above" the docker.

As the docker now is working on my main page (http://www.nlp-deutschland.de) we can solve it there.

Is it possible to

- move the icons for messages and notifications to the right? Users are used to them on the right because this is where they are on facebook
- make the home-icon a little bit larger? It seems like it is smaller then all other icons, makes it difficult to navigate.

Not sure what alignment or button size are you looking at. Can you please advise?


The docker simply does not look organized in terms of design.
When logged out, from the middle: Two large input-fields with icons and yellow background, the a smaller (but still large) blue button, then a word, then the facebook-button, then a line, then a word. It feels like totally mixed up.

I am trying to somehow make it smoother. Turning off the search should help. Maybe the "Register"-Link should have the same style then the Login-Button, could look more aligned.

It feels just like all the different colors and all the different link/button-styles are way to wild. When activating Facebook-Login, Google-Login and Twitter-Login, it´s colorfull like a kindergarden. Maybe a way would be to grey out all of the social-login-buttons and simply give them color only on hover.

Just some thoughts ...

The fields for name and password can be much smaller also.
But I would even prefer more if the login would be a popup instead of the way it is now.
If the login/register-Button would be a popup, all co uld be much more aligned.

1. Button for login
2. Button for registering
3. Button for Facebook
4. Button for Google
5. Button for Twitter

This would be five buttons, all in the same size, would look much more calm and smoother.
·
Saturday, 19 August 2017 23:20
·
0 Likes
·
0 Votes
·
0 Comments
·
The Facebook-Login-Button is also not really self-explaining. For a new user it is not obvious that he can register or log-in with the facebook-button, this button could also lead to facebook or be a simple like-button.

So it would make sense to also have the button in the registering-page itself. How can this be done?

All the best, Julian!
·
Saturday, 19 August 2017 23:27
·
0 Likes
·
0 Votes
·
0 Comments
·
Perhaps if you can let me know what or how you want it to behave when it's scrolling, I could help you to cook up some css codes.


As the main menu is also floating, it should be aligned with the docker. So in the top there is the docker and directly beneath it the floating main-menu. Hopefully this looks good.
What should I do?

All the best, Julian!
·
Sunday, 20 August 2017 01:12
·
0 Likes
·
0 Votes
·
0 Comments
·
By the way: On Mobile it´s the opposide: The docker is hidden under the main menu.
However, on the mobile-view the login is much, much nicer. It´s a popup with the Social-Network-Buttons inside of the popup. This looks much nicer and clearer.

How can I use the login/register-popup which is on the mobile-view also for the desktop-appereance of the docker?

All the best, Julian!
·
Sunday, 20 August 2017 01:15
·
0 Likes
·
0 Votes
·
0 Comments
·
Oh, and I just realized: There are two essential things missing on the mobile-view of the docker:

1. Register-Button
2. Forgot-Password-Link

They are essential, so they would definitely need to get into that popup!

All the best, Julian!
·
Sunday, 20 August 2017 01:21
·
0 Likes
·
0 Votes
·
0 Comments
·
Well, the docker clearly has to be "on the top" because it does not integrate to the rest of the template. I think it would look terrible to have a menu "above" the docker.

As the docker now is working on my main page (http://www.nlp-deutschland.de) we can solve it there.

Can you try apply this following CSS block code into your current template custom css file.

#es.es-docker {
position: absolute !important;
}




Is it possible to
- move the icons for messages and notifications to the right? Users are used to them on the right because this is where they are on facebook
- make the home-icon a little bit larger? It seems like it is smaller then all other icons, makes it difficult to navigate.

Currently that was not possible to move those system icon to right position, but you can modify this from this file
JoomlaFolder/plugins/system/docker/themes/default.php , perhaps you can try download latest version of Docker from https://stackideas.com/apps/item/3336-docker then update on your site.

Once you updated, then try download my attached file and replace into this same file location what i mentioned at above.

Can you try apply this following CSS block code into your current template custom css file for make that home icon show a little big larger.

#es.es-docker .fa.fa-home {
font-size: 19px !important;
}




The docker simply does not look organized in terms of design.
When logged out, from the middle: Two large input-fields with icons and yellow background, the a smaller (but still large) blue button, then a word, then the facebook-button, then a line, then a word. It feels like totally mixed up.

I am trying to somehow make it smoother. Turning off the search should help. Maybe the "Register"-Link should have the same style then the Login-Button, could look more aligned.

It feels just like all the different colors and all the different link/button-styles are way to wild. When activating Facebook-Login, Google-Login and Twitter-Login, it´s colorfull like a kindergarden. Maybe a way would be to grey out all of the social-login-buttons and simply give them color only on hover.

Just some thoughts ...

The fields for name and password can be much smaller also.
But I would even prefer more if the login would be a popup instead of the way it is now.
If the login/register-Button would be a popup, all co uld be much more aligned.

1. Button for login
2. Button for registering
3. Button for Facebook
4. Button for Google
5. Button for Twitter

This would be five buttons, all in the same size, would look much more calm and smoother.

Thanks for your input, perhaps you can request this on our forum here https://stackideas.com/forums/easysocial/feature-requests-2 , we will see if there a lot of user request to change this `login` and `register` button same style with social button, we will consider change this styling in the future version.

By the way, it seems like you using jfbconnect populate those social button on the docker area, perhaps you can try apply following css and see how it goes.


#es.es-docker .docker-login-social {
opacity: 0.5;
}

#es.es-docker .docker-login-social:hover {
opacity: 1.0;
}




The Facebook-Login-Button is also not really self-explaining. For a new user it is not obvious that he can register or log-in with the facebook-button, this button could also lead to facebook or be a simple like-button.

So it would make sense to also have the button in the registering-page itself. How can this be done?

You can apply following code into this following file to populate those social icon on the registration page.
JoomlaFolder/components/com_easysocial/themes/wireframe/registration/steps/default.php

<?php
$sso = ES::sso();
if ($sso->isEnabled('facebook') || $sso->isEnabled('twitter')) { ?>
<div class="es-signin-social">
<p class="line">
<b><?php echo JText::_('Login via Social Network');?></b>
</p>

<?php if ($sso->isEnabled('facebook')) { ?>
<div>
<?php echo $sso->getLoginButton('facebook'); ?>
</div>
<?php } ?>

<?php if ($sso->isEnabled('twitter')) { ?>
<div class="t-lg-mt--md">
<?php echo $sso->getLoginButton('twitter'); ?>
</div>
<?php } ?>
</div>
<?php } ?>

You can check my screenshot here : http://take.ms/rYtpv



By the way: On Mobile it´s the opposide: The docker is hidden under the main menu.
However, on the mobile-view the login is much, much nicer. It´s a popup with the Social-Network-Buttons inside of the popup. This looks much nicer and clearer.

How can I use the login/register-popup which is on the mobile-view also for the desktop-appereance of the docker?

Currently that was not possible to switch to use dropdown on desktop view.



Oh, and I just realized: There are two essential things missing on the mobile-view of the docker:

1. Register-Button
2. Forgot-Password-Link

They are essential, so they would definitely need to get into that popup!

Thanks for reported, I will log this into our issue tracker.
·
Monday, 21 August 2017 11:48
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post