creativetimofficial / now-ui-dashboard Goto Github PK

View Code? Open in Web Editor NEW

188.0 13.0 144.0 2.44 MB

Now UI Dashboard - Open Source Admin Template

Home Page: https://demos.creative-tim.com/now-ui-dsahboard/examples/dashboard.html

License: Other

CSS 0.56% JavaScript 13.45% HTML 16.58% SCSS 69.41%

now ui now-ui-design now-ui-dashboard html5 bootstrap-4 responsive-admin

now-ui-dashboard's Introduction

Now UI Dashboard

Now UI Dashboard is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics. Now UI Dashboard comes packed with all plugins that you might need inside a project and documentation on how to get started. It is light and easy to use, and also very powerful.

Now UI Dashboard has the same design characteristics as Now UI Kit, so it is quite convenient to use them together. Or you can choose between them depending on the project at hand. If you love Now UI Kit, you'll love Now UI Dashboard. Create awesome, lifelike prototypes with InVision and Now so your users can experience and give feedback on your vision!

Bootstrap 4 Support Now UI Dashboard is built on top of the much awaited Bootstrap 4. This makes starting a new project very simple. It also provides benefits if you are already working on a Bootstrap 4 project; you can just import the Now UI Dashboard style over it. Most of the elements have been redesigned; but if you are using an element we have not touched, it will fall back to the Bootstrap default.

Special thanks

During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:

Chart.js for the wonderful charts

Let us know your thoughts below. And good luck with development!

Versions
Demo
Quick Start
Documentation
File Structure
Browser Support
Resources
Reporting Issues
Technical Support or Questions
Licensing
Useful Links

Versions

React	Angular	HTML

Demo

Quick start

Quick start options:

Download from Creative Tim

Documentation

The documentation for the Now UI Dashboard is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

now-ui-dashboard

├── CHANGELOG.md
├── README.md
├── assets
│   ├── css
│   │   ├── now-ui-dashboard.css
│   │   ├── now-ui-dashboard.min.css
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap.min.css.map
│   │   └── now-ui-dashboard.css.map
│   ├── demo
│   │   └── demo.js
│   ├── fonts
│   │   ├── nucleo-license.md
│   │   ├── nucleo-outline.eot
│   │   ├── nucleo-outline.ttf
│   │   ├── nucleo-outline.woff
│   │   └── nucleo-outline.woff2
│   ├── img
│   ├── js
│   │   ├── core
│   │   │   ├── bootstrap.min.js
│   │   │   ├── jquery.min.js
│   │   │   └── popper.min.js
│   │   ├── now-ui-dashboard.js
│   │   ├── now-ui-dashboard.js.map
│   │   ├── now-ui-dashboard.min.js
│   │   └── plugins
│   │       ├── bootstrap-notify.js
│   │       ├── chartjs.min.js
│   │       └── perfect-scrollbar.jquery.min.js
│   └── scss
│       ├── now-ui-dashboard
│       └── now-ui-dashboard.scss
├── docs
├── examples
│   ├── dashboard.html
│   ├── icons.html
│   ├── map.html
│   ├── notifications.html
│   ├── tables.html
│   ├── typography.html
│   ├── upgrade.html
│   └── user.html
├── gulpfile.js
├── nucleo-icons.html
└── package.json

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Live Preview
Download Page: https://www.creative-tim.com/product/now-ui-dashboard
Documentation is here
License Agreement: https://www.creative-tim.com/license
Support: https://www.creative-tim.com/contact-us
Issues: Github Issues Page
Now UI Dashboard PRO - demo

Reporting Issues

We use GitHub Issues as the official bug tracker for the Material Dashboard Pro. Here are some advices for our users that want to report an issue:

Make sure that you are using the latest version of the Material Dashboard Pro. Check the CHANGELOG from your dashboard on our website.
Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Copyright 2018 Creative Tim (https://www.creative-tim.com)
Creative Tim license

Useful Links

More products from Creative Tim
Vue products from Creative Tim
Tutorials
Freebies from Creative Tim
Affiliate Program (earn money)

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Google+: https://plus.google.com/+CreativetimPage

Instagram: https://instagram.com/creativetimofficial

now-ui-dashboard's People

Contributors

Stargazers

Watchers

Forkers

nasirkhan hlimajunior plugg-to technext lekens my-wallet varunpillai arceduardvincent deve0ps kungvwow fork-zone rahulyhg brunovtf adin-alihodzic supplychainhub uqu8 kittipong139 paulyc rgarciaseija prinehealth stephensmitchell-forks brandsafric-incorporated vevedh app-generator damilolaadegunwa speedinternet ansh20 crakins krithikkalatharan shirakia jthuo-enzi jvsouto dalalsunil1986 marcelomata miknotauro admin-dashboards smlcodes stefanofiorenza thiagorthomaz spaulaus almazzy best-of-ui templatecollection wwwk sh00k-thad3v asepridwans hardyansah guidoriosciaffaroni cisionmarkwalls xujieaixixi rajukamlesh arunsharma1203 piasonnupp dpxdan omethsonjith sauravtalentelgia sahylamyr abdian666 skpetks angel17x ckc924 fathima1212 milk3973 viniciusazvdo adepaz6 theanhnguyen2002 bharathkhanna05 explodedriot igutisan alialmalla1 biswanath99 heru tomaszlach86 mariozwart qhuy2310 chelseashin cristianbernardes mirgalim dahaus rafasalinero k0lbazzer alehugen vitorasr anahappy fahmi145 sungminyun anilveereddy qapris abahotto kmafh supakorn1440 modernacyber iyou25 jnashdesign pao-zoi heryadin ulumjoe perolanegra jackeylove1 dhanex2014

now-ui-dashboard's Issues

[Firefox] Icons not Working

The Icons will not loaded correctly. In MS Edge it works but not in Firefox. Here a screenshot:

Can't find the class "Panel-header"

I want to edit the text "Dashboard" displayed on every page
how can i do this?

I'm unable to edit your chart data, can you please help me out?

Fontawesome 5 Icons does not works on achors

I included both the JS ans CSS version of Font Awesome 5 but the icons does not work on Anchor (<a>) tags. Though the icons are displaying properly on Buttons.

Usually these works perfectly with both the <a> and <button> tags.

Green is an anchor and orange is a button here,

Unable to compile scss file

Hi, when i try to include scss file, i got this error message:

File to import not found or unreadable: mixins/free/buttons.

and when i check on the mixing file, there is no free folder, can you check?

//Components
@import "mixins/free/buttons";
@import "mixins/free/vendor-prefixes";
@import "mixins/free/inputs";
@import "mixins/free/page-header";
@import "mixins/free/dropdown";
@import "mixins/free/cards";
@import "mixins/free/transparency";

form-control-lg is not working as expected

Prerequisites

Please answer the following questions for yourself before submitting an issue.

I am running the latest version (all versions from 1.0.0 to 1.3.0 current)
I checked the documentation and found no answer
I checked to make sure that this issue has not already been filed
[?] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

BFormInput and FGInput with class form-control-lg will appear on style, only bigger.

Current Behavior

BFormInput and FGInput with class form-control-lg lose all style are smaller.

[Feature Request] Update the version on npmjs.com

What is your enhancement?

Hi, is it possible to update the version of the Now UI Dashboard (now-ui-dashboard) on npmjs.com ? Cause, currently, it's the version 1.0.1 whereas it's the version 1.5.0 on Github. Thank you for your fantastic work. Have a good day.

Unable to create a nested accordion in component.html

Hi,

I am trying to use a nested accordion in a component that i made through

     ng g component element

command.

I referred to this link and simply copy pasted the codes of these links -

https://www.bootply.com/fhdb11Byfq#
https://codepen.io/marklsanders/pen/OPZXXv

But none of it is stable. It just toggles immediately i click on the button.

Mobile modal not working inside tables

Whenever I have a button that triggers a modal inside a table, it works perfectly in my computer, but not at all in my phone.

The error seems to be with this line:

<div class="table-responsive">

When I take it away, the table is not responsive anymore, but the modals work fine!

[Feature Request] SideBar collapses for smaller screens

What is your enhancement?

Please help, how to prevent sidebar collapsing for smaller widths. It will get disappeared at width 991px.

can't find class "panel-header"

[Bug] Sidebar does not expand when i click the button

Version

1.5.0

Reproduction link

https://github.com/SantiGodoy/EditorColaborativoTFG

Operating System

Windows 10

Device

Desktop computer

Browser & Version

Google Chrome 80.0.3987.106

Steps to reproduce

Collapse the sidebar
Click the hamburger button to expand the sidebar

What is expected?

Sidebar expanding after clicking the button

What is actually happening?

Sidebar not expanding

Solution

Maybe i'm missing some logic in the code, but i think that i have everything in it.

Additional comments

I have compared my source code with the original project but i don't see any significant difference between them.

sistema requisisciones

[Bug] can't find the class "panel-header"

I want to edit the text "Dashboard" displayed on each and every tab of sidebar as I click on them.
How can i do this?

Missing file in font folder

There is a missing file namely nucleo-outline.svg. Is it intended to be not there or is it really just missing? I'm using webpack to import css and the webpack error says it cannot resolve ../fonts/nucleo-outline.svg.

How to create a drop-down in side bar in now-ui dashboard

Hi,

I want to create a background in sidebar of the Template --> now-ui-dashboard-angular-v1.0.0.
It says angular-v1.0.0 but it is an angular2 template.

And i want to create a drop-down. It was not available in the template (creative-tim template angular2). Kindly let me know what is the error in my code that i am not getting the drop-down. Purpose is i am trying to integrate Angular2 + and NodeJS with Neo4j application.

Code -

sidebar.component.html

     <div class="sidebar-wrapper">
     <ul class="nav">
        <li   routerLinkActive="active" 
        *ngFor="let menuItem of dashboardMenuItems" class=" nav-item nav- 
          dropdown"  appNavDropdown>
          <a class="nav-link nav-dropdown-toggle" href="#" 
             appNavDropdownToggle [routerLink]="[menuItem.path]">
              <i class="now-ui-icons {{menuItem.icon}}"></i>
              <p>{{menuItem.title}}</p>
                </a>


           <ul class="nav-dropdown-items">
           <li class="nav-item">

                <!-- System -->

             <a class="nav-link" routerLinkActive="active" 
            [routerLink]="['/dashboard']">
               <i class="fa fa-laptop"></i> System</a>
               </li>

             <!-- Interface -->

            <li class="nav-item">
             <a class="nav-link" routerLinkActive="active" 
            [routerLink]="['/dashboard']">
          <i class="fa fa-th"></i> Interface</a>
            </li>

          <!-- User -->

          <li class="nav-item">
            <a class="nav-link" routerLinkActive="active" 
              [routerLink]="['/dashboard']">
               <i class="icon-user"></i> User</a>
               </li>

            <!-- Group -->

           <li class="nav-item">
            <a class="nav-link" routerLinkActive="active" 
            [routerLink]="['/dashboard']">
          <i class="fa fa-group"></i> Group</a>
            </li>

          <!-- Role -->

          <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" 
          [routerLink]="['/dashboard']">
          <i class="fa fa-male"></i> Role</a>
           </li>

            <!-- Transaction -->

          <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" 
          [routerLink]="['/dashboard']">
          <i ></i>Transaction</a>
          </li>
          </ul>
          </li>
        </ul>
      </div>

PLease help me improve my code.

Links to demo pages in README lead to 404 error pages.

[Bug] can't find panel-header class

Version

angular 9

I want to edit the text "Dashboard" displayed on every page
how can i do this?

Issue with tables row and modal

I need to show tables but It will show me five rows only and One more I will be used modal in this themes but it's not working

Populate charts with response from an API

I'm trying to populate charts with data from an API response, but its not creating the chart lines.
My request looks like:

  let monthArrestsResponse = await this.api.reqWithToken('get-dash-arrest-month', null, null, 'GET');
  this.monthArrestsType = monthArrestsResponse.type;
  this.monthArrestsCategory = monthArrestsResponse.category;
  this.monthArrestsTitle = monthArrestsResponse.title;
  this.monthArrestsValues = monthArrestsResponse.values;
  this.monthArrestsLabels = monthArrestsResponse.labels;

and after the respponse I have just a blank chart.

[Bug] Modal not working inside tables on mobile

Version

1.5.0

Reproduction link

http://ghts.com.br/modal-problem/

Operating System

iOs

Device

iPhone 11 Pro Max

Browser & Version

Safari Latest

Steps to reproduce

Click on the blue button
If you're in a phone, you'll see the error. In a computer it works fine!

What is expected?

The modal to open properly

What is actually happening?

The modal should open inside a page. But it opens inside the table freezing the whole screen.

Solution

Remove the table responsiveness solves the problem. So as soon as I realize, it is a problem with this line:

<div class="table-responsive">

Here's a like where the table is not responsive and you can try:

http://ghts.com.br/modal-problem/not-responsive.php

Additional comments

[Bug] can't find the class "panel-header"

Version

angular 9

Reproduction link

https://www.creative-tim.com/new-issue/now-ui-dashboard

Operating System

Windows

Device

Browser & Version

Steps to reproduce

What is expected?

What is actually happening?

Solution

Additional comments

I want to edit the title "dashboard" displayed o n the top of each and every page when an item is clicked from the sidebar.
How can i do this?

SideBar Collapsing for Smaller Screens

How to prevent Sidebar collapsing for smaller screens? Sidebar will get disappeared at 991px width.
for mobile screens also it doesnt show up. I want to show it for all screen sizes, Please help.

test for jira

blab la

Unable to add Field <input type="file"> not showing anything.

when i create input type file it not show field to select file. Please tell me solution.

Migrate to Sketch

I purchased the react version of this and was a little disappointed the designs are in PSD and not sketch. Any plans to migrate? Sketch seems the standard for web design these days.

[Bug] When i creating input field as file it is not showing. I am creating a form which include <input type="file"> it is not showing anything on page.

Version

v1.5.0

Reproduction link

https://github.com/Devdish/now-ui-Dashboard/blob/master/user.php

Operating System

Windows 10

Device

Laptop

Browser & Version

Google Chrome 84.0.4147.89

Steps to reproduce

i created form.
adding a field input type file.

What is expected?

It will show option to select file

What is actually happening?

it show nothing on screen.

Solution

Additional comments

Unable to create a nested accordion

Hi,

I am trying to implement a nested accordion on the sidebar of this template. However, the toggle isn't working . Like only the Collapsible Group Item #1, Collapsible Group Item #2, Collapsible Group Item #3 are seen on the screen, when i click it , collapse occurs but it doesn't stays. It collapses back

What to do ?
code - It is just a copy-paste from the reference link - https://codepen.io/marklsanders/pen/OPZXXv

sidebar.component.html

    <div class="sidebar-wrapper">
       <ul class="nav nav-dropdown-items">
       

     <li>
      <div class="panel-group" id="accordion1">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data- 
     parent="#accordion1" href="#collapseOne">Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">Panel 1</div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data- 
      parent="#accordion1" href="#collapseTwo">Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="panel-body">
                        <h2>Heading</h2>
                        <div class="panel-group" id="accordion21">
                            <div class="panel">
                                <a data-toggle="collapse" data- 
      parent="#accordion21" href="#collapseTwoOne">View details 2.1 
        &raquo;
                                </a>
                                <div id="collapseTwoOne" class="panel- 
       collapse collapse">
                                    <div class="panel-body">Details 
      1</div>
                                </div>
                            </div>
                            <div class="panel ">
                                <a data-toggle="collapse" data- 
        parent="#accordion21" href="#collapseTwoTwo">View details 2.2    &raquo;
                                </a>
                                <div id="collapseTwoTwo" class="panel- collapse collapse">
                                    <div class="panel-body">Details  2
       </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

           <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                        <!-- data-toggle="collapse" -->
                    <a  data-parent="#accordion1" 
       href="#collapseThree">Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">

                    <div class="panel-group" id="accordion2">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data- 
        parent="#accordion2" href="#collapseThreeOne">Collapsible Group Item  #3.1
  
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThreeOne" class="panel-  collapse collapse in">

                                <div class="panel-body">Panel 3.1
             </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a  data-toggle="collapse" data- 
        parent="#accordion2" href="#collapseThreeTwo">Collapsible Group Item #3.2
  
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThreeTwo" class="panel-   collapse collapse">
  
                                <div class="panel-body">Panel  3.2
             </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
           </div>

          </div>

        </li>

      <!-- nested accordion -->


       </ul>
       </div>

Image -

creativetimofficial / now-ui-dashboard Goto Github PK

now-ui-dashboard's Introduction

Special thanks

Table of Contents

Versions

Demo

Quick start

Documentation

File Structure

Browser Support

Resources

Reporting Issues

Technical Support or Questions

Licensing

Useful Links

Social Media

now-ui-dashboard's People

Contributors

Stargazers

Watchers

Forkers

now-ui-dashboard's Issues

Prerequisites

Expected Behavior

Current Behavior

What is your enhancement?

What is your enhancement?

Version

Reproduction link

Operating System

Device

Browser & Version

Steps to reproduce

What is expected?

What is actually happening?

Solution

Additional comments

Version

Version

Reproduction link

Operating System

Device

Browser & Version

Steps to reproduce

What is expected?

What is actually happening?

Solution

Additional comments

Version

Reproduction link

Operating System

Device

Browser & Version

Steps to reproduce

What is expected?

What is actually happening?

Solution

Additional comments

Version

Reproduction link

Operating System

Device

Browser & Version

Steps to reproduce

What is expected?

What is actually happening?

Solution

Additional comments

Recommend Projects

Recommend Topics

Recommend Org