Responsive Template für Modified

[Markus]

Hi Timm,

Meine navbar ist sticky und hat einen z-index von 8999 und dennoch kommt es in Safari auf dem iPhone teilweise dazu, dass das "search_cat" Feld über meiner navbar liegt, der rechte Teil, das Suchfeld selbst, aber nicht.
Hast du da einen Tipp? Bzw. ist der z-index überhaupt nötig?

Den hat sie vielleicht in der Desktop-Ansicht ... in deiner media-queries.css steht aber das hier

Code: CSS  [Auswählen]

@media only screen and (max-width: 985px)
#layout_navbar {
    z-index: 1000;
}

Deshalb liegt dann das Suchfeld über der Navbar.

Markus

[Timm]

Moin Markus

Hab verstanden, warum das Kategoriefeld einen z-index haben muss. Danke für die Info.

Allerdings hab ich in meiner media-queres.css keinen einzigen Eintrag für z-index noch für die navbar. Es sollte also der Wert von 8999 aus der stylesheet.css nicht überschrieben werden.

Gruß Timm

[Markus]

Hi Timm,

sorry .. das steht in der jquery.sidebar.css ... da müsstest du die Werte ebenfalls erhöhen auf 8999.

schöne Grüße

Markus

[Timm]

Danke dir, hat geklappt.

Gruß Timm

[noRiddle (revilonetz)]

@Markus
Kleiner Vorschlag um das Kategorie-Dropdown (wenn aktiviert) bei der Suche zu verschönern:
Nach Auswahl einer Kategorie kann man den Kategorienamen nicht lesen weil das Dropdown auf Ursprungsbreite bleibt.

Mit folgendem kleinen Skript - Idee irgendwann mal im I-Net gefunden - welches mittels eine vorrübegehenden Clons des ausgewählten Textes in einem HTML-Element die nötige Breite berechnet und diese dann auf das Dropdown anwendet, kann man das verhübschen:
(vielleicht in die /templates/tpl_modified_responsive/javascript/extra/default.js.php ?)

Code: Javascript  [Auswählen]

<?php if(defined('SEARCH_AC_CATEGORIES') && SEARCH_AC_CATEGORIES == 'true') { ?>
  //BOC variable select width, 08-2020, noRiddle
  (function($, window) {
    var arrowWidth = 30;

    $.fn.resizeselect = function(settings) {
        return this.each(function() {
            $(this).change(function(){
                let $this = $(this),
                //create element to measure
                let text = $this.find('option:selected').text(),
                let $test = $('<span>').html(text);

                //add to body, get width, and remove
                $test.appendTo('body');
                let width = $test.width();
                $test.remove();

                //set select width
                $this.width(width + arrowWidth);
                $('.SumoSelect > .CaptionCont').width(width + arrowWidth); //also for sumoselect, noRiddle

                //run on start
            }).change();
        });
    };
  })(jQuery, window);
 
  $(function() {
    $('#cat_search').resizeselect();
  });
  //BOC variable select width, 08-2020, noRiddle
<?php } ?>

Mit so wenig Code, vor allem wenn komprimiert, eine bessere Optik und User-Freundlichkeit herstellen zu können ist nice.

Das Sumoselect option-Dropdown würde ich übrigens auf eine min-width:140px; setzen (oder bei längeren Kat-Namen auch breiter), um auch da besser die Kategorien lesen zu können.

Code: CSS  [Auswählen]

.search_inner .search_cat .SumoSelect > .optWrapper {
  width:auto !important;
  max-width:300px !important;
  min-width:140px; /*added, 08-2020, noRiddle*/
}

Gruß,
noRiddle

[Markus]

Hi noRiddle,

das hatte ich mir auch schonmal überlegt habe mich dann aber für eine feste Breite entschieden weil das sonst unter Umständen so ein "gezappel" gibt mit der Breite des Dropdown.

Wenn ich das richtig interpretiere wird durch das Script ja die Breite angepasst.
Das solltest du aber auch mit CSS erreichen können.

Ändere mal bitte in der "stylesheet.css" den folgenden Block:

Code: CSS  [Auswählen]

.search_inner .search_cat {
    position: relative;
    z-index: 1200;
    width: 80px;
}

in:

Code: CSS  [Auswählen]

.search_inner .search_cat {
    position: relative;
    z-index: 1200;
    min-width: 80px;
    max-width: 280px;
}

Da das Konstrukt in einer Flexbox untergebracht ist, sollte eigentlich die Änderung den gleichen Effekt haben wenn ich das richtig interpretiere ... oder?

Markus

[Tomcraft]

Sollte man dann nicht aber noch eine "max-width" mit angeben, damit das Suchfeld rechts daneben nicht irgendwann bei langen Kategorienamen "verschwindet"?

Grüße

Torsten

[Markus]

Eine "max-width" kann man auch noch mit angeben damit bei ganz langen Kategorienamen nichts "komisches" passiert.
Ich habe den Code oben nochmal editiert und eine max-width eingefügt.

Markus

[noRiddle (revilonetz)]

Ha, wie lustig. Als ich das damals mal brauchte gab's noch keine Flexbox (oder sie wurde fast von keinem Browser unterstützt).
In der Tat geht das mit lediglich CSS. Ich lasse einfach die width-Angabe ganz weg, min-width ist ja nicht nötig und max-width, okay, hängt von der Länge der Kategorienamen ab. Da ich aber gleichzeitig den Raum den das Suchfeld einnimmt erweitert habe, brauche ich auch keine max-width.

Vielen Dank für die Aufklärung.

Gruß,
noRiddle.

[noRiddle (revilonetz)]

Lust auf einen moderner wirkenden Colorbox-Style (hier als Beispiel in modified-Farben ) ?
Habe am Wochenende mal gespielt.

• Neu gestylt, z.B.:
  
  • Overlay-Bild ersetzt mit rgba() und Opacity für Browser die es verstehen
  • Steuerpfeile vergrößert und außerhalb der Lightbox gesetzt
  • Bild- oder iFrame-Titel nach oben mit mehr Platz gesetzt
• Tooltips auf die Pfeil-Buttons mit Hinweis, daß man Bildwechsel auch mittels Pfeiltasten auf dem Keyboard steuern kann (momentan noch nicht touch-kompatibel).

CSS:

Code: CSS  [Auswählen]

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; /*overflow:hidden;*/}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#cboxOverlay{background:rgba(0,0,0,.6);}
#colorbox{outline:0; background:rgba(124,39,89,0.6);border-radius:5px;}
#cboxTopLeft{width:21px; height:10px;}
#cboxTopRight{width:21px; height:10px;}
#cboxBottomLeft{width:21px; height:10px;}
#cboxBottomRight{width:21px; height:10px;}
#cboxMiddleLeft{width:21px;}
#cboxMiddleRight{width:21px;}
#cboxTopCenter{height:10px;}
#cboxBottomCenter{height:10px;}
#cboxContent{/*overflow:hidden;*/ border-radius:5px;}
.cboxIframe{}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin:25px 0 25px;border-radius:5px;}
#cboxTitle{font-weight:400;line-height:20px;font-size:14px;font-weight:bold;top:-2px;color:#fff;left:0;position:absolute;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;width:100%;}
#cboxTitle {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#cboxCurrent{font-weight:400;line-height:20px;position:absolute;bottom:-2px;left:0;color:#fff;font-size:10px; }
#cboxLoadingOverlay{}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute;bottom:0;right:30px;color:#0092ef;}
#cboxPrevious{position:absolute;bottom:50%;left:-65px;width:40px;height:40px;font-size:32px;color:#fff;outline:none;}
#cboxPrevious:hover{color:#ccc;}
#cboxNext{position:absolute;bottom:50%;right:-65px;width:40px;height:40px;font-size:32px;color:#fff;outline:none;}
#cboxNext:hover{color:#ccc;}
#cboxClose{position:absolute;bottom:-18px;right:-32px;width:25px;height:25px;font-size:17px;background:#fff;border-radius:50%;outline:none;}
#cboxClose:hover{color:#7c2759;}
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*BOC tooltip on next and prev buttons, 09-2020, noRiddle*/
#cboxPrevious i.fas::after, #cboxNext i.fas::after {
content: attr(data-title);
display:none;
position:absolute;
top:-50%;
min-width:130px;
padding:3px;
font-size:12px;
line-height:18px;
background:transparent;
color:#ddd;
}
#cboxPrevious i.fas::after{right:100%;}
#cboxNext i.fas::after{left:100%;}
#cboxPrevious:hover i.fas::after, #cboxNext:hover i.fas::after {display:block;}
/*EOC tooltip on next and prev buttons, 09-2020, noRiddle*/

Screenshots:
[ Für Gäste sind keine Dateianhänge sichtbar ] [ Für Gäste sind keine Dateianhänge sichtbar ] [ Für Gäste sind keine Dateianhänge sichtbar ]

Tooltips:
In /templates/tpl_modified_responsive/javascript/extra/colorbox.js.php das ersetzen

Code: Javascript  [Auswählen]

$(".cbimages").colorbox({rel:'cbimages', scalePhotos:true, maxWidth: "90%", maxHeight: "90%", fixed: true, close: '<i class="fas fa-times"></i>', next: '<i class="fas fa-chevron-right"></i>', previous: '<i class="fas fa-chevron-left"></i>'});

mit diesem

Code: Javascript  [Auswählen]

$(".cbimages").colorbox({rel:'cbimages', scalePhotos:true, maxWidth: "90%", maxHeight: "90%", fixed: true, close: '<i class="fas fa-times"></i>', next: '<i class="fas fa-chevron-right" data-title="<?php echo NR_USE_ARROWS_TXT; ?>"></i>', previous: '<i class="fas fa-chevron-left" data-title="<?php echo NR_USE_ARROWS_TXT; ?>"></i>'});

und in /lang/SPRACHE/extra/ in einem PHP-File die Konstanten definieren.
Beispiel für German:

Code: PHP  [Auswählen]

define('NR_USE_ARROWS_TXT', 'Sie können zum Bildwechsel auch die Pfeiltasten auf Ihrem Keyboard benutzen.');

Gruß,
noRiddle

[Tomcraft]

Danke dir! Sieht echt ganz hübsch aus! Nur das "X" zum schließen rechts unten irritiert mich ein wenig.
Das würde ich weiterhin entweder links oben oder rechts oben platzieren.

Grüße

Torsten

[noRiddle (revilonetz)]

Jau, rechts oben ist wohl nicer.
"Weiterhin" ist allerdings ja nicht richtig, denn im Standard-Design ist der Button unten rechts in einer Zeile mit dem Bild-Titel, wenn auch nicht auf die Ecke gesetzt wie in meinem Beispiel.

Für den Close-Button oben einfach im CSS für #cboxClose anstatt bottom-18px z.B. top:-22px;

Gruß,
noRiddle

[Tomcraft]

So wie es im Standard-Template gelöst ist irritiert mich die Ansicht aber nicht so sehr, da es ja in der Reihe ist mit den anderen Controls.

Grüße

Torsten

[noRiddle (revilonetz)]

In der Bestsellers-Box /templates/tpl_modified_responsive/boxes/box_best_sellers.html finde ich diesen Code:

Code: XML  [Auswählen]

<span class="cb_title">{$box_data.PRODUCTS_NAME|mb_substr:"0":"36":"UTF-8"}</span>

Sollte das nicht korrekterweise so lauten ?

Code: XML  [Auswählen]

<span class="cb_title">{$box_data.PRODUCTS_NAME|mb_substr:"0":"36":$smarty.session.language_charset}</span>

Gruß,
noRiddle

[noRiddle (revilonetz)]

Die nächste Sache, wo wir schon dabei sind:
Performance-Killer:
In /templates/tpl_modified_responsive/source/boxes.php findet sich dieser Code:

Code: PHP  [Auswählen]

$smarty->assign('bestseller', strpos($PHP_SELF, FILENAME_LOGOFF)
                           || strpos($PHP_SELF, FILENAME_CHECKOUT_SUCCESS)
                           || strpos($PHP_SELF, FILENAME_SHOPPING_CART)
                           || strpos($PHP_SELF, FILENAME_NEWSLETTER));

und in /templates/tpl_modified_responsive/index.html wird es so abgefragt:

Code: XML  [Auswählen]

{if $bestseller}{if isset($box_BESTSELLERS)}{$box_BESTSELLERS}{/if}{/if}

Da die Bestseller-Box jedoch immer geladen wird
- außer auf Produkt-Details-Seiten -
laufen im Hintergrund auf jeder Shop-Seite die komplexen Queries aus /templates/tpl_modified_responsive/source/boxes/best_sellers.php ab, auch wo sie nicht benötigt werden. Insbesondere auf Kategorie-Seiten kann das, bei vielen Produkten in der Kategorie ein Riesen-Performance-Killer sein. Aber auch ohne das ist es unnötig und schlecht was Ladezeit betrifft. Von Content-Seiten wollen wir mal nicht reden.
Das sollte unbedingt geändert werden.

Mein Vorschlag:
*EDIT* Vorschlag gelöscht, war Schwachsinn , Idee dazu folgt...*END_EDIT*

*EDIT 2*
Vielleicht so ?

Code: PHP  [Auswählen]

    //BOC load bestseller box only when necessary (was performance killer before), 09-2020, noRiddle
    //$smarty->assign('bestseller', true);
    $pages_bestsellers_arr = array(FILENAME_DEFAULT,
                                   FILENAME_LOGOFF,
                                   FILENAME_CHECKOUT_SUCCESS,
                                   FILENAME_SHOPPING_CART,
                                   FILENAME_NEWSLETTER);
    if(in_array(basename($PHP_SELF), $pages_bestsellers_arr) && $current_category_id == 0) {
        require_once(DIR_FS_BOXES . 'best_sellers.php');
        $smarty->assign('bestseller', true);
    }
    //EOC load bestseller box only when necessary (was performance killer before), 09-2020, noRiddle

*END_EDIT 2*

Gruß,
noRiddle