Jump to content

Stefanowitsch

Members
 View Profile  See their activity

  • Posts

    326

  • Joined

  • Last visited

  • Days Won

    5

 Content Type 

Everything posted by Stefanowitsch

  1. Stefanowitsch
    Is there a simple way to turn the cookie banner active/inactive in the module settings? I would like to prepare a default banner for my projects that is not shown by default.
  2. Stefanowitsch
    @bernhard I made a little tweak to the rf-scrollclass script. Okay it was not me directly. Instead I asked a certain AI if it is possible to alter the script... just for scientific purposes of course ? I want to add multiple rf-scrollclass attributes to one DOM element: <header class="rf-scrollclass" rf-scrollclass="scrolled@20 scrolledmobile@15"> Now the class "scrolledmobile" gets added at 15px, the "scrolled" class gets added at 20px - all on the same element. This gives me the ability to use css media queries for some responsive tweaking of the position of my fixed navbar (for example!) header { position: absolute; top: 40px; width: 100%; z-index: 100; @media @min-m { &.scrolled { top: 20px; position: fixed; } } @media @max-s { top: 30px; &.scrolledmobile { top: 15px; position: fixed; } } } Long story short, here's the updated script: (function () { let scrollElements = document.querySelectorAll("[rf-scrollclass]"); for (i = 0; i < scrollElements.length; i++) { let el = scrollElements[i]; let attrs = el.getAttribute("rf-scrollclass").split(" "); for (j = 0; j < attrs.length; j++) { let parts = attrs[j].split("@"); if (parts.length != 2) return; let cls = parts[0]; let y = parts[1] * 1; window.addEventListener("scroll", function () { scrollpos = window.scrollY; if (scrollpos >= y) el.classList.add(cls); else el.classList.remove(cls); }); } } })();
  3. Stefanowitsch
    Awesome! It is working now.
  4. Stefanowitsch
    I included the script in my head like this: <? $rockfrontend->scripts() ->add($config->urls->templates . 'scripts/uikit/uikit.min.js') ->add($config->urls->templates . 'scripts/uikit/uikit-icons.min.js') ->add("/site/modules/RockFrontend/scripts/rf-scrollclass.js", "defer") ->minify(!$config->debug); ?> When minify is set to "true" this is rendered in the <head> section ("defer" missing):
  5. Stefanowitsch
    @bernhard can you take a look? When using the minify function of RockFrontend the "defer" attribute gets lost. So the script will never fire. A workaround for me was to wrap the script into a JS "DOMContentLoaded" Function.
  6. Stefanowitsch
    My interest in in RockFrontend was initiated as the module was launched last year: At first only because of the auto-refresh feature. Being tired of hitting F5 all the time that feature alone (!) made development far more enjoyable for me. Even back then RF offered many many features, most of them I still don't use today (shame on me!). Plus - @bernhard is constantly adding new features to this module and I have to say that it's hard to keep track sometimes. For example I just learned "by accident" about the new rf-scrollclass feature ? So simultaneously you have to keep 3 different places up-to-date when new changes arrive: - Github - The PW module page entry - The module thread in the PW forum oh and also Youtube ? Therefore I can agree - I find myself from time to time looking for "that one thing that I read" and I don't find it anymore. In that case I ask Bernhard personally via PM like "how do I do this and that?". If it's something that is not supported by RF yet but would be useful it is not unlike that Bernhard will include it in a new version. I think people have to see RockFrontend as a big toolbox. You don't need everything in it. You only grab the tools you need for your current task.
  7. Stefanowitsch
    Can someone explain to me what this means? In case of best-practice. Usually for the sender address I use something like noreply@mydomain.com but this address does not send the mail actually. In fact I have a separate address like mailer@mydomain.com (as SMTP user in the module settings) which sends out the mails from the forms on a website. As far as I understand those addresses have to match in some cases?
  8. Stefanowitsch
    I want to show you a project that I started developing in summer of 2022 and that went online in january 2023. Kulturhaus Wilster ("Arts Centre Wilster") https://www.kulturhauswilster.de The Kulturhaus Wilster - also called "Wilster's living room" by many visitors - is a socio-cultural center in the heart of Wilster. Wilster is a small City located north from Hamburg, germany. Despite the fact that this is a small venue they offer large amount of events. The events range all the way from concerts to theatre and everything inbetween! The old version of the site was a super simple WordPress website in a black-and-white only color scheme. In my opinion it did no justice to the very colorful program that the Kulturhaus offers so I tried my best to bring some color into the game. The whole website should have a shabby-chique look combined with clean, modern elements. The Homepage offers a preview of the next 8 upcoming events. A blog section is also included and the latest post is displayed next to the event calendar book as PDF download. The event pages offer a quick-reservation form (tickets are not sold online) and a quick look to the next upcoming events in the sidebar. The website features a large event calendar. It was a really nice exercise in using ProcessWires very own paging and selector features. Events can be searched and filtered by type (and month), too. All with a few lines of code only. For example "Look for events that take place in the future in a specific category" $events = $pages->find("select_event_cat.title~|%=$c, template=event, date_event>=today, sort=date_event, sort=time_from, limit=6"); Besides that the website features some colorful content pages with large images, galleries, textboxes and some teaser elements. The editors of the website are able to display all facets of the Kulturhaus this way. Tech Talk: Frontend Framework is Bootstrap 4.6 ProcessWire Modules used on this one are: - WireMail: SMTP (https://processwire.com/modules/wire-mail-smtp/) - SEO Maestro (https://processwire.com/modules/seo-maestro/) - All in one minify for asses (https://processwire.com/modules/all-in-one-minify/) - PageImageSource for webp image srcsets (https://processwire.com/modules/pageimage-source/) - JkPublishPages is used for time-controlled publishing of the blog posts. Please check out this module! Thanks @Juergen - @bernhards great RockFrontend was also used. In this particular project only the autorefresh feature (because this module was brandnew back then and development of the page was almost done). But even "only" using autorefresh makes it worth using it! Please have a look:
  9. Stefanowitsch
    I just used this module in a project where I needed to add a line break into a headline field that does not allow HTML tags. Normally you would just insert a <br> tag. Sometimes you have this case where you need just this one little tweak and don't want to change field settings globally or create a new field/setting just for a single purpose. For example: How do you get a linke break into this headline when HTML is now allowed in the field settings? You could shrink down the parent container in the front end to "force break" the text. But this is kind of unpredictable as you never now if the client changes the text at one point in the future. So here's my solution. I can define line breaks via the @-sign like this: Not without some custom code of course: $wire->addHookAfter("TextformatterRockDown::replace", function ($event) { $str = $event->arguments(0); $str = preg_replace("/@/", "<br>", $str); $event->return = $str; }); This is the result:
  10. Stefanowitsch
    A big shout-out and thank-you to @bernhard for keeping on improving the RockFronend. (and the whole Rock-EcoSystem) continuously. I asked for a minify-feature and here it is! I am using RockFrontend in every project now as it combines some must-have features for frontend development (IMHO!). Today a new feature was added (or lets say improved as auto-minify was included before) The Minify Feature (for Styles and Scripts!) See the Wiki entry here Lets start simple: How do I include stylesheets with RockFrontend in the first place? RockFrontend always had the feature to bundle stylesheets via the styles() function. For example I am loading some LESS partials into my header like this. You don't have to use LESS files, regular CSS files work the same. Note: Since RockFrontend offers LESS support you can add those files directly, no need to compile them and add the CSS files. For this you have to install the ProcessWire Less module. <? $rockfrontend->styles() ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less') // add single LESS or CSS file ->addAll($config->urls->templates . 'styles/less/project') // point to folder to include files automatically ->addAll($config->urls->templates . 'styles/less/custom') ?> The result in this case is a single compiled CSS file that will be included in your head automatically. RockFrontend is very smart. You don't have to include tons of partial LESS project files here. Just use the addAll() function and point to a folder where your assets are saved and the module does the import for you. This is how my folder structure looks like. If I create new LESS files in there, they will be added and compiled automatically at runtime. How to minify For debugging and development purposes I don't use the minify feature. Instead I use it on the staging server exclusively. To generate a minified version of your stylesheet just add minify(true) <? $rockfrontend->styles() ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less') ->addAll($config->urls->templates . 'styles/less/project') ->addAll($config->urls->templates . 'styles/less/custom') ->minify(true); ?> If you want to chain the minify function it to your debug-mode state you can do it like this (my preferred solution). <? $rockfrontend->styles() ->add($config->urls->templates . 'styles/less/uikit/_custom-import.less') ->addAll($config->urls->templates . 'styles/less/project') ->addAll($config->urls->templates . 'styles/less/custom') ->minify(!$config->debug); ?> That's it! Does minify work with Scrips? Yes, exactly the same. But you make use of the scripts() function in this case. <? $rockfrontend->scripts() ->add($config->urls->templates . 'scripts/script1.js') ->add($config->urls->templates . 'scripts/script2.js') ->add($config->urls->templates . 'scripts/script3.js') ->minify(!$config->debug); ?> Note that these script files are not bundled (even if you chose minify false). Instead they all come out as minified versions separately. I find that this workflow I straight forward and it combines some of the best features that RockFrontend offers! If you combine this with the awesome autorefresh feature, frontend development becomes a breeze!
  11. Stefanowitsch
    This entry is added to the exceptions log. Maybe it's not a problem of your module at all as it seems but has to to with the latest dev version? I have no idea why this is happening, though. No Template specified (in /wire/modules/Process/ProcessTemplate/ProcessTemplate.module line 760)
  12. Stefanowitsch
    @Richard Jedlička I've been using this module for years and it is really a helper. After upgrading to PW Version 3.0.213 dev (!) I encounter an error when I want to edit the page template via the quick link. The other quick links for the fields are working fine. Heres the message: #0 /Users/XXX/XXX/wire/core/Wire.php(413): ProcessWire\ProcessTemplate->___executeEdit() #1 /Users/XXX/XXX/wire/core/WireHooks.php(952): ProcessWire\Wire->_callMethod('___executeEdit', Array) #2 /Users/XXX/XXX/wire/core/Wire.php(484): ProcessWire\WireHooks->runHooks(Object(ProcessWire\ProcessTemplate), 'executeEdit', Array) #3 /Users/XXX/XXX/wire/core/ProcessController.php(350): ProcessWire\Wire->__call('executeEdit', Array) #4 /Users/XXX/XXX/wire/core/Wire.php(413): ProcessWire\ProcessController->___execute() #5 /Users/XXX/XXX/wire/core/WireHooks.php(952): ProcessWire\Wire->_callMethod('___execute', Array) #6 /Users/XXX/XXX/wire/core/Wire.php(484): ProcessWire\WireHooks->runHooks(Object(ProcessWire\ProcessController), 'execute', Array) #7 /Users/XXX/XXX/wire/core/admin.php(160): ProcessWire\Wire->__call('execute', Array) #8 /Users/XXX/XXX/wire/modules/AdminTheme/AdminThemeUikit/controller.php(15): require('/Users/sthumann...') #9 /Users/XXX/XXX/site/templates/admin.php(15): require('/Users/sthumann...') #10 /Users/XXX/XXX/wire/core/TemplateFile.php(328): require('/Users/sthumann...') #11 /Users/XXX/XXX/wire/core/Wire.php(413): ProcessWire\TemplateFile->___render() #12 /Users/XXX/XXX/wire/core/WireHooks.php(952): ProcessWire\Wire->_callMethod('___render', Array) #13 /Users/XXX/XXX/wire/core/Wire.php(484): ProcessWire\WireHooks->runHooks(Object(ProcessWire\TemplateFile), 'render', Array) #14 /Users/XXX/XXX/wire/modules/PageRender.module(575): ProcessWire\Wire->__call('render', Array) #15 /Users/XXX/XXX/wire/core/Wire.php(416): ProcessWire\PageRender->___renderPage(Object(ProcessWire\HookEvent)) #16 /Users/XXX/XXX/wire/core/WireHooks.php(952): ProcessWire\Wire->_callMethod('___renderPage', Array) #17 /Users/XXX/XXX/wire/core/Wire.php(484): ProcessWire\WireHooks->runHooks(Object(ProcessWire\PageRender), 'renderPage', Array) #18 /Users/XXX/XXX/wire/core/WireHooks.php(1060): ProcessWire\Wire->__call('renderPage', Array) #19 /Users/XXX/XXX/wire/core/Wire.php(484): ProcessWire\WireHooks->runHooks(Object(ProcessWire\Page), 'render', Array) #20 /Users/XXX/XXX/wire/modules/Process/ProcessPageView.module(184): ProcessWire\Wire->__call('render', Array) #21 /Users/XXX/XXX/wire/modules/Process/ProcessPageView.module(114): ProcessWire\ProcessPageView->renderPage(Object(ProcessWire\Page), Object(ProcessWire\PagesRequest)) #22 /Users/XXX/XXX/wire/core/Wire.php(416): ProcessWire\ProcessPageView->___execute(true) #23 /Users/XXX/XXX/wire/core/WireHooks.php(952): ProcessWire\Wire->_callMethod('___execute', Array) #24 /Users/XXX/XXX/wire/core/Wire.php(484): ProcessWire\WireHooks->runHooks(Object(ProcessWire\ProcessPageView), 'execute', Array) #25 /Users/XXX/XXX/index.php(55): ProcessWire\Wire->__call('execute', Array) #26 {main}
  13. Stefanowitsch
    Thank you! I found an old amazon tablet here (android) and there the button click events are working fine too. This looks more and more like an iPhone bug.
  14. Stefanowitsch
    Yes I can confirm now hat everything works as expected.
  15. Stefanowitsch
    I'll send you a PM with some screenshots of my page structure and the settings.
  16. Stefanowitsch
    You are right. This setting here in the page template settings seems to be responsible for including/excluding the template in the module settings. This was set to "NO" in my case: May pages using this template have children? Is this critical for the module to work? I want to include the "Published From" field to a blog post template. This template should not be allowed to have subpages underneath it.
  17. Stefanowitsch
    I have installed the module. On the module settings page in the "Add fields to template" checkbox-list some of my templates are missing (where I need to add the field). Does the module kind of "sort out" some templates depending on the settings here? Am I able to add the required fields "by hand" in the template settings instead?
  18. Stefanowitsch
    Thanks for testing! I only have my iPhone for testing and there the behaviour is identical in safari + chrome. I asked the same question on the UIKit discord channel yesterday. Which is a bit new for me - describing such a complicated thing in a chat room environment. Maybe they have an explanation.
  19. Stefanowitsch
    I ran over a bug (?) that kind of freaks me out. It's this kind of problem that seems to occur without any reason. But let me explain: I have a project that is using the latest UIKit 3 library. On the homepage I make use of a slideshow component which is also configured to take space of the entire viewport height (via: uk-height-viewport). The other content elements are introduced by using the Scrollspy component when scrolling down. I was wondering why no link is working (even javascript on click events on anything on the page). Instead the "first" click only triggers the hover state of the link/button. Then the second click triggers the link event. This only occurs on mobile devices (like my iPhone). The only solution to make links work in the first place is to get rid of the uk-height-viewport attribute of the slideshow. OR to get rid of all the Scrollspy instances. This makes no sense to me. I made a small demo site where I can exactly reproduce this phenomenon. So it seems to have nothing to to with my project code but is in fact a kind of UIKit bug (?). Please have a look: http://uikit.thumann-preview.de/ 1. Open the page on a mobile device 2. Scroll down to the red button 3. Tap on the button. Nothing happens but the hover state is activated. 4. Tap again on the button. The link is working. I also made a short video that shows the problem: RPReplay_Final1675711729.MP4 Here's the code of this test page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CDN Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.15.11/js/uikit.min.js" integrity="sha512-uNdy6/b4kpAKQgC1MqDRW7HzGqmja6jPPfQ0Pv3q4f0r5XpL4cxPlgqgSbFT5pnLFo4BSFZX8Ve/ak0DDN06OA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.15.11/css/uikit-core-rtl.min.css" integrity="sha512-+6D4TOLdOBhkuufbELpbCiGmD+Y4dzrNbSPGwtgGO2nf7Id3dM0x5R/Cw0bI/13pFUnsRL8pfpmKNWLbAx8fGg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.15.11/css/uikit-core.min.css" integrity="sha512-Up68klxaLGLgBXFtu9KAkcM0/b1Vv97wru/VabGokNEwbQN1RBjBtthqDgildf/8YCOKaaLvT5ZfIvVPom5dIw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.15.11/js/uikit-icons.min.js" integrity="sha512-Rrh7aqdTz7Q1BPfCdWCK3poag9FNK1HQJMbSdL/eRZwXkbS1EWlY5n2XJ70ZVh1ZLRIJEUoWxATps1cyzpGp/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <style> body { max-width: 90%; margin: auto; background-color: rgb(227, 227, 227); } footer { padding: 10px; background-color: cornflowerblue; padding-top: 20px; } </style> </head> <body> <header> <nav class="uk-navbar-container" uk-navbar style="background-color: cornflowerblue;"> <div class="uk-navbar-right"> <ul class="uk-navbar-nav"> <li class="uk-active"><a href="#" style="color: white">Home</a></li> <li> <a href="#" style="color: white">Account</a> <div class="uk-navbar-dropdown"> <ul class="uk-nav uk-navbar-dropdown-nav"> <li class="uk-active"><a href="#">Login</a></li> <li><a href="#">Sign Up</a></li> <li><a href="#">Report</a></li> </ul> </div> </li> <li><a href="#" style="color: white">Item</a></li> </ul> </div> </nav> </header> <!-- Slider --> <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: false"> <ul class="uk-slideshow-items" uk-height-viewport> <li> <img src="https://picsum.photos/200/400" alt="" uk-cover> </li> </ul> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a> </div> <!-- Cenetred Text --> <h1 class="uk-text-primary uk-text-center">This is awesome</h1> <!-- Adding card --> <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom"> <div> <div class="uk-card uk-card-primary uk-card-body"> <h3 class="uk-card-title">Card1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-warning uk-card-body"> <h3 class="uk-card-title">Card 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-secondary uk-card-body"> <h3 class="uk-card-title">Card 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom"> <div> <div class="uk-card uk-card-warning uk-card-body"> <h3 class="uk-card-title">Card 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-secondary uk-card-body"> <h3 class="uk-card-title">Card5</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div> <div class="uk-card uk-card-primary uk-card-body"> <h3 class="uk-card-title">Card 6</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <a href="https://www.google.de" class="uk-button uk-button-danger uk-margin">I AM NOT WORKING :-(</a> <!-- Card with images --> <div class="uk-child-width-1-2@m" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom"> <div> <div class="uk-card uk-card-default"> <div class="uk-card-media-top"> <img src="/slides/slide3.png" width="1800" height="1200" alt=""> </div> <div class="uk-card-body"> <h3 class="uk-card-title">Human</h3> <p>An average of 20 times every minute, your eyes blink. The tongue has roughly 8,000 taste buds, each of which can have up to 100 cells. In reality, earwax is a form of sweat.</p> </div> </div> </div> <div> <div class="uk-card uk-card-default"> <div class="uk-card-body"> <h3 class="uk-card-title">Cat</h3> <p>Cats have a 6-times-their-height jump capacity. The average cat snoozes for 13 to 16 hours every day (roughly 70% of their life). A cat's lifespan is equivalent to 15 years in a person's life. A Maine Coon is one of the largest domestic cat breeds.</p> </div> <div class="uk-card-media-bottom"> <img src="/slides//slide4.png" width="1800" height="1200" alt=""> </div> </div> </div> </div> <br> <br> </body> </html>
  20. Stefanowitsch
    Yeah thats what I needed to know. I look for a way to insert a simple <span> around a word or phrase inside the headline. I can then style this <span> like I want (color, different font, etc.) So I can just add this option here I guess (I used the @ as an example) ? @i have span around@ $str = preg_replace("/$start@(.*?)@$end/", "$1<span>$2</span>$3", $str);
  21. Stefanowitsch
    Interesting. I have those "Headlines with bold/italic Text inside" in nearly all projects. I used to solve this by using a CKEditor for the Headline. Which is a bit over the top for a single headline that can (and should?) be handled in a text field: How does the formatted text element look inside the HTML code? Does your module apply the <i></i> or <b></b> tags dynamically? Is it possible to define custom formatting options for example a colored word inside a headline phrase (see screenshot). Last but not least: I never used a Textformatter before. How and where do I apply the Formatter to my field?
  22. Stefanowitsch
    SOLVED: THE FIELD HAS TO BE SET AS A MANDATORY FIELD (=REQUIRED) TO DISPLAY THE DEFAULT VALUE... This is the first time that I want to make use of a select field with a default value. It's all about the position of an image in this case. Either left or right. I want do have "left" as default value. So here are my field settings: This is how it looks on the page I am editing: The default value is never set. What am I doing wrong?
  23. Stefanowitsch
    I PHP 8.1 required? My projects run on PHP 8, because of several modules that do not work with 8.1 (yet!).
  24. Stefanowitsch
    That would be nice too. I am using UIKit and the sticky navbar has a default z-index of 980.
  25. Stefanowitsch
    Aaaah! I have a fixed navbar in my project which acts as an overlay. So your topbar was hidden underneath it. My only advise would be to increase the z-index of the topbar to a really high value to make sure it will be visible in most of the cases. I love the mobile toggle option. It would be nice to be able to chose between tablet and phone size.
Γ—
Γ—
  • Create New...