wip: Mobile-Theme-Testphase und PHP-8.2-Guards (Stand Juni 2026)
This commit is contained in:
Thomas Bartelt
@@ -4142,3 +4142,176 @@ form.formated_form select option {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Basisbreite der Boxen auf der Artikel-Detailseite (ohne Navi-Spalte).
|
||||
Stand vorher als style="width:992px" direkt im main.tpl und war damit durch
|
||||
kein Stylesheet zu ueberschreiben -- deshalb blieb die Suchbox schmal,
|
||||
waehrend Titel und Preisbox schon mitgewachsen sind. */
|
||||
#maincontent_wrapper2 .content_box_structure_list { width: 992px; }
|
||||
|
||||
/* ============================================================================
|
||||
SEMI-FIXED RASTER (16.08.2026, nur DEV -- Test)
|
||||
----------------------------------------------------------------------------
|
||||
Ausgangslage: .centralizer/.hcentralizer sind fest 992px, der Inhalt bekommt
|
||||
davon 722px (#content_wrapper), die Navi 235px. Das stammt aus der Zeit fester
|
||||
1024er-Bildschirme.
|
||||
|
||||
Gemessen ueber 1.922 Aufloesungen aus 13 Tagen Access-Log (phpwebstat
|
||||
js_resolution): 83,7 % der Desktop-Besucher haben >= 1600px Breite, nur 3,3 %
|
||||
liegen unter 1280px. Bei 1920 (die Haelfte aller Besucher) bleibt heute ueber
|
||||
die Haelfte des Fensters ungenutzt, waehrend lange Artikelnamen dreizeilig
|
||||
umbrechen.
|
||||
|
||||
Bewusst STUFEN statt fluid: Das Theme rechnet an vielen Stellen mit festen
|
||||
Pixeln (Hintergrundbilder, Dropdown-Menue, Spaltenbreiten). Feste Werte je
|
||||
Stufe bleiben vorhersehbar; ein fluides Layout wuerde diese Annahmen brechen.
|
||||
Unterhalb der ersten Stufe aendert sich NICHTS -- die 992px bleiben der
|
||||
Ausgangszustand.
|
||||
|
||||
Rechnung: #content_wrapper = .centralizer - 235 (Navi) - 10 - 35 (Margins).
|
||||
|
||||
Rollback: diesen Block loeschen. Backup: customized_theme.css.bak_20260816_semifixed
|
||||
============================================================================ */
|
||||
|
||||
/* Stufe 1 -- ab 1440px Viewport (trifft u.a. 1536x864 und alle 1600er) */
|
||||
@media screen and (min-width: 1440px) {
|
||||
.hcentralizer,
|
||||
.centralizer { width: 1280px; }
|
||||
/* Rahmen -- diese Breiten stehen im Parent-Theme (themes/easyshop_advanced/
|
||||
media/css/layout.css) und werden von hier aus ueberschrieben, weil
|
||||
customized_theme.css spaeter geladen wird. */
|
||||
#wrapper,
|
||||
#header_wrapper,
|
||||
#header_trans2,
|
||||
#main_wrapper,
|
||||
#maincontent_wrapper2,
|
||||
#footer { width: 1280px; }
|
||||
#header_trans,
|
||||
#footer_wrapper { min-width: 1280px; }
|
||||
#content_sub_wrapper { width: 1014px; }
|
||||
/* Artikel-Detailseite (site_type=full_width, ueber #maincontent_wrapper2).
|
||||
Das Produktbild bleibt bewusst FIX bei 484px: es ist ein JS-Slider
|
||||
(content_item.js:190 setzt die Innenbreite auf bigImageCount * bigImageWidth,
|
||||
Viewport 484x484 mit overflow:hidden). Groesser ginge nur mit JS-Aenderung und
|
||||
hoeher aufgeloesten details_*.jpg.
|
||||
Stattdessen fuellt die rechte Spalte den gewonnenen Platz auf (Tom).
|
||||
Die 111px Innenabstand der Preisbox (483 -> 372) bleiben ueber calc() erhalten. */
|
||||
.content_item,
|
||||
#item_content1,
|
||||
#item_content2 { width: 1280px; }
|
||||
.content_item .title_wrapper { width: 1189px; }
|
||||
.content_item .image_wrapper { width: 484px; }
|
||||
/* Preisspalte gedeckelt und an den rechten Rand: sie ist absolut positioniert
|
||||
(items.css: top 101, left 508). Wuerde sie den ganzen Rest fuellen, waeren das
|
||||
bei 1560 ueber 1000px fuer einen Kaufbutton -- viel Weissraum. Lieber Bild links,
|
||||
Preis rechts am Rand, dazwischen Luft (Tom). */
|
||||
/* Preisbox: 20px neben dem Bild beginnen und bis zur rechten Kante durchlaufen
|
||||
(Tom: "box fill to end of side, inline container right 0"). Sie ist absolut
|
||||
positioniert, also spannen left+right sie auf -- width muss dafuer auto sein.
|
||||
506 = 484 Bild + 2 Border + 20 Abstand. */
|
||||
.content_item .item_box_right_wrapper { left: 506px; right: 0; width: auto; }
|
||||
#price_box_wrapper,
|
||||
#manufacturer_wrapper { width: 100%; }
|
||||
#price_box_wrapper .register_buy,
|
||||
#price_box_wrapper .shippable_wrapper,
|
||||
#price_box_wrapper .variant_selection,
|
||||
#price_box_wrapper .register_buy .tab,
|
||||
#price_box_wrapper .register_buy .variant_selection_wrapper { width: calc(100% - 111px); }
|
||||
/* Detailseite laeuft OHNE Navi -- Boxen darin gehen auf Rahmen-, nicht auf
|
||||
Contentbreite. Sonst endet die Suchbox weiter links als Titel und Preisbox
|
||||
und nichts ist rechts buendig. */
|
||||
#maincontent_wrapper2 .content_box_structure_list,
|
||||
#maincontent_wrapper2 .full_box,
|
||||
#maincontent_wrapper2 .content_box_textbox { width: 1280px; }
|
||||
.item_friends_slider_wrapper { width: 1218px; }
|
||||
.item_friends_slider_wrapper .image_slider_content_outer_wrapper { width: 1188px; }
|
||||
|
||||
|
||||
#content_wrapper,
|
||||
.full_box,
|
||||
#headerImagesWrapper,
|
||||
.image_slider_wrapper,
|
||||
.list_item_box,
|
||||
.content_box_textbox,
|
||||
.content_box_structure_list,
|
||||
.customer_center .full_box,
|
||||
.consists_of_1 div { width: 1010px; }
|
||||
.content_box_textbox .header,
|
||||
.image_slider_wrapper .image_slider_content_outer_wrapper { width: 968px; }
|
||||
#main_widget_item_categories_dropdown .main_navigation_subnav,
|
||||
#main_widget_item_categories_dropdown .main_navigation_subnav .subNavRoller .subbox,
|
||||
#main_widget_item_categories_dropdown .main_navigation_subnav .subNavRoller .subbox .subboxCover
|
||||
{ width: 1280px; }
|
||||
}
|
||||
|
||||
/* Stufe 2 -- ab 1800px Viewport (1920er aufwaerts, rund die Haelfte der Besucher) */
|
||||
@media screen and (min-width: 1800px) {
|
||||
.hcentralizer,
|
||||
.centralizer { width: 1560px; }
|
||||
/* Rahmen -- diese Breiten stehen im Parent-Theme (themes/easyshop_advanced/
|
||||
media/css/layout.css) und werden von hier aus ueberschrieben, weil
|
||||
customized_theme.css spaeter geladen wird. */
|
||||
#wrapper,
|
||||
#header_wrapper,
|
||||
#header_trans2,
|
||||
#main_wrapper,
|
||||
#maincontent_wrapper2,
|
||||
#footer { width: 1560px; }
|
||||
#header_trans,
|
||||
#footer_wrapper { min-width: 1560px; }
|
||||
#content_sub_wrapper { width: 1294px; }
|
||||
/* Artikel-Detailseite (site_type=full_width, ueber #maincontent_wrapper2).
|
||||
Das Produktbild bleibt bewusst FIX bei 484px: es ist ein JS-Slider
|
||||
(content_item.js:190 setzt die Innenbreite auf bigImageCount * bigImageWidth,
|
||||
Viewport 484x484 mit overflow:hidden). Groesser ginge nur mit JS-Aenderung und
|
||||
hoeher aufgeloesten details_*.jpg.
|
||||
Stattdessen fuellt die rechte Spalte den gewonnenen Platz auf (Tom).
|
||||
Die 111px Innenabstand der Preisbox (483 -> 372) bleiben ueber calc() erhalten. */
|
||||
.content_item,
|
||||
#item_content1,
|
||||
#item_content2 { width: 1560px; }
|
||||
.content_item .title_wrapper { width: 1469px; }
|
||||
.content_item .image_wrapper { width: 484px; }
|
||||
/* Preisspalte gedeckelt und an den rechten Rand: sie ist absolut positioniert
|
||||
(items.css: top 101, left 508). Wuerde sie den ganzen Rest fuellen, waeren das
|
||||
bei 1560 ueber 1000px fuer einen Kaufbutton -- viel Weissraum. Lieber Bild links,
|
||||
Preis rechts am Rand, dazwischen Luft (Tom). */
|
||||
/* Preisbox: 20px neben dem Bild beginnen und bis zur rechten Kante durchlaufen
|
||||
(Tom: "box fill to end of side, inline container right 0"). Sie ist absolut
|
||||
positioniert, also spannen left+right sie auf -- width muss dafuer auto sein.
|
||||
506 = 484 Bild + 2 Border + 20 Abstand. */
|
||||
.content_item .item_box_right_wrapper { left: 506px; right: 0; width: auto; }
|
||||
#price_box_wrapper,
|
||||
#manufacturer_wrapper { width: 100%; }
|
||||
#price_box_wrapper .register_buy,
|
||||
#price_box_wrapper .shippable_wrapper,
|
||||
#price_box_wrapper .variant_selection,
|
||||
#price_box_wrapper .register_buy .tab,
|
||||
#price_box_wrapper .register_buy .variant_selection_wrapper { width: calc(100% - 111px); }
|
||||
/* Detailseite laeuft OHNE Navi -- Boxen darin gehen auf Rahmen-, nicht auf
|
||||
Contentbreite. Sonst endet die Suchbox weiter links als Titel und Preisbox
|
||||
und nichts ist rechts buendig. */
|
||||
#maincontent_wrapper2 .content_box_structure_list,
|
||||
#maincontent_wrapper2 .full_box,
|
||||
#maincontent_wrapper2 .content_box_textbox { width: 1560px; }
|
||||
.item_friends_slider_wrapper { width: 1498px; }
|
||||
.item_friends_slider_wrapper .image_slider_content_outer_wrapper { width: 1468px; }
|
||||
|
||||
|
||||
#content_wrapper,
|
||||
.full_box,
|
||||
#headerImagesWrapper,
|
||||
.image_slider_wrapper,
|
||||
.list_item_box,
|
||||
.content_box_textbox,
|
||||
.content_box_structure_list,
|
||||
.customer_center .full_box,
|
||||
.consists_of_1 div { width: 1290px; }
|
||||
.content_box_textbox .header,
|
||||
.image_slider_wrapper .image_slider_content_outer_wrapper { width: 1248px; }
|
||||
#main_widget_item_categories_dropdown .main_navigation_subnav,
|
||||
#main_widget_item_categories_dropdown .main_navigation_subnav .subNavRoller .subbox,
|
||||
#main_widget_item_categories_dropdown .main_navigation_subnav .subNavRoller .subbox .subboxCover
|
||||
{ width: 1560px; }
|
||||
}
|
||||
|
||||
+4144
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user