mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
Updates
This commit is contained in:
nixa
commit
e6c8deb7e4
17 changed files with 1966 additions and 0 deletions
86
articles/001-getting-started/index.html
Normal file
86
articles/001-getting-started/index.html
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||||
<title>BlurAdmin documentation - Getting Started</title>
|
||||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav-main">
|
||||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/ng2-admin/">Home</a></li>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
|
||||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Getting Started</a></li>
|
||||
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||||
<li><a href="/ng2-admin/articles/012-project-structure/">Project Structure</a></li>
|
||||
<li><a href="/ng2-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Components</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/016-spinner/">Theme Spinner</a></li>
|
||||
<li><a href="/ng2-admin/articles/015-sidebar/">Sidebar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Getting Started</h1>
|
||||
<div class="subHeader"></div><h2 id="what-is-ng2-admin-">What is ng2-admin?</h2>
|
||||
<p>ng2-admin is a front-end Admin Dashboard template based on Angular 2, Bootstrap 4 and Webpack. That means all data you can see on graphs, charts tables is mocked in Javascript so you can use backend of your choice with no limitations.</p>
|
||||
<h2 id="how-can-it-help-me-">How can it help me?</h2>
|
||||
<p>We believe that at the moment a lot of business applications have administration/management interfaces inside of them. Sometimes it’s not that obvious, but a lot of web applications have dashboards with panels, charts analytics, etc.</p>
|
||||
<p>ng2-admin aims to bootstrap the development of your product and provide ecosystem for building production-ready application or prototypes.</p>
|
||||
<p>Frameworks like Bootstrap provide a number of components, but usually it’s not enough to build a real-world app. This template comes with lots of popular <span class="caps">UI</span> components with unified color scheme, plus it based on a modern Angular 2 framework and has a flexible components-based structure.</p>
|
||||
<p>As well you can use ng2-admin for learning purposes of Angular 2.</p>
|
||||
<h2 id="list-of-features">List of features</h2>
|
||||
<ul>
|
||||
<li>Responsive layout</li>
|
||||
<li>High resolution</li>
|
||||
<li>Bootstrap 4 <span class="caps">CSS</span> Framework</li>
|
||||
<li><span class="caps">SASS</span></li>
|
||||
<li>Webpack</li>
|
||||
<li>Angular 2</li>
|
||||
<li>jQuery</li>
|
||||
<li>Charts (amChart, Chartist, Chart.js, Morris)</li>
|
||||
<li>Maps (Google, Leaflet, amMap)</li>
|
||||
<li>and many more!</li>
|
||||
</ul>
|
||||
<h2 id="i-want-to-start-developing-with-ng2-admin">I want to start developing with ng2-admin</h2>
|
||||
<p>Welcome abroad!</p>
|
||||
<p>You can start with <a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a>. There we describe how you can download and run the template on you local machine.</p>
|
||||
<p>Good luck and have fun!</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<footer class="wrap">
|
||||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||||
</footer>
|
||||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||||
</body>
|
||||
</html>
|
||||
110
articles/002-installation-guidelines/index.html
Normal file
110
articles/002-installation-guidelines/index.html
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||||
<title>BlurAdmin documentation - Installation Guidelines</title>
|
||||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav-main">
|
||||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/ng2-admin/">Home</a></li>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
|
||||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
|
||||
<li><a href="/ng2-admin/articles/002-installation-guidelines/" class="active">Installation Guidelines</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||||
<li><a href="/ng2-admin/articles/012-project-structure/">Project Structure</a></li>
|
||||
<li><a href="/ng2-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Components</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/016-spinner/">Theme Spinner</a></li>
|
||||
<li><a href="/ng2-admin/articles/015-sidebar/">Sidebar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Installation Guidelines</h1>
|
||||
<div class="subHeader"></div><h2 id="prerequisites">Prerequisites</h2>
|
||||
<p>Despite BlurAdmin can be run without any development experience, it would be much easier if you already have some development experience. In general following instructions allow you to run a local copy on your machine.</p>
|
||||
<h2 id="install-tools">Install tools</h2>
|
||||
<p>If you don’t have any of these tools installed already, you will need to:</p>
|
||||
<ul>
|
||||
<li>Download and install <a href="https://git-scm.com/">git</a></li>
|
||||
<li>Download and install nodejs <a href="https://nodejs.org">https://nodejs.org</a></li>
|
||||
</ul>
|
||||
<p><strong>Note</strong>: Make sure you have Node version >= 4.0 and <span class="caps">NPM</span> >= 3</p>
|
||||
<p>Once you have those, you should install these globals with <code>npm install --global</code>:</p>
|
||||
<ul>
|
||||
<li><p>webpack</p>
|
||||
<pre><code class="lang-bash">npm install --global webpack
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p>webpack-dev-server</p>
|
||||
<pre><code class="lang-bash">npm install --global webpack-dev-server
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p>typings</p>
|
||||
<pre><code class="lang-bash">npm install --global typings
|
||||
</code></pre>
|
||||
</li>
|
||||
<li><p>typescript</p>
|
||||
<pre><code class="lang-bash">npm install --global typescript
|
||||
</code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 id="clone-repository-and-install-dependencies">Clone repository and install dependencies</h2>
|
||||
<p>You will need to clone the source code of ng2-admin GitHub repository:</p>
|
||||
<pre><code class="lang-bash">git <span class="built_in">clone</span> https://github.com/akveo/ng2-admin.git
|
||||
</code></pre>
|
||||
<p>After repository is cloned, go inside of the repository directory and install dependencies:</p>
|
||||
<pre><code class="lang-bash"><span class="built_in">cd</span> ng2-admin
|
||||
npm install
|
||||
</code></pre>
|
||||
<p>This will setup a working copy of ng2-admin on your local machine.</p>
|
||||
<h2 id="running-local-copy">Running local copy</h2>
|
||||
<p>To run a local copy in development mode, execute:</p>
|
||||
<pre><code class="lang-bash">npm start
|
||||
</code></pre>
|
||||
<p>Go to <a href="http://0.0.0.0:3000">http://0.0.0.0:3000</a> or <a href="http://localhost:3000">http://localhost:3000</a> in your browser.</p>
|
||||
<p>To run the local copy in production mode and build the sources, execute:</p>
|
||||
<pre><code class="lang-bash">npm run prebuild:prod && npm run build:prod && npm run server:prod
|
||||
</code></pre>
|
||||
<p>This will clear up your dist folder (where release files are located), generate release build and start built-in server.
|
||||
Now you can copy the sources from a <code>dist</code> folder and use it with any backend framework or simple put in under some web server.</p>
|
||||
<p>For addition information about build, please check out <a href="https://github.com/AngularClass/angular2-webpack-starter">Angular2 Webpack Starter documentation</a></p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<footer class="wrap">
|
||||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||||
</footer>
|
||||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||||
</body>
|
||||
</html>
|
||||
150
articles/011-changing-color-scheme/index.html
Normal file
150
articles/011-changing-color-scheme/index.html
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||||
<title>BlurAdmin documentation - Changing Color Scheme</title>
|
||||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav-main">
|
||||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/ng2-admin/">Home</a></li>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
|
||||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
|
||||
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/011-changing-color-scheme/" class="active">Changing Color Scheme</a></li>
|
||||
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||||
<li><a href="/ng2-admin/articles/012-project-structure/">Project Structure</a></li>
|
||||
<li><a href="/ng2-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Components</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/016-spinner/">Theme Spinner</a></li>
|
||||
<li><a href="/ng2-admin/articles/015-sidebar/">Sidebar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Changing Color Scheme</h1>
|
||||
<div class="subHeader"></div><p>We tried to make the process of color scheme customization as easy as possible. </p>
|
||||
<p>By default ng2-admin has three built-in color profiles: ng2 (default blue sheme), mint and blur.
|
||||
This article will help you to create your own color profile.
|
||||
Let’s say you want to make ng2-admin dark theme.</p>
|
||||
<p>First we advice you to take some colorscheme file as a basis.
|
||||
For light themes we suggest taking <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> one and for dark <code>src/app/theme/sass/conf/colorScheme/_blue.scss</code> one.
|
||||
As we want a dark theme, we’re taking <code>ng2</code>.</p>
|
||||
<p>1) Copy <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> to <code>src/app/theme/sass/conf/colorScheme/_dark.scss</code>.</p>
|
||||
<p>2) Include your colorscheme file in <code>src/app/theme/sass/conf/conf.scss</code>.</p>
|
||||
<p>To do this, replace </p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/ng2'</span>;
|
||||
</code></pre>
|
||||
<p>to</p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/dark'</span>;
|
||||
</code></pre>
|
||||
<p>3) Rename the color scheme enabled</p>
|
||||
<p>Open <code>src/app/theme/theme.config.ts</code>.
|
||||
Uncomment the following line</p>
|
||||
<pre><code class="lang-javascript"> <span class="comment">//this._baConfig.changeTheme({name: 'my-theme'});</span>
|
||||
</code></pre>
|
||||
<p>and put you theme name, in our case it is <code>dark</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="keyword">this</span>._baConfig.changeTheme({name: <span class="string">'dark'</span>});
|
||||
</code></pre>
|
||||
<p>Beside this notifies the system which scheme currently enabled, it also puts a css class to a main element of the page. Thus you can freely create theme-specific css selectors in you code without braking other themes’ styles.</p>
|
||||
<p>For example like this:</p>
|
||||
<pre><code class="lang-scss">. dark <span class="selector-class">.card-body</span> {
|
||||
<span class="attribute">background-color</span>: white;
|
||||
}
|
||||
</code></pre>
|
||||
<p>4) Change the colors</p>
|
||||
<p>Now your can start changing the colors.
|
||||
For example, after playing a bit with different colors, we changed 5 first main variables in <code>_dark.scss</code> file:</p>
|
||||
<pre><code class="lang-sass">$body-bg: #636363;
|
||||
$bootstrap-panel-bg: rgba(#000000, 0.2);
|
||||
</code></pre>
|
||||
<p>After this is done, you need to setup javascript to use <strong>same colors</strong>. These color are used for javascript charts and other components (maps, etc);
|
||||
Let’s completely change the <span class="caps">JS</span> colors to a new set.
|
||||
To do this, add the following code to the configuration block inside <code>src/app/theme/theme.config.ts</code>:</p>
|
||||
<pre><code class="lang-javascript"> <span class="keyword">let</span> colorScheme = {
|
||||
primary: <span class="string">'#209e91'</span>,
|
||||
info: <span class="string">'#2dacd1'</span>,
|
||||
success: <span class="string">'#90b900'</span>,
|
||||
warning: <span class="string">'#dfb81c'</span>,
|
||||
danger: <span class="string">'#e85656'</span>,
|
||||
};
|
||||
<span class="keyword">this</span>._baConfig.changeColors({
|
||||
<span class="keyword">default</span>: <span class="string">'#4e4e55'</span>,
|
||||
defaultText: <span class="string">'#e2e2e2'</span>,
|
||||
border: <span class="string">'#dddddd'</span>,
|
||||
borderDark: <span class="string">'#aaaaaa'</span>,
|
||||
|
||||
primary: colorScheme.primary,
|
||||
info: colorScheme.info,
|
||||
success: colorScheme.success,
|
||||
warning: colorScheme.warning,
|
||||
danger: colorScheme.danger,
|
||||
|
||||
primaryLight: colorHelper.tint(colorScheme.primary, <span class="number">30</span>),
|
||||
infoLight: colorHelper.tint(colorScheme.info, <span class="number">30</span>),
|
||||
successLight: colorHelper.tint(colorScheme.success, <span class="number">30</span>),
|
||||
warningLight: colorHelper.tint(colorScheme.warning, <span class="number">30</span>),
|
||||
dangerLight: colorHelper.tint(colorScheme.danger, <span class="number">30</span>),
|
||||
|
||||
primaryDark: colorHelper.shade(colorScheme.primary, <span class="number">15</span>),
|
||||
infoDark: colorHelper.shade(colorScheme.info, <span class="number">15</span>),
|
||||
successDark: colorHelper.shade(colorScheme.success, <span class="number">15</span>),
|
||||
warningDark: colorHelper.shade(colorScheme.warning, <span class="number">15</span>),
|
||||
dangerDark: colorHelper.shade(colorScheme.danger, <span class="number">15</span>),
|
||||
|
||||
dashboard: {
|
||||
blueStone: <span class="string">'#005562'</span>,
|
||||
surfieGreen: <span class="string">'#0e8174'</span>,
|
||||
silverTree: <span class="string">'#6eba8c'</span>,
|
||||
gossip: <span class="string">'#b9f2a1'</span>,
|
||||
white: <span class="string">'#10c4b5'</span>,
|
||||
},
|
||||
});
|
||||
</code></pre>
|
||||
<p>Here we defined a list of main colors <code>colorScheme</code> and then made light and dark version of those using <code>colorHelper</code> methods.
|
||||
We also defined a couple of custom colors for dashboard charts.</p>
|
||||
<p>That’s basically it! Right now your admin application should look like this:</p>
|
||||
<p><img src="/ng2-admin/articles/011-changing-color-scheme/new-color-scheme.png" alt=""></p>
|
||||
<p>For further reference, please look in</p>
|
||||
<ul>
|
||||
<li>Colorscheme scss file (<code>src/app/theme/sass/conf/colorScheme/_ng2.scss</code>, <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> and <code>src/app/theme/sass/conf/colorScheme/_blur.scss</code>)</li>
|
||||
<li><code>src/app/theme/theme.configProvider.js</code> to understand which javascript colors can be changed</li>
|
||||
<li>If you want to know how to change theme to blur, read <a href="/ng2-admin/articles/014-switch-to-blur-theme/">following article</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<footer class="wrap">
|
||||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||||
</footer>
|
||||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||||
</body>
|
||||
</html>
|
||||
BIN
articles/011-changing-color-scheme/new-color-scheme.png
Normal file
BIN
articles/011-changing-color-scheme/new-color-scheme.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
111
articles/012-project-structure/index.html
Normal file
111
articles/012-project-structure/index.html
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||||
<title>BlurAdmin documentation - Project Structure</title>
|
||||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav-main">
|
||||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/ng2-admin/">Home</a></li>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
|
||||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
|
||||
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||||
<li><a href="/ng2-admin/articles/012-project-structure/" class="active">Project Structure</a></li>
|
||||
<li><a href="/ng2-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Components</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/016-spinner/">Theme Spinner</a></li>
|
||||
<li><a href="/ng2-admin/articles/015-sidebar/">Sidebar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Project Structure</h1>
|
||||
<div class="subHeader"></div><p>Project structure was originally based on <a href="https://github.com/AngularClass/angular2-webpack-starter#file-structure">Angular2 Webpack Starter</a>. We made some changes we thought would be better in our particular case.</p>
|
||||
<p>The directory structure of this template is as follows:</p>
|
||||
<pre><code>ng2-admin/
|
||||
├──config/ * build configuration
|
||||
│ ├──helpers.js * helper functions for our configuration files
|
||||
│ ├──webpack.dev.js * development webpack config
|
||||
│ ├──webpack.prod.js * production webpack config
|
||||
│ └──webpack.test.js * testing webpack config
|
||||
│
|
||||
├──src/ * source files that will be compiled to javascript
|
||||
│ ├──main.browser.ts * entry file for our browser environment
|
||||
│ │
|
||||
│ ├──index.html * application layout
|
||||
│ │
|
||||
│ ├──polyfills.ts * polyfills file
|
||||
│ │
|
||||
│ ├──vendor.ts * vendors file
|
||||
│ │
|
||||
│ ├──custom-typings.d.ts * custom typings for third-party modules
|
||||
│ │
|
||||
│ ├──platform/ * platform dependent imports
|
||||
│ │
|
||||
│ ├──app/ * application code - our working directory
|
||||
│ │ │
|
||||
│ │ ├──app.component.ts * main application component
|
||||
│ │ │
|
||||
│ │ ├──app.loader.ts * requires initial css styles (most important for application loading stage)
|
||||
│ │ │
|
||||
│ │ ├──app.menu.ts * sidebar menu configuration
|
||||
│ │ │
|
||||
│ │ ├──app.state.ts * global application state for data exchange between components
|
||||
│ │ │
|
||||
│ │ ├──app.scss * application styles
|
||||
│ │ │
|
||||
│ │ ├──pages/ * application pages components, place where you can create pages and fill them with components
|
||||
│ │ │
|
||||
│ │ └──theme/ * template global components/directives/pipes and styles
|
||||
│ │
|
||||
│ └──assets/ * static assets are served here
|
||||
│
|
||||
│
|
||||
├──tslint.json * typescript lint config
|
||||
├──typedoc.json * typescript documentation generator
|
||||
├──tsconfig.json * config that webpack uses for typescript
|
||||
├──typings.json * our typings manager
|
||||
├──package.json * what npm uses to manage it's dependencies
|
||||
├──bower.json * DEPRECATED - moving to npm as primary package manager for all dependenties
|
||||
└──.bowerrc * DEPRECARD - temporary bower configuration
|
||||
</code></pre><p>In our template we tried to separate theme layer and presentation layer. We believe most of other templates have them combined. That’s why when you start developing using them, it gets very hard for you to remove things you don’t need.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<footer class="wrap">
|
||||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||||
</footer>
|
||||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||||
</body>
|
||||
</html>
|
||||
109
articles/013-create-new-page/index.html
Normal file
109
articles/013-create-new-page/index.html
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||||
<title>BlurAdmin documentation - Create New Page</title>
|
||||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav-main">
|
||||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/ng2-admin/">Home</a></li>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
|
||||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
|
||||
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||||
<li><a href="/ng2-admin/articles/012-project-structure/">Project Structure</a></li>
|
||||
<li><a href="/ng2-admin/articles/013-create-new-page/" class="active">Create New Page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Components</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/016-spinner/">Theme Spinner</a></li>
|
||||
<li><a href="/ng2-admin/articles/015-sidebar/">Sidebar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Create New Page</h1>
|
||||
<div class="subHeader"></div><p>Blur admin uses <a href="https://github.com/angular-ui/ui-router">Angular <span class="caps">UI</span> router</a> for navigation.
|
||||
That means to create new page you need to basically configure <code>ui-router</code> state.</p>
|
||||
<p>We strongly recommend to follow pages structure in your application.
|
||||
If it doesn’t fit your needs please create a GitHub issue and tell us why. We would be glad to discuss. </p>
|
||||
<p>Also we recommend to put pages to separate modules.
|
||||
This will allow you to easily switch off some pages in the future if needed.</p>
|
||||
<h2 id="page-creation-example">Page creation example</h2>
|
||||
<p>0) Let’s assume we want to create a blank page with title ‘My New Page’</p>
|
||||
<p>1) Let’s Create a new directory to contain our new page inside of <code>src/app/pages</code>. Let’s call this directory <code>myNewPage</code>.</p>
|
||||
<p>2) Then let’s create blank angular module to contain our page called ‘myNewPage.module.js’ inside of <code>src/app/pages/myNewPage</code>:</p>
|
||||
<pre><code class="lang-javascript">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
|
||||
<span class="meta"> 'use strict'</span>;
|
||||
|
||||
angular.module(<span class="string">'BlurAdmin.pages.myNewPage'</span>, [])
|
||||
.config(routeConfig);
|
||||
|
||||
<span class="comment">/** @ngInject */</span>
|
||||
<span class="function"><span class="keyword">function</span> <span class="title">routeConfig</span>(<span class="params"></span>) </span>{
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
</code></pre>
|
||||
<p>3) Then let’s create empty html file called <code>my-new-page.html</code> inside of <code>src/app/pages/myNewPage</code>.</p>
|
||||
<p>4) Lastly let’s create ui router state for this page. To do this we need to modify module.js file we created on step 2:</p>
|
||||
<pre><code class="lang-javascript">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
|
||||
<span class="meta"> 'use strict'</span>;
|
||||
|
||||
angular.module(<span class="string">'BlurAdmin.pages.myNewPage'</span>, [])
|
||||
.config(routeConfig);
|
||||
|
||||
<span class="comment">/** @ngInject */</span>
|
||||
<span class="function"><span class="keyword">function</span> <span class="title">routeConfig</span>(<span class="params">$stateProvider</span>) </span>{
|
||||
$stateProvider
|
||||
.state(<span class="string">'myNewPage'</span>, {
|
||||
url: <span class="string">'/myNewPage'</span>,
|
||||
templateUrl: <span class="string">'app/pages/myNewPage/my-new-page.html'</span>,
|
||||
title: <span class="string">'My New Page'</span>,
|
||||
sidebarMeta: {
|
||||
order: <span class="number">800</span>,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
</code></pre>
|
||||
<p>That’s it! Your can now open your new page either from sidebar or through hash <span class="caps">URL</span>.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<footer class="wrap">
|
||||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||||
</footer>
|
||||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||||
</body>
|
||||
</html>
|
||||
125
articles/014-switch-to-blur-theme/index.html
Normal file
125
articles/014-switch-to-blur-theme/index.html
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||||
<title>BlurAdmin documentation - Enabling blur theme</title>
|
||||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav-main">
|
||||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/ng2-admin/">Home</a></li>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
|
||||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
|
||||
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/" class="active">Enabling blur theme</a></li>
|
||||
<li><a href="/ng2-admin/articles/012-project-structure/">Project Structure</a></li>
|
||||
<li><a href="/ng2-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Components</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/016-spinner/">Theme Spinner</a></li>
|
||||
<li><a href="/ng2-admin/articles/015-sidebar/">Sidebar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Enabling blur theme</h1>
|
||||
<div class="subHeader"></div><p>If you want to switch theme to the blur, you need to follow 3 simple steps:</p>
|
||||
<p>1) Blur color scheme needs some javascript to calculate initial background offsets for panels.
|
||||
That’s why we need to tell the system that we want to use blur theme by specifying this in <code>src/app/theme/theme.config.ts</code>:</p>
|
||||
<pre><code class="lang-javascript"> <span class="keyword">this</span>._baConfig.changeTheme({name: <span class="string">'blur'</span>});
|
||||
</code></pre>
|
||||
<p>2) Also you need to change some colors.
|
||||
For our blur theme we use following configuration:</p>
|
||||
<pre><code class="lang-javascript"> <span class="keyword">let</span> colorScheme = {
|
||||
primary: <span class="string">'#209e91'</span>,
|
||||
info: <span class="string">'#2dacd1'</span>,
|
||||
success: <span class="string">'#90b900'</span>,
|
||||
warning: <span class="string">'#dfb81c'</span>,
|
||||
danger: <span class="string">'#e85656'</span>,
|
||||
};
|
||||
<span class="keyword">this</span>._baConfig.changeColors({
|
||||
<span class="keyword">default</span>: <span class="string">'#4e4e55'</span>,
|
||||
defaultText: <span class="string">'#e2e2e2'</span>,
|
||||
border: <span class="string">'#dddddd'</span>,
|
||||
borderDark: <span class="string">'#aaaaaa'</span>,
|
||||
|
||||
primary: colorScheme.primary,
|
||||
info: colorScheme.info,
|
||||
success: colorScheme.success,
|
||||
warning: colorScheme.warning,
|
||||
danger: colorScheme.danger,
|
||||
|
||||
primaryLight: colorHelper.tint(colorScheme.primary, <span class="number">30</span>),
|
||||
infoLight: colorHelper.tint(colorScheme.info, <span class="number">30</span>),
|
||||
successLight: colorHelper.tint(colorScheme.success, <span class="number">30</span>),
|
||||
warningLight: colorHelper.tint(colorScheme.warning, <span class="number">30</span>),
|
||||
dangerLight: colorHelper.tint(colorScheme.danger, <span class="number">30</span>),
|
||||
|
||||
primaryDark: colorHelper.shade(colorScheme.primary, <span class="number">15</span>),
|
||||
infoDark: colorHelper.shade(colorScheme.info, <span class="number">15</span>),
|
||||
successDark: colorHelper.shade(colorScheme.success, <span class="number">15</span>),
|
||||
warningDark: colorHelper.shade(colorScheme.warning, <span class="number">15</span>),
|
||||
dangerDark: colorHelper.shade(colorScheme.danger, <span class="number">15</span>),
|
||||
|
||||
dashboard: {
|
||||
blueStone: <span class="string">'#005562'</span>,
|
||||
surfieGreen: <span class="string">'#0e8174'</span>,
|
||||
silverTree: <span class="string">'#6eba8c'</span>,
|
||||
gossip: <span class="string">'#b9f2a1'</span>,
|
||||
white: <span class="string">'#10c4b5'</span>,
|
||||
},
|
||||
});
|
||||
</code></pre>
|
||||
<p>3) <span class="caps">CSS</span> should also be recompiled.
|
||||
Before running build command, switch to <em>blur</em> color profile.
|
||||
To do so replace theme in <code>src/app/theme/sass/conf/conf.scss</code>:</p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorScheme/ng2'</span>;
|
||||
</code></pre>
|
||||
<p>to</p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorScheme/blur'</span>;
|
||||
</code></pre>
|
||||
<p>Additionaly, if you would like to use some different background, replace the following images:</p>
|
||||
<ul>
|
||||
<li><code>src/assets/img/blur-bg.jpg</code> (main background image)</li>
|
||||
<li><code>src/assets/img/blur-bg-blurred.jpg</code> (blurred background image used on panels)</li>
|
||||
</ul>
|
||||
<p>We suggest using 10px Gaussian blur to blur an original image.</p>
|
||||
<hr>
|
||||
<p>That’s it! You have successfully blurred your theme! Run <code>npm start</code> and check it out.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<footer class="wrap">
|
||||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||||
</footer>
|
||||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||||
</body>
|
||||
</html>
|
||||
101
articles/015-sidebar/index.html
Normal file
101
articles/015-sidebar/index.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||||
<title>BlurAdmin documentation - Sidebar</title>
|
||||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav-main">
|
||||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/ng2-admin/">Home</a></li>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
|
||||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
|
||||
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||||
<li><a href="/ng2-admin/articles/012-project-structure/">Project Structure</a></li>
|
||||
<li><a href="/ng2-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Components</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/016-spinner/">Theme Spinner</a></li>
|
||||
<li><a href="/ng2-admin/articles/015-sidebar/" class="active">Sidebar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Sidebar</h1>
|
||||
<div class="subHeader"></div><p>Sidebar is used to provide convenient way of navigation in the application.
|
||||
Application support only one sidebar per angular application.
|
||||
That means sidebar is basically a singletone object.
|
||||
Currently sidebar supports level 1 and 2 sub menus.</p>
|
||||
<p>Sidebar can be added to the page using <code>BaSidebar</code> component:</p>
|
||||
<pre><code class="lang-html"><span class="tag"><<span class="name">ba-sidebar</span>></span><span class="tag"></<span class="name">ba-sidebar</span>></span>
|
||||
</code></pre>
|
||||
<p>At the moment sidebar menu items configuration and Angular 2 Router should be configured independently. We probably will come up with a better solution once new Angular Router is released and stable.</p>
|
||||
<h2 id="menu-configuration">Menu Configuration</h2>
|
||||
<p>All menu items are located inside <code>src/app/app.menu.ts</code> file. The file contain a list of Menu Item objects with the following fields:</p>
|
||||
<pre><code class="lang-javascript"> {
|
||||
title: <span class="string">'Dashboard'</span>, <span class="comment">// menu item title</span>
|
||||
component: <span class="string">'Dashboard'</span>, <span class="comment">// component where the menu should lead, has a priority over url property</span>
|
||||
url: <span class="string">'http://google.com'</span> <span class="comment">// manual url address (used only when component is not specified)</span>
|
||||
icon: <span class="string">'ion-android-home'</span>, <span class="comment">// icon class</span>
|
||||
target: <span class="string">'_blank'</span>, <span class="comment">// link target attribute (used only when url is specified)</span>
|
||||
selected: <span class="literal">false</span>, <span class="comment">// is item selected</span>
|
||||
expanded: <span class="literal">false</span>, <span class="comment">// is item expanded (used only when subItems list specified)</span>
|
||||
order: <span class="number">0</span> <span class="comment">// order in a list</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p>You also can define a list of sub-menu items like this:</p>
|
||||
<pre><code class="lang-javascript"> {
|
||||
title: <span class="string">'Charts'</span>,
|
||||
component: <span class="string">'Charts'</span>,
|
||||
icon: <span class="string">'ion-stats-bars'</span>,
|
||||
selected: <span class="literal">false</span>,
|
||||
expanded: <span class="literal">false</span>,
|
||||
order: <span class="number">200</span>,
|
||||
subMenu: [ <span class="comment">// list of sub-menu items</span>
|
||||
{
|
||||
title: <span class="string">'Chartist.Js'</span>, <span class="comment">// sub-item title</span>
|
||||
component: <span class="string">'ChartistJs'</span> <span class="comment">// sum-item component </span>
|
||||
},
|
||||
]
|
||||
}
|
||||
</code></pre>
|
||||
<h2 id="routes-configuration">Routes configuration</h2>
|
||||
<p>Routes configuration is specified in the Page Components according to Angular 2 Router specification. More information you can find <a href="https://angular.io/docs/ts/latest/guide/router-deprecated.html">here</a>.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<footer class="wrap">
|
||||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||||
</footer>
|
||||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||||
</body>
|
||||
</html>
|
||||
96
articles/016-spinner/index.html
Normal file
96
articles/016-spinner/index.html
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||||
<title>BlurAdmin documentation - Theme Spinner</title>
|
||||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav-main">
|
||||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/ng2-admin/">Home</a></li>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
|
||||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
|
||||
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||||
<li><a href="/ng2-admin/articles/012-project-structure/">Project Structure</a></li>
|
||||
<li><a href="/ng2-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav-docs section">
|
||||
<h3>Components</h3>
|
||||
<ul>
|
||||
<li><a href="/ng2-admin/articles/016-spinner/" class="active">Theme Spinner</a></li>
|
||||
<li><a href="/ng2-admin/articles/015-sidebar/">Sidebar</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Theme Spinner</h1>
|
||||
<div class="subHeader"></div><p>Theme Spinner <code>BaThemeSpinner</code> is a small service helper allowing you to show a preloader spinner while executing some long-running tasks.
|
||||
Same spinner you can see after reloading a page - it is shown while application is initializing Anuglar 2 and loading charts and images.</p>
|
||||
<p>The usage interface in quite simple, there are two public methods: <code>show</code> and <code>hide</code>.</p>
|
||||
<p>Theme Spinner comes with another small helper called <code>BaThemePreloader</code>.
|
||||
This service globally integrated into the application and connected to the spinner.</p>
|
||||
<p>You can register any promise in any part of the application so that the spinner will be hidden only after your promise is completed (resolved).</p>
|
||||
<p>You can find an example of usage inside of the <code>app.component.ts</code> file.
|
||||
Here we registering a loader (<code>this._imageLoader.load</code> just returns a <code>Promise</code>) which loads a background image:</p>
|
||||
<pre><code class="lang-javascript"> BaThemePreloader.registerLoader(<span class="keyword">this</span>._imageLoader.load(layoutPaths.images.root + <span class="string">'blur-bg-mobile.jpg'</span>));
|
||||
</code></pre>
|
||||
<p>Then we are starting all the registered promises and once they all are done - hiding the spinner.</p>
|
||||
<pre><code class="lang-javascript"> BaThemePreloader.load().then((values) => {
|
||||
<span class="keyword">this</span>._spinner.hide();
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="example">Example</h2>
|
||||
<p>You also can register a loader on any page you want.
|
||||
Say you have a long-running task on the Charts page (you need to receive some data from a web service) and you want the spinner to be shown while the data is loading.</p>
|
||||
<p>First thing you need to do is to import BaThemePreloader service:</p>
|
||||
<pre><code class="lang-javascript"> <span class="keyword">import</span> {BaThemePreloader} <span class="keyword">from</span> <span class="string">'../../../../theme/services'</span>;
|
||||
</code></pre>
|
||||
<p>Then, say you have a method loading some data called <code>_loadData</code>, in our case we just mocked this method with <code>setTimeout</code> to emulate the loading process:</p>
|
||||
<pre><code class="lang-javascript"> private _loadData():<span class="built_in">Promise</span><any> {
|
||||
<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, <span class="number">4000</span>);
|
||||
});
|
||||
}
|
||||
</code></pre>
|
||||
<p>Last thing you need to do is to register your loader:</p>
|
||||
<pre><code class="lang-javascript"> BaThemePreloader.registerLoader(<span class="keyword">this</span>._loadData());
|
||||
</code></pre>
|
||||
<p>That’s basically it! Once your data is loaded and all other registered loaders are completed - the spinner will be hidden.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<footer class="wrap">
|
||||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||||
</footer>
|
||||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||||
</body>
|
||||
</html>
|
||||
987
css/main.css
Normal file
987
css/main.css
Normal file
|
|
@ -0,0 +1,987 @@
|
|||
html {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
color: #484848;
|
||||
line-height: 1.28
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 10px
|
||||
}
|
||||
|
||||
.subHeader {
|
||||
font-size: 21px;
|
||||
font-weight: 200;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 10px 0;
|
||||
font-family: inherit;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
color: inherit;
|
||||
text-rendering: optimizelegibility
|
||||
}
|
||||
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||
font-weight: normal;
|
||||
color: #7b7b7b
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height: 40px
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 39px
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 31px
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 23px
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 11px
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-size: 24px
|
||||
}
|
||||
|
||||
h2 small {
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
h3 small {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
h4 small {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0 0 10px 25px;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
ul ul, ul ol, ol ol, ol ul {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 20px
|
||||
}
|
||||
|
||||
a {
|
||||
color: #285eb8;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #234fb8;
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
html * {
|
||||
color-profile: sRGB;
|
||||
rendering-intent: auto
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
html {
|
||||
background: #f9f9f9
|
||||
}
|
||||
|
||||
.browser-mockup {
|
||||
border-top: 2em solid #F3F3F3;
|
||||
position: relative;
|
||||
border-radius: 3px 3px 0 0
|
||||
}
|
||||
|
||||
.browser-mockup:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -1.25em;
|
||||
left: 1em;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border-radius: 50%;
|
||||
background-color: #f44;
|
||||
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
|
||||
}
|
||||
|
||||
.browser-mockup > * {
|
||||
display: block;
|
||||
border: 1px solid #ddd;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 50px;
|
||||
min-width: 1060px
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 1060px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px
|
||||
}
|
||||
|
||||
.skinnyWrap {
|
||||
width: 690px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #eee
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin-left: 20px
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 10px
|
||||
}
|
||||
|
||||
h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor {
|
||||
margin-top: -50px;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-link, h5:hover .hash-link, h6:hover .hash-link {
|
||||
display: inline
|
||||
}
|
||||
|
||||
.hash-link {
|
||||
color: #aaa;
|
||||
display: none
|
||||
}
|
||||
|
||||
.nav-main {
|
||||
background: #222;
|
||||
color: #fafafa;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 50px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
z-index: 100
|
||||
}
|
||||
|
||||
.nav-main:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.nav-main a {
|
||||
color: #e9e9e9;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.nav-main .nav-site-internal {
|
||||
margin: 0 0 0 20px
|
||||
}
|
||||
|
||||
.nav-main .nav-site-external {
|
||||
float: right;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.nav-main .nav-site li {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.nav-main .nav-site li > a {
|
||||
box-sizing: content-box;
|
||||
padding: 0 10px;
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
height: 50px;
|
||||
color: #ddd
|
||||
}
|
||||
|
||||
.nav-main .nav-site li > a:hover {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.nav-main .nav-site li > a.active {
|
||||
color: #fafafa;
|
||||
border-bottom: 3px solid #00abff;
|
||||
background: #333
|
||||
}
|
||||
|
||||
.nav-main .nav-home {
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.nav-main .nav-home .blur-label {
|
||||
color: #00abff;
|
||||
}
|
||||
|
||||
.nav-main .nav-logo {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.nav-main ul {
|
||||
display: inline-block;
|
||||
vertical-align: top
|
||||
}
|
||||
|
||||
.nav-main li {
|
||||
display: inline
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
.hero .hero-content {
|
||||
color: #e9e9e9;
|
||||
font-weight: 300;
|
||||
background: #313131;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.hero .text {
|
||||
font-size: 64px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.hero .minitext {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.hero strong {
|
||||
color: #00abff;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.white-text {
|
||||
color: rgb(249, 249, 249);
|
||||
}
|
||||
|
||||
.hero .admin-screenshots {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.hero .admin-screenshot {
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-screenshot img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.demo-link:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 52px;
|
||||
background-image: linear-gradient(to bottom, transparent, rgb(249, 259, 249));
|
||||
}
|
||||
|
||||
.demo-link .demo-link-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
content: 'Demo';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: rgb(249, 249, 249);
|
||||
font-size: 32px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.demo-link:hover .demo-link-label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.buttons-unit {
|
||||
margin-top: 60px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.buttons-unit a {
|
||||
color: #61dafb
|
||||
}
|
||||
|
||||
.buttons-unit .button {
|
||||
font-size: 24px;
|
||||
background: #00abff;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.buttons-unit .button:active, .buttons-unit .button:focus {
|
||||
background: #00abff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.buttons-unit.downloads {
|
||||
margin: 30px 0
|
||||
}
|
||||
|
||||
.index-block {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.index-block h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.index-block.black {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.why-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.why-item {
|
||||
flex: 33%;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.why-item img {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.nav-docs {
|
||||
color: #2d2d2d;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
width: 210px
|
||||
}
|
||||
|
||||
.nav-docs ul {
|
||||
list-style: none;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.nav-docs ul ul {
|
||||
margin: 6px 0 0 20px
|
||||
}
|
||||
|
||||
.nav-docs li {
|
||||
line-height: 16px;
|
||||
margin: 0 0 6px
|
||||
}
|
||||
|
||||
.nav-docs h3 {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.nav-docs a {
|
||||
color: #666;
|
||||
display: block
|
||||
}
|
||||
|
||||
.nav-docs a:hover {
|
||||
text-decoration: none;
|
||||
color: #285eb8
|
||||
}
|
||||
|
||||
.nav-docs a.active {
|
||||
color: #285eb8
|
||||
}
|
||||
|
||||
.nav-docs a.external:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding-left: 5px;
|
||||
background-image: url("../img/external.png");
|
||||
background-position: 100% 0;
|
||||
background-repeat: no-repeat;
|
||||
font-size: 10px;
|
||||
line-height: 1em;
|
||||
opacity: 0.5
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
|
||||
.nav-docs a.external:after {
|
||||
background-image: url("../img/external_2x.png");
|
||||
background-size: 10px 10px
|
||||
}
|
||||
}
|
||||
|
||||
.nav-docs .nav-docs-section {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #eee;
|
||||
padding: 12px 0
|
||||
}
|
||||
|
||||
.nav-docs .nav-docs-section:first-child {
|
||||
padding-top: 0;
|
||||
border-top: 0
|
||||
}
|
||||
|
||||
.nav-docs .nav-docs-section:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: 0
|
||||
}
|
||||
|
||||
.nav-blog li {
|
||||
margin-bottom: 5px
|
||||
}
|
||||
|
||||
.nav-docs-right {
|
||||
display: block;
|
||||
float: right;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.nav-docs-right a {
|
||||
color: #00abff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-docs-right a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.home-section {
|
||||
margin: 50px 0
|
||||
}
|
||||
|
||||
.home-divider {
|
||||
border-top-color: #bbb;
|
||||
margin: 0 auto;
|
||||
width: 400px
|
||||
}
|
||||
|
||||
.skinny-row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.skinny-col {
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
width: 305px
|
||||
}
|
||||
|
||||
.skinny-col:first-child {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
.marketing-row {
|
||||
margin: 50px 0
|
||||
}
|
||||
|
||||
.marketing-row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.marketing-col {
|
||||
float: left;
|
||||
margin-left: 40px;
|
||||
width: 280px
|
||||
}
|
||||
|
||||
.marketing-col h3 {
|
||||
color: #2d2d2d;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.marketing-col p {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
.marketing-col:first-child {
|
||||
margin-left: 0
|
||||
}
|
||||
|
||||
#examples h3, .home-presentation h3 {
|
||||
color: #2d2d2d;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
margin-bottom: 5px
|
||||
}
|
||||
|
||||
#examples p {
|
||||
margin: 0 0 25px 0;
|
||||
max-width: 600px
|
||||
}
|
||||
|
||||
#examples .example {
|
||||
margin-top: 60px
|
||||
}
|
||||
|
||||
#examples #todoExample {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
#examples #todoExample ul {
|
||||
list-style-type: square;
|
||||
margin: 0 0 10px 0
|
||||
}
|
||||
|
||||
#examples #todoExample input {
|
||||
border: 1px solid #ccc;
|
||||
font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
padding: 3px;
|
||||
width: 150px
|
||||
}
|
||||
|
||||
#examples #todoExample button {
|
||||
font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
margin-left: 5px;
|
||||
padding: 4px 10px
|
||||
}
|
||||
|
||||
#examples #markdownExample textarea {
|
||||
border: 1px solid #ccc;
|
||||
font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
.home-bottom-section {
|
||||
margin-bottom: 100px
|
||||
}
|
||||
|
||||
.docs-nextprev:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.jsxCompiler {
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
width: 1220px
|
||||
}
|
||||
|
||||
.jsxCompiler label.compiler-option {
|
||||
display: block;
|
||||
margin-top: 5px
|
||||
}
|
||||
|
||||
.jsxCompiler #jsxCompiler {
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.jsxCompiler .playgroundPreview {
|
||||
padding: 0;
|
||||
width: 600px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
.jsxCompiler .playgroundPreview pre {
|
||||
font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
.jsxCompiler .playgroundError {
|
||||
padding: 15px 20px
|
||||
}
|
||||
|
||||
.docs-prev {
|
||||
float: left
|
||||
}
|
||||
|
||||
.docs-next {
|
||||
float: right
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-top: 66px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
section.black content {
|
||||
padding-bottom: 18px
|
||||
}
|
||||
|
||||
.blogContent {
|
||||
padding-top: 20px
|
||||
}
|
||||
|
||||
.blogContent:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.blogContent blockquote {
|
||||
padding: 5px 15px;
|
||||
margin: 20px 0;
|
||||
background-color: #f8f5ec;
|
||||
border-left: 5px solid #f7ebc6
|
||||
}
|
||||
|
||||
.blogContent h2 > code {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: #555;
|
||||
background-color: rgba(0, 0, 0, 0.04)
|
||||
}
|
||||
|
||||
.documentationContent {
|
||||
padding-top: 20px
|
||||
}
|
||||
|
||||
.documentationContent:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.documentationContent .subHeader {
|
||||
font-size: 24px
|
||||
}
|
||||
|
||||
.documentationContent h2 {
|
||||
margin-top: 30px
|
||||
}
|
||||
|
||||
.documentationContent blockquote {
|
||||
padding: 15px 30px 15px 15px;
|
||||
margin: 20px 0;
|
||||
background-color: rgba(204, 122, 111, 0.1);
|
||||
border-left: 5px solid rgba(191, 87, 73, 0.2)
|
||||
}
|
||||
|
||||
.documentationContent blockquote h4 {
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.documentationContent blockquote p {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.documentationContent blockquote p:first-child {
|
||||
font-weight: bold;
|
||||
font-size: 17.5px;
|
||||
line-height: 20px;
|
||||
margin-top: 0;
|
||||
text-rendering: optimizelegibility
|
||||
}
|
||||
|
||||
.docs-prevnext {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px
|
||||
}
|
||||
|
||||
.button {
|
||||
background: -webkit-linear-gradient(#9a9a9a, #646464);
|
||||
background: linear-gradient(#9a9a9a, #646464);
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin: 0 12px;
|
||||
display: inline-block;
|
||||
color: #fafafa;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.button:active {
|
||||
box-shadow: none
|
||||
}
|
||||
|
||||
.hero .button {
|
||||
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.button.blue {
|
||||
background: -webkit-linear-gradient(#77a3d2, #4783c2);
|
||||
background: linear-gradient(#77a3d2, #4783c2)
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-bottom: 4px
|
||||
}
|
||||
|
||||
.row .span4 {
|
||||
width: 33.33%;
|
||||
display: table-cell
|
||||
}
|
||||
|
||||
.row .span8 {
|
||||
width: 66.66%;
|
||||
display: table-cell
|
||||
}
|
||||
|
||||
.row .span6 {
|
||||
width: 50%;
|
||||
display: table-cell
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 10px 0
|
||||
}
|
||||
|
||||
.highlight {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.inner-content {
|
||||
float: right;
|
||||
width: 650px
|
||||
}
|
||||
|
||||
.nosidebar .inner-content {
|
||||
float: none;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.inner-content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.inner-content table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inner-content th, .inner-content td {
|
||||
padding: 0.25rem;
|
||||
text-align: left;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.inner-content tbody tr:nth-child(odd) {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
h1:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both
|
||||
}
|
||||
|
||||
.edit-page-link {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
margin-top: 17px
|
||||
}
|
||||
|
||||
.post-list-item + .post-list-item {
|
||||
margin-top: 60px
|
||||
}
|
||||
|
||||
/* code styling */
|
||||
|
||||
code {
|
||||
font-family: 'Anonymous Pro', sans-serif;
|
||||
font-size: 0.85em;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
line-height: 1.1;
|
||||
color: #333333;
|
||||
background: #f8f5ec;
|
||||
padding: 30px 14px 14px;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 3px 7px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #c2c0bc;
|
||||
background-color: #f1ede4;
|
||||
content: "Code";
|
||||
}
|
||||
|
||||
p code {
|
||||
padding: 0.1em 0.3em 0.2em;
|
||||
border-radius: 0.3em;
|
||||
position: relative;
|
||||
background: #fffff3;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* syntax hl stuff */
|
||||
|
||||
code.lang-markdown {
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
code.lang-markdown .header,
|
||||
code.lang-markdown .strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
code.lang-markdown .emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code.lang-markdown .horizontal_rule,
|
||||
code.lang-markdown .link_label,
|
||||
code.lang-markdown .code,
|
||||
code.lang-markdown .header,
|
||||
code.lang-markdown .link_url {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
code.lang-markdown .blockquote,
|
||||
code.lang-markdown .bullet {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* Tomorrow Theme */
|
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
||||
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
|
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
||||
.tomorrow-comment, pre .comment, pre .title {
|
||||
color: #8e908c;
|
||||
}
|
||||
|
||||
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
|
||||
color: #c82829;
|
||||
}
|
||||
|
||||
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
|
||||
color: #eab700;
|
||||
}
|
||||
|
||||
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
|
||||
color: #718c00;
|
||||
}
|
||||
|
||||
.tomorrow-aqua, pre .css .hexcolor {
|
||||
color: #3e999f;
|
||||
}
|
||||
|
||||
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
|
||||
color: #4271ae;
|
||||
}
|
||||
|
||||
.tomorrow-purple, pre .keyword, pre .javascript .function {
|
||||
color: #8959a8;
|
||||
}
|
||||
|
||||
/* media queries */
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.nav-main {
|
||||
position: static
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 0
|
||||
}
|
||||
}
|
||||
BIN
images/favicon.png
Normal file
BIN
images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
images/sky-preview.png
Normal file
BIN
images/sky-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
1
images/why-design.svg
Normal file
1
images/why-design.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Artboard"/><g id="Multicolor"><circle cx="55" cy="55" r="55" style="fill:#00abff;"/><g><g><path d="M81.937,24.303C81.205,23.507,80.166,23,79,23H31c-2.209,0-4,1.791-4,4v56c0,2.209,1.791,4,4,4h48 c2.209,0,4-1.791,4-4V27C83,25.957,82.591,25.015,81.937,24.303z" style="fill:#F0F1F1;"/></g><g><path d="M31,29c0-1.104,0.895-2,2-2h12c1.105,0,2,0.896,2,2v30.239l4.436-4.436 C51.179,54.623,51,54.338,51,54V44c0-0.552,0.448-1,1-1h10c0.338,0,0.622,0.179,0.803,0.436l4.632-4.632 C67.179,38.623,67,38.338,67,38V28c0-0.552,0.448-1,1-1h10c0.338,0,0.622,0.179,0.803,0.436l3.133-3.133 C81.205,23.507,80.166,23,79,23H31c-2.209,0-4,1.791-4,4v52.239l4-4V29z M51,28c0-0.552,0.448-1,1-1h10c0.552,0,1,0.448,1,1v10 c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1V28z" style="fill:#FFFFFF;"/></g><g><path d="M45,27H33c-1.105,0-2,0.896-2,2v46.239V81c0,1.104,0.895,2,2,2h12c1.105,0,2-0.896,2-2V59.239V29 C47,27.896,46.105,27,45,27z" style="fill:#F4D0A1;"/></g><g><path d="M45,27H33c-1.105,0-2,0.896-2,2v46.239l16-16V29C47,27.896,46.105,27,45,27z" style="fill:#F8E1C2;"/></g><g><path d="M52,39h10c0.552,0,1-0.448,1-1V28c0-0.552-0.448-1-1-1H52c-0.552,0-1,0.448-1,1v10 C51,38.552,51.448,39,52,39z" style="fill:#F79392;"/></g><g><path d="M78.803,27.436C78.622,27.179,78.338,27,78,27H68c-0.552,0-1,0.448-1,1v10 c0,0.338,0.179,0.623,0.436,0.803C67.598,38.918,67.786,39,68,39h10c0.552,0,1-0.448,1-1V28 C79,27.786,78.918,27.599,78.803,27.436z" style="fill:#FACB1B;"/></g><g><path d="M78,27H68c-0.552,0-1,0.448-1,1v10c0,0.338,0.179,0.623,0.436,0.803l11.368-11.368 C78.622,27.179,78.338,27,78,27z" style="fill:#FBE158;"/></g><g><path d="M62.803,43.436C62.622,43.179,62.338,43,62,43H52c-0.552,0-1,0.448-1,1v10 c0,0.338,0.179,0.623,0.436,0.803C51.598,54.918,51.786,55,52,55h10c0.552,0,1-0.448,1-1V44 C63,43.786,62.918,43.599,62.803,43.436z" style="fill:#12B2A0;"/></g><g><path d="M62,43H52c-0.552,0-1,0.448-1,1v10c0,0.338,0.179,0.623,0.436,0.803l11.368-11.368 C62.622,43.179,62.338,43,62,43z" style="fill:#47C4B7;"/></g><g><path d="M39,43h-4v4l1.876,30.024C36.946,78.135,37.867,79,38.98,79H39h0.02 c1.113,0,2.034-0.865,2.104-1.976L43,47v-4H39z" style="fill:#84462D;"/></g><g><path d="M35,43v4l1.876,30.024C36.946,78.135,37.867,79,38.98,79H39V43H35z" style="fill:#9C6144;"/></g><g><path d="M79,54c0,0.552-0.448,1-1,1H68c-0.552,0-1-0.448-1-1V44c0-0.552,0.448-1,1-1h10 c0.552,0,1,0.448,1,1V54z" style="fill:#47C4B7;"/></g><g><path d="M63,70c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1V60c0-0.552,0.448-1,1-1h10 c0.552,0,1,0.448,1,1V70z" style="fill:#40C9E7;"/></g><g><path d="M79,70c0,0.552-0.448,1-1,1H68c-0.552,0-1-0.448-1-1V60c0-0.552,0.448-1,1-1h10 c0.552,0,1,0.448,1,1V70z" style="fill:#40C9E7;"/></g><g><path d="M79,82c0,0.552-0.448,1-1,1H52c-0.552,0-1-0.448-1-1v-6c0-0.552,0.448-1,1-1h26 c0.552,0,1,0.448,1,1V82z" style="fill:#F4D0A1;"/></g><g><path d="M39,30L39,30c0,0-5,5.687-5,9c0,1.851,0.713,3.175,1.811,4H39h3.189 C43.287,42.175,44,40.851,44,39C44,35.687,39.001,30.001,39,30z" style="fill:#3E3E3F;"/></g><g><path d="M34,39c0,1.851,0.713,3.175,1.811,4H39V30h0C39,30,34,35.687,34,39z" style="fill:#5B5C5F;"/></g><g><polygon points="39,43 35,43 35,47 39,47 43,47 43,43 " style="fill:#F3B607;"/></g><g><polygon points="35.811,43 35,43 35,47 39,47 39,43 " style="fill:#FACB1B;"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
1
images/why-practices.svg
Normal file
1
images/why-practices.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.6 KiB |
1
images/why-structure.svg
Normal file
1
images/why-structure.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Artboard"/><g id="Multicolor"><circle cx="55" cy="55" r="55" style="fill:#00abff;"/><g><g><path d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84 C24.719,87,23,85.281,23,83.16V26.84z" style="fill:#FFFFFF;"/><path d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z" style="fill:#F0F1F1;"/></g><path d="M52,70h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H52c-0.551,0-1,0.448-1,1v5 C51,69.552,51.449,70,52,70z" style="fill:#E2E4E5;"/><path d="M62,72H52c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5 C65,70.654,63.654,72,62,72z M52,63c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1 H52z" style="fill:#B6BCBD;"/><path d="M30,70h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H30c-0.551,0-1,0.448-1,1v5 C29,69.552,29.449,70,30,70z" style="fill:#E2E4E5;"/><path d="M40,72H30c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5 C43,70.654,41.654,72,40,72z M30,63c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1 H30z" style="fill:#B6BCBD;"/><path d="M41,50h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1H41c-0.551,0-1,0.448-1,1v5 C40,49.552,40.449,50,41,50z" style="fill:#9CE5F4;"/><g><polygon points="50.272,52 48.014,52 52.728,61 54.986,61 " style="fill:#CFD3D4;"/></g><g><polygon points="41.728,52 37.014,61 39.272,61 43.986,52 " style="fill:#CFD3D4;"/></g><path d="M51,52H41c-1.654,0-3-1.346-3-3v-5c0-1.654,1.346-3,3-3h10c1.654,0,3,1.346,3,3v5 C54,50.654,52.654,52,51,52z M41,43c-0.551,0-1,0.448-1,1v5c0,0.552,0.449,1,1,1h10c0.551,0,1-0.448,1-1v-5c0-0.552-0.449-1-1-1 H41z" style="fill:#40C9E7;"/><g><path d="M84.144,57.498L62.941,81.466l-5.877,1.21c-0.17-0.818-0.593-1.593-1.267-2.189 c-0.674-0.596-1.495-0.922-2.328-0.991l0.484-5.981l21.203-23.967L84.144,57.498z" style="fill:#F4D0A1;"/></g><g><path d="M84.115,57.473c0.016,0.014,0.017,0.038,0.003,0.054L63.397,80.95 c-0.033,0.038-0.086-0.002-0.062-0.047c0.651-1.2,0.414-2.728-0.653-3.672c-1.126-0.996-2.785-0.995-3.905-0.062 c-0.032,0.027-0.075-0.011-0.052-0.046c0.79-1.225,0.589-2.871-0.537-3.868c-1.079-0.955-2.648-0.993-3.762-0.173 c-0.036,0.027-0.077-0.015-0.047-0.049l20.752-23.458c0.014-0.016,0.038-0.017,0.054-0.003L84.115,57.473z" style="fill:#059BBF;"/></g><g><rect height="2" style="fill:#FACB1B;" transform="matrix(0.749 0.6626 -0.6626 0.749 55.1274 -39.9673)" width="12" x="74.313" y="51.774"/></g><g><path d="M84.996,47.571l-0.09-0.08c-2.457-2.174-6.211-1.944-8.385,0.513l-0.04,0.045L85.469,56 l0.04-0.045C87.683,53.498,87.453,49.744,84.996,47.571z" style="fill:#F79392;"/></g><g><path d="M84.119,57.527L63.371,80.979c-0.03,0.034-0.077-0.002-0.055-0.042 c0.674-1.205,0.444-2.753-0.634-3.707c-1.124-0.994-2.777-0.995-3.897-0.068c-0.019,0.015-0.041-0.008-0.025-0.026l20.865-23.586 c0.014-0.016,0.038-0.017,0.053-0.003l4.437,3.925C84.131,57.487,84.133,57.511,84.119,57.527z" style="fill:#0484AB;"/></g><g><path d="M57.064,82.675l-3.918,0.807l0.323-3.987c0.833,0.069,1.654,0.395,2.328,0.991 C56.471,81.082,56.894,81.857,57.064,82.675z" style="fill:#3E3E3F;"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
88
index.html
Normal file
88
index.html
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
|
||||
<title>Admin HTML template based on Angular 2, Bootstrap 4 and Webpack</title>
|
||||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
|
||||
<link rel="stylesheet" href="/ng2-admin/css/main.css">
|
||||
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="nav-main">
|
||||
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo"> <span class="blur-label">ng2-</span>admin</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/ng2-admin/" class="active">Home</a></li>
|
||||
<li><a href="/ng2-admin/articles/001-getting-started/">Docs</a></li>
|
||||
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="wrap">
|
||||
<div class="text"><strong>ng2-<span class="white-text">admin</span></strong></div>
|
||||
<div class="minitext">Angular 2 admin panel front-end framework</div>
|
||||
<div class="buttons-unit"><a href="/ng2-admin/articles/002-installation-guidelines/" class="button">Installation guidelines</a><a href="/ng2-admin/articles/001-getting-started/" class="button">Documentation</a></div>
|
||||
<div class="admin-screenshots">
|
||||
<div class="admin-screenshot">
|
||||
<div class="browser-mockup"><a href="http://akveo.com/ng2-admin/" target="_blank" class="demo-link"><img src="/ng2-admin/images/sky-preview.png"><span class="demo-link-label">Demo</span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index-block">
|
||||
<div class="wrap">
|
||||
<h1>Why ng2-admin?</h1>
|
||||
<div class="why-items">
|
||||
<div class="why-item"><img src="/ng2-admin/images/why-structure.svg">
|
||||
<h4>Awesome structure</h4>
|
||||
<p>Component-based structure is the best choice for large Angular 2 applications.</p>
|
||||
</div>
|
||||
<div class="why-item"><img src="/ng2-admin/images/why-design.svg">
|
||||
<h4>Neat design</h4>
|
||||
<p>We have put a lot of efforts and carefully selected each color and font for this template!</p>
|
||||
</div>
|
||||
<div class="why-item"><img src="/ng2-admin/images/why-practices.svg">
|
||||
<h4>Ease for customization</h4>
|
||||
<p>Check out <a href="/blur-admin/articles/011-changing-color-scheme">our article</a>, where we describe how you can create different look in just 2 minutes!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index-block black">
|
||||
<div class="wrap">
|
||||
<h1>Is it free?</h1>
|
||||
<p>Yes, ng2-admin is completely free and MIT licensed. That means you can do with it whatever you want.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index-block">
|
||||
<div class="wrap">
|
||||
<h1>How can I support you guys?</h1>
|
||||
<p>Here's what you can do:</p>
|
||||
<ul>
|
||||
<li>Star <a href="https://github.com/akveo/blur-admin" target="_blank">our GitHub repo</a></li>
|
||||
<li>Create pull requests, submit bugs, suggest new features</li>
|
||||
<li>Follow <a href="https://twitter.com/akveo_inc" target="_blank">us on Twitter</a></li>
|
||||
<li>Like <a href="https://www.facebook.com/akveo/" target="_blank">our page on Facebook</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index-block black">
|
||||
<div class="wrap">
|
||||
<h1>Can I hire you?</h1>
|
||||
<p>Yes! We are available for hire. Visit <a href="http://akveo.com" target="_blank">our homepage</a> or simply leave us a note at <a href="mailto:contact@akveo.com">contact@akveo.com</a>. We will be happy to work with you!</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="wrap">
|
||||
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
||||
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
|
||||
</footer>
|
||||
</div><a href="https://github.com/akveo/ng2-admin" title="Star & Fork on GitHub" class="github-fork-ribbon"></a>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue