daemonite / material Goto Github PK

Google has a similar UI project for Angular (https://github.com/angular/material) on GitHub. What's the difference between this one and Google's Material?

When unit testing my code, I ran across this issue. $mdDialog and $mdBottomSheet - promises do not resolve when testing by call hide() or cancel(). I included my test here. Both services use $q so I tested that and it is fine - release: version 0.10.1-master-514927a.

'use strict';

describe('$mdDialog.show()', function () {

    beforeEach(module('ngMaterial'));

    // region var
    var promise;

    var resolve = function (e) {
        console.log('resolve', e);
    };

    var reject = function (e) {
        console.log('reject', e);
    };

    var notify = function (e) {
        console.log('notify', e);
    };

    var catchs = function (e) {
        console.log('catch', e);
    };

    var finallys = function () {
        console.log('finally');
    };

    // endregion

    it('$mdDialog', inject(function ($mdDialog, $rootScope) {

        console.log('begin $mdDialog');

        promise = $mdDialog.show({template: "<md-dialog></md-dialog>"});

        promise.then(resolve, reject, notify).catch(catchs).finally(finallys);

        $mdDialog.cancel();

        $rootScope.$apply();

        console.log('end $mdDialog');
    }));

    it('$mdBottomSheet', inject(function ($mdBottomSheet, $rootScope) {

        console.log('begin $mdBottomSheet');

        promise = $mdBottomSheet.show({template: "<md-bottom-sheet></md-bottom-sheet>"});

        promise.then(resolve, reject, notify).catch(catchs).finally(finallys);

        $mdBottomSheet.cancel();

        $rootScope.$apply();

        console.log('end $mdBottomSheet');
    }));

    it('$q', inject(function ($q, $rootScope) {

        console.log('begin $q');

        var defer = $q.defer();

        promise = defer.promise;

        promise.then(resolve, reject, notify).catch(catchs).finally(finallys);

        defer.resolve(0);

        $rootScope.$apply();

        console.log('end $q');
    }));
});
}

Output is

begin $mdDialog
end $mdDialog
begin $mdBottomSheet
end $mdBottomSheet
begin $q
resolve, 0
finally
end $q

Hi, was wondering something.

Context

I was looking to play with you repo' and as I was reading a topic on good practices on javascript I noticed that in your page there is a lot of " javascript:void(0) " in href attributes.

The fact

" There is no need to use knowing that the javascript code does not belong in an href attribute of a tag . In the href attribute of a link must appear a valid URI that points actually on a resource, in this case javascript: is treated as a protocol! Protocol that does not exist; the link is then invalid and useless. At the time of web accessible, it's task. Replace the URI with an empty anchor, the famous action is as bad.
To add an event to a link - for example on a confirmation link or delete the management with "AJAX" loading a link - so, use Event onclick. To confirm deletion, can be used, for example:

<a href="/delete/id" onclick="return confirm('Delete this object ?');">delete object</a>.

" -- end of citation.

cf: OpenClassRoom

Question

Why keep this behaviour ? Is there a meaning behind this I didn't find ?

I cant see the live template today

Edit: this was solved by erasing the historial, also i cant edit and put this template in live mode by using Adobe Brackets.io web editor.

I really like this project and I would have a little fun with it in Meteor and Cordova. I tried checking out the templates from a PHP server and everything works fine. However, when I put them in a Meteor they don't seem to look and behave as they should. Is there something I am not doing right? Is it Meteor or there are known issues with meter.

Here's my app structure:

├── application_layout_minimal.html
├── client
│   ├── css
│   │   └── base.min.css
│   ├── lib
│   │   └── material
│   │       ├── base.js
│   │       ├── html5shiv.js
│   │       └── respond.js
│   └── templates
│       ├── application
│       │   └── application_layout_minimal.html
│       ├── authentication
│       └── home
├── index.html
├── lib
│   ├── collections
│   └── router.js
├── page-404.html
├── page-affix-full.html
├── page-affix.html
├── public
│   ├── css
│   │   └── fonts
│   │       ├── FontAwesome.otf
│   │       ├── fontawesome-webfont.eot
│   │       ├── fontawesome-webfont.svg
│   │       ├── fontawesome-webfont.ttf
│   │       ├── fontawesome-webfont.woff
│   │       ├── fontawesome-webfont.woff2
│   │       ├── MaterialDesignIcon.eot
│   │       ├── MaterialDesignIcon.svg
│   │       ├── MaterialDesignIcon.ttf
│   │       └── MaterialDesignIcon.woff
│   └── images
│       ├── samples
│       │   ├── landscape.jpg
│       │   └── portrait.jpg
│       ├── screenshots
│       │   ├── material01.png
│       │   ├── material02.png
│       │   └── material03.png
│       └── users
│           └── avatar-001.jpg
└── server

I have a problem with this file base.min.css. It seems that is not formatted correctly.

From the commit history, I see this library was started in Feb 2015. At that time, MaterializeCSS was already around, so there must've been good reasons to not contribute there instead, or fork that project.

Would be nice to mention prior art in the README.

This is a pain in the butt. Firefox seems to have a strange way of formatting the toast, as seen in the screenshot below.

When scrolling to the bottom, the RHC starts flickering on mobile Safari. It's as if it's possible to scroll down further than what is "normally" possible. Several swipes up - while the RHC is flickering - are needed until the middle column text shows up again, then it's back to normal. Tested it also on mobile Chrome, there everythings ok.

Template is a fantastic !!! But I continue to have problems with the file base.min.css.
How can I fix?

any plans to make a bower package?

I can only find info for toggling it with a button.

There are several material design mobile apps which have tab in the header area like whats-app, google reader etc. But here in this framework, I can't add tabs into the header area satisfactorily. (I am not a css wiz though). Can you please show me how to achieve that?

The project is great so far (highfive).
All it needs now is some animations.

Polymer Paper implements this.

One method: http://jsfiddle.net/muicss/Lrw1me3e/

Would love to see this at:
http://daemonite.github.io/material/docs/4.0/components/forms/

Hi there

I sent a pull request 21 days ago, but you haven't responded. I don't mind if you reject it, or request that I change it, but would appreciate a response. If you don't want pull requests, maybe mention it in your readme.

I tried to install it by Bower with cmd: bower install --save git://github.com/Daemonite/material
at finished, I found its version is 1.0.0 (like).
and then tried to cmd bower install --save git://github.com/#1.2.0, told not this version.

It will be appreciated if you can offer a detail code.
I am totally new to Javascript.

thanks for your help.
have a nice day.
:)

elevation & shadows describes precisely z-index and shadows.

I will do a pull request, but I need some guidance on how to do that.
Using placeholder ? mixins ?

When a datepicker is used inside a modal dialog, a graphical error occurs with the datepicker's black background:

I tried using a very crude hack which seemed to make it look okay on desktop:

.modal .picker__holder {
    margin-top: 49px;
    margin-bottom: 49px;
    overflow-y: hidden;
    margin-left: 17px;
    width: calc(100% - 34px);
}

But it doesn't really work when it comes to mobile:

As you can see, it cuts off the controls at the bottom of the datepicker.

Would it be possible to maybe move the datepicker holder so that it is part of the body instead of the parent div or something similar?

What is the browser compatibility like? How would it fall back to <IE9?

Hi,

In order to help people get stable releases of material. Could you please create release. Like leaflet

It's not time consuming but can help a lot.

Thanks

Would you be interested to create an angularized version of this template? There is already an angular version for the bootstrap.js https://angular-ui.github.io/bootstrap/

There is an ongoing project for angular material design :
https://github.com/angular/material
However this is based on FlexBox instead of Bootstrap.

It will be good to get a better styling for a video tag, I cannot make a video tag fill a card. Hope you can fix that soon.

Is there any way to create pagination with Material? Some like

Since this is built with Bootstrap, it might be worth mentioning in README the extra features it offers vs. Bootswatch Paper (see #16).

Hi,

I'd like to use it locally, without Internet access.
How can I do?

Thanks for your help!

Its really nice you remove the font downloading from google, but now the roboto font is missing in css/font.

Those versions of IE are not used enough for the amount of work needed to support them

Checkbox and radio button on firefox is not accepting css in both mine as well as in your demo .

I have a problem in base.min.js on tabSwitch=function(a,b){var c=a.closest(".tab-nav"),d=$(".tab-nav-indicator",c),e=c.offset().left, function

Hi,

It's a correction/adaptation of the documentation or your CSS file.
The text-overflow doesn't work for long texts on small screens in tiles with actions.

File: ui-tile.html
Section: Tiles with Actions

Code:

<div class="tile-inner">
    <span class="text-overflow">consectetur adipiscing elit, consectetur adipiscing elit, consectetur adipiscing elit</span>
</div>

Screenshot:

When the code works correctly:

<div class="tile-inner text-overflow">
    <span class="">consectetur adipiscing elit, consectetur adipiscing elit, consectetur adipiscing elit</span>
</div>

Kind Regards

Cannot be loaded font awesome or ¿how should we must load it?

Needs ability to swipe side menus in and out of view

Hi, beatiful work! It's a wonderful themplate! Just one thing that is not perfect, the icons doesn't appear...do you have any solution for that? thanks

Hi,

Will you agree pull request replacing parts of the bootstrap js with "custom" code ?
In es6, transpilated by babel ?

Thanks

Hello,
First of all, it's a great material design implementation!

Maybe I missed something but I don't find a way to make a form field mandatory the same way as in : https://www.polymer-project.org/0.5/components/paper-input/demo.html

Regards,

PL

Hi,

Awesome work.

I want to use the material design icons as a separate dependency. What is the source of _material-design-icons.scss ?

Thanks

The link: ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js doesn't work.
You have to download the jquery 1.11.3 (from: https://jquery.com/download) and replace this line:
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
with this one:
src="js/jquery-1.11.3.js"
in every html.

Hi,

I think your project is the best association of HTML5, Bootstrap & Material Design .
I suggest to improve the UI: add a badge with a number (like the number of unread messages on an envelope icon).

It's just a suggestion. It must be adapted with your CSS structure, design and the CSS guideline rules.

Sample:

• HTML:

<span class="icon">mail</span>
<span class="icon icon-lg">mail</span>
<span class="icon icon-2x">mail</span>

Sample, included badge:

• HTML:

<span class="icon icon-badge" data-badge="1">mail</span>
<span class="icon icon-lg icon-badge" data-badge="1">mail</span>
<span class="icon icon-2x icon-badge" data-badge="1">mail</span>

• CSS:

<style>
.icon.icon-badge[data-badge]::after {
    content: attr(data-badge);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    top: -21px;
    right: -7px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 600;
    font-size: 9px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #F44336none repeat scroll 0% 0%;
    color: #FFF;
}

.icon-lg.icon-badge[data-badge]::after {
    content: attr(data-badge);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    top: -27px;
    right: -11px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 600;
    font-size: 10px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #F44336 none repeat scroll 0% 0%;
    color: #FFF;
}

    .icon-2x.icon-badge[data-badge]::after {
    content: attr(data-badge);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    top: -35px;
    right: -15px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 600;
    font-size: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #F44336 none repeat scroll 0% 0%;
    color: #FFF;
}

</style>

Thank you for your time and attention.
See you soon for the next commit.

Hi,

Will you agree to reorganize the files/directories according to this best practice : aesthetic sass

And create tests, assets, dist as root directories. I'll submit a pull request.

Thanks

Hi there

When you have a multi-select box with one or more options selected, the .header-logo drops down and obscures the LHS menu. This seems to only affect Chrome, I could not reproduce the problem in Safari or Firefox.

Even weirder, if you inspect the .header-logo, click "float: left" off and on again, it pops up to the correct place.

The offending form control:

<div class="form-group">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4">
            <label class="form-label" for="input-select">Select</label>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-8">
            <select class="form-control" id="input-select" multiple="multiple">
                <option selected="selected">1</option>
                <option selected="selected">2</option>
                <option>3</option>
            </select>
        </div>
    </div>
</div>

As a work-around, I'm just doing this (not ideal):

<header class="header">
    <div class="clearfix pull-left" style="min-width: 300px">

Are you ok to force a css style on material using scss-linter and css-comb ?

Hi,

Following this link, the prefered way to use material icons is by ligatures.

Using ligatures will remove a lot of sass variables burden, but will impose everyone to go in legacy code replacing old way by new way.

I'm having trouble getting this working in Meteor. The CSS files are running well but the JavaScript files keep throwing the error: Uncaught TypeError: Cannot read property 'style' of null base.js?4f6009c08cf32c5ac7ff405986401b33b8512157:83.

Is it something I am doing wrong? Any ideas how I can get around this?

http://daemonite.github.io/material/

Example:

Using Opera on Android, icons like hamburger menu, plus, etc.. are not showing (neither the code name). - on IE (windows phone) there is visible only code name "plus" or "menu".

How does one get the value of the switch whether on or off with JavaScript. Using $('input[name="input-switch"]').val() with jQuery always returns "on" even when the switch is off