Portal -> responsive Ansicht

Eingeschränkter Support!
Forumsregeln
Bei Fragen zu einer bestimmten Extension sind Extension-Name und die Downloadquelle (Link) der Extension erforderlich.
Antworten
Benutzeravatar
vfrblue
Offline
Beiträge: 38
Registriert: Di 17. Jan 2017, 23:47
Wohnort: Grafschaft Bentheim
Kontaktdaten:
Mai 2019 08 17:44

Portal -> responsive Ansicht

Beitrag 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.
Gruß, Hermann

Forum

Benutzeravatar
vfrblue
Offline
Beiträge: 38
Registriert: Di 17. Jan 2017, 23:47
Wohnort: Grafschaft Bentheim
Kontaktdaten:
Mai 2019 08 18:07

Re: Portal -> responsive Ansicht

Beitrag von vfrblue


Kann leider nicht mehr editieren. :?

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

Forum

Benutzeravatar
Kirk
Administrator
Offline
Beiträge: 888
Registriert: Di 15. Apr 2014, 10:54
Wohnort: Erde
Kontaktdaten:
Mai 2019 08 19:58

Re: Portal -> responsive Ansicht

Beitrag 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.
Gruß Udo

Benutzeravatar
Kirk
Administrator
Offline
Beiträge: 888
Registriert: Di 15. Apr 2014, 10:54
Wohnort: Erde
Kontaktdaten:
Mai 2019 12 09:08

Re: Portal -> responsive Ansicht

Beitrag 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;
	}
Gruß Udo

Antworten