coreui / coreui Goto Github PK

(please navigate me to to right place if that is the wrong repo for core ui dark issues)

Error while Compiling:

ERROR in ./node_modules/@coreui/coreui-pro/dist/css/themes/coreui-dark.min.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/@coreui/coreui-pro/dist/css/themes/coreui-dark.min.css)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: xxxx/......\scss_sidebar.scss:454:41: Can't resolve '%27data:,%27' in 'xxxxx/node_modules/@coreui/coreui-pro/dist/css/themes'

452 | .sidebar {
453 | .nav {

454 | list-style-image: url("data:,");
| ^
455 | .divider {
456 | height: 0;

• Operating system and version (Windows, Mac OS X, Android, iOS, Win10 Mobile)
  OSX

• Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser)
  N/A

• Reduced test cases and potential fixes using CodePen or JS Bin

• Create Angular 7 Project

• npm install @coreui/[email protected]

• In angular.js, add "node_modules/@coreui/coreui-pro/dist/css/themes/coreui-dark.min.css" to projects/architect/build/styles

Workaround: Downgrade to 2.0.19

Hi,

I'm using vue version, and wouldn't like to compile/change coreui, on which it depends on.
Therefore, I'm customizing sidebar colors in _custom.scss

This works fine, but one has to duplicate a section just to cover minimized state as well. There's no need for minimized state to have different colors.
Would you please consider removing these lines, which overwrite the colors again, only for minimized state?

The colors are already set above for the whole sidebar, no need to set them again.

Thanks

Hi,

I'm pleased to announce that after several months of development we are ready to share with you first version of CoreUI 3.x. The general plan for CoreUI 3.x development starts with a few alpha releases. Expect another alpha releases this and next month.

Here you can find the latest version of CoreUI:

• CoreUI 3 Library
• CoreUI 3 Free Admin Template
• CoreUI 3 Pro Demo

We are looking forward to your ideas and comments.

Looking at left sidebar in 2.0 vs 3.0, I observed two issues:

1. default width is larger. Extra space is taking valuable real estate to be used for an actual app functionality, not just navigation.

2. collapsed sidebar (bottom '<' icon) UX is worse. In 3.0, the whole sidebar shows on mouse hover, which is disrupting for users.
   The collapsed sidebar is for power users who already learned the left navigation menu. For them, seeing only icons with tooltips is enough. The way 2.0 works is very good: show full sub-menu items only for the currently hovered icon, while still keeping sidebar collapsed.

Please consider addressing these issues. They are a blocker for us from using 3.0.

Thanks

Hi,

Is it possible to add default style(s)/class(es) to theme for page select in pagination?

<ul class="pagination">
  <li class="page-item">
    <a class="page-link" href="#">Previous</a>
  </li>
  <li class="page-item">
    <select **class="beautiful-page-select-class"** >
      <option>1</option>
      <option selected="">2</option>
      <option>3</option>
    </select>
  </li>
  <li class="page-item">
    <a class="page-link" href="#">Next</a>
  </li>
</ul>

I'm trying to include CoreUI using Gradle and WebJars:
compile 'org.webjars.npm:coreui__coreui:2.0.4'

I get the following error:

Could not find any matches for org.webjars.npm:coreui__coreui-plugin-npm-postinstall:[1.0.2,2) as no versions of org.webjars.npm:coreui__coreui-plugin-npm-postinstall are available.
  Required by:
      project : > org.webjars.npm:coreui__coreui:2.0.4

I tried to add the dependency via the Webjars website but it did not work as the Github project is missing:
https://github.com/coreui/coreui-plugin-npm-postinstall

BEWARE OF THIS PROVIDER!

I have Core Pro UI Standard License, the zip files provided are missing the sass files.

Tried to run npm install, but git repos are 404.

Additionally, the email address within package.json bounces:

Your message wasn't delivered to [email protected] because the address couldn't be found, or is unable to receive mail.

Below is the package.json provided by Core UI after purchasing Pro license:

{
  "name": "@coreui/coreui-pro-bootstrap-admin-template",
  "version": "2.0.1",
  "description": "CoreUI Pro Bootstrap Admin Template",
  "keywords": [
    "admin",
    "admin panel",
    "admin template",
    "bootstrap",
    "css",
    "dashboard",
    "framework",
    "front-end",
    "responsive",
    "sass",
    "ui kit",
    "webapp"
  ],
  "homepage": "https://coreui.io",
  "bugs": {
    "url": "https://github.com/coreui/coreui-pro-bootstrap-admin-template/issues",
    "email": "[email protected]"
  },
  "license": "https://coreui.io/pro/license/",
  "author": {
    "name": "Łukasz Holeczek",
    "url": "http://holeczek.pl",
    "github": "https://github.com/mrholek",
    "twitter": "https://twitter.com/lukaszholeczek"
  },
  "contributors": [
    {
      "name": "Andrzej Kopański",
      "url": "https://github.com/xidedix"
    }
  ],
  "main": "src/index.html",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/coreui/coreui-pro-bootstrap-admin-template.git"
  },
  "scripts": {
    "build": "npm-run-all build-clean build-copy build-vendors",
    "build-clean": "rimraf dist",
    "build-copy": "copyfiles -a -e \"src/scss/**/*\" -u 1 \"src/**/*\" dist/",
    "build-vendors": "node build/vendors.js",
    "css": "npm-run-all --parallel css-compile* --sequential css-prefix css-minify*",
    "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/scss/style.scss src/css/style.css",
    "css-compile-vendors": "node build/vendors-sass.js",
    "css-lint": "stylelint --config build/.stylelintrc --syntax scss \"src/scss/**/*.scss\"",
    "css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output src/css/style.min.css src/css/style.css",
    "css-prefix": "postcss --config build/postcss.config.js --replace \"src/css/*.css\" \"!src/css/*.min.css\"",
    "js": "npm-run-all --parallel js-compile* js-lint*",
    "js-compile": "cross-env PLUGINS=true babel src/js/src/ --out-dir src/js/ --source-maps",
    "js-lint": "eslint src/js/src",
    "localhost": "browser-sync start --server \"./src\" --serveStatic \"./\" --files \"!./src/js/src/**/*, ./src/**/*, !./src/scss/**/*\"",
    "localhost-dist": "browser-sync start --server \"./dist\"",
    "release-version": "node build/change-version.js",
    "serve": "npm-run-all --parallel localhost watch-css watch-js",
    "watch-css": "nodemon --ignore dist/ -e scss -x \"npm run css\"",
    "watch-js": "nodemon --watch src/js/src/ -x \"npm run js\""
  },
  "dependencies": {
    "@coreui/coreui-pro": "^2.0.3",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "1.2.0",
    "@coreui/icons": "^0.2.0",
    "bootstrap": "4.1.1",
    "bootstrap-daterangepicker": "^3.0.0",
    "chart.js": "^2.7.2",
    "codemirror": "^5.37.0",
    "datatables.net-bs4": "^1.10.16",
    "flag-icon-css": "3.0.0",
    "font-awesome": "4.7.0",
    "fullcalendar": "^3.9.0",
    "ion-rangeslider": "^2.2.0",
    "jquery": "^3.2.1",
    "jquery-ui-dist": "^1.12.1",
    "jquery-validation": "^1.17.0",
    "jquery.maskedinput": "^1.4.1",
    "ladda": "^1.0.6",
    "pace-progress": "1.0.2",
    "perfect-scrollbar": "^1.3.0",
    "popper.js": "1.14.3",
    "quill": "^1.3.6",
    "select2": "^4.0.6-rc.1",
    "simple-line-icons": "2.4.1",
    "spinkit": "^1.2.5",
    "toastr": "^2.1.4"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.46",
    "@babel/core": "^7.0.0-beta.46",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.46",
    "@babel/preset-env": "^7.0.0-beta.46",
    "autoprefixer": "^8.4.1",
    "babel-eslint": "^8.2.3",
    "babel-plugin-transform-es2015-modules-strip": "^0.1.1",
    "browser-sync": "2.24.4",
    "chalk": "^2.4.1",
    "clean-css-cli": "^4.1.11",
    "copyfiles": "^2.0.0",
    "cross-env": "^5.1.4",
    "eslint": "^4.19.1",
    "eslint-plugin-compat": "^2.2.0",
    "foreach-cli": "^1.8.0",
    "node-sass": "^4.9.0",
    "nodemon": "^1.17.4",
    "npm-run-all": "^4.1.3",
    "postcss-cli": "^5.0.0",
    "rimraf": "^2.6.2",
    "shelljs": "^0.8.1",
    "stylelint": "^9.2.0",
    "stylelint-config-recommended-scss": "^3.2.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-order": "^0.8.1",
    "stylelint-scss": "^3.1.0"
  },
  "engines": {
    "node": ">=6"
  },
  "browserslist": [
    "last 1 major version",
    ">= 1%",
    "Chrome >= 45",
    "Firefox >= 38",
    "Edge >= 12",
    "Explorer >= 10",
    "iOS >= 9",
    "Safari >= 9",
    "Android >= 4.4",
    "Opera >= 30"
  ]
}

Currently bootstrap is tightly coupled with the CoreUI scss stylesheets. The @import usage for referencing bootstrap eg: @import "node_modules/bootstrap/scss/bootstrap"; assumes that the node_modules directory is on root level for the build scripts. This however makes it difficult to reference to this library directly from for example a framework like rails (and possibly other frameworks). Rails exposes node_modules like @import "bootstrap/scss/bootstrap".

Being able to reference CoreUI based on it residing in node_modules next to other libraries like bootstrap, would benefit the usability of this library greatly, as modification and compilation of the scss would be easier to maintain for the end-developer. Now we have to pre-compile the assets with each update as opposed to simply updating the npm package.

I was under the impression that this could be done easily with dynamic @import statements in scss, not knowing that this isn't supported by scss at all. An elegant way to apply this would be with the build scripts in my opion, or by using relative paths in the imports, respecting the node_modules paths.

I wonder how you thing about this feature.

Edit:
I've made a pull request at #4.

Edit2:
The new pull request can be found at #41 as I couldn't restore the state of #4

When we add ScrollY to datatables the column header is mis alligned. is this issue already address in COREUI .

Thanks

:) Regards,
Ferdie Aquino

I recently purchased the Core UI pro license for angular. But I am unable to download the complete code with the features unlocked. What do I do?

I have bought coreui-pro membership. and I got a license key, how I active it?
And how I access coreui-pro repo?

Thx.

Which repo should I use? Which is the latest?

When there's many items in the sidebar, the sidebar minimizer does not appear and the sidebar is not scrollable.

Hi there

Do you intend to support Svelte with a native template and component pack in the future?

Thanks a lot

yarn add @coreui/coreui reports:

yarn add v1.6.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@coreui/coreui > [email protected]" has unmet peer dependency "[email protected] - 3".
warning "@coreui/coreui > [email protected]" has unmet peer dependency "popper.js@^1.14.3".
warning " > @coreui/[email protected]" has unmet peer dependency "[email protected] - 3".
warning " > @coreui/[email protected]" has unmet peer dependency "perfect-scrollbar@^1.3.0".
warning " > @coreui/[email protected]" has unmet peer dependency "popper.js@^1.14.3".
[4/4] 📃  Building fresh packages...
[1/1] ⠄ @coreui/coreui
[-/1] ⠄ waiting...
error /Library/WebServer/Documents/booh/node_modules/@coreui/coreui: Command failed.
Exit code: 1
Command: coreui-plugin-npm-postinstall
Arguments: 
Directory: /Library/WebServer/Documents/booh/node_modules/@coreui/coreui
Output:
internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'chalk'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Library/WebServer/Documents/booh/node_modules/@coreui/coreui-plugin-npm-postinstall/index.js:4:15)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)

this can be fixed running this command before:

yarn add chalk

it would be great if you will remove href attribute of anchor tag of the logo image tag or make href link dynamic for app-header component

SVG get stretched in Edge when its height/width does not have a unit.

Operating system and version: Windows 10
Browser and version: Edge

I have purchased the Core-ui membership version, and have a license key. How do I get access to the private repo on github?

I tried emailing [email protected] but the email was rejected because the user was unknown.

At the moment, I am pretty disappointed at the process of getting the pro version as they seem to be unmaintained, and very unclear beyond the payment part.

The left sidebar won't collapse when I click the button, I can't see any v3 docs on the sidebar, but I have closely copied the demo.

When I click it I get this:

been trying to reach @mrholek tried contact form via site, contact from via creativemarket, contact form via wrapbootstrap, have a question about my order, thought i would post here to see if anyone has a clue how to reach him.

I ran into multiple troubles (withyour latest pro zip coreui-pro-bootstrap-admin-template-2.0.1.zip and npm 6.1.0):

package.json asks for copyfile 2.0.1, which does not exist

"devDependencies": {
    [...]
    "copyfiles": "^2.0.1",

If I enforce copyfiles 2.0.0 (as it is the latest existing one),

"devDependencies": {
    [...]
    "copyfiles": "^2.0.0",

it works (NB: do not run as root and do not install globally)

Was there a confusion between coreui Pro 2.0.1 and copyfiles 2.0.0?

CSidebarBrand works great with customizing height and leaving out width. The resulted img is also centered vertical and horizontal. Perfect!

CHeaderBrand doesn't work the same, though.

1. Specifying height=36 has no effect.
   Cause: .c-header-brand forces height: 56px -- that should be removed?

2. The resulted img is NOT centered vertical, but it should be.

3. This also breaks the image, should be removed:

@media (min-width: 768px)
.c-header-brand {
    width: 256px;
}

Hello and thanks for the CoreUI framework!

We've seen users confused about the screen they're in, as it's not clear:

Other dashboards, eg Shopify, clearly show the current screen title:

Please consider these improvements:

1. add current page title as heading, similar to Shopify
2. change colors of the right navbar, to clearly show current page

PS: we've seen having current screen on the breadcrumb doesn't help. Breadcrumb is mostly ignored, left navigation bar is used.

Thanks!

Class names in Element.classList do not include dots. So, Selector.NAV_LINK_QUERIED must be "nav-link-queried".

After upgrading to v3, vendors bundle size increased with 500kb. (vue build)

One of the causes is icons. In previous version, those could be removed with

npm uninstall flag-icon-css simple-line-icons coreui-icons --save

In V3:

npm uninstall @coreui/icons --save

doesn't work because of this dependency in main.js

import { CIconPlugin } from '@coreui/icons/vue'
Vue.use(CIconPlugin)

Please move the CIconPlugin to vue build (https://github.com/coreui/coreui-free-vue-admin-template or coreui-vue?)
instead of bundling it with the icons. We don't any of the bundled the icons. One should be able to use font-awesome instead (which works fine with CIconPlugin)

Thanks

Getting this error when i'm trying to enable coreui dark mode.

here is my style.scss

// If you want to override variables do it here
@import "variables";

// Import styles with default layout.
// If you are going to use dark layout please comment next line
// @import "node_modules/@coreui/coreui-pro/scss/coreui";

// Import styles with dark layout
// If you want to use dark layout uncomment next line
@import "node_modules/@coreui/coreui-pro/scss/themes/dark/coreui-dark";

// If you want to add something do it here
@import "custom";

// Spinkit
$spinkit-spinner-color: $body-color;
@import "node_modules/spinkit/scss/spinkit.scss";

npm reported one of the dependencies of core-ui, jQuery 1.9.1 has the following two vulnerabilities.

1. Prototype Pollution (Severity: Moderate)
2. Cross Site Scripting (Severity: High)

Upgrading jQuery version to 1.12.2 resolves XSS but Prototype Pollution still remains.

I have the following queries. (Kindly note that I intent to use the plugin in a corporate environment. So, the vulnerabilities are concerns).

1. Will core-ui break if I upgrade jQuery to 1.12.1 since the default dependency added by core-ui is 1.9.1? I'm assuming there are no breaking changes since it's a minor version upgrade.
2. NPM suggests jQuery 3.4.x for remediation of both the vulnerabilities. Since, 3.x would have
   breaking API changes (I'm assuming again here. Please correct if I'm wrong), are there any plans for the upgrade anytime soon?

The generated standalone css file coreui-standalone.css looks different to the normal merged css file. One example is the font-size is too large at 1rem.

This appears to be caused by not including the Bootstrap reboot scss file in the coreui-standalone.scss file.

Like so:
@import "node_modules/bootstrap/scss/reboot";

I do not see any worker a while. without support.

v3 sets btn CSS to display: inline-flex;

This breaks centered text in for custom width buttons.

Please leave it to bootstrap default, which is inline-block and works fine.

modal.hidden.bs.modal and shown events not working !

i have following code for modal opening and close :

 $(function(){
    $('#changePasswordModal').on('hidden.bs.modal', function () {
        alert();
    });

    $('#changePasswordModal').on('shown.bs.modal', function () {
        alert();
    });

and its not working.

Hi,

First of all thank you for great admin template.
We have some style issues with dark layout.
I have summarized like below.

• toolbar buttons are not clear because of color. user can understand only when hover buttons.
  https://coreui.io/demo/dark/#editors/text-editor.html

• Select2 element not looks like other elements. For example background color and color.
  Also, list items looks like disabled when you open drop down list.
  -Also, same as for daterangepicker dropdown.
  https://coreui.io/demo/dark/#forms/advanced-forms.html

• Slider values not looks like clear and readable on tooltip style.
  https://coreui.io/demo/dark/#plugins/sliders.html

• Popover text is not clear and readable. It looks like disabled.
  https://coreui.io/demo/dark/#base/popovers.html

but it shows on smaller widths, up to 580px:

Is there a reason why coreui does not cut a new Release in github when a new version tag is pushed?

The last release was from February 22, 2019 for version 2.1.12

Maybe there is an opportunity here to both tag a version, create a github release and publish it to npm in a single command in package.json "scripts" section ?

Some links on the topic:

https://developer.github.com/v3/repos/releases/#create-a-release
https://www.npmjs.com/package/release-it
https://www.npmjs.com/package/generate-release

After creating the following CSS module custom.module.css and adding :
body { background: #0a0809 }

If I add that to a Custom Login Page... That will cause a conflict... in this case the background. Is there any way to add a custom css file without affecting coreui app?

Thanks

My company bought a CoreUI Pro Angular license.
How can we access the Pro features?
Is there an Pro example project similar to the free version?

Thanks!

Most dashboards show user first name and a dropdown too, to show there's a menu.

Please add this to 3.0 as well.

I tried something as a mockup, but it doesn't look good:

Thanks for considering!

Removing breadcrumb in v2 worked fine, but removing this in v3 from TheHeader

        <CSubheader class="px-3">
            <CBreadcrumbRouter class="border-0" />
        </CSubheader>

results still in a large header instead of simply having the 2nd row removed:

If I have a dropright with a lot of text in it, it looks like this, eg the menu gets positioned way over to the right but still has the width of the min-width.

Hello, I'm a paid member here.

When I come back to https://coreui.io, I can't see any section/button/link to User area for download the example templates/invoices/licenses (or I cant find)

So question is:
How can I go to User area on https://coreui.io?

thanks.

Hi,

Thank you for the great template. One feature would be nice is if one could specify a cookie name to remember the state of the side menu. Currently you minimize the menu and the moment it goes to any other page it maximizes again. Some users would prefer that the menu remain in it's current state.

Thanks

Using CoreUI v2.1.3

This works fine in v2, but not v3 beta1:

1. Collapse sidebar (to show only icons)
2. Hover on an icon which has a submenu, eg Base
3. Notice there is extra space introduced between it and the next icon (Buttons)
4. Hover back and forth on next icon (Buttons), notice how that jumps back to normal position

Attached icon with extra space marked.

Looks like this:

Should look like this:

Slack is mentioned as a place to ask questions, yet it's not referenced anywhere. There's a bootstrap slack, but that doesn't seem like it would be the proper place.

Greeting !!!

I Purchase a COREUI Pro License where can i get the latest release of this product and where to email incase we have an product inquiry or need support.

Thank you very much.

:) Regards,
Ferdie Aquino

Following method can apply event listeners more than once and there's no removeEventListener() or similar cleanup function to ensure that the events wouldn't be handled multiple times per action.

This causes unexpected behavior and memory leaks when jQuery instance is cached and shared between views. For example, when working with Turbolinks or similar libraries.
Might cause the same issues in SPA applications.

I noticed it on Sidebar and AsideMenu plugins, but the other modules might also be affected.

Temporary workaround:

// before rendering the view: 
$(document).off('click')

Hi,

could you please tag a version of coreui as release.

Otherwise composer won't install the package without warnings.

Thank you,
Matthias