Notice

The forum is in read only mode.

Support Forum

Welcome! Support Forums have been reactivated

Community Toolbar Transition to Small Size

8 years 10 months ago
Licenses:
JomSocial Active GURU Expired iSEO Expired Socialize Expired

ISSUE SUMMARY: As the community toolbar responds to smaller screen/window sizes it creates a second row. This second row covers the main menu. On an iPad the result is that the main menu is covered all the time. For now I have disabled my logo to save room.

I looked at the mod_community_toolbar/default.php file but am not confident I can make the changes. An earlier transition to the mobile view or always having the login and search be pop up on all views may work for my site. What do you suggest and can you help with the code?

Thank you!

STEPS TO REPLICATE:
1 View site on iPad or other intermediate window size before transition to mobile view
2
3
4
5
RESULT
EXPECTED RESULT
BROWSER

Attachments:
8 years 10 months ago
Licenses:

Hi, Jonathan.

Thank you for contacting us and reporting this issue.
hmmm, this is rather expected as viewport size didn't meet viewport break point defined in css and elements used in toolbar ar too bi (like logo and username). If you log in as other user with shorter name it will be displayed fine. So this can't be solved by just adding some css as in case of short username you'll have a big gap between toolbar and menu.

You could try to remove search bar or make it smaller with this code:

#t3-community-toolbar .navbar-form {
min-width: 200px !important;
}

- Instead of saying: 'it's not working', explain the problem in detail.
- Screenshots with the URL visible in them and the problem marked are more than welcome.
- Tell us how to replicate the problem, we can't fix it if we can't find it.
- Make sure that your site/server meets JomSocial System Requirements
- Make sure to setup JomSocial Cron Job
- Always provide us with access details to the backend and ftp. We need it to debug problems.
- If you have a similar problem, but a solution you found isn't working, open a new thread instead of 'merging' with an existing one.

- Use the "Thank You" feature on any post that helped you
8 years 10 months ago
Licenses:
JomSocial Active GURU Expired iSEO Expired Socialize Expired

Could you help me with the code to always make the log in the pop up version even when on wide screen? Every page refresh causes the toolbar to jump around. I think it has something to do with the "sign in with facebook".

Thanks

Jonathan

8 years 10 months ago
Licenses:

Hi, Jonathan.

FB button is loaded from external source (per facebook API) it loads a bit slower that whole your site, that's why toolbar jumps.

Try to add this code:

.fb-login-button.fb_iframe_widget {
width: 140px !important;
}

to: ROOT/templates/socialize/css/custom.css (if you don't have this file - feel free to create it)

This should help ;)

- Instead of saying: 'it's not working', explain the problem in detail.
- Screenshots with the URL visible in them and the problem marked are more than welcome.
- Tell us how to replicate the problem, we can't fix it if we can't find it.
- Make sure that your site/server meets JomSocial System Requirements
- Make sure to setup JomSocial Cron Job
- Always provide us with access details to the backend and ftp. We need it to debug problems.
- If you have a similar problem, but a solution you found isn't working, open a new thread instead of 'merging' with an existing one.

- Use the "Thank You" feature on any post that helped you
8 years 10 months ago
Licenses:
JomSocial Active GURU Expired iSEO Expired Socialize Expired

Thanks. I added the code and it does help some but still a good bit of jumping. Can you help with the code to have the log in always a pop up or is that a more extensive change? If I need to hire a developer for that are there any problems making the change could cause?

Thanks

8 years 10 months ago
Licenses:

Hi, Jonathan.

Try this:

Copy that file: ROOT/modules/mod_community_toolbar/tmpl/default.php

to:

ROOT/templates/your-template/html/mod_community_toolbar (if you don't have those folders - feel free to create them)

Then replace this (line 166):

<!-- Login hidden on mobile -->
		<form class="navbar-form navbar-right hidden-xs" action="<?php echo CRoute::_( 'index.php?option='.COM_USER_NAME.'&task='.COM_USER_TAKS_LOGIN ); ?>" method="post" name="form-login" id="form-login">
			<div class="form-group form-group">
				<span id="form-login-username">
					<input name="username" id="username" type="text" class="form-control" placeholder="<?php echo JText::_('COM_COMMUNITY_USERNAME') ?>">
				</span>
				<a rel="tooltip" data-placement="bottom" title="<?php echo JText::_('COM_COMMUNITY_FORGOT_USERNAME') ?>" href="<?php echo CRoute::_( 'index.php?option=com_users&view=remind');?>">
					<span class="glyphicon glyphicon-question-sign"></span>
				</a>

				<span id="form-login-password">
					<input name="<?php echo COM_USER_PASSWORD_INPUT;?>" id="passwd" type="password" class="form-control" placeholder="<?php echo JText::_('COM_COMMUNITY_PASSWORD') ?>">
				</span>
				<a rel="tooltip" data-placement="bottom" title="<?php echo JText::_('COM_COMMUNITY_FORGOT_PASSWORD') ?>" href="<?php echo CRoute::_( 'index.php?option=com_users&view=reset');?>">
					<span class="glyphicon glyphicon-question-sign"></span>
				</a>

                <?php if(CSystemHelper::tfaEnabled()){?>
                    <span id="form-login-password">
                        <input name="secretkey" id="passwd" type="password" class="form-control" placeholder="<?php echo JText::_('COM_COMMUNITY_AUTHENTICATION_KEY') ?>">
                    </span>
                <?php } ?>
			</div>

			<?php if (JPluginHelper::isEnabled('system', 'remember')) { ?>
			<label id="form-login-remember">
				<span for="remember">
					<?php echo JText::_('COM_COMMUNITY_REMEMBER_MY_DETAILS') ?>
					<input tabindex="3" class="checkbox" type="checkbox" name="remember" id="remember" value="yes" alt="Remember Me" />
				</span>
			</label>
			<?php } ?>

			<?php if($fbHtml){ // LOGIN WITH FACEBOOK ACCOUNT ?>
			<div class="fb-login-button">
				<?php echo $fbHtml; ?>
			</div>
			<?php }?>

			<button type="submit" name="Submit" class="btn btn-sm btn-primary">
				<?php echo JText::_('MOD_COMMUNITY_LOGIN') ?>
			</button>

			<?php
			$usersConfig=JComponentHelper::getParams( 'com_users' );
			if ($usersConfig->get('allowUserRegistration')) { ?>

			<a class="btn btn-sm btn-accent" href="<?php echo CRoute::_( 'index.php?option=com_community&view=register' ); ?>">
				<?php echo JText::_('MOD_COMMUNITY_SIGN_UP') ?>
			</a>
			<?php } ?>

			<input type="hidden" name="option" value="<?php echo COM_USER_NAME;?>" />
			<input type="hidden" name="task" value="<?php echo COM_USER_TAKS_LOGIN;?>" />
			<input type="hidden" name="return" value="<?php echo $uri; ?>" />
			<?php echo JHTML::_('form.token'); ?>
		</form>

		<div class="navbar-form pull-right visible-xs">
			<!-- MOBILE LOGIN BUTTON -->
			<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modal-login">
				<i class="fa fa-sign-in"></i>
				<?php echo JText::_('MOD_COMMUNITY_LOGIN') ?>
			</button>
			<?php
			$usersConfig=JComponentHelper::getParams( 'com_users' );
			if ($usersConfig->get('allowUserRegistration')) { ?>

			<a class="btn btn-sm btn-accent" href="<?php echo CRoute::_( 'index.php?option=com_community&view=register' ); ?>">
				<?php echo JText::_('MOD_COMMUNITY_SIGN_UP') ?>
			</a>
			<?php } ?>
		</div>

With this:
<div class="navbar-form">
			<!-- MOBILE LOGIN BUTTON -->
			<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#modal-login">
				<i class="fa fa-sign-in"></i>
				<?php echo JText::_('MOD_COMMUNITY_LOGIN') ?>
			</button>
			<?php
			$usersConfig=JComponentHelper::getParams( 'com_users' );
			if ($usersConfig->get('allowUserRegistration')) { ?>

			<a class="btn btn-sm btn-accent" href="<?php echo CRoute::_( 'index.php?option=com_community&view=register' ); ?>">
				<?php echo JText::_('MOD_COMMUNITY_SIGN_UP') ?>
			</a>
			<?php } ?>
		</div>

- Instead of saying: 'it's not working', explain the problem in detail.
- Screenshots with the URL visible in them and the problem marked are more than welcome.
- Tell us how to replicate the problem, we can't fix it if we can't find it.
- Make sure that your site/server meets JomSocial System Requirements
- Make sure to setup JomSocial Cron Job
- Always provide us with access details to the backend and ftp. We need it to debug problems.
- If you have a similar problem, but a solution you found isn't working, open a new thread instead of 'merging' with an existing one.

- Use the "Thank You" feature on any post that helped you
Moderators: Piotr Garasiński
Powered by Kunena Forum

Join 180,000 websites creating Amazing communities

JomSocial is the most complete, easy-to-use addon that turns Joomla CMS into a
full -fledged, social networking site

TRY NOW BUY NOW

About Us

Our product

Support

Contact Us

Site Policies

Elsewhere

© JomSocial.com All Rights Reserved