Collapsible Mchat (Milk styl)

Support area for phpBB's mChat extension
Post Reply
bennybernaer
Posts: 8
Joined: 17 Oct 2016, 16:04

Collapsible Mchat (Milk styl)

#1

Post by bennybernaer » 04 Dec 2018, 19:02

Your phpBB Version: 3.2.4
Your phpBB Type: Standard phpBB
Extensions installed: Yes
Your knowledge: Beginner
Boardlink: https://www.zefbeschadiging.be

PHP Version: 7.2.10
MySQL Version: MySQL(i) 10.0.36-MariaDB-cll-lve

What have you done before the problem was there?


What have you already tried to solve the problem?


Description and Message
I use the style Milk. In this style there is an option to use collapsible. I'm trying to add that piece of code to mchat_body.html now. But this is not really good .... I can fold in and out of the mchat, but if I do as below, then my foother will be displayed very large. What is the correct way to add the code below to the mchat?



Ik maak gebruik van de stijl Milk. In deze stijl is er een optie om gebruik te maken van collapsible. Ik probeer dat stukje code nu toe te voegen aan mchat_body.html. Maar dit gaat niet echt goed....Ik kan de mchat in en uitklappen, maar als ik het doe zoals hieronder dan wordt mijn foother wel heel erg groot weergegeven. Wat is de juiste manier om on onderstaande code toe te voegen aan de mchat?

Ik weet dat er ook de phpBB Collapsible extensie is, maar deze gebruik ik liever niet. Die van milk oogt veel mooier en hier kan je ook de statistieken in en uitklappen.


Code: Select all

<!-- IF SCRIPT_NAME eq 'index' and STYLE_SETTINGS_CONFIG_COLLAPSIBLE_PANELS -->
            	<div class="collapse-trigger open">
                	<span class="icon fa-minus tooltip-left" title="Collapse"></span>
                    <span class="icon fa-plus tooltip-left" title="Expand"></span>
                </div>
            <!-- ENDIF --> 

Code: Select all

 <!-- IF STYLE_SETTINGS_CONFIG_COLLAPSIBLE_PANELS -->
        <div class="collapse-trigger open">
            <span class="icon fa-minus tooltip-left" title="Collapse"></span>
            <span class="icon fa-plus tooltip-left" title="Expand"></span>
        </div>
    <!-- ENDIF --> 

Code: Select all

<!-- IF STYLE_SETTINGS_CONFIG_COLLAPSIBLE_PANELS --><div id="forumlist_collapse"><!-- ENDIF -->
{% if MCHAT_PAGE in ['custom', 'archive'] %}
	{% INCLUDE 'overall_header.html' %}
{% endif %}

{% EVENT dmzx_mchat_overall_header_after %}

{% EVENT dmzx_mchat_header_before %}

{% if MCHAT_PAGE == 'custom' %}
	<h2>{{ lang('MCHAT_CUSTOM_PAGE') }}</h2>
{% elseif MCHAT_PAGE == 'archive' %}
	<h2>{{ lang('MCHAT_ARCHIVE_PAGE') }}</h2>
{% endif %}

{% EVENT dmzx_mchat_header_after %}

{% INCLUDE '@dmzx_mchat/mchat_script_data.html' %}

{% if MCHAT_PAGE == 'archive' and (loops.pagination|length or MCHAT_TOTAL_MESSAGES) %}
<div class="action-bar bar-top">
	{% EVENT dmzx_mchat_action_bar_top_before %}
	<div class="pagination">
		{{ MCHAT_TOTAL_MESSAGES }}
		{% if loops.pagination|length %}
			{% INCLUDE 'pagination.html' %}
		{% else %}
			&bull; {{ PAGE_NUMBER }}
		{% endif %}
	</div>
	{% EVENT dmzx_mchat_action_bar_top_after %}
</div>
{% endif %}

{% EVENT dmzx_mchat_before %}

{% if MCHAT_IS_COLLAPSIBLE %}
	<a class="category{% if S_MCHAT_HIDDEN %} hidden-category{% endif %} mchat-category"></a>
{% endif %}

<div class="forabg mchat-wrapper{% if S_MCHAT_AVATARS %} mchat-avatars{% endif %}">
	<a id="mChat"></a>
	<div class="inner">
		<ul class="topiclist mchat-header">
			<li class="header">
				{% INCLUDE '@dmzx_mchat/mchat_header.html' %}
			<!-- IF SCRIPT_NAME eq 'index' and STYLE_SETTINGS_CONFIG_COLLAPSIBLE_PANELS -->
            	<div class="collapse-trigger open">
                	<span class="icon fa-minus tooltip-left" title="Collapse"></span>
                    <span class="icon fa-plus tooltip-left" title="Expand"></span>
                </div>
            <!-- ENDIF -->            
			
	

		{% EVENT dmzx_mchat_body_before %}

		<div id="mchat-body"{% if MCHAT_IS_COLLAPSIBLE %} class="collapse-trigger open"{% endif %}>
			{% if MCHAT_SOUND_ENABLED %}
				<audio id="mchat-sound-add" class="hidden" src="{{ EXT_URL }}sounds/add.mp3" preload="auto"></audio>
				<audio id="mchat-sound-edit" class="hidden" src="{{ EXT_URL }}sounds/edit.mp3" preload="auto"></audio>
				<audio id="mchat-sound-del" class="hidden" src="{{ EXT_URL }}sounds/del.mp3" preload="auto"></audio>
				<audio id="mchat-sound-error" class="hidden" src="{{ EXT_URL }}sounds/error.mp3" preload="auto"></audio>
			{% endif %}

			<div id="mchat-confirm" class="hidden">
				<h3>{{ lang('CONFIRM') }}</h3>
				<div class="mchat-confirm-fields">
					<p></p>
					<textarea></textarea>
				</div>
				<fieldset class="submit-buttons">
					<input type="button" name="confirm" value="{{ lang('MCHAT_OK') }}" class="button2">&nbsp;
					<input type="button" name="cancel" value="{{ lang('CANCEL') }}" class="button2">
				</fieldset>
			</div>

			{% if MCHAT_STATIC_MESS and MCHAT_PAGE != 'archive' %}
				{% EVENT dmzx_mchat_static_container_before %}
				<ul class="topiclist forums mchat-static-container">
					<li class="row mchat-static">{{ MCHAT_STATIC_MESS }}</li>
				</ul>
				{% EVENT dmzx_mchat_static_container_after %}
			{% endif %}

			<div id="mchat-main"{% if MCHAT_MESSAGE_TOP %} class="mchat-messages-top"{% endif %}>
				{% EVENT dmzx_mchat_messages_container_before %}

				<ul id="mchat-messages" class="topiclist forums">
					{% if loops.mchatrow|length %}
						{% INCLUDE '@dmzx_mchat/mchat_messages.html' %}
					{% else %}
						<li class="row mchat-static mchat-no-messages">{{ lang('MCHAT_NOMESSAGE') }}</li>
					{% endif %}
				</ul>

				{% EVENT dmzx_mchat_messages_container_after %}
			</div>

			{% INCLUDE '@dmzx_mchat/mchat_panel.html' %}
		</div>

		{% EVENT dmzx_mchat_body_after %}
	</div>
</div>

{% EVENT dmzx_mchat_after %}

{% if MCHAT_PAGE == 'archive' and (loops.pagination|length or MCHAT_TOTAL_MESSAGES) %}
<div class="action-bar bottom">
	{% EVENT dmzx_mchat_action_bar_bottom_before %}
	<div class="pagination">
		{{ MCHAT_TOTAL_MESSAGES }}
		{% if loops.pagination|length %}
			{% INCLUDE 'pagination.html' %}
		{% else %}
			&bull; {{ PAGE_NUMBER }}
		{% endif %}
	</div>
	{% EVENT dmzx_mchat_action_bar_top_after %}
</div>
{% endif %}

{% if MCHAT_PAGE == 'custom' and MCHAT_WHOIS_INDEX %}
	<h3>{{ lang('MCHAT_WHO_IS_CHATTING') }}</h3>
	{% INCLUDE '@dmzx_mchat/mchat_whois.html' %}
	<div id="mchat-refresh">
		<span id="mchat-refresh-explain">{{ lang('MCHAT_WHO_IS_REFRESH_EXPLAIN', MCHAT_WHOIS_REFRESH / 1000) }}</span>
		<span id="mchat-refresh-pending" class="hidden">{{ lang('MCHAT_REFRESHING') }}</span>
	</div>
{% endif %}

{% if MCHAT_PAGE in ['custom', 'archive'] and LEGEND %}
	<div id="mchat-legend">
		<em>{{ lang('LEGEND') ~ lang('COLON') }} {{ LEGEND }}</em>
	</div>
{% endif %}

{% EVENT dmzx_mchat_overall_footer_before %}

{% if MCHAT_PAGE in ['custom', 'archive'] %}
	{% INCLUDE 'overall_footer.html' %}
{% endif %}
[/i]

User avatar
kasimi
mChat developer
Posts: 795
Joined: 06 Oct 2016, 09:56
Location: Germany
Contact:

Re: Collapsible Mchat (Milk styl)

#2

Post by kasimi » 04 Dec 2018, 19:59

As far as I can see, the <div class="collapse-trigger open"> is an example container you want to collapse, not an element you need to add to the container you want to collapse. mChat's container element has the mchat-wrapper class. That's where the collapse classes need to be added to. The two span elements inside the example container need to be added inside mChat's container. You just need to find the right spot so that it doesn't look crooked, and maybe some CSS.

bennybernaer
Posts: 8
Joined: 17 Oct 2016, 16:04

Re: Collapsible Mchat (Milk styl)

#3

Post by bennybernaer » 04 Dec 2018, 21:36

Sorry but I do not get it right. The chat is now collapsible, but now my foother is suddenly too high.

Sorry maar ik snap het niet goed. De chat is nu inklapbaar, maar nu is plots mijn foother weer veel te hoog.

Code: Select all

<!-- IF STYLE_SETTINGS_CONFIG_COLLAPSIBLE_PANELS --><div id="forumlist_collapse"><!-- ENDIF -->
{% if MCHAT_PAGE in ['custom', 'archive'] %}
	{% INCLUDE 'overall_header.html' %}
{% endif %}

{% EVENT dmzx_mchat_overall_header_after %}

{% EVENT dmzx_mchat_header_before %}

{% if MCHAT_PAGE == 'custom' %}
	<h2>{{ lang('MCHAT_CUSTOM_PAGE') }}</h2>
{% elseif MCHAT_PAGE == 'archive' %}
	<h2>{{ lang('MCHAT_ARCHIVE_PAGE') }}</h2>
{% endif %}

{% EVENT dmzx_mchat_header_after %}

{% INCLUDE '@dmzx_mchat/mchat_script_data.html' %}

{% if MCHAT_PAGE == 'archive' and (loops.pagination|length or MCHAT_TOTAL_MESSAGES) %}
<div class="action-bar bar-top">
	{% EVENT dmzx_mchat_action_bar_top_before %}
	<div class="pagination">
		{{ MCHAT_TOTAL_MESSAGES }}
		{% if loops.pagination|length %}
			{% INCLUDE 'pagination.html' %}
		{% else %}
			&bull; {{ PAGE_NUMBER }}
		{% endif %}
	</div>
	{% EVENT dmzx_mchat_action_bar_top_after %}
</div>
{% endif %}

{% EVENT dmzx_mchat_before %}

{% if MCHAT_IS_COLLAPSIBLE %}
	<a class="category{% if S_MCHAT_HIDDEN %} hidden-category{% endif %} mchat-category"></a>
{% endif %}

<div class="forabg mchat-wrapper{% if S_MCHAT_AVATARS %} mchat-avatars{% endif %}">
	<a id="mChat"></a>
	<div class="inner">
		<ul class="topiclist mchat-header">
			<li class="header">
				{% INCLUDE '@dmzx_mchat/mchat_header.html' %}
		</ul>
		  </li>
	
			<!-- IF SCRIPT_NAME eq 'index' and STYLE_SETTINGS_CONFIG_COLLAPSIBLE_PANELS -->
            	<div class="collapse-trigger open">
                	<span class="icon fa-minus tooltip-left" title="Collapse"></span>
                    <span class="icon fa-plus tooltip-left" title="Expand"></span>
                </div>
            <!-- ENDIF -->            
		

		{% EVENT dmzx_mchat_body_before %}

		<div id="mchat-body"{% if MCHAT_IS_COLLAPSIBLE %} class="collapse-trigger open"{% endif %}>
			{% if MCHAT_SOUND_ENABLED %}
				<audio id="mchat-sound-add" class="hidden" src="{{ EXT_URL }}sounds/add.mp3" preload="auto"></audio>
				<audio id="mchat-sound-edit" class="hidden" src="{{ EXT_URL }}sounds/edit.mp3" preload="auto"></audio>
				<audio id="mchat-sound-del" class="hidden" src="{{ EXT_URL }}sounds/del.mp3" preload="auto"></audio>
				<audio id="mchat-sound-error" class="hidden" src="{{ EXT_URL }}sounds/error.mp3" preload="auto"></audio>
			{% endif %}

			<div id="mchat-confirm" class="hidden">
				<h3>{{ lang('CONFIRM') }}</h3>
				<div class="mchat-confirm-fields">
					<p></p>
					<textarea></textarea>
				</div>
				<fieldset class="submit-buttons">
					<input type="button" name="confirm" value="{{ lang('MCHAT_OK') }}" class="button2">&nbsp;
					<input type="button" name="cancel" value="{{ lang('CANCEL') }}" class="button2">
				</fieldset>
			</div>

			{% if MCHAT_STATIC_MESS and MCHAT_PAGE != 'archive' %}
				{% EVENT dmzx_mchat_static_container_before %}
				<ul class="topiclist forums mchat-static-container">
					<li class="row mchat-static">{{ MCHAT_STATIC_MESS }}</li>
				</ul>
				{% EVENT dmzx_mchat_static_container_after %}
			{% endif %}

			<div id="mchat-main"{% if MCHAT_MESSAGE_TOP %} class="mchat-messages-top"{% endif %}>
				{% EVENT dmzx_mchat_messages_container_before %}

				<ul id="mchat-messages" class="topiclist forums">
					{% if loops.mchatrow|length %}
						{% INCLUDE '@dmzx_mchat/mchat_messages.html' %}
					{% else %}
						<li class="row mchat-static mchat-no-messages">{{ lang('MCHAT_NOMESSAGE') }}</li>
					{% endif %}
				</ul>

				{% EVENT dmzx_mchat_messages_container_after %}
			</div>

			{% INCLUDE '@dmzx_mchat/mchat_panel.html' %}
		</div>

		{% EVENT dmzx_mchat_body_after %}
	</div>
</div>

{% EVENT dmzx_mchat_after %}

{% if MCHAT_PAGE == 'archive' and (loops.pagination|length or MCHAT_TOTAL_MESSAGES) %}
<div class="action-bar bottom">
	{% EVENT dmzx_mchat_action_bar_bottom_before %}
	<div class="pagination">
		{{ MCHAT_TOTAL_MESSAGES }}
		{% if loops.pagination|length %}
			{% INCLUDE 'pagination.html' %}
		{% else %}
			&bull; {{ PAGE_NUMBER }}
		{% endif %}
	</div>
	{% EVENT dmzx_mchat_action_bar_top_after %}
</div>
{% endif %}

{% if MCHAT_PAGE == 'custom' and MCHAT_WHOIS_INDEX %}
	<h3>{{ lang('MCHAT_WHO_IS_CHATTING') }}</h3>
	{% INCLUDE '@dmzx_mchat/mchat_whois.html' %}
	<div id="mchat-refresh">
		<span id="mchat-refresh-explain">{{ lang('MCHAT_WHO_IS_REFRESH_EXPLAIN', MCHAT_WHOIS_REFRESH / 1000) }}</span>
		<span id="mchat-refresh-pending" class="hidden">{{ lang('MCHAT_REFRESHING') }}</span>
	</div>
{% endif %}

{% if MCHAT_PAGE in ['custom', 'archive'] and LEGEND %}
	<div id="mchat-legend">
		<em>{{ lang('LEGEND') ~ lang('COLON') }} {{ LEGEND }}</em>
	</div>
{% endif %}

{% EVENT dmzx_mchat_overall_footer_before %}

{% if MCHAT_PAGE in ['custom', 'archive'] %}
	{% INCLUDE 'overall_footer.html' %}
{% endif %}

Image

User avatar
kasimi
mChat developer
Posts: 795
Joined: 06 Oct 2016, 09:56
Location: Germany
Contact:

Re: Collapsible Mchat (Milk styl)

#4

Post by kasimi » 06 Dec 2018, 09:47

Don't add the <div class="collapse-trigger open"> inside mChat. Add the collapse-trigger open classes to mChat's container element (the div with the mchat-wrapper class).

Unfortunately I can't provide any further free support because Milk is a paid style and I don't have access to it.

Post Reply

Who is online

Users browsing this forum: Xcalibr8 and 1 guest