Implement "materialize" frontend

[kadirerdogan]

@perak using custom template in the menu is great and it solves lots of problems i have faced but there is still one problem about it. We define the shell of the menu in layout_content_navbar.html file.

I didnt check if it is possbile to define an abstract shell which is convenient for both navbar and sidenav style menus. If not kitchen should still know the type and choose the correct layout.

[perak]

@kadirerdogan

for top level (zone layout), we can define "sidebar" or any other predefined template. Menu will go into element < ... id="menu"> by default (if not specified in menu's "dest_selector" property).

Currently, there is only: "empty", "navbar" and "sticky_footer" layouts. Default: "navbar".

Actually, when we make (useful) GUI - then this will not be a problem anymore - you'l choose empty layout, drag&drop one "div" into it, set div's class (to be for example at the top) and drag & drop "navbar" into it.

Without GUI, it's a lot of work (and produces confusing, large json) if we define divs, rows, columns etc. and add menu at the end into it... that's why I created these three predefined layouts.

Feel free to create "sidebar" layout (~/.meteor/templates/ui/layouts/layout_content_sidebar.html & .js), but please keep it as much "universal" as possible (without too much app-specific css classes etc.).

[kadirerdogan]

Ok let me try to add side menu to the semantic-ui template with a custom layout.

[perak]

Great! :+1:

[kadirerdogan]

@perak your advice works good. You can see the working demo from http://kitchen-semantic-admin.meteor.com.

i have cloned menu.html to sidemenu.html and layout_content_navbar.html to layout_content_sidemenu.html (their js files too). Then modified them according to semantic-ui side menu. With the below menu definition i have right and left menus. Btw i have also changed zone layouts to "sidemenu" (my custom layout)

{
                    "name": "left_menu",
                    "type": "menu",
                    "template":"sidemenu",
                    "class": "ui icon left inline vertical sidebar menu left_menu",
                    "dest_selector": "#menu",
                    "items": [
                        { "title": "Home", "route": "home_public","icon_class":"blue home icon" }
                    ]
                },

                {
                    "name": "right_menu",
                    "type": "menu",
                    "template":"sidemenu",
                    "class": "ui icon right inline vertical sidebar menu right_menu",
                    "dest_selector": "#menu",
                    "items": [
                        { "title": "Register", "route": "register","icon_class":"orange add user icon" },
                        { "title": "Login", "route": "login","icon_class":"blue sign in icon" }
                    ]
                }

What i feel missing is that i dont know how to change menu labels and icons using the json file.

I can repack semantic-ui template with this new additions and some minor fixes if you didnt modify the one i have sent before.

[kadirerdogan]

Btw, i have used the admin example json file for the demo. There are very few changes in the original file.

[kadirerdogan]

@palpinter have you tried materialize with meteor-kitchen? When i try to add materialize to the project it gives some javascript errors and the project doesnt work.

[perak]

@kadirerdogan looks awesome! Please send me the files. Btw, I already modified templates you sent me before (without git life is sad :)), but feel free to send me and I'l add sidebar layout and menu

[perak]

Modified semantic-ui wil be included into v0.9.49, and when I finaly open the cli source - we'll breathe easier with using git for this

[kadirerdogan]

I have sent you the link for the files.

[kadirerdogan]

@palpinter i think i have saccessfully added materialize to kitchen. It was a known problem for materialize's latest version. Meteor works with the previous version of materialize so using "materialize:materialize@=0.97.0" as the package name is the fix.

I have cloned my version of semantic-ui template and modified sidemenu.html layout_content_sidemenu.html files (and js files of course) to create a sidebar demo using materializecss. I have also modified register.html, login.html and jumbotron.html to see what we can do with materialize. The materialize template is not complete yet but it will be a very good start for you. There are lots of things to fix especially for the form and dataview components.

You can see the working but not complete demo at: http://kitchen-materialize-admin.meteor.com Template: http://esraerdogan.com.tr/materialize.tgz json (modified admin example) : http://esraerdogan.com.tr/m_admin.json

[perak]

@kadirerdogan excellent! Thank you!

[kadirerdogan]

@perak FIELD_VALUE in templates html files replaces with {{value}} is there a way of just getting value?

i am trying to fix materializecss label overlapping problem for form fields I have added

<label class="{{isClassActive FIELD_VALUE}}" for="FIELD_NAME">FIELD_TITLE</label>

this to form fields But it renders to

<label class="{{isClassActive {{value}}}}" for="FIELD_NAME">FIELD_TITLE</label> 

where i need it to be rendered to

<label class="{{isClassActive value}}" for="FIELD_NAME">FIELD_TITLE</label>

[perak]

OK @kadirerdogan I'll add something like RAW_FIELD_VALUE which will render without mustaches.

Btw, about label overlaping: I had that problem with materialize while working on some project, it doesnt happen if label have class "active" set (but in that case, no fancy label animation on focus/blur)

[perak]

ahhh, whatabout just writting {{labelClass value}} (instead {{labelClass FIELD_VALUE}}) :)

[kadirerdogan]

I have updated my above comment since github removed some tags.

If you look again you'll see that i am trying to use a helper to decide if the class will be "active" or not.

helper returns active if the value is not null. So this way fancy label animation can be used :)

[kadirerdogan]

Btw {{labelClass value}} wont work since i'am doing this at the template file. I dont know what will be the value :)

[kadirerdogan]

I have tried to pass field name instead of the value to the helper and then use the field name as a jquery selector to get the value of the field so that i can return active class if the value is not null. But somehow it doesnt work.

My guess is that helper runs before page is rendered so there is no such element in the dom at that moment.

I think the best solution is your RAW_FIELD_VALUE suggestion. If i have fix the generated forms manually fancy label animation works nicely.

[perak]

Ok, will be in. 0.9.50. Maybe tomorrow.

[perak]

@kadirerdogan I just implemented FIELD_VALUE_RAW in forms. But, it will not work with date fields because FIELD_VALUE produces something like {{formatDate query_name.field_name 'MM/DD/YYYY'}}, and FIELD_VALUE_RAW will produce formatDate query_name.field_name 'MM/DD/YYYY'

But, in latest version of meteor, passing another helper as argument to helper is now supported, but with different syntax (I didn't dive deeper into it yet - to be honest).

[perak]

https://github.com/meteor/meteor/tree/devel/packages/spacebars#nested-sub-expressions

[kadirerdogan]

i have tested below expression and it works as intended.

{{someHelper (formatDate query_name.field_name 'MM/DD/YYYY')}}

But there is another problem about the default values of the form fields. For the default values, values are not variables but actual values. For instance if you use - as the default value for phone fields (as in dataview example) created template will be like below and meteor gives error.

<label class="{{isClassActive -}}" for="FIELD_NAME">FIELD_TITLE</label>

What should be created is

<label class="{{isClassActive '-'}}" for="FIELD_NAME">FIELD_TITLE</label>

But in the template there is no way of knowing if the value is a variable or an actual value.

[perak]

@kadirerdogan OK, now FIELD_VALUE_RAW renders as follows:

• if value is "someHelper": (someHelper someArgs)
• if value is not helper and form is in mode "insert": 'value'
• if value is not helper and form is in mode "update" or "read_only": value

(version 0.9.50 - not uploaded yet)

[perak]

@kadirerdogan I just uploaded 0.9.50

[kadirerdogan]

@perak I think you should change the order of string replacement for FIELD_VALUE and FIELD_VALUE_RAW at the kitchen. When i use FIELD_VALUE_RAW it renders to below ( oops :) )

Or use FIELD_RAW_VALUE.

<label class="{{isClassActive {{customer.phone}}_RAW}}" for="phone">

[perak]

ooops :)

[perak]

@kadirerdogan 0.9.51 is just uploaded - I fixed string replacement order for FIELD_VALUE_RAW

[kadirerdogan]

Using FIELD_VALUE_RAW renders to <label class="{{isClassActive {{customer.name}}}}" for="name"> in update form. There are still unwanted number of mustaches.

neither (someHelper value) does work. Date field renders to <label class="{{isClassActive {{formatDate customer.date ''}}}}" for="date">

insert form works as expected.

[perak]

@kadirerdogan fixed, will be available in v0.9.53

[kadirerdogan]

:+1:

Materialize labels work now with below template. Thanks (i have removed helper)

<label class="{{#if FIELD_VALUE_RAW}}active{{/if}}" for="FIELD_NAME">FIELD_TITLE</label>

[perak]

@kadirerdogan would you push or send me latest materialize templates, so I can include them in next version? (planning 0.9.54 in monday night).

[perak]

btw, if hou have materialize example, let's add it to "official" examples.

P.S. thank you for your work!

[kadirerdogan]

I have created a "pull request" to kitchen-templates with fixed labels. There are 4 example json in the request.

Admin example navbar version with semantic-ui and materializecss Admin example sidemenu with semantic-ui and materializecss (drawer style side menu)

I can create a pull request to kitchen-examples with above example jsons but current templates (0.9.53) does not include sidemenu component and layout for semantic-ui.

[perak]

@kadirerdogan cool! Thank you! Merging...

P.S. If you change something more until Monday night - just pull request.

[kadirerdogan]

I have made 2 pull requests. One for kitchen-examples and one for kitchen-templates.

[perak]

Hey @kadirerdogan I just played with templates and examples you made.

First to say - I am working on a semantic-ui templates too, so maybe it's better if you focus on a materialize.

Second, It's great - now we have working materialize templates! I'll include them in next version :+1:

Third, I'll be free to say that there are some visual issues I don't like:

• Navbar icons are not middle-aligned to menu item text (and also, looks like icons are little bit bigger than they should be).
• In examples, I wish login and register to be to the right (as they are in bootstrap example).
• In forms, input label is not horizontally aligned to input element (they are few pixels more right - in materialize examples that's not the case).
• "Thanks for signing up" page - there is no margin or padding
• "Admin" menu item is visible to non-admins too
• In private home page ("Welcome xxx") page content is not inside "container", so no margin or padding between content and viewport.
• Buttons - text is not vertically centered - text is closer to the bottom of a button (icon is correctly centered).
• In dataview, "Add new" button and search input are not in the same line (search input is little bit more bottom), also, search input is somewhere in the center - it's not stick left or right (or maybe it was your goal?). One more thing in dataview: search icon is not vertically centered with the search box.
• When logged as admin, in "Edit user" form, "Role" field - we have 3 radio-buttons with label "Role" (instead: "user", "admin" and "blocked").
• "Loading" icon (it appears for a very short time in localhost) is not centered (it's stick to the left).

(Don't get me wrong - I respect your work - those are just small visual issues that makes site looks "non-polished").

Thank you (again!) :) :+1:

[kadirerdogan]

@perak Below my comments about your long list :smile:

• [x] Navbar icons are not middle-aligned to menu item text (and also, looks like icons are little bit bigger than they should be).
  • Navbar completely redesigned and compatible with dropdown menus.
• [x] In examples, I wish login and register to be to the right (as they are in bootstrap example).
  • They are at the right in dropdown :)
• [x] In forms, input label is not horizontally aligned to input element (they are few pixels more right - in materialize examples that's not the case).
  • fixed
• [x] "Thanks for signing up" page - there is no margin or padding
  • Put in a container
• [x] "Admin" menu item is visible to non-admins too
  • Role check for menu items fixed. Added flemay:less-autoprefixer to materialize.json to make style.less file to be compiled.
• [x] In private home page ("Welcome xxx") page content is not inside "container", so no margin or padding between content and viewport.
  • Put in a container
• [x] Buttons - text is not vertically centered - text is closer to the bottom of a button (icon is correctly centered).
  • Fixed (i hope :) ) all buttons
• [x] In dataview, "Add new" button and search input are not in the same line (search input is little bit more bottom), also, search input is somewhere in the center - it's not stick left or right (or maybe it was your goal?). One more thing in dataview: search icon is not vertically centered with the search box.
  • Fixed as much as possible. Search icon is still not vertically centered since it's the way materialize do it. Input items are aligned a bit at the bottom.
• [x] When logged as admin, in "Edit user" form, "Role" field - we have 3 radio-buttons with label "Role" (instead: "user", "admin" and "blocked").
  • Fixed. Also they were not choosable and i fixed that too with a dirty trick. Radio buttons need to have each item has a uniq id. I have used id="radio-ITEM_VALUE" where ITEM_VALUE may not create a valid id (eg: blank spaces)
• [x] "Loading" icon (it appears for a very short time in localhost) is not centered (it's stick to the left).
  • Fixed the location. Also modified the appearance for materializecss. Though i have never seen a full circle because of fast loading :)

[perak]

@kadirerdogan thank you very much! :+1:

[perak]

New materialize templates and example application is uploaded now (v0.9.54)