Seite 1 von 1

Portal -> responsive Ansicht

Verfasst: Mi 8. Mai 2019, 17:44
von vfrblue
Hallo Udo,
ich habe zu Testzwecken das Portal inklusive der Aktualisierungen unter phpBB 3.2.7 eingerichtet. Dabei ist mir aufgefallen, dass bei unterschiedlichen Styles die seitlichen Module etwas "verwurschtelt" angezeigt werden. Auch das Copyright des Portals wird teilweise verschluckt. Deswegen habe ich die jumpbox.html und die portal_body.html vom Portal ein wenig verändert.

portal_body.html

Code: Alles auswählen

<!-- INCLUDE overall_header.html -->
<!-- INCLUDE portal/_block_config.html -->

<div id="portal-body" role="grid">
	<!-- IF S_TOP_COLUMN -->	
	<div id="portal-top" role="rowgroup">
	<!-- [+] top module area -->
		<ul>
			<li>
			<!-- BEGIN modules_top -->
				<!-- DEFINE $TEMPLATE_FILE = '{modules_top.TEMPLATE_FILE}' -->
				<!-- DEFINE $IMAGE_SRC = '{modules_top.IMAGE_SRC}' -->
				<!-- DEFINE $IMAGE_WIDTH = '{modules_top.IMAGE_WIDTH}' -->
				<!-- DEFINE $IMAGE_HEIGHT = '{modules_top.IMAGE_HEIGHT}' -->
				<!-- DEFINE $CUSTOM_CODE = '{modules_top.CODE}' -->
				<!-- DEFINE $TITLE = '{modules_top.TITLE}' -->
				<!-- DEFINE $MODULE_ID = '{modules_top.MODULE_ID}' -->
				<!-- INCLUDE {$TEMPLATE_FILE} -->
			<!-- END modules_top -->
			</li>
		</ul>
	<!-- [-] top module area -->
	</div>
	<!-- ENDIF -->
	<!-- [+] center module area -->
	<!-- IF S_CENTER_COLUMN -->
	<div id="portal-center-wrapper">
		<div id="portal-center" style="margin: 0 <!-- IF S_RIGHT_COLUMN -->{S_PORTAL_RIGHT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF --> 0 <!-- IF S_LEFT_COLUMN -->{S_PORTAL_LEFT_COLUMN}px<!-- ELSE -->-{$BLOCK_DISTANCE}<!-- ENDIF -->; padding: 0 {$BLOCK_DISTANCE};" role="rowgroup">
			<!-- BEGIN modules_center -->
				<!-- DEFINE $TEMPLATE_FILE = '{modules_center.TEMPLATE_FILE}' -->
				<!-- DEFINE $IMAGE_SRC = '{modules_center.IMAGE_SRC}' -->
				<!-- DEFINE $IMAGE_WIDTH = '{modules_center.IMAGE_WIDTH}' -->
				<!-- DEFINE $IMAGE_HEIGHT = '{modules_center.IMAGE_HEIGHT}' -->
				<!-- DEFINE $CUSTOM_CODE = '{modules_center.CODE}' -->
				<!-- DEFINE $TITLE = '{modules_center.TITLE}' -->
				<!-- DEFINE $MODULE_ID = '{modules_center.MODULE_ID}' -->
				<!-- INCLUDE {$TEMPLATE_FILE} -->
			<!-- END modules_center -->
			<!-- IF S_DISPLAY_JUMPBOX and B3P_DISPLAY_JUMPBOX -->
				<br />
				<!-- INCLUDE portal/modules/jumpbox.html -->
			<!-- ENDIF -->
		</div>
	</div>
	<!-- ENDIF -->
	<!-- [-] center module area -->
	<!-- [+] left module area -->
		<!-- IF S_LEFT_COLUMN -->
		<div id="portal-left" style="width: {S_PORTAL_LEFT_COLUMN}px;" role="rowgroup">
			<!-- BEGIN modules_left -->
				<!-- DEFINE $TEMPLATE_FILE = '{modules_left.TEMPLATE_FILE}' -->
				<!-- DEFINE $IMAGE_SRC = '{modules_left.IMAGE_SRC}' -->
				<!-- DEFINE $IMAGE_WIDTH = '{modules_left.IMAGE_WIDTH}' -->
				<!-- DEFINE $IMAGE_HEIGHT = '{modules_left.IMAGE_HEIGHT}' -->
				<!-- DEFINE $CUSTOM_CODE = '{modules_left.CODE}' -->
				<!-- DEFINE $TITLE = '{modules_left.TITLE}' -->
				<!-- DEFINE $MODULE_ID = '{modules_left.MODULE_ID}' -->
				<!-- INCLUDE {$TEMPLATE_FILE} -->
			<!-- END modules_left -->
		</div>
		<!-- ENDIF -->
	<!-- [-] left module area -->

	<!-- [+] right module area -->
		<!-- IF S_RIGHT_COLUMN -->
		<div id="portal-right" style="width: {S_PORTAL_RIGHT_COLUMN}px; margin-<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->right<!-- ELSE -->left<!-- ENDIF -->: -{S_PORTAL_RIGHT_COLUMN}px;" data-width="{S_PORTAL_RIGHT_COLUMN}" role="rowgroup">
			<!-- BEGIN modules_right -->
				<!-- DEFINE $TEMPLATE_FILE = '{modules_right.TEMPLATE_FILE}' -->
				<!-- DEFINE $IMAGE_SRC = '{modules_right.IMAGE_SRC}' -->
				<!-- DEFINE $IMAGE_WIDTH = '{modules_right.IMAGE_WIDTH}' -->
				<!-- DEFINE $IMAGE_HEIGHT = '{modules_right.IMAGE_HEIGHT}' -->
				<!-- DEFINE $CUSTOM_CODE = '{modules_right.CODE}' -->
				<!-- DEFINE $TITLE = '{modules_right.TITLE}' -->
				<!-- DEFINE $MODULE_ID = '{modules_right.MODULE_ID}' -->
				<!-- INCLUDE {$TEMPLATE_FILE} -->
			<!-- END modules_right -->
		</div>
		<!-- ENDIF -->
	<!-- [-] right module area -->
	<br class="portal-clear" />
	<!-- IF S_BOTTOM_COLUMN -->
	<div id="portal-bottom" role="rowgroup">
	<!-- [+] bottom module area -->
		<ul>
			<li>
			<!-- BEGIN modules_bottom -->
				<!-- DEFINE $TEMPLATE_FILE = '{modules_bottom.TEMPLATE_FILE}' -->
				<!-- DEFINE $IMAGE_SRC = '{modules_bottom.IMAGE_SRC}' -->
				<!-- DEFINE $IMAGE_WIDTH = '{modules_bottom.IMAGE_WIDTH}' -->
				<!-- DEFINE $IMAGE_HEIGHT = '{modules_bottom.IMAGE_HEIGHT}' -->
				<!-- DEFINE $CUSTOM_CODE = '{modules_bottom.CODE}' -->
				<!-- DEFINE $TITLE = '{modules_bottom.TITLE}' -->
				<!-- DEFINE $MODULE_ID = '{modules_bottom.MODULE_ID}' -->
				<!-- INCLUDE {$TEMPLATE_FILE} -->
			<!-- END modules_bottom -->
			</li>
		</ul>
	<!-- [-] bottom module area -->
	</div>
	<!-- ENDIF -->
</div>

<!--// board3 Portal by www.board3.de //-->
<div style="clear: both"></div>
<div style="margin: 42px">
	<div class="copyright">Powered by <a href="https://www.board3.de/">Board3 Portal</a> &copy; 2009 - 2017 Board3 Group</div>
</div>

<!-- INCLUDEJS portal/assets/jquery.getscrollbarwidth.js -->
<!-- INCLUDEJS portal/assets/portal.js -->

<!-- INCLUDE overall_footer.html -->


jumpbox.html

Code: Alles auswählen

<!-- IF S_DISPLAY_JUMPBOX -->
<div style="clear: both"></div>
<div style="margin-top: 24px;">
	<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-up<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">
			<span title="<!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF -->" class="button button-secondary dropdown-trigger dropdown-select">
				<span><!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF --></span>
				<span class="caret"><i class="icon fa-sort-down fa-fw" aria-hidden="true"></i></span>
			</span>
		<div class="dropdown">
			<div class="pointer"><div class="pointer-inner"></div></div>
			<ul class="dropdown-contents">
				<!-- BEGIN jumpbox_forums -->
				<!-- IF jumpbox_forums.FORUM_ID neq -1 -->
				<li><a href="{jumpbox_forums.LINK}" class="<!-- IF jumpbox_forums.level -->jumpbox-sub-link<!-- ELSEIF jumpbox_forums.S_IS_CAT -->jumpbox-cat-link<!-- ELSE -->jumpbox-forum-link<!-- ENDIF -->"><!-- BEGIN level --><span class="spacer"></span><!-- END level --> <span><!-- IF jumpbox_forums.level --> &#8627; &nbsp;<!-- ENDIF --> {jumpbox_forums.FORUM_NAME}</span></a></li>
				<!-- ENDIF -->
				<!-- END jumpbox_forums -->
			</ul>
		</div>
	</div>
</div>
<br />
<div style="clear: both"></div>
<!-- ENDIF -->
Wobei man eventuell die [margin]-Werte noch ein wenig anpassen könnte.

Re: Portal -> responsive Ansicht

Verfasst: Mi 8. Mai 2019, 18:07
von vfrblue
Kann leider nicht mehr editieren. :?

Meine Frage: Kann man das so verwenden, oder tauchen deswegen vielleicht Probleme an anderer Stelle auf?

Re: Portal -> responsive Ansicht

Verfasst: Mi 8. Mai 2019, 19:58
von Kirk
Hallo Hermann
Das es bei manchen Styles nicht ganz passt ist logisch.
Wenn dann sollte man den jeweiligen Style in die EXT mit aufnehmen und diese Änderungen dort einfügen.
Besser wäre es sowas über css zu regeln.
Ob es jetzt an andere Stelle Probleme geben würde, kann ich dir so nicht sagen, ich müsste dies am Wochenende testen.

Re: Portal -> responsive Ansicht

Verfasst: So 12. Mai 2019, 09:08
von Kirk
Ich hab deinen Vorschlag getestet, in der responsive Ansicht (<= 700px) passt es, aber bei voller Breite sind die Abstände zu groß.
Von daher täte ich es so machen, in der root/ext/board3/portal/styles/prosilver/theme/responsive.css innerhalb von @media (max-width: 700px) { das hier einfügen:

Code: Alles auswählen

	.jumpbox {
		margin: 15px auto;
	}
	.copyright {
		clear: both;
	}