pichalite / nodebb-theme-material Goto Github PK

i install nodebb-plugin-emoji-extended and nodebb-plugin-emoji-one,but none can work,when i reply, the emoji icon can't show;

Moved from NodeBB/nodebb-plugin-composer-default#43:

The behavior of the autocomplete dropdown for both @Mentions and emojis is broken.

On a fresh page render, (on desktop, you can't even see it on mobile at this point) typing @ renders the dropdown at the bottom of the page
Subsequent characters added move the dropdown closer and closer to the cursor, eventually getting to the right place in about 3 characters. 3a. Subsequent renders of the autocomplete dropdown show it in the right position 3b. A Refresh will show reproduce the issue
on first render, I can see this:

the top: attribute is incorrectly calculated at 667px

OSX Chrome
iOS safari

Suggest using a toggle button to toggle sub-categories.
I've tested it and just wonder where we shall put this button.
It's better to load this function only when we browse categories page.

(typeof toggler=== 'undefined') ? toggler = function() {
	let subcats=document.querySelectorAll('.subcategories')
	let tdocs2= function(docs) {
			for (let i = 0; i < docs.length; i++) {
			    let flag = docs[i].style.display;
			    // console.log(docs[i].style.display)
			    switch (flag) {
			        case '':
			            docs[i].style.display = 'none';
			            break
			        case 'none':
			            docs[i].style.display = '';
			            break
			        default:
			            console.log("Wrong status");
			    }
			}
	}
	tdocs2(subcats)
} : console.log("defined");

Add a license please.

As the topic says, users can't manage sso form the user > settings page, as they can't see them.

material-load-bar

before remove this item:

after remove:

This happens in both Safari 9 and Firefox on OS X, I don't know if it happens elsewhere (notice how the scrollbar and text doesn't end at the bottom of the window, but continues off the bottom of the window.)

I did a bit of digging in the CSS and experimented with disabling various paddings and margins in particular UI elements of the post editor to see if they were causing it, I thought that was the issue, but when I resize the post editor with them disabled, the text boxes resize and clip outside the window again, so I'm not sure.

Great theme btw! I'm really liking it :3.

Reporting this one as it's a fairly simple fix with a big usability boost for mobile users.

If you visit a site running persona, and drag in from the right, you'll notice the sidebar drags smoothly in, via:

https://github.com/NodeBB/nodebb-theme-persona/blob/master/lib/modules/slideout.min.js

Something similar would be hugely beneficial to the mobile use of this theme.

Group titles (after the username in posts) are missing after the lastest update (2.4.1).
They were there before the NodeBB 0.9.3 update.
Other themes show titles as normal.

NodeBB v1.6.0
No user data
Theme Persona is ok

The sizes are not good.

When making a new topic, we cant see the full title that we typed

Screenshot: http://prnt.sc/ey0sq7

We want to add more Widgets interfaces!

upgrade NodeBB 1.0.3 to 1.1.0
v1.0.3 sub category is a block, v1.1.0 is item

This is Vanilla

This is Material

When I edit longer postings with Chrome as browser, I can't see the last line.

The button for changing the cover pictures on groups doesn't work.

I fixed it, I will send a pull request in a moment, just wrote it here to help you keep things organized.

@pichalite First off, this is incredible. I'm thinking of switching my forum over to this because it's really nice.

I noticed that the clickable area of a category is actually only the text:

I would think the image or div at the back should go to the category page, or is that a breach of material design rules?

http://i.imgur.com/3gBM1Zp.gifv

The composer in Material often tries to open maximized for some reason, and then does the above when it tries to minimize again. Further, when this bug occurs, the discard confirmation appears under the composer, meaning a maximized post cannot be dismissed.

This issue appears to occur when the composer overlaps the navigation bar, and is confirmed to occur on pichalite.com as well, just to confirm I didnt break anything myself!

http://i.imgur.com/GFJgJRD.png

Resizing the window and pounding the button, then resizing and pounding the button, eventually fixes it.

This issue does not occur in Persona. It might be related to the fact persona's maximized state snaps to the navigation bar itself?

Not sure if some of these are specific to 1.6.0 but I will just list them here so I don't forget.

/search page doesn't show categories in the multi select
/unread /topic /recent possibly any page that imports pagination shows 2 arrows even if the page does not have enough items to paginate
last edited by text doesnt have margin

Both bulleted and numbered lists do not function properly:
http://pichalite.com/topic/20792/lists-test-for-github-issue-report

Just wanted to let you know, the spacing is a little off when someone edits the post and it bumps up against the bottom of the content:

This is in a mobile view when the width of the window is narrow

Right now, clicking on the chat icon in the top-right on a xs display causes the chat popup to open. This is problematic, as the pop-up chat does not function on mobile at all, causing issues such as overflow and text below the visible area.

However, the full chat functions perfectly for mobile.

I suggest that when in a xs view, the chat bubble becomes a link to /chats

Custom header to fix masonry at category pages

<script type="text/javascript">

    /*
     * ~~~~~~~~~~~~~~~~~~
     * CHANGES I MADE START
     * ~~~~~~~~~~~~~~~~~
     *
     */
    function changes_i_made() {
        if(($('.category-sidebar *:not(script)').length > 0) && ($.trim($('.category-sidebar *:not(script)').text()).length === 0)){
            $('.category-sidebar').addClass('hidden');
            ajaxify.widgets.reposition('sidebar');
        }
        document.body.setAttribute('lang', translator.getLanguage());
    }

    $(window).on('action:ajaxify.end', function() { changes_i_made(); });
        /*
     * ~~~~~~~~~~~~~~~~~~
     * CHANGES I MADE END
     * ~~~~~~~~~~~~~~~~~
     *
     */

    /*
     * ~~~~~~~~~~~~~~~~~~
     * FIXED \Nodebb\node_modules\nodebb-theme-material\static\lib\lavender.js START
     * ~~~~~~~~~~~~~~~~~
     *
     */

    $('document').ready(function() {
        requirejs([
            'lavender/masonry',
            'lavender/imagesLoaded',
            'lavender/ripples',
            'lavender/materialDesign',
        ], function(Masonry, imagesLoaded) {
            var fixed = localStorage.getItem('fixed') || 0,
                masonry;
            function doMasonry() {
                if($('.home,.subcategories.row > .category-item').length) {
                    masonry = new Masonry('.row.home > div,.category.row .subcategories,.category.row .subcategories div', {
                        itemSelector: '.category-item',
                        columnWidth: '.category-item:not(.col-lg-12)',
                        transitionDuration: 0,
                        isInitLayout: false
                    });

                    $('.row.home > div p img').imagesLoaded(function() {
                        masonry.layout();
                    });

                    var saved = JSON.parse(localStorage.getItem('masonry:layout'));
                    if (saved) {
                        for (var cid in saved) {
                            if (saved.hasOwnProperty(cid)) {
                                var category = saved[cid];

                                $('.category-item[data-cid="' + cid + '"]').css({
                                    left: category.left,
                                    top: category.top,
                                    position: 'absolute'
                                });
                            }
                        }
                    }

                    masonry.on('layoutComplete', function() {
                        var saved = {};

                        $('.category-item').each(function() {
                            var $this = $(this);

                            saved[$this.attr('data-cid')] = {
                                left: $this.css('left'),
                                top: $this.css('top'),
                            };
                        });

                        localStorage.setItem('masonry:layout', JSON.stringify(saved));
                    });
                }
            }

            function resize(fixed) {
                fixed = parseInt(fixed, 10);

                var container = fixed ? $('.container-fluid') : $('.container');
                container.toggleClass('container-fluid', fixed !== 1).toggleClass('container', fixed === 1);
                localStorage.setItem('fixed', fixed);
            }

            resize(fixed);

            $(window).on('action:ajaxify.end', function(ev, data) {
                var url = data.url;

                if(!/^admin\//.test(data.url) && !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                    doMasonry();
                    if ($('.home,.subcategories').length) {
                        $('.category-header .badge i').tooltip();
                    }
                }
            });

            if (!$('.admin').length) {
                setupResizer();
            }

            $(window).on('action:posts.loaded', function() {
                doMasonry();
            });

            function setupResizer() {
                var div = $('<div class="overlay-container"><div class="panel resizer pointer"><div class="panel-body"><i class="fa fa-arrows-h fa-2x"></i></div></div></div>');

                div.css({
                    position:'fixed',
                    bottom: '20px',
                    right: '20px'
                }).hide().appendTo(document.body);

                $(window).on('mousemove', function(ev) {
                    if (ev.clientX > $(window).width() - 150 && ev.clientY > $(window).height() - 150) {
                        div.fadeIn();
                    } else {
                        div.stop(true, true).fadeOut();
                    }
                });

                div.find('.resizer').on('click', function() {
                    fixed = parseInt(fixed, 10) === 1 ? 0 : 1;
                    resize(fixed);
                    doMasonry();
                });
            }
        });

        (function() {
            // loading animation
            var refreshTitle = app.refreshTitle,
                loadingBar = $('.loading-bar');

            $(window).on('action:ajaxify.start', function(data) {
                loadingBar.fadeIn(0).removeClass('reset');
            });

            $(window).on('action:ajaxify.loadingTemplates', function() {
                loadingBar.css('width', '90%');
            });

            app.refreshTitle = function(url) {
                loadingBar.css('width', '100%');
                setTimeout(function() {
                    loadingBar.fadeOut(250);

                    setTimeout(function() {
                        loadingBar.addClass('reset').css('width', '0%');
                    }, 250);
                }, 750);

                return refreshTitle(url);
            };
        }());

        $(function() {

            $(window).on('action:ajaxify.end', function(data) {
                $.material.init();
            });
        });
    });
    /*
     * ~~~~~~~~~~~~~~~~~~
     * FIXED \Nodebb\node_modules\nodebb-theme-material\static\lib\lavender.js END
     * ~~~~~~~~~~~~~~~~~
     *
     */
</script>

This could be fixed by making the title clipped with ellipsis. I will make a PR later tonight.

Hello guys nice job with theme its really looking good, any chance you guys will consider supporting RTL languages as this theme is broken on RTL languages if so i'm willing to help

When sidebar is disabled, if you click to the left of the logo, where normally the three bars (Hamburger Menu) will be, the highlight halo will still appear. This is somewhat good functionality, because that halo is still needed for the mobile version of the site. However, it shouldnt appear on desktop mode.

Putting a visible-xs class onto it when the sidebar is disabled would fix this issue, I believe?

On very large screens the blue doesn't go all the way:

Screen 2560x1600.

Plugin : nodebb-plugin-youtube-embed
There is a little bug of graphic in the groups with the theme : Material Design Theme.
Theme Link : https://github.com/pichalite/nodebb-theme-material#readme

Great template! In the topic feed, gravatar images are excessively large. I assume that is not supposed to be the case? I can take a look at some CSS tweaks

With this theme, you can no longer follow other users.

I think that there is a bug in the chat.
I dont see the avatar.

Right now under the Edit Profile page:

http://pichalite.com/user/admin/edit

There is, under the avatar, a mysterious button with two arrows, facing different directions. This icon has little meaning to the user, and confuses users who aren't aware how to change their avatar, hiding functionality.

I suggest the drop down be removed entirely, bringing it more in line with Persona:

https://community.nodebb.org/user/pichalite/edit

Simply having the four menu items exposed to the user without a drop down.

If that is undesired, I suggest changing the two arrows into a cogs icon, that more traditionally indicates settings.

How to add latin extended to the font ?

Login & menu issues with 0.8.1 of nodebb

Possibly add an option to the gear icon in the dropdown?

First of all great work with the theme!
Is there a way to display sup-categories verticaly like in the persona theme?

Thank you

See NodeBB/NodeBB#5743

High, I really liked the look of your theme on 0.7.2 of the forum but I've just updated to 0.7.3 and now I'm getting a Redis error in my log every-time I try to load the home page. 😞 The error basically means that no content is loaded onto the page at all other than the template with the navbar and footer.

Here's the error readout.

20/8 07:49 [2630] - �[31merror�[39m: Error: Redis connection to 127.0.0.1:6379 failed - connect ECONNREFUSED
    at RedisClient.on_error (/root/node_modules/redis/index.js:185:24)
    at Socket.<anonymous> (/root/node_modules/redis/index.js:95:14)
    at Socket.emit (events.js:107:17)
    at net.js:459:14
    at process._tickDomainCallback (node.js:381:11)
[cluster] Child Process (2630) has exited (code: 1, signal: null)
[cluster] Spinning up another process...
20/8 07:49 [2747] - info: Time: Thu Aug 20 2015 07:49:17 GMT-0400 (EDT)
20/8 07:49 [2747] - info: Initializing NodeBB v0.7.3

Everything works fine in other themes, Lavender and Vanilla.

Theme version is 2.2.0

No idea where this would fit but maybe a little up arrow in the bottom left?

It seems that only the current user viewing their own profile has the properly formatted profile page on mobile

iOS safari
NBB 1.1.2
Dark theme

When scrolling in a thread, the view can be pushed to the sides. This doesn't happen in the recent messages view or the unread view

iOS Safari (iPhone 6)
NBB 1.1.2
(dark theme)

See this NodeBB/NodeBB@99315e1 .

One example for the wrong code:
https://github.com/pichalite/nodebb-theme-material/blob/master/templates/partials/topics_list.tpl#L44