5296c4fee1
* fix: Fixes #88 buttonbar style cornering on Accounts and Addresses pages - Add right corners to Forget - Add left corners to Reset * refactor: Move overrides for buttonbar corner styles into shared resource * fix: Add newline to end of file * refactor: Refactor using PostCSS variables, nesting, and import * refactor: Move variables into partials subfolder. Apply CSS when preceding sibling is spacer * fix: Remove unnecessary comma to pass CI linting * fix: Add initial divider with no padding to apply corners conditionally There is no CSS selector combinator that allows conditional styling of an element conditional upon "subsequent" sibling elements existing. This is a work-around whereby a dummy divider with no padding is added to the start of the button group such that the custom corner overrides only apply to button groups that contain a 1st and 3rd element that are dividers. Only options for conditional styling dependent on "preceding" sibling elements currently exist that are compatible across browsers (i.e. 'Adjacent sibling combinator' by use of `+` and 'General sibling combinator' by use of `~`, see below reference for details). Another alternative solution that was considered by not deemed generic enough was to conditionally apply the custom cornering only to button groups that are contained within a classname that contains the text "--Editor", on the assumption that the Forget, Reset, Save button group would only be used within a nesting containing such a wildcard value (as is currently the case) ``` div [class*="--Editor"] { .ui--Button-Group { .ui.buttons { .button:nth-child(1) { border-top-right-radius: $small-corner; border-bottom-right-radius: $small-corner; } .ui.button.compact.mini.basic + .button:nth-child(3) { border-top-left-radius: $small-corner; border-bottom-left-radius: $small-corner; } } } } ``` Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors * fix: Resolve linting CI errors * fix: Add missing dependencies to package.json to pass CI * refactor: Move widthless divider into base Group component * refactor: Move button group custom cornering styles |
||
|---|---|---|
| flow-typed | ||
| packages | ||
| .codeclimate.yml | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc.json | ||
| .flowconfig | ||
| .gitignore | ||
| .npmignore | ||
| .stylelintrc.json | ||
| .travis.yml | ||
| babel.config.js | ||
| jest.config.js | ||
| lerna.json | ||
| LICENSE | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| yarn.lock | ||
@polkadot/apps
A Portal into the Polkadot network. Provides a view and interaction layer from a browser.
This can be accessed as a hosted application via https://polkadot.js.org/apps/.
overview
The repo is split into a number of packages, each representing an application. These are -
- apps This is the main entry point. It handles the selection sidebar and routing to the specific application being displayed.
- app-accounts A basic account management app.
- app-addresses A basic address management app.
- app-explorer A simple block explorer. It only shows the most recent blocks, updating as they become available.
- app-extrinsics Submission of extrinsics to a node.
- app-rpc Sumission of raw data to RPC endpoints.
- app-storage A simple node storage query application. Multiple queries can be queued and updates as new values become available.
- app-toolbox Utilities to manage data.
- app-vanitygen A toy that allows you to generate vanity addresses. Running
yarn run vanitygen --match <string>runs the generator as a Node CLI app. (Orders of a magnitude faster due to the use of libsoldium bindings)
In addition the following libraries are also included in the repo. These are to be moved to the @polkadot/ui repository once it reaches a base level of stability and usability. (At this point with the framework being tested on the apps above, it makes development easier having it close)
- ui-app A reactive (using RxJS) application framework with a number of useful shared components.
- ui-keyring A browser-specific wrapper around the base @polkadot/util-keyring library.
- ui-signer Signer implementation for apps.
- ui-identicon Identity icon generator with raw publicKey as input
- ui-react A collection of base React components
- ui-react-rx Base components that use the RxJS Observable APIs
development
Contributions are welcome!
To start off, this repo (along with others in the @polkadot family) uses yarn workspaces to organise the code. As such, after cloning dependencies should be installed via yarn, not via npm, the latter will result in broken dependencies.
To get started -
- Clone the repo locally, via
git clone https://github.com/polkadot-js/apps <optional local path> - Ensure that you have a recent version of
node.js, for development purposes Node 10 is recommended. - Install the dependencies via
yarn(If you don't have yarn available, install via options for your environment) - Ready! Now you can launch the UI (assuming you have a local Polkadot Node running), via
yarn run start - Access the UI via http://localhost:3000
Alternatively, should you not have a local Node, you can connect to a remote node (POC-1 network, although not fully up-to-date with features) with the WS_URL parameter. For eample - the apps entry point can be launched with a WebSocket connection to Polkadot PoC-1 with WS_URL=wss://poc-1.polkadot.io:9944 yarn run start and accessing the application of http://localhost:3000
demos
Demos for the different libraries can be viewed with yarn run demo:<name> and then browsing to http://localhost:3000. Available demo -
yarn run demo:identiconyarn run demo:uiyarn run demo:rx