Giter Club home page Giter Club logo

shards-ui's Introduction

A modern UI kit packed with 2 custom page templates and 11 extra
custom components built on top of Bootstrap (4.3.1).


`npm` version `npm` downloads
Dependencies DevDependencies


Components Demo β€’ Templates Demo β€’ Documentation β€’ Official Page


Getting Started

Currently there are only three ways of downloading Shards:

The distributed Shards assets are also available via CDN through unpkg and jsDelivr.

To install with npm:

npm install --save shards-ui bootstrap

Dependencies

The only hard dependency is Bootstrap 4.3.1 which needs to be included in your HTML document before Shards. Datepickers and slider controls also require the Shards JavaScript dependency.


Quick Start

If you're using a bundler like webpack, you should skip to Usage with Bundlers.

In order to take advantage of both Bootstrap and Shards' features you may want to use the following starter template that includes all dependencies.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS Dependencies -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/shards-ui@latest/dist/css/shards.min.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/shards-ui@latest/dist/js/shards.min.js"></script>
  </body>
</html>

Usage with Bundlers

If you're using a bundler like webpack (with style-loader/css-loader) or parcel, you can install shards with npm and import it:

// app.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'shards-ui/dist/css/shards.min.css';
// Optional JavaScript
// JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS
// Install them with `npm` as well
import 'jquery/dist/jquery.slim.min';
import 'popper.js/dist/umd/popper.min';
import 'bootstrap/dist/js/bootstrap.min';
import 'shards-ui/dist/js/shards.min';

Built using


Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.


Feedback

Building better products is something I'm trying to get really good at. I’d love to hear more about how you plan on using Shards and what features you consider important in similar products. If you could spare a few minutes, please fill out this Google Form to help me better understand your current context and what I could do to improve my products.


Acknowledgments

While building this project we used various free resources built and made available by some wonderful people around the world. See the ATTRIB.md file for details.


Changelog

View notable changes.

shards-ui's People

Contributors

captainswain avatar claudfuen avatar cookieshell avatar cyriac avatar dlucian avatar hisk avatar ian-patel avatar vikr01 avatar vladet avatar zshare avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

shards-ui's Issues

The custom toggle's knob breaks the toggle's border display.

Current Behavior

The custom toggle's knob breaks the toggle's border display.

screen shot 2017-12-04 at 12 01 10

Possible Solution

This issue may be related to this known webkit bug and it may be fixed (in a hacky way) by applying opacity, transforms or even filters on the wrapping element to create a new stacking context.

Context (Environment)

Tested on Mac OS Sierra 10.12.06 using Safari Version 11.0.1 (12604.3.5.1.1).


Note: This issue is created for tracking reasons only and the fix will be committed soon.

Latest npm release is missing src folder

2.1.0 release included src/scss folder for shards. Current 2.1.1 release only has dist folder.

Expected Behavior

2.1.1 release should include the src folder

Current Behavior

2.1.1 release is missing the src folder

Possible Solution

Publish the folder so that using shards dashboard can use the npm package for shards ui as in previous release.

Steps to Reproduce

Update project to shards-ui 2.1.1. Attempt to build and an error is generated claiming that @import "~shards-ui/src/scss/shards"; cannot be found.

Context (Environment)

Angular 7.2.6 project

Detailed Description

Possible Implementation

noUiSlider v11.1.0 does not work with current CSS !!!

I have upgraded our noUiSlider to the latest version ( 11.1.0 ) and shards-ui CSS breaks the slider. We are forced to resort to the native noUiSlider CSS. Please fix this.

Here is the screenshot of what happens

screen shot 2018-04-04 at 4 22 45 pm

list-group list-group-flush

Using list-group list-group-flush class on a list adds rounded corners to first/last elements. That should not happen

Shards UI doesn't work as submodule

Expected Behavior

Adding shards-ui as a submodule for a bigger project does not work as shards.scss imports a bootstrap 4 module via relative path.

Current Behavior

When using shards-ui as submodule via:

git submodule add https://github.com/DesignRevision/shards-ui.git

Building the application fails due to:

Module build failed:
@import "../../node_modules/bootstrap/scss/functions";
^
      File to import not found or unreadable: ../../node_modules/bootstrap/scss/functions.
Parent style sheet: /Users/lucian/...../shards-ui/src/scss/shards.scss
      in /Users/lucian/...../shards-ui/src/scss/shards.scss (line 9, column 1)

This happens because of the @import in https://github.com/DesignRevision/shards-ui/blob/master/src/scss/shards.scss#L9

Possible Solution

Remove ../../ so that webpack finds node_modules/bootstrap, but this works only if webpack looks for includes at project root.

Steps to Reproduce

  • Create a new app that uses Webpack (for example a VueJS app)
  • Add shards-ui as submodule
  • @import "./../../shards-ui/src/scss/shards.scss" in the app's app.scss
  • npm run dev

Context (Environment)

MacOS High Sierra / Webpack 3.11.0

Possible Implementation

Pending PR coming soon. The solution is not ideal but ideally won't break the standalone version and would also work via submodule.

County select word clipping

Firstly, this is beautiful. Great work.

Current Behavior

The bottom of the g is getting clipped:
https://screenshot.click/08-29-u2hyc-z7jpp.jpg

Possible Solution

On .custom-select the line height should be 1.2 instead of 1.1.

https://screenshot.click/08-30-8zhuf-njra8.jpg

Append / prepend input group addons have wrong z-index value

Expected Behavior

The appended or prepended input group add-ons should not overlap other elements.

Current Behavior

Both they currently have a really high sticky z-index value.

screen shot 2018-02-16 at 19 11 16

(Trust me, there's an input below the dropdown menu.)

Possible Solution

Modify the input group prepend and append elements' z-index value.

screen shot 2018-02-16 at 19 11 09

Bundlesize in devDependences

It's just that. There is no reason to be in dependences. Also, it helps me very much (it doesn't let me build my Electron app)

Will the npm package be published?

Issue tracker is ONLY used for reporting bugs.

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce

  1. ...
  2. ...
  3. ...

Context (Environment)

Detailed Description

Possible Implementation

datepicker fails with jquery3

With:
$('.datepicker-shard').datepicker({});

When using jQuery JavaScript Library v1.12.4 it works as expected.
When using jQuery JavaScript Library v3.2.1 throws:
jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3861 jQuery.Deferred exception: $(...).datepicker is not a function TypeError: $(...).datepicker is not a function at HTMLDocument.<anonymous> (http://localhost:3000/assets/cards.self-03f3953c5a9bd838299ccfa17624094c86b077ce6d4df616eee57fc81d298ca5.js?body=1:4:26) at mightThrow (http://localhost:3000/assets/jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3584:29) at process (http://localhost:3000/assets/jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3652:12) undefined jQuery.Deferred.exceptionHook @ jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3861 process @ jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3656 setTimeout (async) (anonymous) @ jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3690 fire @ jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3318 fireWith @ jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3448 fire @ jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3456 fire @ jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3318 fireWith @ jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3448 ready @ jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3921 completed @ jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3931 jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3870 Uncaught TypeError: $(...).datepicker is not a function at HTMLDocument.<anonymous> (cards.self-03f3953c5a9bd838299ccfa17624094c86b077ce6d4df616eee57fc81d298ca5.js?body=1:4) at mightThrow (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3584) at process (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3652)

Bootstrap dependency is pinned to an insecure version of bootstrap

Expected Behavior

npm audit should pass

Current Behavior

npm audit shows a vulnerability in 4.1.3:

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ Moderate      β”‚ Cross-Site Scripting                                         β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ Package       β”‚ bootstrap                                                    β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ Patched in    β”‚ >=3.4.1 <4.0.0 || >=4.3.1                                    β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ Dependency of β”‚ shards-react                                                 β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ Path          β”‚ shards-react > shards-ui > bootstrap                         β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚ More info     β”‚ https://npmjs.com/advisories/891                             β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Possible Solution

Upgrade bootstrap to >= 4.3.1

Steps to Reproduce

  1. Install shards-react or any other module that depends on this repo
  2. Run npm audit

Input group middle add-on

Currently, there's no simple/elegant way of creating input groups with text addons placed in the center and I think this would be a great small addition for the next patch.

In addition to the .input-group-prepend and .input-group-append classes I think there should be an extra .input-group-middle class specific for this use case.

Demo Example
screen shot 2018-02-21 at 16 17 06

cc @NMyVision

Checkbox issue

Hey, I've encountered what might be a bug in the beautiful Shards!

I have a card where I want to use a few checkboxes, so I took the example code right from the documentation, but it ends up like this in my document:
Screenshot from Gyazo
As you can see, the little checkmark appears next to the square where it's supposed to be. Is this a known issue? Any fix? :)

Code:

          <div class="card">
            <div class="card-header"> Options</div>
            <div class="card-body">
              <div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
  <label class="custom-control-label" for="customCheck1">Checkboxes are cool</label>
</div>

<!-- Normal Custom Checkbox -->
<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck2">
  <label class="custom-control-label" for="customCheck2">Send me free pizza</label>
</div>

<!-- Disabled Custom Checkbox -->
<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customCheck3" disabled>
  <label class="custom-control-label" for="customCheck3">Oh no! I'm disabled!</label>
</div>
            </div>
          </div>

Uncaught TypeError with Datepicker inside modal

I want to really the great work you guys have done with this. It's incredible.

Please i'm having issue in getting the datepicker to work properly inside modal. The datepicker shows up but a jquery error is thrown which distort the modal size when i set modal-lg as the size of the modal.

screen shot 2018-05-07 at 7 10 13 am

Main title padding issue, mobile

On my iPhone 7, I saw two glitches:

Proposition

1) Add line-height: 4.8rem;

.welcome h1 {
    font-size: 6.25rem;
    font-weight: 500;
    letter-spacing: -.3125rem;
    margin-top: 30vh;
    line-height: 4.8rem;
    margin-bottom: 20px;
    color: #1f2429;
}
  1. Add margin-bottom: 1.5em;
.btn-primary {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff;
    box-shadow: none;
    margin-bottom: 1.5em;
}

Screenshots

photo_2018-04-01_12-04-05-b

photo_2018-04-01_12-04-00

No tests?

Are there any tests in this package? I noticed there isn't a test script in package.json.

Small custom toggle modifier class

Another great enhancement proposed by @NMyVision would be a .custom-toggle-sm modifier class for the custom toggle form controls that adjusts their size and integrates them better with the custom radio and custom checkbox form controls. In terms of sizing, I think 35px in width and 18px in height would fit best.

Markup:

<div class="custom-control custom-toggle custom-toggle-sm">
...
</div>

Demo:

screen shot 2018-02-21 at 16 46 36

Why are there dependencies?

How is this package intended to be used with node?

From what I can tell, the javascript in src is being bundled into dist with webpack and since the target is web that means those dependencies will be bundled in as well -- which means they'd only need to be devDependencies so that the user doesn't need to install it when they install the package.

Installation fails on Node 12

Running npm install shards-ui fails on Node.js 12 (on macOS). There's a compilation error on iltorb, which seems to be caused by an outdated dependency (see: nstepien/iltorb#85 )

Here's the full error:

$ npm install --save shards-ui

> [email protected] install /Users/alessandro/Desktop/Code/platform/controller/node_modules/iltorb
> detect-libc prebuild-install || node-gyp rebuild

prebuild-install WARN install No prebuilt binaries found (target=12.1.0 runtime=node arch=x64 platform=darwin)
  CC(target) Release/obj.target/iltorb/brotli/common/dictionary.o
  CC(target) Release/obj.target/iltorb/brotli/dec/bit_reader.o
  CC(target) Release/obj.target/iltorb/brotli/dec/decode.o
  CC(target) Release/obj.target/iltorb/brotli/dec/huffman.o
  CC(target) Release/obj.target/iltorb/brotli/dec/state.o
  CC(target) Release/obj.target/iltorb/brotli/enc/backward_references.o
  CC(target) Release/obj.target/iltorb/brotli/enc/backward_references_hq.o
  CC(target) Release/obj.target/iltorb/brotli/enc/bit_cost.o
  CC(target) Release/obj.target/iltorb/brotli/enc/block_splitter.o
  CC(target) Release/obj.target/iltorb/brotli/enc/brotli_bit_stream.o
  CC(target) Release/obj.target/iltorb/brotli/enc/cluster.o
  CC(target) Release/obj.target/iltorb/brotli/enc/compress_fragment.o
  CC(target) Release/obj.target/iltorb/brotli/enc/compress_fragment_two_pass.o
  CC(target) Release/obj.target/iltorb/brotli/enc/dictionary_hash.o
  CC(target) Release/obj.target/iltorb/brotli/enc/encode.o
  CC(target) Release/obj.target/iltorb/brotli/enc/entropy_encode.o
  CC(target) Release/obj.target/iltorb/brotli/enc/histogram.o
  CC(target) Release/obj.target/iltorb/brotli/enc/literal_cost.o
  CC(target) Release/obj.target/iltorb/brotli/enc/memory.o
  CC(target) Release/obj.target/iltorb/brotli/enc/metablock.o
  CC(target) Release/obj.target/iltorb/brotli/enc/static_dict.o
  CC(target) Release/obj.target/iltorb/brotli/enc/utf8_util.o
  CXX(target) Release/obj.target/iltorb/src/common/allocator.o
  CXX(target) Release/obj.target/iltorb/src/common/stream_coder.o
  CXX(target) Release/obj.target/iltorb/src/dec/stream_decode.o
../src/dec/stream_decode.cc:14:72: error: no matching member function for call to 'ToObject'
    Local<Object> dictionary = Nan::Get(params, key).ToLocalChecked()->ToObject();
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^~~~~~~~
/Users/alessandro/.node-gyp/12.1.0/include/node/v8.h:2532:44: note: candidate function not viable:
      requires single argument 'context', but no arguments were provided
  V8_WARN_UNUSED_RESULT MaybeLocal<Object> ToObject(
                                           ^
/Users/alessandro/.node-gyp/12.1.0/include/node/v8.h:2546:35: note: candidate function not viable:
      requires single argument 'isolate', but no arguments were provided
                    Local<Object> ToObject(Isolate* isolate) const);
                                  ^
../src/dec/stream_decode.cc:40:49: error: no matching member function for call to 'ToObject'
  StreamDecode* obj = new StreamDecode(info[0]->ToObject());
                                       ~~~~~~~~~^~~~~~~~
/Users/alessandro/.node-gyp/12.1.0/include/node/v8.h:2532:44: note: candidate function not viable:
      requires single argument 'context', but no arguments were provided
  V8_WARN_UNUSED_RESULT MaybeLocal<Object> ToObject(
                                           ^
/Users/alessandro/.node-gyp/12.1.0/include/node/v8.h:2546:35: note: candidate function not viable:
      requires single argument 'isolate', but no arguments were provided
                    Local<Object> ToObject(Isolate* isolate) const);
                                  ^
../src/dec/stream_decode.cc:48:35: error: no matching member function for call to 'ToObject'
  Local<Object> buffer = info[0]->ToObject();
                         ~~~~~~~~~^~~~~~~~
/Users/alessandro/.node-gyp/12.1.0/include/node/v8.h:2532:44: note: candidate function not viable:
      requires single argument 'context', but no arguments were provided
  V8_WARN_UNUSED_RESULT MaybeLocal<Object> ToObject(
                                           ^
/Users/alessandro/.node-gyp/12.1.0/include/node/v8.h:2546:35: note: candidate function not viable:
      requires single argument 'isolate', but no arguments were provided
                    Local<Object> ToObject(Isolate* isolate) const);
                                  ^
../src/dec/stream_decode.cc:54:16: error: no matching member function for call to 'BooleanValue'
  if (info[2]->BooleanValue()) {
      ~~~~~~~~~^~~~~~~~~~~~
/Users/alessandro/.node-gyp/12.1.0/include/node/v8.h:2559:8: note: candidate function not viable:
      requires single argument 'isolate', but no arguments were provided
  bool BooleanValue(Isolate* isolate) const;
       ^
/Users/alessandro/.node-gyp/12.1.0/include/node/v8.h:2562:51: note: candidate function not viable:
      requires single argument 'context', but no arguments were provided
                V8_WARN_UNUSED_RESULT Maybe<bool> BooleanValue(
                                                  ^
../src/dec/stream_decode.cc:70:16: error: no matching member function for call to 'BooleanValue'
  if (info[1]->BooleanValue()) {
      ~~~~~~~~~^~~~~~~~~~~~
/Users/alessandro/.node-gyp/12.1.0/include/node/v8.h:2559:8: note: candidate function not viable:
      requires single argument 'isolate', but no arguments were provided
  bool BooleanValue(Isolate* isolate) const;
       ^
/Users/alessandro/.node-gyp/12.1.0/include/node/v8.h:2562:51: note: candidate function not viable:
      requires single argument 'context', but no arguments were provided
                V8_WARN_UNUSED_RESULT Maybe<bool> BooleanValue(
                                                  ^
5 errors generated.
make: *** [Release/obj.target/iltorb/src/dec/stream_decode.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/alessandro/.nvm/versions/node/v12.1.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:196:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:256:12)
gyp ERR! System Darwin 18.5.0
gyp ERR! command "/Users/alessandro/.nvm/versions/node/v12.1.0/bin/node" "/Users/alessandro/.nvm/versions/node/v12.1.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/alessandro/Desktop/Code/platform/controller/node_modules/iltorb
gyp ERR! node -v v12.1.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of popper.js@^1.14.7 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `detect-libc prebuild-install || node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[Discussion] Vuejs Shards components

Hey :). What about Vue.js instead of jQuery?
There are a lot of benefits around this "migration".
Did you think about it ?

  • Modularization
  • Scalability
  • Vuejs support :D
  • SFC (single file components)
  • More maintainable code

Sorry if this isn't the best place to discussion

Custom-toggle broken on Safari

When using the custom-toggle class in Safari, the toggle knob animates out of bounds.

screen recording 2017-12-01 at 01 04 pm

Expected Behavior

The toggle knob animates left (off) to right (on).

Current Behavior

On Safari the knob animates left out of the bounds of the control.

Possible Solution

This problem is in the difference in parsing left in the following snippet:

.custom-toggle .custom-control-input:checked + .custom-control-indicator:after {
  left: calc(100% - 3px);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

Using left: 95%; is a dirty way fix approximating the 3px margin, and seems to work in all browsers.

Steps to Reproduce

  1. Use Safari.
  2. Click toggle.

Context (Environment)

Tested on both Safari 10.0.2 (webkit 12604.4.7.1.3), and Safari Technology Preview 11.1 (release 44, webkit 12605.1.13.2). Ran on on MacOS Sierra 10.12.6.

How to enable navigation?

I seek documentation and found not such describe which how to enable a navigationbar just like the shards official website?

Long modal is not scrollable and extends past window

Issue tracker is ONLY used for reporting bugs.

Expected Behavior

If a modal extends past the window, I would expect it to scroll.

Current Behavior

If a modal extends past the window, you cannot scroll down or see the content past the viewport.

Possible Solution

In _modal.scss:

   // Modal adjustments

   .modal {
     z-index: $zindex-modal;
+     max-height: 100vh;
+    overflow-x: scroll;
   }

Before: https://monosnap.com/direct/mInYN2o3UvH2Z0hWGVJOnm3IjZWDsj
After: https://api.monosnap.com/file/download?id=JjPewnilVwzts26Yt2rvhJOR0nQsrw

Steps to Reproduce

  1. Create a modal that is > 100vh

Context (Environment)

I'm trying to build a form in a modal.

Z-index issues at dashboard presentation site

I'll give you more details about these issues

Mobile only - hardware and software description

Google Chrome: 65.0.3325.109(VersΓ£o oficial) 32 bits
Revision: f412f53af6f3abcd6165b6cf0859dad2e88ff87d-refs/branch-heads/3325@{#626}
SO: Android 6.0.0; LG-K430 Build/MRA58K
JavaScript: V8 6.5.254.28
User Agent: Mozilla/5.0 (Linux; Android 6.0; LG-K430 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Mobile Safari/537.36

Main menu is under section content

Main menu is under select element

Button overflow

Weird behave caused by 2nd issue (select element)

PS: english isn't my main language

How about a better license?

1.4. - Creation of "Software as a Service" (SaaS) application(s).
(eg. generators, etc) - NO
1.5. - Creation of product(s) aimed for specific platform(s).
(eg. WordPress Themes, etc) - NO

...

Seriously?

Ui

Issue tracker is ONLY used for reporting bugs.

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce

  1. ...
  2. ...
  3. ...

Context (Environment)

Detailed Description

Possible Implementation

Tooltip/Popover Left/Right Inverted

Expected Behavior

When visiting the Shards UI demo page, using the left and right tooltip/popover examples places the info on the opposite of the expected side of the element.

Using data-placement="left" should place elements on the left. Similarly data-placement="right" should place elements on the right.

Current Behavior

Example screenshots:

Screenshot_20190626-135428

Screenshot_20190626-135435

Screenshot_20190626-135443

Screenshot_20190626-135448

Steps to Reproduce

Visible on https://designrevision.com/demo/shards/

  1. Interact with any "left" or "right" tooltip or popover example.

Demo page welcome section and color swatches issues on iPhone 6

Current Behavior

The welcome section elements are not stacked properly and the color swatches are not properly aligned on iPhone 6.

dr_shards_mobile_iphone 6-8 0

dr_color_swatches_mobile_iphone 6-8 0

Context (Environment)

Tested on iPhone 6 using Safari.


Note: This issue is created for tracking reasons only and the fix will be committed soon.

SCSS Compiling Error

Hi, thank you for nice framework.

When I try to compile .scss I see that:

cmd.exe /D /C call C:/Ruby24-x64/bin/scss.bat --no-cache --update shards.scss:shards.css
      error mixins/_box-shadow.scss (Line 3: () isn't a valid CSS value.)

Process finished with exit code 1

At _box-shadow.scss:

@mixin box-shadow($shadow...) {
  @if $enable-shadows {
    box-shadow: $shadow;
  }
}

How I can fix that? Thank you.

Add Visual Regression Testing

Problem

Currently, there are no public visual regression tests in Shards and I think this would be the next step towards a more integrated and modern development process.

Solution

The best course of action here I think would be to use BackstopJS and have a test npm script that runs it against an array of scenarios isolated inside a tests/ directory for mobile, tablet and desktop viewports. I'm open to suggestions if someone can come up with a better alternative to Backstop, but I would prefer a self-contained solution.

Each scenario can be a simple template with isolated components for a specific category. I'll work on the exact list during the next couple of days.

Action Items

  • (optional) Suggest an alternative to Backstop, if any.
  • Integrate, initialize and configure Backstop in Shards.
  • Add test script.
  • (optional) Add a sample scenario with a demo component and reference.

Tabs component

I am wondering if there is a plan for an implementation of the Bootstrap Tabs component. I know this is for bugs, but there is nowhere to request a feature.

ENJOYING_THIS_PROJECT="SayThankYou"

Here is the place to say thank you to folks who are working hard on this project.

Β« One of the greatest ways to show your appreciation to open source projects you enjoy is to open an issue that let people say thank you Β»

Disclaimer: I don't have any kind of connexion or personal interest with maintainers(s) of this project. Pure gratitude here.

Cheers!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.