vivadecora / vd-modal Goto Github PK

This project readme should include some initial information just as:

• How to install and inject vd-modal;
• How to create a simple text modal;
• How to create a transparent modal;
• How to create a column modal;
• vd-modal api options;
• vd-modal main css classes;

Some vd-modal information as:

• using vd-modal you may only have one modal at a time;
• using vd-modal your modal html code will not be hidden before modal openning;

The index.html file has some unnecessary inline styles for

Currently, there isn't a simple way to contribute to the project. Its necessary clone the repository, create a local project, add the vd-modal as a dependency and finally make the modifications/bug fixes.

I think it would be nice if was added to repository a folder example where would have a simple index.html with the necessary dependencies (maybe the documentation code), ready to work on!

Some thing like this:

In this way, just need to enter in example folder and run a simple server, like python -m SimpleHTTPServer

The usual behavior of modals includes closing it when the ESC key is pressed.
This behavior should be added to VD modal.

When the content is large (or medium) the sidebar extend to fit it. It's necessary to limit the width of the sidebar on _vm-modal.components.sass with a max-width:

From it:

+modifier("sidebar")
  opacity: 1
  min-width: 285px
  margin-right: 0
  transition: margin-right .75s, opacity .75s

To it:

+modifier("sidebar")
  opacity: 1
  min-width: 285px
  max-width: 285px
  margin-right: 0
  transition: margin-right .75s, opacity .75s

Generate a one page github.io page with informations from README #4 and usage examples.
Important: This page should be avaliable outside master branch.

I guess main strutcture for this page will be something like this:

Hero section:

• Optional Viva Decora logo
• vd-modal name
• slogan
• github fork button

Three icons section:

• Clickable icon for "Simple HTML content modals" - opens a modal with some basic html content;
• Clickable icon for "Using flexbox" - opens a transparent modal with browser support info;
• Clickable icon for "Sidebar modal" - opens a sidebar modal with penguin photos;

Installation section:

• npm install --save vd-modal
• // insert <script> in your html
• // link css to your html
• // inject vd-modal in your angular app
• // create hello world modal
• button to open hello world modal

This is enough for this very first issue about a demo page.

As long html entities does not includes icons for expand and collapse it's necessary to create icons for expand and collapse;

These icons are going to replace actual words in the expand/collapse button. cc @woliveiras

For now dist folder has only css files and all javascript files are being loaded from src folder.

It's necessary to make javascript avaliable as distribution files. These files should be vd-modal.min.js and vd-modal.min.js.map.

vd-modal.min.js includes:

• All minified javascript .module, .model, .directive, .controller and .run files;
• All templates in $templateCache format;

vd-modal.min.js.map includes:

• Only a sourcemap for vd-modal.min.js