Materialize theme

User avatar
c0mp0ser
Posts: 67
Joined: Mon Jan 02, 2017 11:59 am

Materialize theme

Post by c0mp0ser »

As you may know, I'm working on the WCMS theme PROTOTYPE, based on the Materialize Framework. Today I installed the Simple Blog plugin. Everything is working just fine but there is a javascript conflict between the Materialize javascript and the Simple Blog plugin which I can't solve.

theme.php code:

Code: Select all

<?php global $Wcms ?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Encoding, browser compatibility, viewport -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Search Engine Optimization (SEO) -->
        <meta name="title" content="<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>" />
        <meta name="apple-mobile-web-app-title" content="<?= $Wcms->get('config', 'siteTitle') ?>">
        <meta name="description" content="<?= $Wcms->page('description') ?>">
        <meta name="keywords" content="<?= $Wcms->page('keywords') ?>">
        <meta property="og:url" content="<?= $this->url() ?>" />
        <meta property="og:type" content="website" />
        <meta property="og:site_name" content="<?= $Wcms->get('config', 'siteTitle') ?>" />
        <meta property="og:title" content="<?= $Wcms->page('title') ?>" />
        <meta name="twitter:site" content="<?= $this->url() ?>" />
        <meta name="twitter:title" content="<?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?>" />
        <meta name="twitter:description" content="<?= $Wcms->page('description') ?>" />

        <!-- Website and page title -->
        <title><?= $Wcms->get('config', 'siteTitle') ?> - <?= $Wcms->page('title') ?></title>

        <!-- Admin CSS -->
        <?= $Wcms->css() ?>

        <!-- Theme CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    </head>

    <body>
        <!-- Admin settings panel and alerts -->
        <?= $Wcms->settings() ?>
        <?= $Wcms->alerts() ?>

        <nav>
            <div class="nav-wrapper">
                <a href="<?= $Wcms->url() ?>" class="brand-logo center"><?= $Wcms->get('config', 'siteTitle') ?></a>
            </div>
        </nav>



        <ul class="sidenav left" id="slide-out"><!-- Navigation panel -->
            <?= $Wcms->menu() ?>
        </ul>

        <div class="container">
            <a style="position:fixed;top: 1.25rem;right: 1.25rem" href="#" data-target="slide-out" class="sidenav-trigger">Navigation</a><!-- "Sidenav" trigger link -->
            <div class="section">
                <div class="row">
                    <?= $Wcms->page('content') ?>
                </div>
            </div>
        </div>

        <footer class="page-footer">
            <div class="container">
                <div class="row">
                    <div class="col s12 l6">
                        <?= $Wcms->block('subside') ?>
                    </div>
                    <div class="col s12 l6">
                        <h5>Menu</h5><!-- Tytuł -->
                        <ul class="footer-menu">
                            <?= $Wcms->menu() ?>                          
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="container">
                    <div class="row">
                        <div class="col s12">
                            <?= $Wcms->footer() ?>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <!-- Javascript -->
        <!-- Admin JavaScript. More JS libraries can be added below -->
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        <?= $Wcms->js() ?>
        <script>
            $(document).ready(function(){
                $('.sidenav').sidenav({edge: 'right'});
            });
        </script>
    </body>
</html>
My theme uses the javascript navigation panel called "Sidenav", which uses that kind of link to trigger the panel:

Code: Select all

<a style="position:fixed; top: 1.25rem; right: 1.25rem" href="#" data-target="slide-out" class="sidenav-trigger">Navigation</a><!-- "Sidenav" trigger link -->
More obout this feature here:

https://materializecss.com/sidenav.html

The slide-out panel does not work on the Blog pages with the Simple Blog plugin installed. Dedicated button does not slide the panel in. On other WCMS pages it works fine, being logged in or not.

Materialize Sidenav javascript part with this "Click to slide in" function:

Code: Select all

/**
     * Handle Trigger Click
     * @param {Event} e
     */
    _handleTriggerClick(e) {
      let $trigger = $(e.target).closest('.sidenav-trigger');
      if (e.target && $trigger.length) {
        let sidenavId = M.getIdFromTrigger($trigger[0]);

        let sidenavInstance = document.getElementById(sidenavId).M_Sidenav;
        if (sidenavInstance) {
          sidenavInstance.open($trigger);
        }
        e.preventDefault();
      }
    }
Materialize framework sources, there you can find every part of javascript of the framework in separate *.js files:

https://materializecss.com/getting-started.html

Someone can help me with this? I am not familiar with javascript programming.
Last edited by c0mp0ser on Fri Apr 22, 2022 9:23 am, edited 5 times in total.
It's just me, an unmeasurable particle of the cosmos ...
https://pawelkruzel.m00n.link
https://m00n.link
https://materialize-wcms.m00n.link
User avatar
wiz
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: Materialize theme

Post by wiz »

Glad to see progress and see someone working on something new! ;)

However it's nearly impossible to debug Summernote (from another of your posts) or simple blog plugin not working without your full theme (importantly - along with all styles and scripts it uses) uploaded somewhere, preferrably to GitHub.

That way it will be much easier to debug and hopefully we can resolve your issues.
User avatar
c0mp0ser
Posts: 67
Joined: Mon Jan 02, 2017 11:59 am

Re: Materialize theme

Post by c0mp0ser »

wiz wrote: Fri Apr 22, 2022 7:26 am Glad to see progress and see someone working on something new! ;)

However it's nearly impossible to debug Summernote (from another of your posts) or simple blog plugin not working without your full theme (importantly - along with all styles and scripts it uses) uploaded somewhere, preferrably to GitHub.

That way it will be much easier to debug and hopefully we can resolve your issues.
Hi!
1. Thank you for answering my post.
2. I reworked the code in my previous post to remove my personal additions or changes to the original Materialize framework code.
3. Maybe I will create a Github repository for this project. I'm not familiar with Github as I have not had a need to use it before. I will have to learn it.
4. Summernote Plugin works well with this theme right now. Previosly I made some mistake and editor not showed. BUT I'm still thinking that using the Summernote Lite as a WCMS plugin will be better because it is framework agnostic. Maybe someday someone will create such a plugin.

The near plans:
1. Materialize framework will be "slimmed" and compiled much smaller than it is in original. I made it myself.
2. There will be 2 separate themes - Light and Dark. If someone can compile their own Materialize stylesheet, they will be able to easily create their own version of the theme.
3. The first challenge is to make the theme itself work seamlessly with most or all plugins.

Plugins tested and working properly:
1. Summernote Editor
2. Simple Blog (EXCEPT this problem mentioned in my previous post)
3. Additional Contents
4. Simple SEO

Errors:
1. Materialize modal.js causes the WCMS admin panel to be "distorted". Modal.js should be excluded from the Materialize CSS compilation, or perhaps a way will be found to leave it in the final compilation (if such a feature is needed or useful).
2. Materialize sidenav.js causes a unknown conflict with the Simple Blog plugin - mentioned in my initial post.
It's just me, an unmeasurable particle of the cosmos ...
https://pawelkruzel.m00n.link
https://m00n.link
https://materialize-wcms.m00n.link
User avatar
c0mp0ser
Posts: 67
Joined: Mon Jan 02, 2017 11:59 am

Re: Materialize theme

Post by c0mp0ser »

Hi!

Today I'm showing some pictures of the progress on the project. More information coming soon. Comments and questions are welcome.
Last edited by c0mp0ser on Wed Feb 15, 2023 7:53 am, edited 1 time in total.
It's just me, an unmeasurable particle of the cosmos ...
https://pawelkruzel.m00n.link
https://m00n.link
https://materialize-wcms.m00n.link
User avatar
c0mp0ser
Posts: 67
Joined: Mon Jan 02, 2017 11:59 am

Re: Materialize theme

Post by c0mp0ser »

Hi!

Latest information about the theme:

1. At this moment the theme is compatible with the following plugins:
- Summernote Editor 3.2.3
- Simple Blog 3.2.3 (except for conflict with Materialize javascript)
- Simple Statistics 3.2.0
- Additional Contents 3.2.2
- Simple SEO 3.2.0
- Hits Counter 3.0.8
- Cache Thumbs 3.0.0
- Translation Polish 3.1.4
- Monaco Editor

2. The theme is not compatible with the plugins:
- Summernote Air Editor
- Social bar
- Contact form

3. When it comes to social media links, it makes much more sense to me to manually add them as graphic icons in the field that currently has the title "About your website". Using a plugin complicates the whole process. After all, the idea is to do as little coding as possible and manage the content from within the CMS itself, right?

4. The Contact Form plugin does not allow to send emails via SMTP. And this is an increasingly common requirement of hosting services for security reasons.

5. The Summernote Air Editor plugin just doesn't work with my theme. It shows up, but doesn't modify the content.

6. The Materialize Framework code has been pre-optimized and compiled and is much smaller than the original. All necessary information about this will be published. But I'm not going to detail all the changes, because there are a lot of them. The Materialize stylesheet now also contains all the styles required by the theme and supported plugins.

7. Finally: this is no longer a prototype, it is. a (ALMOST) fully working theme (!). What remains to be resolved is the conflict between the Materialize javascript and the Simple Blog plugin code.

I will try to upload the theme to Github. I will let you know. Comments and questions are welcome.
Last edited by c0mp0ser on Wed Feb 15, 2023 7:53 am, edited 1 time in total.
It's just me, an unmeasurable particle of the cosmos ...
https://pawelkruzel.m00n.link
https://m00n.link
https://materialize-wcms.m00n.link
User avatar
c0mp0ser
Posts: 67
Joined: Mon Jan 02, 2017 11:59 am

Re: Materialize theme

Post by c0mp0ser »

Javascript conflict with the Simple Blog plugin is eliminated.

There is a problem with the multi-level menu support. I'm now working on a solution.
It's just me, an unmeasurable particle of the cosmos ...
https://pawelkruzel.m00n.link
https://m00n.link
https://materialize-wcms.m00n.link
User avatar
c0mp0ser
Posts: 67
Joined: Mon Jan 02, 2017 11:59 am

Re: Materialize theme

Post by c0mp0ser »

Hi!

The theme has the ability to display a two-level menu. Excessively long phrases in menu items are truncated. Second level menu items have indentation.
What do you think about it ...? All questions and comments are welcome.
Last edited by c0mp0ser on Wed Feb 15, 2023 7:53 am, edited 1 time in total.
It's just me, an unmeasurable particle of the cosmos ...
https://pawelkruzel.m00n.link
https://m00n.link
https://materialize-wcms.m00n.link
boomerPro1
Posts: 2
Joined: Sat May 07, 2022 9:37 am

Re: Materialize theme

Post by boomerPro1 »

hello composer, this looks great and I would love to try out this theme, do you plan on releasing it? I have been lurking around the forums for a long time and decided to join in to start commenting and helping out with testing.
User avatar
c0mp0ser
Posts: 67
Joined: Mon Jan 02, 2017 11:59 am

Re: Materialize theme

Post by c0mp0ser »

boomerPro1 wrote: Sat May 07, 2022 9:41 am hello composer, this looks great and I would love to try out this theme, do you plan on releasing it? I have been lurking around the forums for a long time and decided to join in to start commenting and helping out with testing.
Hi!

Thank you for your interest. The theme is basically finished. It contains only one CSS file and one JS file. There are still a few items on my "to do" list which is growing in the meantime... 😉 I won't bother you with the details. After finishing the planned work, the theme will be available and everyone will be able to use it and do with it what they want. Since it's potential is quite big, I have to write an extensive "lecture" on what you can do with it. 😉 Please be patient.
It's just me, an unmeasurable particle of the cosmos ...
https://pawelkruzel.m00n.link
https://m00n.link
https://materialize-wcms.m00n.link
User avatar
c0mp0ser
Posts: 67
Joined: Mon Jan 02, 2017 11:59 am

Re: Materialize theme

Post by c0mp0ser »

Testing, testing, testing ...
It's just me, an unmeasurable particle of the cosmos ...
https://pawelkruzel.m00n.link
https://m00n.link
https://materialize-wcms.m00n.link
Post Reply