initial commit
This commit is contained in:
commit
1fea921067
|
@ -0,0 +1,13 @@
|
||||||
|
# Editor configuration, see http://editorconfig.org
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
max_line_length = off
|
||||||
|
trim_trailing_whitespace = false
|
|
@ -0,0 +1,27 @@
|
||||||
|
# OpenScienceObservatoryUi
|
||||||
|
|
||||||
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.4.
|
||||||
|
|
||||||
|
## Development server
|
||||||
|
|
||||||
|
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||||
|
|
||||||
|
## Code scaffolding
|
||||||
|
|
||||||
|
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
|
||||||
|
|
||||||
|
## Running unit tests
|
||||||
|
|
||||||
|
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||||
|
|
||||||
|
## Running end-to-end tests
|
||||||
|
|
||||||
|
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||||
|
|
||||||
|
## Further help
|
||||||
|
|
||||||
|
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
|
@ -0,0 +1,140 @@
|
||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"open-science-observatory-ui": {
|
||||||
|
"root": "",
|
||||||
|
"sourceRoot": "src",
|
||||||
|
"projectType": "application",
|
||||||
|
"prefix": "app",
|
||||||
|
"schematics": {},
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:browser",
|
||||||
|
"options": {
|
||||||
|
"outputPath": "dist/open-science-observatory-ui",
|
||||||
|
"index": "src/index.html",
|
||||||
|
"main": "src/main.ts",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"tsConfig": "src/tsconfig.app.json",
|
||||||
|
"assets": [
|
||||||
|
"src/favicon.ico",
|
||||||
|
"src/assets"
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"src/styles.css",
|
||||||
|
"node_modules/font-awesome/css/font-awesome.css"
|
||||||
|
],
|
||||||
|
"scripts": [
|
||||||
|
"node_modules/jquery/dist/jquery.min.js",
|
||||||
|
"node_modules/uikit/dist/js/uikit.min.js",
|
||||||
|
"node_modules/uikit/dist/js/uikit-icons.min.js"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"fileReplacements": [
|
||||||
|
{
|
||||||
|
"replace": "src/environments/environment.ts",
|
||||||
|
"with": "src/environments/environment.prod.ts"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"optimization": true,
|
||||||
|
"outputHashing": "all",
|
||||||
|
"sourceMap": false,
|
||||||
|
"extractCss": true,
|
||||||
|
"namedChunks": false,
|
||||||
|
"aot": true,
|
||||||
|
"extractLicenses": true,
|
||||||
|
"vendorChunk": false,
|
||||||
|
"buildOptimizer": true,
|
||||||
|
"budgets": [
|
||||||
|
{
|
||||||
|
"type": "initial",
|
||||||
|
"maximumWarning": "2mb",
|
||||||
|
"maximumError": "5mb"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"serve": {
|
||||||
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
|
"options": {
|
||||||
|
"browserTarget": "open-science-observatory-ui:build"
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"browserTarget": "open-science-observatory-ui:build:production"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||||
|
"options": {
|
||||||
|
"browserTarget": "open-science-observatory-ui:build"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"main": "src/test.ts",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"tsConfig": "src/tsconfig.spec.json",
|
||||||
|
"karmaConfig": "src/karma.conf.js",
|
||||||
|
"styles": [
|
||||||
|
"src/styles.css"
|
||||||
|
],
|
||||||
|
"scripts": [],
|
||||||
|
"assets": [
|
||||||
|
"src/favicon.ico",
|
||||||
|
"src/assets"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint": {
|
||||||
|
"builder": "@angular-devkit/build-angular:tslint",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": [
|
||||||
|
"src/tsconfig.app.json",
|
||||||
|
"src/tsconfig.spec.json"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"**/node_modules/**"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"open-science-observatory-ui-e2e": {
|
||||||
|
"root": "e2e/",
|
||||||
|
"projectType": "application",
|
||||||
|
"prefix": "",
|
||||||
|
"architect": {
|
||||||
|
"e2e": {
|
||||||
|
"builder": "@angular-devkit/build-angular:protractor",
|
||||||
|
"options": {
|
||||||
|
"protractorConfig": "e2e/protractor.conf.js",
|
||||||
|
"devServerTarget": "open-science-observatory-ui:serve"
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"devServerTarget": "open-science-observatory-ui:serve:production"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lint": {
|
||||||
|
"builder": "@angular-devkit/build-angular:tslint",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": "e2e/tsconfig.e2e.json",
|
||||||
|
"exclude": [
|
||||||
|
"**/node_modules/**"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultProject": "open-science-observatory-ui"
|
||||||
|
}
|
|
@ -0,0 +1,28 @@
|
||||||
|
// Protractor configuration file, see link for more information
|
||||||
|
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||||
|
|
||||||
|
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||||
|
|
||||||
|
exports.config = {
|
||||||
|
allScriptsTimeout: 11000,
|
||||||
|
specs: [
|
||||||
|
'./src/**/*.e2e-spec.ts'
|
||||||
|
],
|
||||||
|
capabilities: {
|
||||||
|
'browserName': 'chrome'
|
||||||
|
},
|
||||||
|
directConnect: true,
|
||||||
|
baseUrl: 'http://localhost:4200/',
|
||||||
|
framework: 'jasmine',
|
||||||
|
jasmineNodeOpts: {
|
||||||
|
showColors: true,
|
||||||
|
defaultTimeoutInterval: 30000,
|
||||||
|
print: function() {}
|
||||||
|
},
|
||||||
|
onPrepare() {
|
||||||
|
require('ts-node').register({
|
||||||
|
project: require('path').join(__dirname, './tsconfig.e2e.json')
|
||||||
|
});
|
||||||
|
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { AppPage } from './app.po';
|
||||||
|
|
||||||
|
describe('workspace-project App', () => {
|
||||||
|
let page: AppPage;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
page = new AppPage();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display welcome message', () => {
|
||||||
|
page.navigateTo();
|
||||||
|
expect(page.getParagraphText()).toEqual('Welcome to open-science-observatory-ui!');
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { browser, by, element } from 'protractor';
|
||||||
|
|
||||||
|
export class AppPage {
|
||||||
|
navigateTo() {
|
||||||
|
return browser.get('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
getParagraphText() {
|
||||||
|
return element(by.css('app-root h1')).getText();
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"extends": "../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../out-tsc/app",
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es5",
|
||||||
|
"types": [
|
||||||
|
"jasmine",
|
||||||
|
"jasminewd2",
|
||||||
|
"node"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,56 @@
|
||||||
|
{
|
||||||
|
"name": "open-science-observatory-ui",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve",
|
||||||
|
"build": "ng build",
|
||||||
|
"test": "ng test",
|
||||||
|
"lint": "ng lint",
|
||||||
|
"e2e": "ng e2e"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/animations": "~7.0.0",
|
||||||
|
"@angular/common": "~7.0.0",
|
||||||
|
"@angular/compiler": "~7.0.0",
|
||||||
|
"@angular/core": "~7.0.0",
|
||||||
|
"@angular/forms": "~7.0.0",
|
||||||
|
"@angular/http": "~7.0.0",
|
||||||
|
"@angular/platform-browser": "~7.0.0",
|
||||||
|
"@angular/platform-browser-dynamic": "~7.0.0",
|
||||||
|
"@angular/router": "~7.0.0",
|
||||||
|
"@highcharts/map-collection": "^1.1.2",
|
||||||
|
"core-js": "^2.5.4",
|
||||||
|
"dom-to-image": "^2.6.0",
|
||||||
|
"font-awesome": "^4.7.0",
|
||||||
|
"highcharts": "^7.2.0",
|
||||||
|
"highcharts-angular": "^2.4.0",
|
||||||
|
"jquery": "^3.4.1",
|
||||||
|
"jspdf": "^1.5.3",
|
||||||
|
"proj4": "^2.5.0",
|
||||||
|
"rxjs": "~6.3.3",
|
||||||
|
"uikit": "^3.2.1",
|
||||||
|
"zone.js": "~0.8.26"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular-devkit/build-angular": "~0.10.0",
|
||||||
|
"@angular/cli": "~7.0.4",
|
||||||
|
"@angular/compiler-cli": "~7.0.0",
|
||||||
|
"@angular/language-service": "~7.0.0",
|
||||||
|
"@types/jasmine": "~2.8.8",
|
||||||
|
"@types/jasminewd2": "~2.0.3",
|
||||||
|
"codelyzer": "~4.5.0",
|
||||||
|
"jasmine-core": "~2.99.1",
|
||||||
|
"jasmine-spec-reporter": "~4.2.1",
|
||||||
|
"karma": "~3.0.0",
|
||||||
|
"karma-chrome-launcher": "~2.2.0",
|
||||||
|
"karma-coverage-istanbul-reporter": "~2.0.1",
|
||||||
|
"karma-jasmine": "~1.1.2",
|
||||||
|
"karma-jasmine-html-reporter": "^0.2.2",
|
||||||
|
"protractor": "~5.4.0",
|
||||||
|
"ts-node": "~7.0.0",
|
||||||
|
"tslint": "~5.11.0",
|
||||||
|
"typescript": "~3.1.1"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
import { HomeComponent } from './pages/home/home.component';
|
||||||
|
import { CountriesMapOverviewComponent } from './pages/home/countries-map-overview.component';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
redirectTo: '/home',
|
||||||
|
pathMatch: 'full'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'home',
|
||||||
|
component: HomeComponent
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'overview-map-embed',
|
||||||
|
component: CountriesMapOverviewComponent
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forRoot(routes)],
|
||||||
|
exports: [RouterModule]
|
||||||
|
})
|
||||||
|
export class AppRoutingModule { }
|
|
@ -0,0 +1,12 @@
|
||||||
|
<div *ngIf="!isEmbedRoute() ; else embed" class="">
|
||||||
|
<!--<div *ngIf="!isHomeRoute() ; else landing" class="sidebar_main_open sidebar_main_swipe uk-height-1-1">-->
|
||||||
|
<app-top-menu></app-top-menu>
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
<app-footer></app-footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ng-template #embed>
|
||||||
|
<div uk-height-viewport="offset-bottom: 20">
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { TestBed, async } from '@angular/core/testing';
|
||||||
|
import { RouterTestingModule } from '@angular/router/testing';
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
|
||||||
|
describe('AppComponent', () => {
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
imports: [
|
||||||
|
RouterTestingModule
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
AppComponent
|
||||||
|
],
|
||||||
|
}).compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should create the app', () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.debugElement.componentInstance;
|
||||||
|
expect(app).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it(`should have as title 'open-science-observatory-ui'`, () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.debugElement.componentInstance;
|
||||||
|
expect(app.title).toEqual('open-science-observatory-ui');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render title in a h1 tag', () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
fixture.detectChanges();
|
||||||
|
const compiled = fixture.debugElement.nativeElement;
|
||||||
|
expect(compiled.querySelector('h1').textContent).toContain('Welcome to open-science-observatory-ui!');
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import {Router} from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
templateUrl: './app.component.html',
|
||||||
|
styleUrls: ['./app.component.css']
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
title = 'open-science-observatory-ui';
|
||||||
|
|
||||||
|
constructor(private router: Router) {
|
||||||
|
}
|
||||||
|
|
||||||
|
isEmbedRoute() {
|
||||||
|
// console.log('Is embed route? Route is: ' + this.router.url);
|
||||||
|
return (this.router.url === '/overview-map-embed');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
import { ReusableComponentsModule } from './shared/reusablecomponents/reusable-components.module';
|
||||||
|
import { HomeComponent } from './pages/home/home.component';
|
||||||
|
import { DataService } from './services/data.service';
|
||||||
|
import { CountriesTableComponent } from './pages/home/countries-table.component';
|
||||||
|
import { DataViewComponent } from './pages/home/data-view.component';
|
||||||
|
import { HighchartsChartModule } from 'highcharts-angular';
|
||||||
|
import { CountriesMapOverviewComponent } from './pages/home/countries-map-overview.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
AppComponent,
|
||||||
|
HomeComponent,
|
||||||
|
CountriesTableComponent,
|
||||||
|
DataViewComponent,
|
||||||
|
CountriesMapOverviewComponent
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
AppRoutingModule,
|
||||||
|
ReusableComponentsModule,
|
||||||
|
HighchartsChartModule
|
||||||
|
],
|
||||||
|
providers: [
|
||||||
|
DataService
|
||||||
|
],
|
||||||
|
bootstrap: [AppComponent]
|
||||||
|
})
|
||||||
|
export class AppModule { }
|
|
@ -0,0 +1,5 @@
|
||||||
|
export class MapCountryData {
|
||||||
|
id: string;
|
||||||
|
country: string;
|
||||||
|
z: number;
|
||||||
|
}
|
|
@ -0,0 +1,29 @@
|
||||||
|
export class OverviewData {
|
||||||
|
overview: OverviewIndicators;
|
||||||
|
countries: CountryOverview[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export class OverviewIndicators {
|
||||||
|
publications: Indicator;
|
||||||
|
datasets: Indicator;
|
||||||
|
repositories: Indicator;
|
||||||
|
journals: Indicator;
|
||||||
|
policies: Indicator;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CountryOverview {
|
||||||
|
country: string;
|
||||||
|
repositories: Indicator;
|
||||||
|
journals: Indicator;
|
||||||
|
policies: Indicator;
|
||||||
|
publications: Indicator;
|
||||||
|
datasets: Indicator;
|
||||||
|
software: Indicator;
|
||||||
|
otherProducts: Indicator;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Indicator {
|
||||||
|
oa: number;
|
||||||
|
total: number;
|
||||||
|
percentage: number;
|
||||||
|
}
|
|
@ -0,0 +1,37 @@
|
||||||
|
/**
|
||||||
|
* Created by stefania on 7/17/17.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export class PageContent {
|
||||||
|
|
||||||
|
content: PositionContents;
|
||||||
|
|
||||||
|
route: string;
|
||||||
|
_id: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PositionContents {
|
||||||
|
|
||||||
|
top: Content[];
|
||||||
|
right: Content[];
|
||||||
|
bottom: Content[];
|
||||||
|
left: Content[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Content {
|
||||||
|
|
||||||
|
_id: string;
|
||||||
|
page: Page | string;
|
||||||
|
placement: string;
|
||||||
|
order: number;
|
||||||
|
content: string;
|
||||||
|
isActive: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Page {
|
||||||
|
_id: string;
|
||||||
|
route: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,56 @@
|
||||||
|
<div class="{{isEmbedRoute()? 'mapContainerEmbed' : 'mapContainer'}}">
|
||||||
|
<!--Map-->
|
||||||
|
<div class="map">
|
||||||
|
<!--<chart type="Map" [options]="serviceMapOptions"></chart>-->
|
||||||
|
<ng-container *ngIf="countries">
|
||||||
|
<highcharts-chart
|
||||||
|
[Highcharts]="Highcharts"
|
||||||
|
[constructorType]="'mapChart'"
|
||||||
|
[options]="chartMapOptions"
|
||||||
|
style="width: 100%; height: 100%; display: block;"
|
||||||
|
></highcharts-chart>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!--<img src="../../../assets/img/mapExample.png">-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Map Controls-->
|
||||||
|
<div class="uk-width-large-1-1 uk-container-center uk-text-center uk-margin-top mapControls">
|
||||||
|
<ul class="uk-nav uk-nav-side uk-nav-horizontal uk-nav-parent-icon" data-uk-nav="{multiple:true}">
|
||||||
|
<li>
|
||||||
|
<a (click)="changeView('publications')">
|
||||||
|
<span class="uk-nav-label" style="background-color: #5086BA !important;"></span>
|
||||||
|
<span class="text {{activeView=='publications' ? 'active' : ''}}">OA publications</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a (click)="changeView('datasets')">
|
||||||
|
<span class="uk-nav-label" style="background-color: #44653D !important;"></span>
|
||||||
|
<span class="text {{activeView=='datasets' ? 'active' : ''}}">OA datasets</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a (click)="changeView('repositories')">
|
||||||
|
<span class="uk-nav-label" style="background-color: #A33C3C !important;"></span>
|
||||||
|
<span class="text {{activeView=='repositories' ? 'active' : ''}}">OA repositories</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a (click)="changeView('journals')">
|
||||||
|
<span class="uk-nav-label" style="background-color: #7056AF !important;"></span>
|
||||||
|
<span class="text {{activeView=='journals' ? 'active' : ''}}">OA journals</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a (click)="changeView('policies')">
|
||||||
|
<span class="uk-nav-label" style="background-color: #A26C0A !important;"></span>
|
||||||
|
<span class="text {{activeView=='policies' ? 'active' : ''}}">OA policies</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!--<h2 class="heading_b">-->
|
||||||
|
<!--Our Team-->
|
||||||
|
<!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
|
||||||
|
<!--</h2>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,261 @@
|
||||||
|
import { MapCountryData } from '../../domain/map-country-data';
|
||||||
|
|
||||||
|
declare var require: any;
|
||||||
|
|
||||||
|
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { CountryOverview, OverviewData } from '../../domain/overview-data';
|
||||||
|
|
||||||
|
import * as Highcharts from 'highcharts';
|
||||||
|
import MapModule from 'highcharts/modules/map';
|
||||||
|
import { DataService } from '../../services/data.service';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
|
||||||
|
const mapWorld = require('@highcharts/map-collection/custom/world.geo.json');
|
||||||
|
const mapEurope = require('@highcharts/map-collection/custom/europe.geo.json');
|
||||||
|
|
||||||
|
MapModule(Highcharts);
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-map-overview',
|
||||||
|
templateUrl: './countries-map-overview.component.html',
|
||||||
|
// styleUrls: ['./top-menu.component.css'],
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
|
})
|
||||||
|
|
||||||
|
export class CountriesMapOverviewComponent implements OnInit {
|
||||||
|
// @Input() countries: CountryOverview[];
|
||||||
|
|
||||||
|
countries: CountryOverview[];
|
||||||
|
|
||||||
|
@Output() emitSelectedCountry: EventEmitter<any> = new EventEmitter();
|
||||||
|
|
||||||
|
activeView: string = 'publications';
|
||||||
|
|
||||||
|
Highcharts: typeof Highcharts = Highcharts;
|
||||||
|
|
||||||
|
chartMapOptions: Highcharts.Options;
|
||||||
|
|
||||||
|
mapCountryData: MapCountryData[] = [];
|
||||||
|
seriesColor: string = '#ff9800';
|
||||||
|
seriesName: string = 'OA publications';
|
||||||
|
|
||||||
|
europe: string[] = [];
|
||||||
|
|
||||||
|
constructor(private dataService: DataService,
|
||||||
|
private router: Router) {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
|
||||||
|
if (this.isEmbedRoute()) {
|
||||||
|
const body = document.getElementsByTagName('body')[0];
|
||||||
|
body.classList.remove('header_sticky');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dataService.getOverviewData().subscribe(
|
||||||
|
overviewData => {
|
||||||
|
this.countries = overviewData.countries;
|
||||||
|
this.europe = ['al', 'at', 'ba', 'be', 'by', 'bg', 'hr', 'cz', 'dk', 'ee', 'fi', 'fr', 'de', 'gr', 'hu', 'is', 'ie', 'it',
|
||||||
|
'lv', 'lt', 'lu', 'mk', 'mt', 'md', 'me', 'nl', 'no', 'pl', 'pt', 'ro', 'rs', 'si', 'sk', 'es', 'se', 'ch', 'tr', 'ua', 'gb'];
|
||||||
|
Highcharts.setOptions({
|
||||||
|
lang: {
|
||||||
|
// printChart: 'Aaaa',
|
||||||
|
thousandsSep: ','
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.loadMapCountryData();
|
||||||
|
this.loadMap(this.mapCountryData, this.seriesColor, this.seriesName, this.europe);
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// this.Highcharts.chart.get('DE').zoomTo();
|
||||||
|
// this.Highcharts.chart.mapZoom(0.2);
|
||||||
|
// this.Highcharts.get('DE').zoomTo();
|
||||||
|
}
|
||||||
|
|
||||||
|
changeView(view: string) {
|
||||||
|
this.activeView = view;
|
||||||
|
this.loadMapCountryData();
|
||||||
|
this.loadMap(this.mapCountryData, this.seriesColor, this.seriesName, this.europe);
|
||||||
|
// this.updateMapData();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadMapCountryData() {
|
||||||
|
this.mapCountryData = [];
|
||||||
|
for(let index in this.countries) {
|
||||||
|
this.mapCountryData.push(this.overviewToMapData(this.countries[index]));
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(this.mapCountryData);
|
||||||
|
}
|
||||||
|
|
||||||
|
overviewToMapData(countryOverview: CountryOverview): MapCountryData {
|
||||||
|
if (this.activeView === 'publications') {
|
||||||
|
this.seriesColor = '#5086BA';
|
||||||
|
this.seriesName = 'OA publications';
|
||||||
|
return {
|
||||||
|
id: countryOverview.country,
|
||||||
|
country: countryOverview.country,
|
||||||
|
z: countryOverview.publications.oa
|
||||||
|
};
|
||||||
|
} else if (this.activeView === 'datasets') {
|
||||||
|
this.seriesColor = '#44653D';
|
||||||
|
this.seriesName = 'OA datasets';
|
||||||
|
return {
|
||||||
|
id: countryOverview.country,
|
||||||
|
country: countryOverview.country,
|
||||||
|
z: countryOverview.datasets.oa
|
||||||
|
};
|
||||||
|
} else if (this.activeView === 'repositories') {
|
||||||
|
this.seriesColor = '#A33C3C';
|
||||||
|
this.seriesName = 'OA repositories';
|
||||||
|
return {
|
||||||
|
id: countryOverview.country,
|
||||||
|
country: countryOverview.country,
|
||||||
|
z: countryOverview.repositories.oa
|
||||||
|
};
|
||||||
|
} else if (this.activeView === 'journals') {
|
||||||
|
this.seriesColor = '#7056AF';
|
||||||
|
this.seriesName = 'OA journals';
|
||||||
|
return {
|
||||||
|
id: countryOverview.country,
|
||||||
|
country: countryOverview.country,
|
||||||
|
z: countryOverview.journals.oa
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
this.seriesColor = '#A26C0A';
|
||||||
|
this.seriesName = 'OA policies';
|
||||||
|
return {
|
||||||
|
id: countryOverview.country,
|
||||||
|
country: countryOverview.country,
|
||||||
|
z: countryOverview.policies.oa
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadMap(mapCountryData: MapCountryData[], seriesColor: string, seriesName: string, countryCodes: string[]) {
|
||||||
|
this.chartMapOptions = {
|
||||||
|
chart: {
|
||||||
|
map: mapWorld,
|
||||||
|
// map: mapEurope,
|
||||||
|
events: {
|
||||||
|
load: function() {
|
||||||
|
this.series[0].data = this.series[0].data.map((el) => {
|
||||||
|
if (countryCodes.includes(el['hc-key'])) {
|
||||||
|
el.color = 'rgba(139,151,167,0.6)';
|
||||||
|
return el;
|
||||||
|
}
|
||||||
|
return el;
|
||||||
|
});
|
||||||
|
this.update({
|
||||||
|
series: [{
|
||||||
|
data: this.series[0].data as Highcharts.SeriesMapbubbleDataOptions,
|
||||||
|
} as Highcharts.SeriesMapbubbleOptions]
|
||||||
|
});
|
||||||
|
// this.mapZoom(0.24, 4518.24, -8188.36);
|
||||||
|
this.mapZoom(0.24, this.get('Germany')['x'], this.get('Germany')['y']);
|
||||||
|
},
|
||||||
|
click: event => {
|
||||||
|
if (event.target.hasOwnProperty('point')) {
|
||||||
|
console.log(event.target['point']['name']);
|
||||||
|
// this.countrySelected(event.target['point']['name']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lang: {
|
||||||
|
thousandsSep: ',',
|
||||||
|
decimalPoint: '.'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
series: {
|
||||||
|
cursor: 'pointer',
|
||||||
|
events: {
|
||||||
|
click: event => {
|
||||||
|
this.countrySelected(event.point.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// subtitle: {
|
||||||
|
// text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world.js">World, Miller projection, medium resolution</a>'
|
||||||
|
// },
|
||||||
|
// mapNavigation: {
|
||||||
|
// enabled: true,
|
||||||
|
// buttonOptions: {
|
||||||
|
// alignTo: 'spacingBox'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
legend: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
// colorAxis: {
|
||||||
|
// min: 0
|
||||||
|
// },
|
||||||
|
series: [{
|
||||||
|
name: 'Countries',
|
||||||
|
borderColor: '#fff',
|
||||||
|
negativeColor: 'rgba(139,151,167,0.2)',
|
||||||
|
enableMouseTracking: false,
|
||||||
|
type: 'map'
|
||||||
|
}, {
|
||||||
|
name: seriesName,
|
||||||
|
type: 'mapbubble',
|
||||||
|
color: seriesColor,
|
||||||
|
marker: {
|
||||||
|
fillOpacity: 0.6,
|
||||||
|
// states: {
|
||||||
|
// hover: {
|
||||||
|
// fillOpacity: 0.9
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
joinBy: ['name', 'country'],
|
||||||
|
states: {
|
||||||
|
hover: {
|
||||||
|
brightness: 0.7,
|
||||||
|
borderWidth: 7
|
||||||
|
// color: '#a4edba',
|
||||||
|
// borderColor: 'gray'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data : mapCountryData as Highcharts.SeriesMapbubbleDataOptions,
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
style: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: '13px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
// textOutline: '1px #a1a1a1'
|
||||||
|
textOutline: '1px #000'
|
||||||
|
},
|
||||||
|
allowOverlap: true,
|
||||||
|
formatter: function() {
|
||||||
|
// return this.point.z.toFixed(1) + '%';
|
||||||
|
return this.point['z'].toLocaleString();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// minSize: 4,
|
||||||
|
// maxSize: '12%',
|
||||||
|
tooltip: {
|
||||||
|
headerFormat: '<span style="font-size: 120%; font-weight: bold; margin-bottom: 15px">{point.key}</span><br>',
|
||||||
|
// pointFormat: '{point.properties.name}: {point.z:.1f}%'
|
||||||
|
pointFormat: '{point.z} {series.name}',
|
||||||
|
}
|
||||||
|
} as Highcharts.SeriesMapbubbleOptions]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
countrySelected(countryName: string) {
|
||||||
|
this.emitSelectedCountry.emit(countryName);
|
||||||
|
}
|
||||||
|
|
||||||
|
isEmbedRoute() {
|
||||||
|
return (this.router.url === '/overview-map-embed');
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,114 @@
|
||||||
|
<table *ngIf="countries" class="uk-table uk-table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th width="12,5%" class="" (click)="sortBy('country')">
|
||||||
|
Country
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='country' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='country' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
|
||||||
|
</th>
|
||||||
|
<th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('repositories')">
|
||||||
|
<i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA repositories
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='repositories' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='repositories' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
|
||||||
|
</th>
|
||||||
|
<th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('journals')">
|
||||||
|
<i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA journals
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='journals' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='journals' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
|
||||||
|
</th>
|
||||||
|
<th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('policies')">
|
||||||
|
<i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA policies
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='policies' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='policies' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
|
||||||
|
</th>
|
||||||
|
<th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('publications')">
|
||||||
|
<i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA publications
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='publications' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='publications' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
|
||||||
|
</th>
|
||||||
|
<th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('datasets')">
|
||||||
|
<i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA data
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='datasets' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='datasets' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
|
||||||
|
</th>
|
||||||
|
<th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('software')">
|
||||||
|
<i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA software
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='software' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='software' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
|
||||||
|
</th>
|
||||||
|
<th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('otherProducts')">
|
||||||
|
<i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA other research products
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='otherProducts' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
|
||||||
|
<span *ngIf="isSortedBy && isSortedBy=='otherProducts' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<ng-container *ngIf="isPercentage">
|
||||||
|
<tr *ngFor="let countryOverview of countries">
|
||||||
|
<td class=""><a>{{countryOverview.country}}</a></td>
|
||||||
|
<td *ngIf="type=='overview'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.repositories?.percentage !=null">{{countryOverview.repositories.percentage | number}}%</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.percentage===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.journals?.percentage !=null">{{countryOverview.journals.percentage | number}}%</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.percentage===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.policies?.percentage !=null">{{countryOverview.policies.percentage | number}}%</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.percentage===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.publications?.percentage !=null">{{countryOverview.publications.percentage | number}}%</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.percentage===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.datasets?.percentage !=null">{{countryOverview.datasets.percentage | number}}%</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.percentage===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.software?.percentage !=null">{{countryOverview.software.percentage | number}}%</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.software===null || countryOverview.software.percentage===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">{{countryOverview.otherProducts.percentage | number}}%</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.percentage===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="!isPercentage">
|
||||||
|
<tr *ngFor="let countryOverview of countries">
|
||||||
|
<td class=""><a>{{countryOverview.country}}</a></td>
|
||||||
|
<td *ngIf="type=='overview'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.repositories?.oa !=null">{{countryOverview.repositories.oa | number}}</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.oa===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.journals?.oa !=null">{{countryOverview.journals.oa | number}}</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.oa===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.policies?.oa !=null">{{countryOverview.policies.oa | number}}</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.publications?.oa !=null">{{countryOverview.publications.oa | number}}</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.oa===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.datasets?.oa !=null">{{countryOverview.datasets.oa | number}}</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.oa===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.software?.oa !=null">{{countryOverview.software.oa | number}}</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.software===null || countryOverview.software.oa===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
<td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
|
||||||
|
<ng-container *ngIf="countryOverview.otherProducts?.oa !=null">{{countryOverview.otherProducts.oa | number}}</ng-container>
|
||||||
|
<ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.oa===null">--</ng-container>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</ng-container>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
||||||
|
import {CountryOverview} from '../../domain/overview-data';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-countries-table',
|
||||||
|
templateUrl: './countries-table.component.html',
|
||||||
|
// styleUrls: ['./top-menu.component.css'],
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
|
})
|
||||||
|
|
||||||
|
export class CountriesTableComponent {
|
||||||
|
|
||||||
|
@Input() isPercentage: boolean;
|
||||||
|
@Input() type: string;
|
||||||
|
@Input() countries: CountryOverview[];
|
||||||
|
|
||||||
|
isSortedBy: string;
|
||||||
|
isDescending: boolean = true;
|
||||||
|
|
||||||
|
constructor() {}
|
||||||
|
|
||||||
|
sortBy(field: string) {
|
||||||
|
|
||||||
|
if (field === this.isSortedBy) {
|
||||||
|
this.isDescending = !this.isDescending;
|
||||||
|
} else {
|
||||||
|
this.isDescending = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isSortedBy = field;
|
||||||
|
|
||||||
|
if (field !== 'country') {
|
||||||
|
if (this.isPercentage) {
|
||||||
|
if (this.isDescending) {
|
||||||
|
this.countries.sort((a, b) => b[field].percentage - a[field].percentage);
|
||||||
|
} else {
|
||||||
|
this.countries.sort((a, b) => a[field].percentage - b[field].percentage);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.isDescending) {
|
||||||
|
this.countries.sort((a, b) => b[field].oa - a[field].oa);
|
||||||
|
} else {
|
||||||
|
this.countries.sort((a, b) => a[field].oa - b[field].oa);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.isDescending) {
|
||||||
|
this.countries.sort((a, b) => (a[field] < b[field]) ? 1 : -1);
|
||||||
|
} else {
|
||||||
|
this.countries.sort((a, b) => (a[field] > b[field]) ? 1 : -1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,105 @@
|
||||||
|
<!--<ul class="uk-subnav uk-subnav-pill uk-text-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">-->
|
||||||
|
<!--<li aria-expanded="true" class="{{activeView=='absolute' ? 'uk-active' : ''}}"><a (click)="changeView('absolute')">Absolute</a></li>-->
|
||||||
|
<!--<li aria-expanded="false" class="{{activeView=='percentage' ? 'uk-active' : ''}}"><a (click)="changeView('percentage')">Percentage</a></li>-->
|
||||||
|
<!--<li aria-expanded="false" class="{{activeView=='graph' ? 'uk-active' : ''}}"><a (click)="changeView('graph')">Graph</a></li>-->
|
||||||
|
<!--</ul>-->
|
||||||
|
|
||||||
|
<!--<hr>-->
|
||||||
|
|
||||||
|
<!--<ul id="switcher-content-a-fade" class="uk-switcher uk-margin">-->
|
||||||
|
<!--<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">Hello!</li>-->
|
||||||
|
<!--<li aria-hidden="true" style="animation-duration: 200ms;" class="">Hello again!</li>-->
|
||||||
|
<!--<li aria-hidden="true" style="animation-duration: 200ms;" class="">Bazinga!</li>-->
|
||||||
|
<!--</ul>-->
|
||||||
|
|
||||||
|
<!--<div *ngIf="activeView=='absolute'" class="">-->
|
||||||
|
<!--<app-countries-table [isPercentage]="false" [type]="type" [countries]="countries"></app-countries-table>-->
|
||||||
|
<!--</div>-->
|
||||||
|
|
||||||
|
<!--<div *ngIf="activeView=='percentage'" class="">-->
|
||||||
|
<!--<app-countries-table [isPercentage]="true" [type]="type" [countries]="countries"></app-countries-table>-->
|
||||||
|
<!--</div>-->
|
||||||
|
|
||||||
|
<!--<div *ngIf="activeView=='graph'" class="">-->
|
||||||
|
<!--Graphs here....-->
|
||||||
|
<!--</div>-->
|
||||||
|
|
||||||
|
<ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
|
||||||
|
<li aria-expanded="true" class="uk-active">
|
||||||
|
<a href="#" (click)="changeView('absolute')">
|
||||||
|
<i class="fas fa-hashtag"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li aria-expanded="false" class="">
|
||||||
|
<a href="#" (click)="changeView('percentage')">
|
||||||
|
<i class="fas fa-percentage"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li aria-expanded="false" class="">
|
||||||
|
<a href="#" (click)="changeView('graph')">
|
||||||
|
<i class="fas fa-chart-line"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<ul id="switcher-content-a-fade" class="uk-switcher uk-margin">
|
||||||
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||||
|
<div class="dataContent">
|
||||||
|
<div class="actionButtons uk-text-right">
|
||||||
|
<button class="md-btn md-btn-secondary" (click)="printOverviewData()"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</button>
|
||||||
|
<button class="md-btn md-btn-secondary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download report</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="printable-section" class="dataContent">
|
||||||
|
<app-countries-table [isPercentage]="false" [type]="type" [countries]="countries"></app-countries-table>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||||
|
<div class="dataContent">
|
||||||
|
<div class="actionButtons uk-text-right">
|
||||||
|
<button class="md-btn md-btn-secondary"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</button>
|
||||||
|
<button class="md-btn md-btn-secondary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download report</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dataContent">
|
||||||
|
<app-countries-table [isPercentage]="true" [type]="type" [countries]="countries"></app-countries-table>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||||
|
<div class="dataContent">
|
||||||
|
<div class="actionButtons uk-text-right">
|
||||||
|
<button class="md-btn md-btn-secondary"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</button>
|
||||||
|
<!--<button class="md-btn md-btn-secondary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download report</button>-->
|
||||||
|
</div>
|
||||||
|
<div class="uk-grid uk-margin-top">
|
||||||
|
<div class="uk-width-1-2">
|
||||||
|
<!--<iframe style="width: 100%; height:400px" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oajournals%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Open%2520Access%2520Journals%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Publications%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22year%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%2520Data%2520available%2520for%2520the%2520Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Atrue%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%2520by%2520OpenAIRE%2520via%2520HighCharts%22%7D%7D%7D"></iframe>-->
|
||||||
|
<iframe *ngIf="oaPublicationsURL" width="100%" height="440" [src]="oaPublicationsURL"></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="uk-width-1-2">
|
||||||
|
<iframe *ngIf="oaRepositoriesURL" width="100%" height="440" [src]="oaRepositoriesURL"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="uk-grid uk-margin-top">
|
||||||
|
<div class="uk-width-1-2">
|
||||||
|
<iframe *ngIf="oaJournalsURL" width="100%" height="440" [src]="oaJournalsURL"></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="uk-width-1-2">
|
||||||
|
<iframe *ngIf="oaDatasetsURL" width="100%" height="440" [src]="oaDatasetsURL"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="uk-grid uk-margin-top">
|
||||||
|
<div class="uk-width-1-2">
|
||||||
|
<iframe *ngIf="oaSoftwareURL" width="100%" height="440" [src]="oaSoftwareURL"></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="uk-width-1-2">
|
||||||
|
<iframe *ngIf="oaOtherURL" width="100%" height="440" [src]="oaOtherURL"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Graphs here....-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
</ul>
|
|
@ -0,0 +1,59 @@
|
||||||
|
import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
|
||||||
|
import { CountryOverview } from '../../domain/overview-data';
|
||||||
|
import { printPage } from '../../shared/reusablecomponents/print-function';
|
||||||
|
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-data-view',
|
||||||
|
templateUrl: './data-view.component.html',
|
||||||
|
// styleUrls: ['./top-menu.component.css'],
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
|
})
|
||||||
|
|
||||||
|
export class DataViewComponent implements OnInit {
|
||||||
|
|
||||||
|
@Input() type: string;
|
||||||
|
@Input() countries: CountryOverview[];
|
||||||
|
|
||||||
|
activeView: string = 'absolute';
|
||||||
|
|
||||||
|
oaPublicationsURL: SafeResourceUrl;
|
||||||
|
oaRepositoriesURL: SafeResourceUrl;
|
||||||
|
oaJournalsURL: SafeResourceUrl;
|
||||||
|
oaDatasetsURL: SafeResourceUrl;
|
||||||
|
oaSoftwareURL: SafeResourceUrl;
|
||||||
|
oaOtherURL: SafeResourceUrl;
|
||||||
|
|
||||||
|
constructor(private sanitizer: DomSanitizer) {}
|
||||||
|
|
||||||
|
changeView(view: string) {
|
||||||
|
this.activeView = view;
|
||||||
|
if (view === 'graph') {
|
||||||
|
if (!this.oaPublicationsURL) {
|
||||||
|
this.oaPublicationsURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oajournals%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Open%20Access%20Journals%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Publications%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22year%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Atrue%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%7D%7D`);
|
||||||
|
}
|
||||||
|
if (!this.oaRepositoriesURL) {
|
||||||
|
this.oaRepositoriesURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Repositories%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oarepositories%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Open%20Access%20Repositories%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Repositories%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22year%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Atrue%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%7D%7D`);
|
||||||
|
}
|
||||||
|
if (!this.oaJournalsURL) {
|
||||||
|
this.oaJournalsURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oapublications%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Open%20Access%20Publications%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Publications%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22year%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Atrue%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%7D%7D`);
|
||||||
|
}
|
||||||
|
if (!this.oaDatasetsURL) {
|
||||||
|
this.oaDatasetsURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Datasets%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oadatasets%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Open%20Access%20Datasets%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Datasets%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22country%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Atrue%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%7D%7D`);
|
||||||
|
}
|
||||||
|
if (!this.oaSoftwareURL) {
|
||||||
|
this.oaSoftwareURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Software%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oasoftware%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Open%20Access%20Software%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Software%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22country%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Atrue%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%7D%7D`);
|
||||||
|
}
|
||||||
|
if (!this.oaOtherURL) {
|
||||||
|
this.oaOtherURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Other%20Research%20Products%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oaother%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Open%20Access%20Other%20Research%20Products%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Other%20Research%20Products%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22country%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Atrue%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%7D%7D`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
printOverviewData() {
|
||||||
|
printPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,259 @@
|
||||||
|
<!--MAP AND OVERVIEW NUMBERS SECTION-->
|
||||||
|
<section class="section greySection" id="sect-overview">
|
||||||
|
<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
|
||||||
|
|
||||||
|
<div class="uk-grid uk-grid-small uk-margin-bottom uk-grid-match" uk-height-viewport="offset-bottom: 20">
|
||||||
|
|
||||||
|
<div class="uk-width-large-4-5 uk-width-medium-3-4">
|
||||||
|
|
||||||
|
<!--Map Container-->
|
||||||
|
<app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="countrySelected($event)"></app-map-overview>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="uk-width-large-1-5 uk-width-medium-1-4">
|
||||||
|
<div class="md-card dark-blue-box infoBox">
|
||||||
|
<div *ngIf="!countrySelectedName" class="md-card-content">
|
||||||
|
<h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3>
|
||||||
|
<div>This tool allows you to:</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
better understand the European Open Data landscape
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
find data catalogues and datasets analyse and visualise available metadata
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
find data catalogues and datasets analyse and visualise available metadata
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
access the raw data
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="uk-text-center uk-margin-medium-top">
|
||||||
|
<button class="md-btn md-btn-primary">Learn More</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="countrySelectedName" class="md-card-content">
|
||||||
|
<h3 class="uk-text-center"><a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>{{countrySelectedName | uppercase}}</h3>
|
||||||
|
<div class="numbers">
|
||||||
|
<div class="uk-margin-medium-top">
|
||||||
|
<div class="number">18,165</div>
|
||||||
|
<div class="uk-margin-top">number of OA journals</div>
|
||||||
|
</div>
|
||||||
|
<div class="uk-margin-medium-top">
|
||||||
|
<div class="number">327</div>
|
||||||
|
<div class="uk-margin-top">number of providers</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
|
||||||
|
<div class="graphs">
|
||||||
|
<div class="uk-grid">
|
||||||
|
<div class="uk-width-1-2">
|
||||||
|
<div class="epc_chart" data-percent="65" data-bar-color="#009688">
|
||||||
|
<span class="epc_chart_text"><span class="countUpMe">65</span>%</span>
|
||||||
|
<canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="uk-text-center">Open Licences</div>
|
||||||
|
</div>
|
||||||
|
<div class="uk-width-1-2">
|
||||||
|
<div class="epc_chart" data-percent="43" data-bar-color="#009688">
|
||||||
|
<span class="epc_chart_text"><span class="countUpMe">43</span>%</span>
|
||||||
|
<canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="uk-text-center">Restricted</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
|
||||||
|
<div class="uk-text-center uk-margin-medium-top">
|
||||||
|
<button class="md-btn md-btn-primary">Visit Country Page <i class="fas fa-arrow-right uk-margin-small-left"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->
|
||||||
|
<!--<h2 class="heading_b">-->
|
||||||
|
<!--Our Team-->
|
||||||
|
<!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
|
||||||
|
<!--</h2>-->
|
||||||
|
<!--</div>-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<!--Overview cards-->
|
||||||
|
<div *ngIf="overviewData?.overview" class="uk-width-1-1 indicatorCards">
|
||||||
|
<div class="uk-grid uk-grid-small uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5 uk-margin-top uk-grid-match" data-uk-grid-margin="">
|
||||||
|
<div class="uk-row-first">
|
||||||
|
<div class="md-card">
|
||||||
|
<div class="md-card-content">
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<div class="uk-float-right uk-margin-small-right">
|
||||||
|
<span class="peity_visitors peity_data" style="display: none;">5,3,9,6,5,9,7</span>
|
||||||
|
<svg class="peity" height="28" width="48"><rect data-value="5" fill="#5086BA" x="1.3714285714285717" y="12.444444444444443" width="4.114285714285715" height="15.555555555555557"></rect><rect data-value="3" fill="#5086BA" x="8.228571428571428" y="18.666666666666668" width="4.114285714285716" height="9.333333333333332"></rect><rect data-value="9" fill="#5086BA" x="15.085714285714287" y="0" width="4.1142857142857086" height="28"></rect><rect data-value="6" fill="#5086BA" x="21.942857142857147" y="9.333333333333336" width="4.114285714285707" height="18.666666666666664"></rect><rect data-value="5" fill="#5086BA" x="28.800000000000004" y="12.444444444444443" width="4.114285714285707" height="15.555555555555557"></rect><rect data-value="9" fill="#5086BA" x="35.65714285714286" y="0" width="4.114285714285707" height="28"></rect><rect data-value="7" fill="#5086BA" x="42.51428571428572" y="6.222222222222221" width="4.114285714285707" height="21.77777777777778"></rect></svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="uk-margin-remove">
|
||||||
|
<span *ngIf="overviewData.overview.publications?.oa" class="number">{{overviewData.overview.publications.oa | number}}</span>
|
||||||
|
<span *ngIf="!overviewData.overview.publications || !overviewData.overview.publications.oa" class="number">--</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||||
|
<span class="">Number of OA publications</span>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="overviewData.overview.publications?.percentage" class="uk-margin-top">
|
||||||
|
<span class="number">{{overviewData.overview.publications.percentage | number}}%</span> are OA
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<div class="md-card">
|
||||||
|
<div class="md-card-content">
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<div class="uk-float-right uk-margin-small-right">
|
||||||
|
<span class="peity_sale peity_data" style="display: none;">5,3,9,6,5,9,7,3,5,2</span>
|
||||||
|
<svg class="peity" height="28" width="64"><polygon fill="#44653D" points="0 27.5 0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5 64 27.5"></polygon><polyline fill="none" points="0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5" stroke="#44653D" stroke-width="1" stroke-linecap="square"></polyline></svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="uk-margin-remove">
|
||||||
|
<span *ngIf="overviewData.overview.datasets?.oa" class="number">{{overviewData.overview.datasets.oa | number}}</span>
|
||||||
|
<span *ngIf="!overviewData.overview.datasets || !overviewData.overview.datasets.oa" class="number">--</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||||
|
<span class="">Number of OA datasets</span>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="overviewData.overview.datasets?.percentage" class="uk-margin-top">
|
||||||
|
<span class="number">{{overviewData.overview.datasets.percentage | number}}%</span> are OA
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<div class="md-card">
|
||||||
|
<div class="md-card-content">
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<div class="uk-float-right uk-margin-small-right">
|
||||||
|
<span class="peity_orders peity_data" style="display: none;">64/100</span>
|
||||||
|
<svg class="peity" height="24" width="24"><path d="M 12 0 A 12 12 0 1 1 2.7538410866905263 19.649087876984275 L 7.376920543345263 15.824543938492138 A 6 6 0 1 0 12 6" data-value="64" fill="#A33C3C"></path><path d="M 2.7538410866905263 19.649087876984275 A 12 12 0 0 1 11.999999999999998 0 L 11.999999999999998 6 A 6 6 0 0 0 7.376920543345263 15.824543938492138" data-value="36" fill="#eee"></path></svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="uk-margin-remove">
|
||||||
|
<span *ngIf="overviewData.overview.repositories?.oa" class="number">{{overviewData.overview.repositories.oa | number}}</span>
|
||||||
|
<span *ngIf="!overviewData.overview.repositories || !overviewData.overview.repositories.oa" class="number">--</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||||
|
<span class="">Number of OA repositories</span>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="overviewData.overview.repositories?.percentage" class="uk-margin-top">
|
||||||
|
<span class="number">{{overviewData.overview.repositories.percentage | number}}%</span> are OA
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<div class="md-card">
|
||||||
|
<div class="md-card-content">
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<div class="uk-float-right uk-margin-small-right">
|
||||||
|
<span class="peity_sale peity_data" style="display: none;">5,3,9,6,5,9,7,3,5,2</span>
|
||||||
|
<svg class="peity" height="28" width="64"><polygon fill="#7056AF" points="0 27.5 0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5 64 27.5"></polygon><polyline fill="none" points="0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5" stroke="#7056AF" stroke-width="1" stroke-linecap="square"></polyline></svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="uk-margin-remove">
|
||||||
|
<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>
|
||||||
|
<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||||
|
<span class="">Number of OA journals</span>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="overviewData.overview.journals?.percentage" class="uk-margin-top">
|
||||||
|
<span class="number">{{overviewData.overview.journals.percentage | number}}%</span> are OA
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<div class="md-card">
|
||||||
|
<div class="md-card-content">
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<div class="uk-float-right uk-margin-small-right">
|
||||||
|
<span class="peity_visitors peity_data" style="display: none;">5,3,9,6,5,9,7</span>
|
||||||
|
<svg class="peity" height="28" width="48"><rect data-value="5" fill="#A26C0A" x="1.3714285714285717" y="12.444444444444443" width="4.114285714285715" height="15.555555555555557"></rect><rect data-value="3" fill="#A26C0A" x="8.228571428571428" y="18.666666666666668" width="4.114285714285716" height="9.333333333333332"></rect><rect data-value="9" fill="#A26C0A" x="15.085714285714287" y="0" width="4.1142857142857086" height="28"></rect><rect data-value="6" fill="#A26C0A" x="21.942857142857147" y="9.333333333333336" width="4.114285714285707" height="18.666666666666664"></rect><rect data-value="5" fill="#A26C0A" x="28.800000000000004" y="12.444444444444443" width="4.114285714285707" height="15.555555555555557"></rect><rect data-value="9" fill="#A26C0A" x="35.65714285714286" y="0" width="4.114285714285707" height="28"></rect><rect data-value="7" fill="#A26C0A" x="42.51428571428572" y="6.222222222222221" width="4.114285714285707" height="21.77777777777778"></rect></svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="uk-margin-remove">
|
||||||
|
<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>
|
||||||
|
<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="uk-margin-top">
|
||||||
|
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||||
|
<span class="">Number of OA policies</span>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">
|
||||||
|
<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!--TABS SECTION-->
|
||||||
|
<section class="section greySection" id="sect-tabs">
|
||||||
|
<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
|
||||||
|
<li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>
|
||||||
|
<li aria-expanded="false"><a href="#">Open Science</a></li>
|
||||||
|
<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
|
||||||
|
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
|
||||||
|
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
|
||||||
|
<!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul *ngIf="overviewData?.countries" id="team_tabbed" class="uk-switcher">
|
||||||
|
<!--OVERVIEW tab-->
|
||||||
|
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||||
|
<div class="uk-margin tabContent">
|
||||||
|
<app-data-view [type]="'overview'" [countries]="overviewData.countries"></app-data-view>
|
||||||
|
<!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!--OPEN SCIENCE tab-->
|
||||||
|
<li aria-hidden="true" style="animation-duration: 200ms;">
|
||||||
|
<div class="uk-margin tabContent">
|
||||||
|
<app-data-view [type]="'openScience'" [countries]="overviewData.countries"></app-data-view>
|
||||||
|
<!--<app-countries-table [isPercentage]="false" [type]="'openScience'" [countries]="overviewData.countries"></app-countries-table>-->
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li aria-hidden="true">
|
||||||
|
<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li aria-hidden="true">
|
||||||
|
<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li aria-hidden="true">
|
||||||
|
<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { Component, DoCheck, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { DataService } from '../../services/data.service';
|
||||||
|
import { OverviewData } from '../../domain/overview-data';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-home',
|
||||||
|
templateUrl: './home.component.html',
|
||||||
|
// styleUrls: ['./top-menu.component.css'],
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
|
})
|
||||||
|
|
||||||
|
export class HomeComponent implements OnInit {
|
||||||
|
|
||||||
|
overviewData: OverviewData;
|
||||||
|
|
||||||
|
countrySelectedName: string = null;
|
||||||
|
|
||||||
|
constructor(private dataService: DataService) { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.dataService.getOverviewData().subscribe(
|
||||||
|
overviewData => {
|
||||||
|
this.overviewData = overviewData;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
countrySelected(countryName: string) {
|
||||||
|
console.log('Country selected: ', countryName);
|
||||||
|
this.countrySelectedName = countryName;
|
||||||
|
}
|
||||||
|
|
||||||
|
deselectCountry() {
|
||||||
|
this.countrySelectedName = null;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { OverviewData } from '../domain/overview-data';
|
||||||
|
|
||||||
|
const headerOptions = {
|
||||||
|
headers : new HttpHeaders().set('Content-Type', 'application/json')
|
||||||
|
.set('Accept', 'application/json'),
|
||||||
|
};
|
||||||
|
|
||||||
|
@Injectable ()
|
||||||
|
export class DataService {
|
||||||
|
// private _jsonURl = environment.API_ENDPOINT + '/monitor/';
|
||||||
|
// private _jsonURl = '/assets/json/';
|
||||||
|
private _jsonURl = 'http://esperos.di.uoa.gr/oss.json';
|
||||||
|
|
||||||
|
constructor(private httpClient: HttpClient) {
|
||||||
|
}
|
||||||
|
|
||||||
|
public getOverviewData(): Observable<OverviewData> {
|
||||||
|
return this.httpClient.get<OverviewData>(this._jsonURl, headerOptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
// public getOverviewData(): Observable<OverviewData> {
|
||||||
|
// return ;
|
||||||
|
// }
|
||||||
|
}
|
|
@ -0,0 +1,46 @@
|
||||||
|
/**
|
||||||
|
* Created by stefania on 7/17/17.
|
||||||
|
*/
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { environment } from '../../environments/environment';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { PageContent } from '../domain/page-content';
|
||||||
|
import { catchError } from 'rxjs/operators';
|
||||||
|
import { throwError } from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class HelpContentService {
|
||||||
|
|
||||||
|
private _helpServiceUrl = environment.FAQ_ENDPOINT;
|
||||||
|
|
||||||
|
constructor (private httpClient: HttpClient) {
|
||||||
|
}
|
||||||
|
|
||||||
|
getActivePageContent(route: string) {
|
||||||
|
const url = this._helpServiceUrl + '/page/route?q=' + route;
|
||||||
|
console.log(`sending request at: ${url}`);
|
||||||
|
|
||||||
|
return this.httpClient.get<PageContent>(url).pipe(catchError(this.handleError));
|
||||||
|
}
|
||||||
|
|
||||||
|
private extractData(res: Response) {
|
||||||
|
const body = res;
|
||||||
|
return body.body || { };
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleError (error: Response | any) {
|
||||||
|
// In a real world app, we might use a remote logging infrastructure
|
||||||
|
// We'd also dig deeper into the error to get a better message
|
||||||
|
let errMsg = '';
|
||||||
|
console.log(error);
|
||||||
|
if (error instanceof Response) {
|
||||||
|
const body = error.text() || '';
|
||||||
|
errMsg = `${error.status} - ${error.statusText || ''} ${body}`;
|
||||||
|
} else {
|
||||||
|
errMsg = (error.message) ? error.message :
|
||||||
|
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
|
||||||
|
console.error(errMsg); // log to console instead
|
||||||
|
}
|
||||||
|
return throwError(errMsg);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { Component, DoCheck, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-footer',
|
||||||
|
templateUrl: './footer.component.html',
|
||||||
|
// styleUrls: ['./footer.component.css'],
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
|
})
|
||||||
|
|
||||||
|
export class FooterComponent {
|
||||||
|
}
|
|
@ -0,0 +1,140 @@
|
||||||
|
/**
|
||||||
|
* angular2-cookie-law
|
||||||
|
*
|
||||||
|
* Copyright 2016-2017, @andreasonny83, All rights reserved.
|
||||||
|
*
|
||||||
|
* @author: @andreasonny83 <andreasonny83@gmail.com>
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
DomSanitizer,
|
||||||
|
SafeHtml,
|
||||||
|
} from '@angular/platform-browser';
|
||||||
|
|
||||||
|
import {
|
||||||
|
CookieLawService,
|
||||||
|
} from './cookie-law.service';
|
||||||
|
import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';
|
||||||
|
import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
|
||||||
|
|
||||||
|
// import {
|
||||||
|
// closeIcon,
|
||||||
|
// } from './icons';
|
||||||
|
|
||||||
|
export type CookieLawPosition = 'top' | 'bottom';
|
||||||
|
export type CookieLawAnimation = 'topIn' | 'bottomIn' | 'topOut' | 'bottomOut';
|
||||||
|
export type CookieLawTarget = '_blank' | '_self';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'cookie-law',
|
||||||
|
// encapsulation: ViewEncapsulation.None,
|
||||||
|
animations: [
|
||||||
|
trigger('state', [
|
||||||
|
state('bottomOut', style({ transform: 'translateY(100%)' })),
|
||||||
|
state('topOut', style({ transform: 'translateY(-100%)' })),
|
||||||
|
state('*', style({ transform: 'translateY(0)' })),
|
||||||
|
|
||||||
|
transition('void => topIn', [
|
||||||
|
style({ transform: 'translateY(-100%)' }),
|
||||||
|
animate('1000ms ease-in-out'),
|
||||||
|
]),
|
||||||
|
|
||||||
|
transition('void => bottomIn', [
|
||||||
|
style({ transform: 'translateY(100%)' }),
|
||||||
|
animate('1000ms ease-in-out'),
|
||||||
|
]),
|
||||||
|
|
||||||
|
transition('* => *', animate('1000ms ease-out')),
|
||||||
|
])
|
||||||
|
],
|
||||||
|
styleUrls: [ './cookie-law.css' ],
|
||||||
|
templateUrl: './cookie-law.html',
|
||||||
|
})
|
||||||
|
export class CookieLawComponent implements OnInit {
|
||||||
|
public cookieLawSeen: boolean;
|
||||||
|
|
||||||
|
@Input('learnMore')
|
||||||
|
get learnMore() { return this._learnMore; }
|
||||||
|
set learnMore(value: string) {
|
||||||
|
this._learnMore = (value !== null && `${value}` !== 'false') ? value : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Input('target')
|
||||||
|
get target() { return this._target; }
|
||||||
|
set target(value: CookieLawTarget) {
|
||||||
|
this._target = (value !== null && `${value}` !== 'false' &&
|
||||||
|
(`${value}` === '_blank' || `${value}` === '_self')
|
||||||
|
) ? value : '_blank';
|
||||||
|
}
|
||||||
|
|
||||||
|
@Input('position')
|
||||||
|
get position() { return this._position; }
|
||||||
|
set position(value: CookieLawPosition) {
|
||||||
|
this._position = (value !== null && `${value}` !== 'false' &&
|
||||||
|
(`${value}` === 'top' || `${value}` === 'bottom')
|
||||||
|
) ? value : 'bottom';
|
||||||
|
}
|
||||||
|
|
||||||
|
@Output('isSeen')
|
||||||
|
private isSeenEvt: EventEmitter<boolean>;
|
||||||
|
|
||||||
|
@HostBinding('attr.seen')
|
||||||
|
public isSeen: boolean;
|
||||||
|
|
||||||
|
private animation: CookieLawAnimation;
|
||||||
|
private closeSvg: SafeHtml;
|
||||||
|
private currentStyles: {};
|
||||||
|
private _learnMore: string;
|
||||||
|
private _target: CookieLawTarget;
|
||||||
|
private _position: CookieLawPosition;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private _service: CookieLawService,
|
||||||
|
private domSanitizer: DomSanitizer,
|
||||||
|
) {
|
||||||
|
this.isSeenEvt = new EventEmitter<boolean>();
|
||||||
|
this.animation = 'topIn';
|
||||||
|
this._position = 'bottom';
|
||||||
|
this.cookieLawSeen = this._service.seen();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
if (typeof document !== 'undefined') {
|
||||||
|
this.animation = this.position === 'bottom' ? 'bottomIn' : 'topIn';
|
||||||
|
|
||||||
|
this.closeSvg = `
|
||||||
|
<span class="clickable uk-icon">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1">
|
||||||
|
<path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
|
||||||
|
<path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
|
||||||
|
</svg>
|
||||||
|
</span>`;
|
||||||
|
|
||||||
|
if (this.cookieLawSeen) {
|
||||||
|
this.isSeen = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.currentStyles = {
|
||||||
|
'top': this.position === 'top' ? '0' : null,
|
||||||
|
'bottom': this.position === 'top' ? 'initial' : null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
afterDismissAnimation(evt: AnimationEvent) {
|
||||||
|
if (evt.toState === 'topOut' ||
|
||||||
|
evt.toState === 'bottomOut') {
|
||||||
|
this.isSeen = true;
|
||||||
|
this.isSeenEvt.emit(this.isSeen);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public dismiss(evt?: MouseEvent): void {
|
||||||
|
if (evt) {
|
||||||
|
evt.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
this._service.storeCookie();
|
||||||
|
this.animation = this.position === 'top' ? 'topOut' : 'bottomOut';
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,77 @@
|
||||||
|
.cookie-law-wrapper a {
|
||||||
|
color: #bbb;
|
||||||
|
-webkit-transition: color .2s;
|
||||||
|
transition: color .2s;
|
||||||
|
}
|
||||||
|
.cookie-law-wrapper a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.cookie-law-wrapper a:hover svg {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
.cookie-law-wrapper {
|
||||||
|
background: #333;
|
||||||
|
color: #bbb;
|
||||||
|
display: block;
|
||||||
|
/*font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 200;
|
||||||
|
line-height: 20px;*/
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 100;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.dismiss {
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.dismiss svg {
|
||||||
|
display: block;
|
||||||
|
fill: #bbb;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
-webkit-transition: fill .2s;
|
||||||
|
transition: fill .2s;
|
||||||
|
}
|
||||||
|
.copy {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px 60px 10px 10px;
|
||||||
|
}
|
||||||
|
.copy span {
|
||||||
|
color: #fff;
|
||||||
|
/*font-weight: 400;*/
|
||||||
|
}
|
||||||
|
.copy a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.copy a:active, .copy a:hover {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
/* For bigger devices: */
|
||||||
|
.copy {
|
||||||
|
padding: 20px 60px 20px 20px;
|
||||||
|
/*font-size: 18px;
|
||||||
|
line-height: 24px;*/
|
||||||
|
}
|
||||||
|
.dismiss {
|
||||||
|
top: 10px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
.dismiss svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
<div class="cookie-law-wrapper"
|
||||||
|
[ngStyle]="currentStyles"
|
||||||
|
*ngIf="!cookieLawSeen"
|
||||||
|
[@state]="animation"
|
||||||
|
(@state.done)="afterDismissAnimation($event)">
|
||||||
|
|
||||||
|
<div class="copy">
|
||||||
|
<span #ref><ng-content></ng-content></span>
|
||||||
|
<span *ngIf="ref.childNodes.length == 0">
|
||||||
|
By continuing to browse the site, you're agreeing to our use of cookies.
|
||||||
|
<span *ngIf="learnMore">
|
||||||
|
Learn more in our <a [href]="learnMore" [target]="target">privacy policy</a>.
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<a href="#" role="button" class="dismiss" (click)="dismiss($event)">
|
||||||
|
<span class="clickable uk-icon">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1">
|
||||||
|
<path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
|
||||||
|
<path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,24 @@
|
||||||
|
/**
|
||||||
|
* angular2-cookie-law
|
||||||
|
*
|
||||||
|
* Copyright 2016-2017, @andreasonny83, All rights reserved.
|
||||||
|
*
|
||||||
|
* @author: @andreasonny83 <andreasonny83@gmail.com>
|
||||||
|
*/
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { CookieLawComponent } from './cookie-law.component';
|
||||||
|
import { CookieLawService } from './cookie-law.service';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [ CommonModule ],
|
||||||
|
declarations: [ CookieLawComponent ],
|
||||||
|
providers: [ CookieLawService ],
|
||||||
|
exports: [ CookieLawComponent ]
|
||||||
|
})
|
||||||
|
export class CookieLawModule { }
|
||||||
|
|
||||||
|
export {
|
||||||
|
CookieLawComponent,
|
||||||
|
CookieLawService
|
||||||
|
};
|
|
@ -0,0 +1,61 @@
|
||||||
|
/**
|
||||||
|
* angular2-cookie-law
|
||||||
|
*
|
||||||
|
* Copyright 2016-2017, @andreasonny83, All rights reserved.
|
||||||
|
*
|
||||||
|
* @author: @andreasonny83 <andreasonny83@gmail.com>
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class CookieLawService {
|
||||||
|
|
||||||
|
|
||||||
|
seen(): boolean {
|
||||||
|
return this.cookieExists('cookieLawSeen');
|
||||||
|
}
|
||||||
|
|
||||||
|
storeCookie(): void {
|
||||||
|
return this.setCookie('cookieLawSeen');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* try to read a saved cookie
|
||||||
|
*
|
||||||
|
* @param {string} name [the cookie name]
|
||||||
|
*
|
||||||
|
* @return {string} [the cookie's value]
|
||||||
|
*/
|
||||||
|
private cookieExists(name: string): boolean {
|
||||||
|
if (typeof document !== 'undefined') {
|
||||||
|
let ca: Array<string> = document.cookie.split(';');
|
||||||
|
let caLen: number = ca.length;
|
||||||
|
let cookieName = name + '=';
|
||||||
|
let c: string;
|
||||||
|
|
||||||
|
for (let i: number = 0; i < caLen; i += 1) {
|
||||||
|
c = ca[i].replace(/^\s\+/g, '');
|
||||||
|
if (c.indexOf(cookieName) !== -1) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* store a new cookie in the browser
|
||||||
|
*
|
||||||
|
* @param {string} name [the name for the cookie]
|
||||||
|
*/
|
||||||
|
private setCookie(name: string): void {
|
||||||
|
if (typeof document !== 'undefined') {
|
||||||
|
let d:Date = new Date();
|
||||||
|
d.setTime(d.getTime() + 3*30 * 24 * 60 * 60 * 1000); // in 3 months
|
||||||
|
let expires:string = `expires=${d.toUTCString()}`;
|
||||||
|
|
||||||
|
document.cookie = encodeURIComponent(name) + '=true; path=/; expires='+expires+';';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
* angular2-cookie-law
|
||||||
|
*
|
||||||
|
* Copyright 2016-2017, @andreasonny83, All rights reserved.
|
||||||
|
*
|
||||||
|
* @author: @andreasonny83 <andreasonny83@gmail.com>
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const closeIcon: string = `
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path d="M377.047 184.198q0 8.26-6.037 14.297L313.505 256l57.505 57.505q6.037 6.037 6.037 14.297 0 8.578-6.037 14.615l-28.593 28.593q-6.037 6.037-14.615 6.037-8.26 0-14.297-6.037L256 313.505l-57.505 57.505q-6.037 6.037-14.297 6.037-8.578 0-14.615-6.037l-28.593-28.593q-6.037-6.037-6.037-14.615 0-8.26 6.037-14.297L198.495 256l-57.505-57.505q-6.037-6.037-6.037-14.297 0-8.578 6.037-14.615l28.593-28.593q6.037-6.037 14.615-6.037 8.26 0 14.297 6.037L256 198.495l57.505-57.505q6.037-6.037 14.297-6.037 8.578 0 14.615 6.037l28.593 28.593q6.037 6.037 6.037 14.615zM500 256q0-66.401-32.724-122.477-32.724-56.075-88.799-88.799Q322.401 12 256 12q-66.401 0-122.477 32.724-56.075 32.724-88.799 88.799Q12 189.599 12 256q0 66.401 32.724 122.477 32.724 56.075 88.799 88.799Q189.599 500 256 500q66.401 0 122.477-32.724 56.075-32.724 88.799-88.799Q500 322.401 500 256z"></path>
|
||||||
|
</svg>
|
||||||
|
`;
|
|
@ -0,0 +1,67 @@
|
||||||
|
/**
|
||||||
|
* Created by stefania on 7/17/17.
|
||||||
|
*/
|
||||||
|
import { Component, Input, OnInit } from '@angular/core';
|
||||||
|
import { Content, PageContent } from '../../domain/page-content';
|
||||||
|
import { HelpContentService } from '../../services/help-content.service';
|
||||||
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'help-content',
|
||||||
|
template: `
|
||||||
|
<ng-template [ngIf]="contents && contents.length>0">
|
||||||
|
<ng-template ngFor let-content [ngForOf]="contents">
|
||||||
|
<div [innerHTML]="content.content" class="uk-margin-medium-bottom"></div>
|
||||||
|
</ng-template>
|
||||||
|
</ng-template>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
|
||||||
|
export class HelpContentComponent implements OnInit {
|
||||||
|
|
||||||
|
@Input('position')
|
||||||
|
position: string;
|
||||||
|
|
||||||
|
contents: Content[];
|
||||||
|
errorMessage: string = null;
|
||||||
|
|
||||||
|
constructor(private _helpContentService: HelpContentService, private route: ActivatedRoute, private router: Router) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.errorMessage = null;
|
||||||
|
setTimeout(() => {
|
||||||
|
this._helpContentService.getActivePageContent( this.router.url ).subscribe(
|
||||||
|
pageContent => this.shiftThroughContent(pageContent),
|
||||||
|
error => this.handleError(<any>error)
|
||||||
|
);
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
shiftThroughContent(pageContent: PageContent) {
|
||||||
|
this.contents = pageContent.content[this.position];
|
||||||
|
/*console.log(`help-service for ${this.router.url} -> ${this.position} responded: ${JSON.stringify(this.contents)}`);*/
|
||||||
|
}
|
||||||
|
|
||||||
|
isPresent() {
|
||||||
|
return (this.contents && this.contents.length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleError(error) {
|
||||||
|
this.errorMessage = 'System error retrieving page content (Server responded: ' + error + ')';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'aside-help-content',
|
||||||
|
template: `
|
||||||
|
<ng-template [ngIf]="contents && contents.length>0">
|
||||||
|
<ng-template ngFor let-content [ngForOf]="contents">
|
||||||
|
<div [innerHTML]="content.content" class="uk-card uk-card-body uk-card-default sidemenu uk-margin-bottom"></div>
|
||||||
|
</ng-template>
|
||||||
|
</ng-template>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class AsideHelpContentComponent extends HelpContentComponent {
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,73 @@
|
||||||
|
/**
|
||||||
|
* Created by stefania on 4/6/17.
|
||||||
|
*/
|
||||||
|
import {AfterContentInit, AfterViewInit, Component, ElementRef, Input, OnChanges, ViewChild} from "@angular/core";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "read-more",
|
||||||
|
template: `
|
||||||
|
<div [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'" #readMoreDiv>
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</div>
|
||||||
|
<a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">View {{isCollapsed ? 'more' : 'less'}}...</a>
|
||||||
|
`,
|
||||||
|
styles: [`
|
||||||
|
div.collapsed {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
`]
|
||||||
|
})
|
||||||
|
export class ReadMoreComponent implements AfterContentInit {
|
||||||
|
//the text that need to be put in the container
|
||||||
|
//@Input() text: string;
|
||||||
|
//maximum height of the container
|
||||||
|
@Input("maxHeight") maxHeight: number = 100;
|
||||||
|
@ViewChild("readMoreDiv")
|
||||||
|
readMoreDiv: ElementRef;
|
||||||
|
//set these to false to get the height of the expended container
|
||||||
|
public isCollapsed: boolean = false;
|
||||||
|
public isCollapsable: boolean = false;
|
||||||
|
|
||||||
|
constructor(public elementRef: ElementRef) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterContentInit() {
|
||||||
|
setTimeout(_ => {
|
||||||
|
let currentHeight = this.readMoreDiv.nativeElement.offsetHeight;
|
||||||
|
//collapsable only if the contents make container exceed the max height
|
||||||
|
if (currentHeight > this.maxHeight) {
|
||||||
|
this.isCollapsed = true;
|
||||||
|
this.isCollapsable = true;
|
||||||
|
} else {
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "read-more-text",
|
||||||
|
template: `
|
||||||
|
<div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'" #readMoreDiv>
|
||||||
|
<!--{{text}}-->
|
||||||
|
</div>
|
||||||
|
<a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">View {{isCollapsed ? 'more' : 'less'}}...</a>
|
||||||
|
`,
|
||||||
|
styles: [`
|
||||||
|
div.collapsed {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
`]
|
||||||
|
})
|
||||||
|
export class ReadMoreTextComponent extends ReadMoreComponent implements OnChanges, AfterViewInit {
|
||||||
|
@Input()
|
||||||
|
text: string = "";
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.ngAfterContentInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(): void {
|
||||||
|
this.ngAfterContentInit();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,53 @@
|
||||||
|
/**
|
||||||
|
* Created by stefania on 4/6/17.
|
||||||
|
*/
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
|
import { HttpClientModule } from '@angular/common/http';
|
||||||
|
import { AsideHelpContentComponent, HelpContentComponent } from './help-content.component';
|
||||||
|
import { HelpContentService } from '../../services/help-content.service';
|
||||||
|
// import { ModalModule, TabsModule } from 'ngx-bootstrap';
|
||||||
|
import { FooterComponent } from '../footer/footer.component';
|
||||||
|
import { ReadMoreComponent, ReadMoreTextComponent } from './read-more.component';
|
||||||
|
import { TopmenuComponent } from '../topmenu/top-menu.component';
|
||||||
|
|
||||||
|
const myGroups = [
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
RouterModule,
|
||||||
|
// TabsModule.forRoot(),
|
||||||
|
// ModalModule.forRoot(),
|
||||||
|
FormsModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
HttpClientModule,
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
HelpContentComponent,
|
||||||
|
AsideHelpContentComponent,
|
||||||
|
TopmenuComponent,
|
||||||
|
FooterComponent,
|
||||||
|
ReadMoreComponent,
|
||||||
|
ReadMoreTextComponent,
|
||||||
|
...myGroups
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
HelpContentComponent,
|
||||||
|
AsideHelpContentComponent,
|
||||||
|
TopmenuComponent,
|
||||||
|
FooterComponent,
|
||||||
|
...myGroups,
|
||||||
|
ReadMoreComponent,
|
||||||
|
ReadMoreTextComponent
|
||||||
|
],
|
||||||
|
providers: [
|
||||||
|
HelpContentService
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
export class ReusableComponentsModule {
|
||||||
|
}
|
|
@ -0,0 +1,54 @@
|
||||||
|
<header id="header_main">
|
||||||
|
<nav class="uk-navbar">
|
||||||
|
<div class="uk-container uk-container-large uk-container-center">
|
||||||
|
<a href="#" class="uk-float-left" id="mobile_navigation_toggle" data-uk-offcanvas="{target:'#mobile_navigation'}"><i class="material-icons"></i></a>
|
||||||
|
<a href="/" class="uk-navbar-brand">
|
||||||
|
<img src="https://www.openaire.eu/images/OpenAIRE_branding/Logo_Horizontal.png" alt="" width="152" height="30">
|
||||||
|
</a>
|
||||||
|
<div class="uk-navbar-flip">
|
||||||
|
<ul class="uk-navbar-nav" id="main_navigation">
|
||||||
|
<li>
|
||||||
|
<a href="#sect-overview">
|
||||||
|
About
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#sect-features">
|
||||||
|
Help
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#sect-gallery">
|
||||||
|
Sign In
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id="mobile_navigation" class="uk-offcanvas">
|
||||||
|
<div class="uk-offcanvas-bar">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#sect-overview" data-uk-smooth-scroll="{offset: 48}">
|
||||||
|
<span class="menu_icon"><i class="material-icons"></i></span>
|
||||||
|
<span class="menu_title">About</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#sect-features" data-uk-smooth-scroll="{offset: 48}">
|
||||||
|
<span class="menu_icon"><i class="material-icons"></i></span>
|
||||||
|
<span class="menu_title">Help</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#sect-gallery" data-uk-smooth-scroll="{offset: 48}">
|
||||||
|
<span class="menu_icon"><i class="material-icons"></i></span>
|
||||||
|
<span class="menu_title">Sign In</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { Component, DoCheck, OnInit, ViewEncapsulation } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-top-menu',
|
||||||
|
templateUrl: './top-menu.component.html',
|
||||||
|
// styleUrls: ['./top-menu.component.css'],
|
||||||
|
encapsulation: ViewEncapsulation.None
|
||||||
|
})
|
||||||
|
|
||||||
|
export class TopmenuComponent {
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,219 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
font: 400 14px/19px 'Open Sans';
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uk-container-large {
|
||||||
|
max-width: 1600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uk-container-expand {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sect-overview, #sect-tabs {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greySection {
|
||||||
|
background-color: #F0F0F0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapContainer {
|
||||||
|
/*background: #F7F7F7 0% 0% no-repeat padding-box;*/
|
||||||
|
/*border: 1px solid #E0E0E0;*/
|
||||||
|
/*opacity: 0.4;*/
|
||||||
|
/*padding: 15px;*/
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapContainerEmbed {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
/*height: 398px;*/
|
||||||
|
border: 1px solid #707070;
|
||||||
|
/*margin: 15px;*/
|
||||||
|
position: absolute;
|
||||||
|
height: 88%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapControls {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uk-nav-label {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: -1px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uk-nav-horizontal li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapControls .text {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapControls .text.active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-blue-box {
|
||||||
|
background: #002D60 0% 0% no-repeat padding-box;
|
||||||
|
border: 1px solid #707070;
|
||||||
|
border-radius: 2px;
|
||||||
|
opacity: 1;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoBox {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoBox h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoBox ul {
|
||||||
|
padding-left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoBox ul li {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-blue-box h3 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.backToOriginalInfoBox, a.backToOriginalInfoBox:hover, a.backToOriginalInfoBox:focus {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greyBoldDivider {
|
||||||
|
border: 1px solid #707070;
|
||||||
|
}
|
||||||
|
|
||||||
|
.numbers .number {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicatorCards .md-card {
|
||||||
|
box-shadow: 0px 2px 6px #00000038;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********* Mock chart for country **********/
|
||||||
|
.epc_chart {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.epc_chart_text {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
text-align: center;
|
||||||
|
font: 400 20px/110px Roboto,sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/********************************************/
|
||||||
|
|
||||||
|
.md-btn-primary {
|
||||||
|
background: #1F73F7 0% 0% no-repeat padding-box;
|
||||||
|
box-shadow: 0px 3px 6px #00000029;
|
||||||
|
border-radius: 26px;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: left;
|
||||||
|
font: 14px/19px Open Sans;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-transform: none;
|
||||||
|
/*padding: 10px 30px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-btn-secondary {
|
||||||
|
background: #034DA1 0% 0% no-repeat padding-box;
|
||||||
|
box-shadow: 0px 2px 6px #00000038;
|
||||||
|
border-radius: 23px;
|
||||||
|
opacity: 1;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: left;
|
||||||
|
font: 14px/19px Open Sans;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-transform: none;
|
||||||
|
/*padding: 7px 30px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sect-tabs .uk-tab > li > a {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#team_tabbed {
|
||||||
|
background: #FBFBFB 0% 0% no-repeat padding-box;
|
||||||
|
border: 1px solid #E0E0E0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabContent {
|
||||||
|
padding: 30px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uk-tab {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uk-tab > li.uk-active > a {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
/*.uk-tab-center.uk-tab {*/
|
||||||
|
|
||||||
|
/*position: relative;*/
|
||||||
|
/*right: 50%;*/
|
||||||
|
/*border: none;*/
|
||||||
|
/*float: right;*/
|
||||||
|
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
.uk-subnav-pill > .uk-active > * {
|
||||||
|
background: #1F73F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataView.uk-subnav-pill > * > * {
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabContent hr {
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataContent {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: 1px solid #E0E0E0;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
File diff suppressed because one or more lines are too long
Binary file not shown.
After Width: | Height: | Size: 453 KiB |
|
@ -0,0 +1,165 @@
|
||||||
|
|
||||||
|
// variables
|
||||||
|
var $body = $('body'),
|
||||||
|
$html = $('html'),
|
||||||
|
$window = $(window),
|
||||||
|
$document = $(document),
|
||||||
|
$header_main = $('#header_main'),
|
||||||
|
header_main_height = $header_main.height(),
|
||||||
|
easing_swiftOut = [ 0.35,0,0.25,1 ];
|
||||||
|
bez_easing_swiftOut = $.bez(easing_swiftOut);
|
||||||
|
|
||||||
|
/* Detect hi-res devices */
|
||||||
|
function isHighDensity() {
|
||||||
|
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Dynamically loading an external JavaScript or CSS file
|
||||||
|
* http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
|
||||||
|
*/
|
||||||
|
function loadjscssfile(b,c){if("js"==c){var a=document.createElement("script");a.setAttribute("type","text/javascript");a.setAttribute("src",b)}else"css"==c&&(a=document.createElement("link"),a.setAttribute("rel","stylesheet"),a.setAttribute("type","text/css"),a.setAttribute("href",b));"undefined"!=typeof a&&document.getElementsByTagName("head")[0].appendChild(a)};
|
||||||
|
|
||||||
|
/* detect touch devices */
|
||||||
|
function isTouchDevice() {
|
||||||
|
return 'ontouchstart' in document.documentElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
$(function() {
|
||||||
|
// header main
|
||||||
|
altair_header_main.init();
|
||||||
|
// inputs
|
||||||
|
altair_md.init();
|
||||||
|
});
|
||||||
|
|
||||||
|
$window.on('load',function () {
|
||||||
|
if(isHighDensity()) {
|
||||||
|
loadjscssfile("bower_components/dense/src/dense.js", "js");
|
||||||
|
// enable hires images
|
||||||
|
$('img').dense({
|
||||||
|
glue: "@"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (isTouchDevice()) {
|
||||||
|
// fastClick (touch devices)
|
||||||
|
FastClick.attach(document.body);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
altair_header_main = {
|
||||||
|
init: function () {
|
||||||
|
// sticky header
|
||||||
|
altair_header_main.sticky_header();
|
||||||
|
// main navigation
|
||||||
|
altair_header_main.main_navigation();
|
||||||
|
},
|
||||||
|
sticky_header: function () {
|
||||||
|
$body.addClass('header_sticky');
|
||||||
|
$(window).on("scroll touchmove", function () {
|
||||||
|
$body.toggleClass('header_shadow', $(document).scrollTop() > 0);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
main_navigation: function() {
|
||||||
|
$('#main_navigation').onePageNav({
|
||||||
|
currentClass: 'current_active',
|
||||||
|
changeHash: false,
|
||||||
|
scrollSpeed: 840,
|
||||||
|
scrollThreshold: 0.4,
|
||||||
|
filter: '',
|
||||||
|
scrollOffset: -header_main_height,
|
||||||
|
easing: bez_easing_swiftOut,
|
||||||
|
begin: function() {
|
||||||
|
//Hack so you can click other menu items after the initial click (IOS)
|
||||||
|
//$('body').append('<div id="device-dummy" style="height: 1px;"></div>');
|
||||||
|
},
|
||||||
|
end: function() {
|
||||||
|
$('#device-dummy').remove();
|
||||||
|
},
|
||||||
|
scrollChange: function($currentListItem) {
|
||||||
|
//I get fired when you enter a section and I pass the list item of the section
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
altair_md = {
|
||||||
|
init: function () {
|
||||||
|
altair_md.inputs();
|
||||||
|
},
|
||||||
|
inputs: function(parent) {
|
||||||
|
var $mdInput = (typeof parent === 'undefined') ? $('.md-input') : $(parent).find('.md-input');
|
||||||
|
$mdInput.each(function() {
|
||||||
|
if(!$(this).closest('.md-input-wrapper').length) {
|
||||||
|
var $this = $(this),
|
||||||
|
extraClass = '';
|
||||||
|
|
||||||
|
if($this.is('[class*="uk-form-width-"]')) {
|
||||||
|
var elClasses = $this.attr('class').split (' ');
|
||||||
|
for(var i = 0; i < elClasses.length; i++){
|
||||||
|
var classPart = elClasses[i].substr(0,14);
|
||||||
|
if(classPart == "uk-form-width-"){
|
||||||
|
var extraClass = elClasses[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if( $this.prev('label').length ) {
|
||||||
|
$this.prev('label').andSelf().wrapAll('<div class="md-input-wrapper"/>');
|
||||||
|
} else if($this.siblings('[data-uk-form-password]').length) {
|
||||||
|
$this.siblings('[data-uk-form-password]').andSelf().wrapAll('<div class="md-input-wrapper"/>');
|
||||||
|
} else {
|
||||||
|
$this.wrap('<div class="md-input-wrapper"/>');
|
||||||
|
}
|
||||||
|
$this.closest('.md-input-wrapper').append('<span class="md-input-bar '+extraClass+'"/>');
|
||||||
|
|
||||||
|
altair_md.update_input($this);
|
||||||
|
}
|
||||||
|
$body
|
||||||
|
.on('focus', '.md-input', function() {
|
||||||
|
$(this).closest('.md-input-wrapper').addClass('md-input-focus')
|
||||||
|
})
|
||||||
|
.on('blur', '.md-input', function() {
|
||||||
|
$(this).closest('.md-input-wrapper').removeClass('md-input-focus');
|
||||||
|
if(!$(this).hasClass('label-fixed')) {
|
||||||
|
if($(this).val() != '') {
|
||||||
|
$(this).closest('.md-input-wrapper').addClass('md-input-filled')
|
||||||
|
} else {
|
||||||
|
$(this).closest('.md-input-wrapper').removeClass('md-input-filled')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.on('change', '.md-input', function() {
|
||||||
|
altair_md.update_input($(this));
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
update_input: function(object) {
|
||||||
|
// clear wrapper classes
|
||||||
|
object.closest('.uk-input-group').removeClass('uk-input-group-danger uk-input-group-success');
|
||||||
|
object.closest('.md-input-wrapper').removeClass('md-input-wrapper-danger md-input-wrapper-success md-input-wrapper-disabled');
|
||||||
|
|
||||||
|
if(object.hasClass('md-input-danger')) {
|
||||||
|
if(object.closest('.uk-input-group').length) {
|
||||||
|
object.closest('.uk-input-group').addClass('uk-input-group-danger')
|
||||||
|
}
|
||||||
|
object.closest('.md-input-wrapper').addClass('md-input-wrapper-danger')
|
||||||
|
}
|
||||||
|
if(object.hasClass('md-input-success')) {
|
||||||
|
if(object.closest('.uk-input-group').length) {
|
||||||
|
object.closest('.uk-input-group').addClass('uk-input-group-success')
|
||||||
|
}
|
||||||
|
object.closest('.md-input-wrapper').addClass('md-input-wrapper-success')
|
||||||
|
}
|
||||||
|
if(object.prop('disabled')) {
|
||||||
|
object.closest('.md-input-wrapper').addClass('md-input-wrapper-disabled')
|
||||||
|
}
|
||||||
|
if(object.hasClass('label-fixed')) {
|
||||||
|
object.closest('.md-input-wrapper').addClass('md-input-filled')
|
||||||
|
}
|
||||||
|
if(object.val() != '') {
|
||||||
|
object.closest('.md-input-wrapper').addClass('md-input-filled')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1 @@
|
||||||
|
var $body=$("body"),$html=$("html"),$window=$(window),$document=$(document),$header_main=$("#header_main"),header_main_height=$header_main.height(),easing_swiftOut=[.35,0,.25,1];function isHighDensity(){return window.matchMedia&&(window.matchMedia("only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)").matches||window.matchMedia("only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)").matches)||window.devicePixelRatio&&1.3<window.devicePixelRatio}function loadjscssfile(e,i){if("js"==i){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("src",e)}else"css"==i&&((t=document.createElement("link")).setAttribute("rel","stylesheet"),t.setAttribute("type","text/css"),t.setAttribute("href",e));void 0!==t&&document.getElementsByTagName("head")[0].appendChild(t)}function isTouchDevice(){return"ontouchstart"in document.documentElement}bez_easing_swiftOut=$.bez(easing_swiftOut),$(function(){altair_header_main.init(),altair_md.init()}),$window.on("load",function(){isHighDensity()&&(loadjscssfile("bower_components/dense/src/dense.js","js"),$("img").dense({glue:"@"})),isTouchDevice()&&FastClick.attach(document.body)}),altair_header_main={init:function(){altair_header_main.sticky_header(),altair_header_main.main_navigation()},sticky_header:function(){$body.addClass("header_sticky"),$(window).on("scroll touchmove",function(){$body.toggleClass("header_shadow",0<$(document).scrollTop())})},main_navigation:function(){$("#main_navigation").onePageNav({currentClass:"current_active",changeHash:!1,scrollSpeed:840,scrollThreshold:.4,filter:"",scrollOffset:-header_main_height,easing:bez_easing_swiftOut,begin:function(){},end:function(){$("#device-dummy").remove()},scrollChange:function(e){}})}},altair_md={init:function(){altair_md.inputs()},inputs:function(e){(void 0===e?$(".md-input"):$(e).find(".md-input")).each(function(){if(!$(this).closest(".md-input-wrapper").length){var e=$(this),i="";if(e.is('[class*="uk-form-width-"]'))for(var t=e.attr("class").split(" "),n=0;n<t.length;n++){if("uk-form-width-"==t[n].substr(0,14))i=t[n]}e.prev("label").length?e.prev("label").andSelf().wrapAll('<div class="md-input-wrapper"/>'):e.siblings("[data-uk-form-password]").length?e.siblings("[data-uk-form-password]").andSelf().wrapAll('<div class="md-input-wrapper"/>'):e.wrap('<div class="md-input-wrapper"/>'),e.closest(".md-input-wrapper").append('<span class="md-input-bar '+i+'"/>'),altair_md.update_input(e)}$body.on("focus",".md-input",function(){$(this).closest(".md-input-wrapper").addClass("md-input-focus")}).on("blur",".md-input",function(){$(this).closest(".md-input-wrapper").removeClass("md-input-focus"),$(this).hasClass("label-fixed")||(""!=$(this).val()?$(this).closest(".md-input-wrapper").addClass("md-input-filled"):$(this).closest(".md-input-wrapper").removeClass("md-input-filled"))}).on("change",".md-input",function(){altair_md.update_input($(this))})})},update_input:function(e){e.closest(".uk-input-group").removeClass("uk-input-group-danger uk-input-group-success"),e.closest(".md-input-wrapper").removeClass("md-input-wrapper-danger md-input-wrapper-success md-input-wrapper-disabled"),e.hasClass("md-input-danger")&&(e.closest(".uk-input-group").length&&e.closest(".uk-input-group").addClass("uk-input-group-danger"),e.closest(".md-input-wrapper").addClass("md-input-wrapper-danger")),e.hasClass("md-input-success")&&(e.closest(".uk-input-group").length&&e.closest(".uk-input-group").addClass("uk-input-group-success"),e.closest(".md-input-wrapper").addClass("md-input-wrapper-success")),e.prop("disabled")&&e.closest(".md-input-wrapper").addClass("md-input-wrapper-disabled"),e.hasClass("label-fixed")&&e.closest(".md-input-wrapper").addClass("md-input-filled"),""!=e.val()&&e.closest(".md-input-wrapper").addClass("md-input-filled")}};
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,399 @@
|
||||||
|
/**
|
||||||
|
* Dense - Device pixel ratio aware images
|
||||||
|
*
|
||||||
|
* @link http://dense.rah.pw
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Copyright (C) 2013 Jukka Svahn
|
||||||
|
*
|
||||||
|
* Permission is hereby granted, free of charge, to any person obtaining a
|
||||||
|
* copy of this software and associated documentation files (the "Software"),
|
||||||
|
* to deal in the Software without restriction, including without limitation
|
||||||
|
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
||||||
|
* and/or sell copies of the Software, and to permit persons to whom the
|
||||||
|
* Software is furnished to do so, subject to the following conditions:
|
||||||
|
*
|
||||||
|
* The above copyright notice and this permission notice shall be included in
|
||||||
|
* all copies or substantial portions of the Software.
|
||||||
|
*
|
||||||
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||||
|
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @name jQuery
|
||||||
|
* @class
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @name fn
|
||||||
|
* @class
|
||||||
|
* @memberOf jQuery
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function (factory)
|
||||||
|
{
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
if (typeof define === 'function' && define.amd)
|
||||||
|
{
|
||||||
|
define(['jquery'], factory);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
factory(window.jQuery || window.Zepto);
|
||||||
|
}
|
||||||
|
}(function ($)
|
||||||
|
{
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An array of checked image URLs.
|
||||||
|
*/
|
||||||
|
|
||||||
|
var pathStack = [],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Methods.
|
||||||
|
*/
|
||||||
|
|
||||||
|
methods = {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Regular expression to check whether the URL has a protocol.
|
||||||
|
*
|
||||||
|
* Is used to check whether the image URL is external.
|
||||||
|
*/
|
||||||
|
|
||||||
|
regexHasProtocol = /^([a-z]:)?\/\//i,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Regular expression that split extensions from the file.
|
||||||
|
*
|
||||||
|
* Is used to inject the DPR suffix to the name.
|
||||||
|
*/
|
||||||
|
|
||||||
|
regexSuffix = /\.\w+$/,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Device pixel ratio.
|
||||||
|
*/
|
||||||
|
|
||||||
|
devicePixelRatio;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Init is the default method responsible for rendering
|
||||||
|
* a pixel-ratio-aware images.
|
||||||
|
*
|
||||||
|
* This method is used to select the images that
|
||||||
|
* should display retina-size images on high pixel ratio
|
||||||
|
* devices. Dense defaults to the init method if no
|
||||||
|
* method is specified.
|
||||||
|
*
|
||||||
|
* When attached to an image, the correct image variation is
|
||||||
|
* selected based on the device's pixel ratio. If the image element
|
||||||
|
* defines <code>data-{ratio}x</code> attributes (e.g. data-1x, data-2x, data-3x),
|
||||||
|
* the most appropriate of those is selected.
|
||||||
|
*
|
||||||
|
* If no data-ratio attributes are defined, the retina image is
|
||||||
|
* constructed from the <code>src</code> attribute.
|
||||||
|
* The searched high pixel ratio images follows
|
||||||
|
* a <code>{imageName}_{ratio}x.{ext}</code> naming convention.
|
||||||
|
* For an image found in /path/to/images/image.jpg, the 2x retina
|
||||||
|
* image would be looked from /path/to/images/image_2x.jpg.
|
||||||
|
*
|
||||||
|
* When image is constructed from the src, the image existance is
|
||||||
|
* verified using HTTP HEAD request, if <code>ping</code> option is
|
||||||
|
* <code>true</code>. The check makes sure no HTTP error code is returned,
|
||||||
|
* and that the received content-type is of an image. Vector image formats,
|
||||||
|
* like svg, are skipped based on the file extension.
|
||||||
|
*
|
||||||
|
* This method can also be used to load image in semi-lazy fashion,
|
||||||
|
* and avoid larger extra HTTP requests due to retina replacements.
|
||||||
|
* The data-1x attribute can be used to supstitute the src, making
|
||||||
|
* sure the browser doesn't try to download the normal image variation
|
||||||
|
* before the JavaScript driven behaviour kicks in.
|
||||||
|
*
|
||||||
|
* Some classes are added to the selected elements while Dense is processing
|
||||||
|
* the document. These classes include <code>dense-image</code>, <code>dense-loading</code>
|
||||||
|
* and <code>dense-ready</code>. These classes can be used to style the images,
|
||||||
|
* or hide them while they are being loaded.
|
||||||
|
*
|
||||||
|
* @param {Object} [options={}] Options
|
||||||
|
* @param {Boolean} [options.ping=null] Check image existence. If the default <code>NULL</code> checks local images, <code>FALSE</code> disables checking and <code>TRUE</code> checks even external images cross-domain
|
||||||
|
* @param {String} [options.dimensions=preserve] What to do with the image's <code>width</code> and <code>height</code> attributes. Either <code>update</code>, <code>remove</code> or <code>preserve</code>
|
||||||
|
* @param {String} [options.glue=_] String that glues the retina "nx" suffix to the image. This option can be used to change the naming convention between the two commonly used practices, <code>image@2x.jpg</code> and <code>image_2x.jpg</code>
|
||||||
|
* @param {Array} [options.skipExtensions=['svg']] Skipped image file extensions. There might be situations where you might want to exclude vector image formats
|
||||||
|
* @return {Object} this
|
||||||
|
* @method init
|
||||||
|
* @memberof jQuery.fn.dense
|
||||||
|
* @fires jQuery.fn.dense#denseRetinaReady.dense
|
||||||
|
* @example
|
||||||
|
* $('img').dense({
|
||||||
|
* ping: false,
|
||||||
|
* dimension: 'update'
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
|
||||||
|
methods.init = function (options)
|
||||||
|
{
|
||||||
|
options = $.extend({
|
||||||
|
ping: null,
|
||||||
|
dimensions: 'preserve',
|
||||||
|
glue: '_',
|
||||||
|
skipExtensions: ['svg']
|
||||||
|
}, options);
|
||||||
|
|
||||||
|
this.each(function ()
|
||||||
|
{
|
||||||
|
var $this = $(this);
|
||||||
|
|
||||||
|
if (!$this.is('img') || $this.hasClass('dense-image'))
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$this.addClass('dense-image dense-loading');
|
||||||
|
|
||||||
|
var image = methods.getImageAttribute.call(this),
|
||||||
|
originalImage = $this.attr('src'),
|
||||||
|
ping = false,
|
||||||
|
updateImage;
|
||||||
|
|
||||||
|
if (!image)
|
||||||
|
{
|
||||||
|
if (!originalImage || devicePixelRatio === 1 || $.inArray(originalImage.split('.').pop().split(/[\?\#]/).shift(), options.skipExtensions) !== -1)
|
||||||
|
{
|
||||||
|
$this.removeClass('dense-image dense-loading');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
image = originalImage.replace(regexSuffix, function (extension)
|
||||||
|
{
|
||||||
|
var pixelRatio = $this.attr('data-dense-cap') ? $this.attr('data-dense-cap') : devicePixelRatio;
|
||||||
|
return options.glue + pixelRatio + 'x' + extension;
|
||||||
|
});
|
||||||
|
|
||||||
|
ping = options.ping !== false && $.inArray(image, pathStack) === -1 && (options.ping === true || !regexHasProtocol.test(image) || image.indexOf('//'+document.domain) === 0 || image.indexOf(document.location.protocol+'//'+document.domain) === 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateImage = function ()
|
||||||
|
{
|
||||||
|
var readyImage = function ()
|
||||||
|
{
|
||||||
|
$this.removeClass('dense-loading').addClass('dense-ready').trigger('denseRetinaReady.dense');
|
||||||
|
};
|
||||||
|
|
||||||
|
$this.attr('src', image);
|
||||||
|
|
||||||
|
if (options.dimensions === 'update')
|
||||||
|
{
|
||||||
|
$this.dense('updateDimensions').one('denseDimensionChanged', readyImage);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
if (options.dimensions === 'remove')
|
||||||
|
{
|
||||||
|
$this.removeAttr('width height');
|
||||||
|
}
|
||||||
|
|
||||||
|
readyImage();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (ping)
|
||||||
|
{
|
||||||
|
$.ajax({
|
||||||
|
url : image,
|
||||||
|
type : 'HEAD'
|
||||||
|
})
|
||||||
|
.done(function (data, textStatus, jqXHR)
|
||||||
|
{
|
||||||
|
var type = jqXHR.getResponseHeader('Content-type');
|
||||||
|
|
||||||
|
if (!type || type.indexOf('image/') === 0)
|
||||||
|
{
|
||||||
|
pathStack.push(image);
|
||||||
|
updateImage();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
updateImage();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets an image's width and height attributes to its native values.
|
||||||
|
*
|
||||||
|
* Updates an img element's dimensions to the source image's
|
||||||
|
* real values. This method is asynchronous, so you can not directly
|
||||||
|
* return its values. Instead, use the 'dense-dimensions-updated'
|
||||||
|
* event to detect when the action is done.
|
||||||
|
*
|
||||||
|
* @return {Object} this
|
||||||
|
* @method updateDimensions
|
||||||
|
* @memberof jQuery.fn.dense
|
||||||
|
* @fires jQuery.fn.dense#denseDimensionChanged.dense
|
||||||
|
* @example
|
||||||
|
* var image = $('img').dense('updateDimensions');
|
||||||
|
*/
|
||||||
|
|
||||||
|
methods.updateDimensions = function ()
|
||||||
|
{
|
||||||
|
return this.each(function ()
|
||||||
|
{
|
||||||
|
var img, $this = $(this), src = $this.attr('src');
|
||||||
|
|
||||||
|
if (src)
|
||||||
|
{
|
||||||
|
img = new Image();
|
||||||
|
img.src = src;
|
||||||
|
|
||||||
|
$(img).on('load.dense', function ()
|
||||||
|
{
|
||||||
|
$this.attr({
|
||||||
|
width: img.width,
|
||||||
|
height: img.height
|
||||||
|
}).trigger('denseDimensionChanged.dense');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets device pixel ratio rounded up to the closest integer.
|
||||||
|
*
|
||||||
|
* @return {Integer} The pixel ratio
|
||||||
|
* @method devicePixelRatio
|
||||||
|
* @memberof jQuery.fn.dense
|
||||||
|
* @example
|
||||||
|
* var ratio = $(window).dense('devicePixelRatio');
|
||||||
|
* alert(ratio);
|
||||||
|
*/
|
||||||
|
|
||||||
|
methods.devicePixelRatio = function ()
|
||||||
|
{
|
||||||
|
var pixelRatio = 1;
|
||||||
|
|
||||||
|
if ($.type(window.devicePixelRatio) !== 'undefined')
|
||||||
|
{
|
||||||
|
pixelRatio = window.devicePixelRatio;
|
||||||
|
}
|
||||||
|
else if ($.type(window.matchMedia) !== 'undefined')
|
||||||
|
{
|
||||||
|
$.each([1.3, 2, 3, 4, 5, 6], function (key, ratio)
|
||||||
|
{
|
||||||
|
var mediaQuery = [
|
||||||
|
'(-webkit-min-device-pixel-ratio: '+ratio+')',
|
||||||
|
'(min-resolution: '+Math.floor(ratio*96)+'dpi)',
|
||||||
|
'(min-resolution: '+ratio+'dppx)'
|
||||||
|
].join(',');
|
||||||
|
|
||||||
|
if (!window.matchMedia(mediaQuery).matches)
|
||||||
|
{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
pixelRatio = ratio;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return Math.ceil(pixelRatio);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets an appropriate URL for the pixel ratio from the data attribute list.
|
||||||
|
*
|
||||||
|
* Selects the most appropriate <code>data-{ratio}x</code> attribute from
|
||||||
|
* the given element's attributes. If the devices pixel ratio is greater
|
||||||
|
* than the largest specified image, the largest one of the available is used.
|
||||||
|
*
|
||||||
|
* @return {String|Boolean} The attribute value
|
||||||
|
* @method getImageAttribute
|
||||||
|
* @memberof jQuery.fn.dense
|
||||||
|
* @example
|
||||||
|
* var image = $('<div data-1x="image.jpg" data-2x="image_2x.jpg" />').dense('getImageAttribute');
|
||||||
|
* $('body').css('background-image', 'url(' + image + ')');
|
||||||
|
*/
|
||||||
|
|
||||||
|
methods.getImageAttribute = function ()
|
||||||
|
{
|
||||||
|
var $this = $(this).eq(0), image = false, url;
|
||||||
|
|
||||||
|
for (var i = 1; i <= devicePixelRatio; i++)
|
||||||
|
{
|
||||||
|
url = $this.attr('data-' + i + 'x');
|
||||||
|
|
||||||
|
if (url)
|
||||||
|
{
|
||||||
|
image = url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return image;
|
||||||
|
};
|
||||||
|
|
||||||
|
devicePixelRatio = methods.devicePixelRatio();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dense offers few methods and options that can be used to both customize the
|
||||||
|
* plugin's functionality and return resulting values. All interaction is done through
|
||||||
|
* the <code>$.fn.dense()</code> method, that accepts a called method and its options
|
||||||
|
* object as its arguments. Both arguments are optional, and either one can be omitted.
|
||||||
|
*
|
||||||
|
* @param {String} [method=init] The called method
|
||||||
|
* @param {Object} [options={}] Options passed to the method
|
||||||
|
* @class dense
|
||||||
|
* @memberof jQuery.fn
|
||||||
|
*/
|
||||||
|
|
||||||
|
$.fn.dense = function (method, options)
|
||||||
|
{
|
||||||
|
if ($.type(method) !== 'string' || $.type(methods[method]) !== 'function')
|
||||||
|
{
|
||||||
|
options = method;
|
||||||
|
method = 'init';
|
||||||
|
}
|
||||||
|
|
||||||
|
return methods[method].call(this, options);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize automatically when document is ready.
|
||||||
|
*
|
||||||
|
* Dense is initialized automatically if the body element
|
||||||
|
* has a <code>dense-retina</code> class.
|
||||||
|
*/
|
||||||
|
|
||||||
|
$(function ()
|
||||||
|
{
|
||||||
|
$('body.dense-retina img').dense();
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This event is invoked when a retina image has finished loading.
|
||||||
|
*
|
||||||
|
* @event jQuery.fn.dense#denseRetinaReady.dense
|
||||||
|
* @type {Object}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This event is invoked when an image's dimension values
|
||||||
|
* have been updated by the <code>updateDimensions</code>
|
||||||
|
* method.
|
||||||
|
*
|
||||||
|
* @event jQuery.fn.dense#denseDimensionChanged.dense
|
||||||
|
* @type {Object}
|
||||||
|
*/
|
||||||
|
}));
|
|
@ -0,0 +1 @@
|
||||||
|
!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):e(window.jQuery||window.Zepto)}(function(e){"use strict";var n,i=[],t={},a=/^([a-z]:)?\/\//i;t.init=function(d){return d=e.extend({ping:null,dimensions:"preserve",glue:"_",skipExtensions:["svg"]},d),this.each(function(){var s=e(this);if(s.is("img")&&!s.hasClass("dense-image")){s.addClass("dense-image dense-loading");var o,r=t.getImageAttribute.call(this),u=s.attr("src"),c=!1;if(!r){if(!u||1===n||-1!==e.inArray(u.split(".").pop().split(/[\?\#]/).shift(),d.skipExtensions))return void s.removeClass("dense-image dense-loading");r=u.replace(/\.\w+$/,function(e){var i=s.attr("data-dense-cap")?s.attr("data-dense-cap"):n;return d.glue+i+"x"+e}),c=!1!==d.ping&&-1===e.inArray(r,i)&&(!0===d.ping||!a.test(r)||0===r.indexOf("//"+document.domain)||0===r.indexOf(document.location.protocol+"//"+document.domain))}o=function(){var e=function(){s.removeClass("dense-loading").addClass("dense-ready").trigger("denseRetinaReady.dense")};s.attr("src",r),"update"===d.dimensions?s.dense("updateDimensions").one("denseDimensionChanged",e):("remove"===d.dimensions&&s.removeAttr("width height"),e())},c?e.ajax({url:r,type:"HEAD"}).done(function(e,n,t){var a=t.getResponseHeader("Content-type");a&&0!==a.indexOf("image/")||(i.push(r),o())}):o()}}),this},t.updateDimensions=function(){return this.each(function(){var n,i=e(this),t=i.attr("src");t&&(n=new Image,n.src=t,e(n).on("load.dense",function(){i.attr({width:n.width,height:n.height}).trigger("denseDimensionChanged.dense")}))})},t.devicePixelRatio=function(){var n=1;return"undefined"!==e.type(window.devicePixelRatio)?n=window.devicePixelRatio:"undefined"!==e.type(window.matchMedia)&&e.each([1.3,2,3,4,5,6],function(e,i){var t=["(-webkit-min-device-pixel-ratio: "+i+")","(min-resolution: "+Math.floor(96*i)+"dpi)","(min-resolution: "+i+"dppx)"].join(",");if(!window.matchMedia(t).matches)return!1;n=i}),Math.ceil(n)},t.getImageAttribute=function(){for(var i,t=e(this).eq(0),a=!1,d=1;d<=n;d++)(i=t.attr("data-"+d+"x"))&&(a=i);return a},n=t.devicePixelRatio(),e.fn.dense=function(n,i){return"string"===e.type(n)&&"function"===e.type(t[n])||(i=n,n="init"),t[n].call(this,i)},e(function(){e("body.dense-retina img").dense()})});
|
|
@ -0,0 +1,258 @@
|
||||||
|
/*
|
||||||
|
* jQuery One Page Nav Plugin
|
||||||
|
* http://github.com/davist11/jQuery-One-Page-Nav
|
||||||
|
*
|
||||||
|
* Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
|
||||||
|
* Dual licensed under the MIT and GPL licenses.
|
||||||
|
* Uses the same license as jQuery, see:
|
||||||
|
* http://jquery.org/license
|
||||||
|
*
|
||||||
|
* @version 3.0.0
|
||||||
|
*
|
||||||
|
* Example usage:
|
||||||
|
* $('#nav').onePageNav({
|
||||||
|
* currentClass: 'current',
|
||||||
|
* changeHash: false,
|
||||||
|
* scrollSpeed: 750
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
|
||||||
|
;(function($, window, document, undefined){
|
||||||
|
|
||||||
|
// our plugin constructor
|
||||||
|
var OnePageNav = function(elem, options){
|
||||||
|
this.elem = elem;
|
||||||
|
this.$elem = $(elem);
|
||||||
|
this.options = options;
|
||||||
|
this.metadata = this.$elem.data('plugin-options');
|
||||||
|
this.$win = $(window);
|
||||||
|
this.sections = {};
|
||||||
|
this.didScroll = false;
|
||||||
|
this.$doc = $(document);
|
||||||
|
this.docHeight = this.$doc.height();
|
||||||
|
};
|
||||||
|
|
||||||
|
// the plugin prototype
|
||||||
|
OnePageNav.prototype = {
|
||||||
|
defaults: {
|
||||||
|
navItems: 'a',
|
||||||
|
currentClass: 'current',
|
||||||
|
changeHash: false,
|
||||||
|
easing: 'swing',
|
||||||
|
filter: '',
|
||||||
|
scrollOffset: 0,
|
||||||
|
scrollSpeed: 750,
|
||||||
|
scrollThreshold: 0.5,
|
||||||
|
begin: false,
|
||||||
|
end: false,
|
||||||
|
scrollChange: false
|
||||||
|
},
|
||||||
|
|
||||||
|
init: function() {
|
||||||
|
// Introduce defaults that can be extended either
|
||||||
|
// globally or using an object literal.
|
||||||
|
this.config = $.extend({}, this.defaults, this.options, this.metadata);
|
||||||
|
|
||||||
|
this.$nav = this.$elem.find(this.config.navItems);
|
||||||
|
|
||||||
|
//Filter any links out of the nav
|
||||||
|
if(this.config.filter !== '') {
|
||||||
|
this.$nav = this.$nav.filter(this.config.filter);
|
||||||
|
}
|
||||||
|
|
||||||
|
//Handle clicks on the nav
|
||||||
|
this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
|
||||||
|
|
||||||
|
//Get the section positions
|
||||||
|
this.getPositions();
|
||||||
|
|
||||||
|
//Handle scroll changes
|
||||||
|
this.bindInterval();
|
||||||
|
|
||||||
|
//Update the positions on resize too
|
||||||
|
this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
adjustNav: function(self, $parent) {
|
||||||
|
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
|
||||||
|
$parent.addClass(self.config.currentClass);
|
||||||
|
},
|
||||||
|
|
||||||
|
bindInterval: function() {
|
||||||
|
var self = this;
|
||||||
|
var docHeight;
|
||||||
|
|
||||||
|
self.$win.on('scroll.onePageNav', function() {
|
||||||
|
self.didScroll = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
self.t = setInterval(function() {
|
||||||
|
docHeight = self.$doc.height();
|
||||||
|
|
||||||
|
//If it was scrolled
|
||||||
|
if(self.didScroll) {
|
||||||
|
self.didScroll = false;
|
||||||
|
self.scrollChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
//If the document height changes
|
||||||
|
if(docHeight !== self.docHeight) {
|
||||||
|
self.docHeight = docHeight;
|
||||||
|
self.getPositions();
|
||||||
|
}
|
||||||
|
}, 250);
|
||||||
|
},
|
||||||
|
|
||||||
|
getHash: function($link) {
|
||||||
|
return $link.attr('href').split('#')[1];
|
||||||
|
},
|
||||||
|
|
||||||
|
getPositions: function() {
|
||||||
|
var self = this;
|
||||||
|
var linkHref;
|
||||||
|
var topPos;
|
||||||
|
var $target;
|
||||||
|
|
||||||
|
self.$nav.each(function() {
|
||||||
|
linkHref = self.getHash($(this));
|
||||||
|
$target = $('#' + linkHref);
|
||||||
|
|
||||||
|
if($target.length) {
|
||||||
|
topPos = $target.offset().top;
|
||||||
|
self.sections[linkHref] = Math.round(topPos);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getSection: function(windowPos) {
|
||||||
|
var returnValue = null;
|
||||||
|
var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
|
||||||
|
|
||||||
|
// Sort Sections by Position
|
||||||
|
this.sections = this.sortSectionsByPosition(this.sections);
|
||||||
|
|
||||||
|
for(var section in this.sections) {
|
||||||
|
if((this.sections[section] - windowHeight) < windowPos) {
|
||||||
|
returnValue = section;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return returnValue;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sort Sections by its position value
|
||||||
|
* based on http://am.aurlien.net/post/1221493460/sorting-javascript-objects
|
||||||
|
* @param {Object} obj Object to sort
|
||||||
|
* @return {Object} sorted Object
|
||||||
|
*/
|
||||||
|
sortSectionsByPosition: function (obj) {
|
||||||
|
var tempArray = [];
|
||||||
|
var tempObj = {};
|
||||||
|
|
||||||
|
// Transform Object in Array
|
||||||
|
for (var key in obj) {
|
||||||
|
if (obj.hasOwnProperty(key)) {
|
||||||
|
tempArray.push(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tempArray.sort(function(a,b) {
|
||||||
|
var x = obj[a];
|
||||||
|
var y = obj[b];
|
||||||
|
|
||||||
|
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Transform sorted tempArray back into Object
|
||||||
|
for (var i=0; i<tempArray.length; i++) {
|
||||||
|
tempObj[tempArray[i]] = obj[tempArray[i]];
|
||||||
|
}
|
||||||
|
|
||||||
|
return tempObj;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleClick: function(e) {
|
||||||
|
var self = this;
|
||||||
|
var $link = $(e.currentTarget);
|
||||||
|
var $parent = $link.parent();
|
||||||
|
var newLoc = '#' + self.getHash($link);
|
||||||
|
|
||||||
|
if(!$parent.hasClass(self.config.currentClass)) {
|
||||||
|
//Start callback
|
||||||
|
if(self.config.begin) {
|
||||||
|
self.config.begin();
|
||||||
|
}
|
||||||
|
|
||||||
|
//Change the highlighted nav item
|
||||||
|
self.adjustNav(self, $parent);
|
||||||
|
|
||||||
|
//Removing the auto-adjust on scroll
|
||||||
|
self.unbindInterval();
|
||||||
|
|
||||||
|
//Scroll to the correct position
|
||||||
|
self.scrollTo(newLoc, function() {
|
||||||
|
//Do we need to change the hash?
|
||||||
|
if(self.config.changeHash) {
|
||||||
|
window.location.hash = newLoc;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Add the auto-adjust on scroll back in
|
||||||
|
self.bindInterval();
|
||||||
|
|
||||||
|
//End callback
|
||||||
|
if(self.config.end) {
|
||||||
|
self.config.end();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
},
|
||||||
|
|
||||||
|
scrollChange: function() {
|
||||||
|
var windowTop = this.$win.scrollTop();
|
||||||
|
var position = this.getSection(windowTop);
|
||||||
|
var $parent;
|
||||||
|
|
||||||
|
//If the position is set
|
||||||
|
if(position !== null) {
|
||||||
|
$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
|
||||||
|
|
||||||
|
//If it's not already the current section
|
||||||
|
if(!$parent.hasClass(this.config.currentClass)) {
|
||||||
|
//Change the highlighted nav item
|
||||||
|
this.adjustNav(this, $parent);
|
||||||
|
|
||||||
|
//If there is a scrollChange callback
|
||||||
|
if(this.config.scrollChange) {
|
||||||
|
this.config.scrollChange($parent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
scrollTo: function(target, callback) {
|
||||||
|
var offset = $(target).offset().top;
|
||||||
|
$('html, body').animate({
|
||||||
|
scrollTop: offset + this.config.scrollOffset
|
||||||
|
}, this.config.scrollSpeed, this.config.easing, callback);
|
||||||
|
},
|
||||||
|
|
||||||
|
unbindInterval: function() {
|
||||||
|
clearInterval(this.t);
|
||||||
|
this.$win.unbind('scroll.onePageNav');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
OnePageNav.defaults = OnePageNav.prototype.defaults;
|
||||||
|
|
||||||
|
$.fn.onePageNav = function(options) {
|
||||||
|
return this.each(function() {
|
||||||
|
new OnePageNav(this, options).init();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
})( jQuery, window , document );
|
|
@ -0,0 +1 @@
|
||||||
|
!function(t,n,i,s){var e=function(s,e){this.elem=s,this.$elem=t(s),this.options=e,this.metadata=this.$elem.data("plugin-options"),this.$win=t(n),this.sections={},this.didScroll=!1,this.$doc=t(i),this.docHeight=this.$doc.height()};e.prototype={defaults:{navItems:"a",currentClass:"current",changeHash:!1,easing:"swing",filter:"",scrollOffset:0,scrollSpeed:750,scrollThreshold:.5,begin:!1,end:!1,scrollChange:!1},init:function(){return this.config=t.extend({},this.defaults,this.options,this.metadata),this.$nav=this.$elem.find(this.config.navItems),""!==this.config.filter&&(this.$nav=this.$nav.filter(this.config.filter)),this.$nav.on("click.onePageNav",t.proxy(this.handleClick,this)),this.getPositions(),this.bindInterval(),this.$win.on("resize.onePageNav",t.proxy(this.getPositions,this)),this},adjustNav:function(t,n){t.$elem.find("."+t.config.currentClass).removeClass(t.config.currentClass),n.addClass(t.config.currentClass)},bindInterval:function(){var t,n=this;n.$win.on("scroll.onePageNav",function(){n.didScroll=!0}),n.t=setInterval(function(){t=n.$doc.height(),n.didScroll&&(n.didScroll=!1,n.scrollChange()),t!==n.docHeight&&(n.docHeight=t,n.getPositions())},250)},getHash:function(t){return t.attr("href").split("#")[1]},getPositions:function(){var n,i,s,e=this;e.$nav.each(function(){n=e.getHash(t(this)),s=t("#"+n),s.length&&(i=s.offset().top,e.sections[n]=Math.round(i))})},getSection:function(t){var n=null,i=Math.round(this.$win.height()*this.config.scrollThreshold);this.sections=this.sortSectionsByPosition(this.sections);for(var s in this.sections)this.sections[s]-i<t&&(n=s);return n},sortSectionsByPosition:function(t){var n=[],i={};for(var s in t)t.hasOwnProperty(s)&&n.push(s);n.sort(function(n,i){var s=t[n],e=t[i];return e>s?-1:s>e?1:0});for(var e=0;e<n.length;e++)i[n[e]]=t[n[e]];return i},handleClick:function(i){var s=this,e=t(i.currentTarget),o=e.parent(),a="#"+s.getHash(e);o.hasClass(s.config.currentClass)||(s.config.begin&&s.config.begin(),s.adjustNav(s,o),s.unbindInterval(),s.scrollTo(a,function(){s.config.changeHash&&(n.location.hash=a),s.bindInterval(),s.config.end&&s.config.end()})),i.preventDefault()},scrollChange:function(){var t,n=this.$win.scrollTop(),i=this.getSection(n);null!==i&&(t=this.$elem.find('a[href$="#'+i+'"]').parent(),t.hasClass(this.config.currentClass)||(this.adjustNav(this,t),this.config.scrollChange&&this.config.scrollChange(t)))},scrollTo:function(n,i){var s=t(n).offset().top;t("html, body").animate({scrollTop:s+this.config.scrollOffset},this.config.scrollSpeed,this.config.easing,i)},unbindInterval:function(){clearInterval(this.t),this.$win.unbind("scroll.onePageNav")}},e.defaults=e.prototype.defaults,t.fn.onePageNav=function(t){return this.each(function(){new e(this,t).init()})}}(jQuery,window,document);
|
|
@ -0,0 +1,101 @@
|
||||||
|
// http://getuikit.com/docs/documentation_javascript.html#js-override
|
||||||
|
|
||||||
|
if (typeof UIkit !== 'undefined') {
|
||||||
|
UIkit.on('beforeready.uk.dom', function () {
|
||||||
|
|
||||||
|
// accrodion
|
||||||
|
if (typeof UIkit.components.accordion !== "undefined") { // check if accordion component is defined
|
||||||
|
$.extend(UIkit.components.accordion.prototype.defaults, {
|
||||||
|
easing: $.bez(easing_swiftOut),
|
||||||
|
duration: 200
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// dropdown
|
||||||
|
if (typeof UIkit.components.dropdown.prototype !== "undefined") { // check if dropdown component is defined
|
||||||
|
|
||||||
|
$.extend(UIkit.components.dropdown.prototype.defaults, {
|
||||||
|
remaintime: 150,
|
||||||
|
delay: 50
|
||||||
|
});
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var old_show_function = UIkit.components.dropdown.prototype.show;
|
||||||
|
|
||||||
|
UIkit.components.dropdown.prototype.show = function() {
|
||||||
|
|
||||||
|
this.dropdown
|
||||||
|
.css({
|
||||||
|
'min-width': this.dropdown.outerWidth()
|
||||||
|
})
|
||||||
|
.addClass('uk-dropdown-active uk-dropdown-shown');
|
||||||
|
|
||||||
|
return old_show_function.apply(this, arguments);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var old_hide_function = UIkit.components.dropdown.prototype.hide;
|
||||||
|
|
||||||
|
UIkit.components.dropdown.prototype.hide = function() {
|
||||||
|
|
||||||
|
var this_dropdown = this.dropdown;
|
||||||
|
|
||||||
|
this_dropdown.removeClass('uk-dropdown-shown');
|
||||||
|
|
||||||
|
var dropdown_timeout = setTimeout(function() {
|
||||||
|
this_dropdown.removeClass('uk-dropdown-active')
|
||||||
|
},280);
|
||||||
|
|
||||||
|
return old_hide_function.apply(this, arguments);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// modal
|
||||||
|
if (typeof UIkit.components.modal !== "undefined") { // check if modal component is defined
|
||||||
|
$.extend(UIkit.components.modal.prototype.defaults, {
|
||||||
|
center: true
|
||||||
|
});
|
||||||
|
|
||||||
|
UIkit.modal.dialog.template = '<div class="uk-modal uk-modal-dialog-replace"><div class="uk-modal-dialog" style="min-height:0;"></div></div>';
|
||||||
|
$body
|
||||||
|
.on('show.uk.modal', '.uk-modal-dialog-replace', function () {
|
||||||
|
// customize uikit dialog
|
||||||
|
setTimeout(function () {
|
||||||
|
var dialogReplace = $('.uk-modal-dialog-replace');
|
||||||
|
if (dialogReplace.find('.uk-button-primary').length) {
|
||||||
|
var actionBtn = dialogReplace.find('.uk-button-primary').toggleClass('uk-button-primary md-btn-flat-primary');
|
||||||
|
if (actionBtn.next('button')) {
|
||||||
|
actionBtn.next('button').after(actionBtn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (dialogReplace.find('.uk-button').length) {
|
||||||
|
dialogReplace.find('.uk-button').toggleClass('uk-button md-btn md-btn-flat');
|
||||||
|
}
|
||||||
|
if (dialogReplace.find('.uk-margin-small-top').length) {
|
||||||
|
dialogReplace.find('.uk-margin-small-top').toggleClass('uk-margin-small-top uk-margin-top');
|
||||||
|
}
|
||||||
|
if (dialogReplace.find('input.uk-width-1-1').length) {
|
||||||
|
dialogReplace.find('input.uk-width-1-1').toggleClass('uk-width-1-1 md-input');
|
||||||
|
// reinitialize md inputs
|
||||||
|
altair_md.inputs();
|
||||||
|
}
|
||||||
|
if (dialogReplace.find('.uk-form').length) {
|
||||||
|
dialogReplace.find('.uk-form').removeClass('uk-form');
|
||||||
|
}
|
||||||
|
}, 50)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// tooltip
|
||||||
|
if (typeof UIkit.components.tooltip !== "undefined") { // check if tooltip component is defined
|
||||||
|
$.extend(UIkit.components.tooltip.prototype.defaults, {
|
||||||
|
animation: 280,
|
||||||
|
offset: 8
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
|
@ -0,0 +1 @@
|
||||||
|
"undefined"!=typeof UIkit&&UIkit.on("beforeready.uk.dom",function(){"undefined"!=typeof UIkit.components.accordion&&$.extend(UIkit.components.accordion.prototype.defaults,{easing:$.bez(easing_swiftOut),duration:200}),"undefined"!=typeof UIkit.components.dropdown.prototype&&($.extend(UIkit.components.dropdown.prototype.defaults,{remaintime:150,delay:50}),function(){var t=UIkit.components.dropdown.prototype.show;UIkit.components.dropdown.prototype.show=function(){return this.dropdown.css({"min-width":this.dropdown.outerWidth()}).addClass("uk-dropdown-active uk-dropdown-shown"),t.apply(this,arguments)}}(),function(){var t=UIkit.components.dropdown.prototype.hide;UIkit.components.dropdown.prototype.hide=function(){var o=this.dropdown;o.removeClass("uk-dropdown-shown");setTimeout(function(){o.removeClass("uk-dropdown-active")},280);return t.apply(this,arguments)}}()),"undefined"!=typeof UIkit.components.modal&&($.extend(UIkit.components.modal.prototype.defaults,{center:!0}),UIkit.modal.dialog.template='<div class="uk-modal uk-modal-dialog-replace"><div class="uk-modal-dialog" style="min-height:0;"></div></div>',$body.on("show.uk.modal",".uk-modal-dialog-replace",function(){setTimeout(function(){var t=$(".uk-modal-dialog-replace");if(t.find(".uk-button-primary").length){var o=t.find(".uk-button-primary").toggleClass("uk-button-primary md-btn-flat-primary");o.next("button")&&o.next("button").after(o)}t.find(".uk-button").length&&t.find(".uk-button").toggleClass("uk-button md-btn md-btn-flat"),t.find(".uk-margin-small-top").length&&t.find(".uk-margin-small-top").toggleClass("uk-margin-small-top uk-margin-top"),t.find("input.uk-width-1-1").length&&(t.find("input.uk-width-1-1").toggleClass("uk-width-1-1 md-input"),altair_md.inputs()),t.find(".uk-form").length&&t.find(".uk-form").removeClass("uk-form")},50)})),"undefined"!=typeof UIkit.components.tooltip&&$.extend(UIkit.components.tooltip.prototype.defaults,{animation:280,offset:8})});
|
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,485 @@
|
||||||
|
html {
|
||||||
|
background: @site_background;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
.md_font(400, 15px, 1.42857143);
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*html, body {
|
||||||
|
height: 100%;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
a, button {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: @md-color-blue-600;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
color: @md-color-blue-900;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uk-text-upper {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate > * {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*=uk-animation-] {
|
||||||
|
animation-timing-function: @md_easing;
|
||||||
|
animation-duration: 840ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
&_a {
|
||||||
|
margin: 0;
|
||||||
|
.md_font(300,42px,48px);
|
||||||
|
.sub-heading {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 30px;
|
||||||
|
display: block;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
@media @screen_large_max {
|
||||||
|
.md_font(300,32px,36px);
|
||||||
|
.sub-heading {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_b {
|
||||||
|
margin: 0;
|
||||||
|
.md_font(300,32px,36px);
|
||||||
|
.sub-heading {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 26px;
|
||||||
|
display: block;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
@media @screen_large_max {
|
||||||
|
.md_font(300,28px,32px);
|
||||||
|
.sub-heading {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_c {
|
||||||
|
margin: 0;
|
||||||
|
.md_font(400,24px,28px);
|
||||||
|
.sub-heading {
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 20px;
|
||||||
|
display: block;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
@media @screen_large_max {
|
||||||
|
.md_font(300,22px,25px);
|
||||||
|
.sub-heading {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_a,
|
||||||
|
&_b,
|
||||||
|
&_c {
|
||||||
|
+ .uk-grid {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.material-icons {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_light {
|
||||||
|
&,
|
||||||
|
.sub-heading {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// icons
|
||||||
|
.icon {
|
||||||
|
&_large {
|
||||||
|
font-size: 64px;
|
||||||
|
@media @screen_large_max {
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_dark {
|
||||||
|
color: @text_secondary_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// header
|
||||||
|
#header_main {
|
||||||
|
transition: all 280ms @md_easing;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
.uk-navbar {
|
||||||
|
background: @white;
|
||||||
|
&-nav {
|
||||||
|
> li {
|
||||||
|
> a {
|
||||||
|
color: @text_secondary_color;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 14px;
|
||||||
|
.md_font_family();
|
||||||
|
font-weight: 500;
|
||||||
|
box-shadow: inset 0 -4px 0 rgba(255,255,255,0);
|
||||||
|
background: none !important;
|
||||||
|
transition: all 280ms @md_easing;
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
color: @text_secondary_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.current_active {
|
||||||
|
a {
|
||||||
|
box-shadow: inset 0 -4px 0 @accent_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.header-light {
|
||||||
|
background: @white;
|
||||||
|
}
|
||||||
|
.header_cta {
|
||||||
|
margin-top: 14px;
|
||||||
|
@media @screen_large_max {
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#mobile_navigation_toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#mobile_navigation {
|
||||||
|
.uk-offcanvas-bar {
|
||||||
|
background: @white;
|
||||||
|
.md-box-shadow-right();
|
||||||
|
transition: transform 280ms @md_easing;
|
||||||
|
&:after {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
.reset_list(32px 0 0 0,0);
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 25px;
|
||||||
|
padding: 8px 20px;
|
||||||
|
color: @text_primary_color;
|
||||||
|
small {
|
||||||
|
font-size: 12px;
|
||||||
|
color: @text_secondary_color;
|
||||||
|
display: block;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
.menu_icon {
|
||||||
|
width: 48px;
|
||||||
|
text-align: left;
|
||||||
|
display: inline-block;
|
||||||
|
color: @text_secondary_color;
|
||||||
|
float: left;
|
||||||
|
.material-icons {
|
||||||
|
font-size: 24px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu_title {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uk-offcanvas-page {
|
||||||
|
transition: margin 280ms @md_easing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_sticky {
|
||||||
|
padding-top: @header_main_height;
|
||||||
|
@media @screen_large_max {
|
||||||
|
padding-top: @header_main_mobile_height;
|
||||||
|
}
|
||||||
|
#header_main {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header_shadow {
|
||||||
|
#header_main {
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// top banner (slideshow)
|
||||||
|
.banner {
|
||||||
|
color: @white;
|
||||||
|
position: relative;
|
||||||
|
.uk-slideshow {
|
||||||
|
&,
|
||||||
|
> li {
|
||||||
|
height: 640px;
|
||||||
|
}
|
||||||
|
> li {
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
.slide {
|
||||||
|
&_content_a {
|
||||||
|
margin: 160px 0 0 640px;
|
||||||
|
}
|
||||||
|
&_content_b {
|
||||||
|
margin: 320px 0 0 0;
|
||||||
|
background: rgba(0,0,0,.4);
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
&_content_c {
|
||||||
|
margin: 120px 540px 0 0;
|
||||||
|
.slide_header,
|
||||||
|
p {
|
||||||
|
color: @text_primary_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_header {
|
||||||
|
color: @white;
|
||||||
|
.md_font(400,38px,42px);
|
||||||
|
margin: 0 0 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 300;
|
||||||
|
+ * {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.slide_navigation {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.slide_navigation {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uk-touch {
|
||||||
|
.slide_navigation {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uk-slidenav {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -30px;
|
||||||
|
color: @white !important;
|
||||||
|
background: rgba(0,0,0,.2);
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 48px;
|
||||||
|
transition: all 280ms @md_easing;
|
||||||
|
&-previous {
|
||||||
|
left: 16px;
|
||||||
|
&:before {
|
||||||
|
position: relative;
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-next {
|
||||||
|
right: 16px;
|
||||||
|
&:before {
|
||||||
|
position: relative;
|
||||||
|
right: -2px;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0,0,0,.6);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uk-dotnav {
|
||||||
|
> li {
|
||||||
|
border: 2px solid rgba(255,255,255,.8);
|
||||||
|
padding: 2px;
|
||||||
|
margin-right: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
&.uk-active {
|
||||||
|
border-color: @white;
|
||||||
|
> a {
|
||||||
|
background: @accent_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> a {
|
||||||
|
margin: 0;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// sections
|
||||||
|
.section {
|
||||||
|
padding: 48px 0;
|
||||||
|
position: relative;
|
||||||
|
&_large {
|
||||||
|
padding: 64px 0;
|
||||||
|
}
|
||||||
|
&_dark {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
&_gallery {
|
||||||
|
position: relative;
|
||||||
|
.slide_navigation {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.slide_navigation {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// uikit
|
||||||
|
[class*=uk-width].uk-container-center {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// media queries
|
||||||
|
@media @screen_xlarge_max {
|
||||||
|
.banner {
|
||||||
|
.uk-slideshow {
|
||||||
|
&,
|
||||||
|
> li {
|
||||||
|
height: auto;
|
||||||
|
min-height: 360px;
|
||||||
|
}
|
||||||
|
> li {
|
||||||
|
.slide {
|
||||||
|
&_content_a,
|
||||||
|
&_content_b,
|
||||||
|
&_content_c {
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0,0,0,.4);
|
||||||
|
padding: 48px 48px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&_header {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: @white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 20px;
|
||||||
|
color: @white !important;
|
||||||
|
+ * {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media @screen_large_max {
|
||||||
|
#header_main {
|
||||||
|
height: @header_main_mobile_height;
|
||||||
|
.uk-navbar-brand {
|
||||||
|
line-height: 48px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#main_navigation {
|
||||||
|
display: none;
|
||||||
|
.uk-navbar {
|
||||||
|
&-nav {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#mobile_navigation_toggle {
|
||||||
|
padding: 12px 4px 10px;
|
||||||
|
display: inline-block;
|
||||||
|
i {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media @screen_medium_max {
|
||||||
|
.banner {
|
||||||
|
.uk-slideshow {
|
||||||
|
> li {
|
||||||
|
background-size: auto 100%;
|
||||||
|
.slide {
|
||||||
|
&_content_a,
|
||||||
|
&_content_b,
|
||||||
|
&_content_c {
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0,0,0,.4);
|
||||||
|
padding: 24px 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&_header {
|
||||||
|
.md_font(400,24px,28px);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
color: @white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 15px;
|
||||||
|
color: @white !important;
|
||||||
|
+ * {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uk-container {
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,140 @@
|
||||||
|
// colors
|
||||||
|
@text_primary_color: #212121;
|
||||||
|
@text_secondary_color: #727272;
|
||||||
|
@text_muted: #aaa;
|
||||||
|
@site_background: #fff;
|
||||||
|
|
||||||
|
@border_color: rgba(0,0,0,0.12);
|
||||||
|
@border_color_hex: #e0e0e0;
|
||||||
|
@border_color_light: rgba(0,0,0,0.08);
|
||||||
|
@background_color_default: rgba(0,0,0,0.085);
|
||||||
|
@background_color_default_hex: #ededed;
|
||||||
|
@hover_bg: #f5f5f5;
|
||||||
|
|
||||||
|
@white: #fff;
|
||||||
|
|
||||||
|
@danger_color: @md-color-red-600;
|
||||||
|
@primary_color: @md-color-blue-500;
|
||||||
|
@primary_color_dark: @md-color-blue-700;
|
||||||
|
@success_color: @md-color-light-green-600;
|
||||||
|
@warning_color: @md-color-amber-700;
|
||||||
|
@muted_color: @md-color-grey-400;
|
||||||
|
|
||||||
|
// theme
|
||||||
|
@theme_primary_color: @md-color-blue-500;
|
||||||
|
@theme_light_color: @md-color-blue-50;
|
||||||
|
@theme_dark_color: @md-color-blue-700;
|
||||||
|
@accent_color: @md-color-light-green-600;
|
||||||
|
|
||||||
|
/* md buttons */
|
||||||
|
@hover_btn: rgba(153,153,153,0.2);
|
||||||
|
@active_btn: rgba(153,153,153,0.4);
|
||||||
|
|
||||||
|
// input colors
|
||||||
|
@input_on_color: @md-color-teal-500;
|
||||||
|
@input_off_color: rgba(0,0,0,.54);
|
||||||
|
@input_disabled_color: rgba(0,0,0,.26);
|
||||||
|
@input_disabled_color_hex: #bdbdbd;
|
||||||
|
|
||||||
|
// swiftOut easing
|
||||||
|
@md_easing: cubic-bezier(0.4,0,0.2,1);
|
||||||
|
|
||||||
|
// main header
|
||||||
|
@header_main_height: 64px;
|
||||||
|
@header_main_mobile_height: 48px;
|
||||||
|
@header_main_height_double: (@header_main_height*2)+10;
|
||||||
|
@header_main_zIndex: 1104;
|
||||||
|
|
||||||
|
// top bar
|
||||||
|
@top_bar_height: 40px;
|
||||||
|
|
||||||
|
// main sidebar
|
||||||
|
@sidebar_main_width: 240px;
|
||||||
|
@sidebar_main_width_mini: 60px;
|
||||||
|
|
||||||
|
// secondary sidebar
|
||||||
|
@sidebar_secondary_width: 280px;
|
||||||
|
|
||||||
|
// media queries
|
||||||
|
@screen_xlarge: ~"only screen and (min-width: 1220px)";
|
||||||
|
@screen_large: ~"only screen and (min-width: 960px)";
|
||||||
|
@screen_medium: ~"only screen and (min-width: 768px)";
|
||||||
|
@screen_small: ~"only screen and (min-width: 480px)";
|
||||||
|
|
||||||
|
@screen_xlarge_max: ~"only screen and (max-width: 1219px)";
|
||||||
|
@screen_large_max: ~"only screen and (max-width: 959px)";
|
||||||
|
@screen_medium_max: ~"only screen and (max-width: 767px)";
|
||||||
|
@screen_small_max: ~"only screen and (max-width: 479px)";
|
||||||
|
|
||||||
|
// box-sizing: border-box (this and all childrens)
|
||||||
|
.border-box() {
|
||||||
|
&,
|
||||||
|
&:before,
|
||||||
|
&:after,
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Retina background-image support with non-retina fall back
|
||||||
|
.retina_image(@file-1x, @file-2x, @width-1x, @height-1x) {
|
||||||
|
background-image: url("@{file-1x}");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
@media only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||||
|
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||||
|
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||||
|
only screen and ( min-device-pixel-ratio: 2),
|
||||||
|
only screen and ( min-resolution: 192dppx),
|
||||||
|
only screen and ( min-resolution: 2dppx) {
|
||||||
|
background-image: url("@{file-2x}");
|
||||||
|
background-size: @width-1x @height-1x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove default styles for ordered/unordered list
|
||||||
|
.reset_list(@margin: 0, @padding: 0) {
|
||||||
|
margin: @margin;
|
||||||
|
padding: @padding;
|
||||||
|
list-style: none;
|
||||||
|
> li {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// clearfix
|
||||||
|
.clearfix() {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
content: " ";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// custom fonts
|
||||||
|
.md_font(@weight: 400, @size: 14px, @height: 20px) {
|
||||||
|
font: @weight @size e('/') @height "Roboto", sans-serif;
|
||||||
|
}
|
||||||
|
.code_font(@weight: 400, @size: 14px, @height: 18px) {
|
||||||
|
font: @weight @size e('/') @height "Source Code Pro",Consolas, Monaco, 'Andale Mono', monospace !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md_font_family() {
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
// text truncate
|
||||||
|
.truncate_line(@width: 100%) {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
width: @width;
|
||||||
|
}
|
|
@ -0,0 +1,109 @@
|
||||||
|
/* pricing tables */
|
||||||
|
.pricing_table {
|
||||||
|
&.pricing_table_a {
|
||||||
|
text-align: center;
|
||||||
|
.pricing_table_plan {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 16px 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.pricing_table_price {
|
||||||
|
padding: 8px 0 0;
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
.currency {
|
||||||
|
vertical-align: top;
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
.period {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 4px;
|
||||||
|
color: @text_muted;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pricing_table_features {
|
||||||
|
.reset_list();
|
||||||
|
li {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pricing_table_select {
|
||||||
|
padding: 32px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.pricing_table_b {
|
||||||
|
text-align: center;
|
||||||
|
.pricing_table_plan {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 16px 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.pricing_table_price {
|
||||||
|
padding: 8px 0 0;
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
.currency {
|
||||||
|
vertical-align: top;
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
.period {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 4px;
|
||||||
|
color: @text_muted;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pricing_table_features {
|
||||||
|
.reset_list();
|
||||||
|
li {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pricing_table_select {
|
||||||
|
padding: 32px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.pricing_table_c {
|
||||||
|
text-align: center;
|
||||||
|
.pricing_table_plan {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 16px 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.pricing_table_price {
|
||||||
|
padding: 8px 0 0;
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
.currency {
|
||||||
|
vertical-align: top;
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
.period {
|
||||||
|
font-size: 14px;
|
||||||
|
color: @text_muted;
|
||||||
|
vertical-align: 0;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pricing_table_features {
|
||||||
|
.reset_list();
|
||||||
|
li {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pricing_table_select {
|
||||||
|
padding: 32px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,125 @@
|
||||||
|
.al_timeline {
|
||||||
|
position: relative;
|
||||||
|
padding: 24px 0 32px;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin-left: -2px;
|
||||||
|
left: 50%;
|
||||||
|
content: '';
|
||||||
|
width: 4px;
|
||||||
|
background: rgba(255,255,255,.5);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
&_block {
|
||||||
|
.clearfix;
|
||||||
|
+ * {
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
&:nth-child(even) {
|
||||||
|
.al_timeline {
|
||||||
|
&_content {
|
||||||
|
float: right;
|
||||||
|
&:after {
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: @white;
|
||||||
|
right: auto;
|
||||||
|
left: -20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_content {
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: @white;
|
||||||
|
width: 44%;
|
||||||
|
padding: 16px;
|
||||||
|
.boxShadowHelper(2);
|
||||||
|
position: relative;
|
||||||
|
border-radius: 4px;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 24px;
|
||||||
|
right: -20px;
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
border: 10px solid transparent;
|
||||||
|
border-left-color: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_image {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
margin-left: -32px;
|
||||||
|
background: @white;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 10;
|
||||||
|
.boxShadowHelper(2);
|
||||||
|
> i {
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media @screen_large_max {
|
||||||
|
.al_timeline {
|
||||||
|
&:after {
|
||||||
|
margin-left: 0;
|
||||||
|
left: 30px;
|
||||||
|
}
|
||||||
|
&_block {
|
||||||
|
padding-left: 96px;
|
||||||
|
}
|
||||||
|
&_content {
|
||||||
|
width: 100%;
|
||||||
|
&:after {
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: @white;
|
||||||
|
right: auto;
|
||||||
|
left: -20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_image {
|
||||||
|
left: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media @screen_medium_max {
|
||||||
|
.al_timeline {
|
||||||
|
&:after {
|
||||||
|
margin-left: 0;
|
||||||
|
left: 22px;
|
||||||
|
}
|
||||||
|
&_block {
|
||||||
|
padding-left: 72px;
|
||||||
|
}
|
||||||
|
&_content {
|
||||||
|
width: 100%;
|
||||||
|
&:after {
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: @white;
|
||||||
|
right: auto;
|
||||||
|
left: -20px;
|
||||||
|
top: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_image {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
> i {
|
||||||
|
line-height: 48px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,34 @@
|
||||||
|
/*
|
||||||
|
* Altair Admin Landing Page
|
||||||
|
* author: tzd
|
||||||
|
*
|
||||||
|
* Content:
|
||||||
|
* 1. variables/mixins
|
||||||
|
* 2. UIkit custom styles
|
||||||
|
* 3. custom components
|
||||||
|
* 4. material design styles
|
||||||
|
* 5. partials (header,sidebars,top bar)
|
||||||
|
* 6. altair landing page styles
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 1. altair variables/mixins ======================== */
|
||||||
|
@import (reference) "_variables_mixins";
|
||||||
|
|
||||||
|
/* 2. UIkit custom styles ============================ */
|
||||||
|
@import "_uikit_custom";
|
||||||
|
|
||||||
|
/* 3. custom components ============================== */
|
||||||
|
@import "components/_pricing_table";
|
||||||
|
@import "components/_timeline";
|
||||||
|
|
||||||
|
/* 4. material designv styles ========================= */
|
||||||
|
@import "md/md_main";
|
||||||
|
|
||||||
|
/* 5. partials (header,sidebars,top bar) ============= */
|
||||||
|
|
||||||
|
/* 6. altair landing page styles ===================== */
|
||||||
|
@import "_altair_landing_page";
|
||||||
|
|
||||||
|
/* theme */
|
||||||
|
//@import "themes/_default";
|
|
@ -0,0 +1,599 @@
|
||||||
|
/* buttons */
|
||||||
|
|
||||||
|
@fab_large_size: 64px;
|
||||||
|
@fab_small_size: 48px;
|
||||||
|
@fab_transition_delay: 50ms;
|
||||||
|
|
||||||
|
.md-btn {
|
||||||
|
background: @white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
.boxShadowHelper(1);
|
||||||
|
min-height: 31px;
|
||||||
|
min-width: 70px;
|
||||||
|
padding: 2px 16px;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition: all 280ms @md_easing;
|
||||||
|
color: @text_primary_color;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
.md_font(500, 14px, 31px) !important;
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
.uk-button-dropdown.uk-open > & {
|
||||||
|
background: @white;
|
||||||
|
outline: none;
|
||||||
|
text-decoration: none;
|
||||||
|
color: @text_primary_color;
|
||||||
|
.boxShadowHelper(2);
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
.uk-button-dropdown.uk-open > & {
|
||||||
|
.boxShadowHelper(3);
|
||||||
|
}
|
||||||
|
&-flat {
|
||||||
|
.boxShadowHelper(0);
|
||||||
|
background: none;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: @hover_btn;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background: @active_btn;
|
||||||
|
}
|
||||||
|
&-danger {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: @danger_color;
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: lighten(@danger_color,40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-primary {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: @primary_color_dark;
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: lighten(@primary_color,40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-success {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: @success_color;
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: lighten(@success_color,40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-warning {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: @warning_color;
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: lighten(@warning_color,40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.disabled {
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-danger {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: @danger_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-primary {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: @primary_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-success {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: @success_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-warning {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: @warning_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-danger,
|
||||||
|
&-primary,
|
||||||
|
&-success,
|
||||||
|
&-warning {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
> i {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.disabled {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: #a8a8a8;
|
||||||
|
background: #eaeaea;
|
||||||
|
box-shadow: none !important;
|
||||||
|
cursor: default;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> i {
|
||||||
|
&.material-icons {
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-mini {
|
||||||
|
line-height: 21px !important;
|
||||||
|
min-width: 12px;
|
||||||
|
font-size: 10px !important;
|
||||||
|
min-height: 24px;
|
||||||
|
}
|
||||||
|
&-small {
|
||||||
|
line-height: 27px !important;
|
||||||
|
min-width: 14px;
|
||||||
|
font-size: 11px !important;
|
||||||
|
}
|
||||||
|
&-large {
|
||||||
|
line-height: 42px !important;
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
+ .md-btn {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
&-block {
|
||||||
|
width: 100%;
|
||||||
|
& + & {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
+ .md-btn-group {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
&-facebook {
|
||||||
|
background: #3b5998 !important;
|
||||||
|
}
|
||||||
|
&-twitter {
|
||||||
|
background: #00aced !important;
|
||||||
|
}
|
||||||
|
&-gplus {
|
||||||
|
background: #dd4b39 !important;
|
||||||
|
}
|
||||||
|
&-facebook,
|
||||||
|
&-twitter,
|
||||||
|
&-gplus {
|
||||||
|
&,
|
||||||
|
> i {
|
||||||
|
color: @white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-icon {
|
||||||
|
&:extend(.md-btn-icon-default);
|
||||||
|
> i {
|
||||||
|
&:extend(.md-btn-icon-default > i);
|
||||||
|
&.no_margin {
|
||||||
|
margin-right: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-btn-large {
|
||||||
|
&:extend(.md-btn-icon-large);
|
||||||
|
> i {
|
||||||
|
&:extend(.md-btn-icon-large > i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-btn-small {
|
||||||
|
&:extend(.md-btn-icon-small);
|
||||||
|
> i {
|
||||||
|
&:extend(.md-btn-icon-small > i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-btn-mini {
|
||||||
|
&:extend(.md-btn-icon-mini);
|
||||||
|
> i {
|
||||||
|
&:extend(.md-btn-icon-mini > i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-btn-icon-large {
|
||||||
|
min-width: 72px;
|
||||||
|
> i {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-right: 12px;
|
||||||
|
vertical-align: -3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-btn-icon-default {
|
||||||
|
min-width: 64px;
|
||||||
|
> i {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 8px;
|
||||||
|
vertical-align: -2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-btn-icon-small {
|
||||||
|
min-width: 48px;
|
||||||
|
> i {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 6px;
|
||||||
|
vertical-align: -2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-btn-icon-mini {
|
||||||
|
min-width: 36px;
|
||||||
|
> i {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 4px;
|
||||||
|
vertical-align: -2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-fab {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: @fab_large_size;
|
||||||
|
height: @fab_large_size;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: @white;
|
||||||
|
color: @text_secondary_color;
|
||||||
|
display: block;
|
||||||
|
.boxShadowHelper(1);
|
||||||
|
transition: box-shadow 280ms @md_easing;
|
||||||
|
border: none;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
.boxShadowHelper(3);
|
||||||
|
}
|
||||||
|
> i {
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: @fab_large_size;
|
||||||
|
height: inherit;
|
||||||
|
width: inherit;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
color: @text_secondary_color;
|
||||||
|
}
|
||||||
|
&.md-fab-accent {
|
||||||
|
background: @accent_color;
|
||||||
|
> i {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-success {
|
||||||
|
background: @success_color;
|
||||||
|
> i {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-danger {
|
||||||
|
background: @danger_color;
|
||||||
|
> i {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-primary {
|
||||||
|
background: @primary_color;
|
||||||
|
> i {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-warning {
|
||||||
|
background: @warning_color;
|
||||||
|
> i {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-small {
|
||||||
|
width: @fab_small_size;
|
||||||
|
height: @fab_small_size;
|
||||||
|
border-radius: 50%;
|
||||||
|
> i {
|
||||||
|
line-height: @fab_small_size;
|
||||||
|
height: inherit;
|
||||||
|
width: inherit;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-speed-dial {
|
||||||
|
.md-fab-action-close {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-fab-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 24px;
|
||||||
|
right: 24px;
|
||||||
|
z-index: 1004;
|
||||||
|
transition: margin 280ms @md_easing;
|
||||||
|
@media @screen_medium_max {
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
> .md-fab + .md-fab {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
&.md-fab-in-card {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-fab-speed-dial {
|
||||||
|
.md-fab-wrapper-small {
|
||||||
|
position: absolute;
|
||||||
|
bottom: @fab_large_size + 16px;
|
||||||
|
right: 8px;
|
||||||
|
min-height: @fab_small_size;
|
||||||
|
width: @fab_small_size;
|
||||||
|
z-index: -1;
|
||||||
|
.md-fab-small {
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
&:nth-child(1) {
|
||||||
|
transition: box-shadow 280ms @md_easing,transform 100ms @md_easing @fab_transition_delay,opacity 100ms @md_easing @fab_transition_delay;
|
||||||
|
}
|
||||||
|
.generate-fab-child(@n, @i: 2) when (@i =< @n) {
|
||||||
|
// small buttons position
|
||||||
|
&:nth-last-child(@{i}) {
|
||||||
|
bottom: (@fab_small_size * (@i - 1) ) + (16px * (@i - 1) );
|
||||||
|
}
|
||||||
|
// transition for small buttons (on hide)
|
||||||
|
&:nth-child(@{i}) {
|
||||||
|
transition: box-shadow 280ms @md_easing,transform 100ms @md_easing ( @fab_transition_delay * @i ),opacity 100ms @md_easing ( @fab_transition_delay * @i );
|
||||||
|
}
|
||||||
|
.generate-fab-child(@n, (@i + 1));
|
||||||
|
}
|
||||||
|
.generate-fab-child(8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-active {
|
||||||
|
.md-fab-small {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
// transition for small buttons (on show)
|
||||||
|
&:nth-last-child(1) {
|
||||||
|
transition: box-shadow 280ms @md_easing,transform 100ms @md_easing @fab_transition_delay,opacity 100ms @md_easing @fab_transition_delay;
|
||||||
|
}
|
||||||
|
.generate-fab-child-active(@n, @i: 2) when (@i =< @n) {
|
||||||
|
&:nth-last-child(@{i}) {
|
||||||
|
transition: box-shadow 280ms @md_easing,transform 100ms @md_easing ( @fab_transition_delay * @i ),opacity 100ms @md_easing ( @fab_transition_delay * @i );
|
||||||
|
}
|
||||||
|
.generate-fab-child-active(@n, (@i + 1));
|
||||||
|
}
|
||||||
|
.generate-fab-child-active(8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-fab-toolbar {
|
||||||
|
transition: all 280ms @md_easing;
|
||||||
|
cursor: default;
|
||||||
|
> i {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&-actions {
|
||||||
|
visibility: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
> a,
|
||||||
|
> button {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
opacity: 0;
|
||||||
|
margin: 0 0 0 16px;
|
||||||
|
height: @fab_large_size;
|
||||||
|
width: 48px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: opacity 280ms @md_easing;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.material-icons {
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: @fab_large_size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-animated {
|
||||||
|
.boxShadowHelper(1);
|
||||||
|
border-radius: 4px;
|
||||||
|
> i {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-active {
|
||||||
|
.md-fab-toolbar-actions {
|
||||||
|
visibility: visible;
|
||||||
|
> a,
|
||||||
|
> button {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-small {
|
||||||
|
.md-fab-toolbar-actions {
|
||||||
|
> a,
|
||||||
|
> button {
|
||||||
|
height: @fab_small_size;
|
||||||
|
width: 36px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 0 8px;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.material-icons {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: @fab_small_size;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-fab-sheet {
|
||||||
|
transition: all 280ms @md_easing;
|
||||||
|
cursor: default;
|
||||||
|
> i {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&-actions {
|
||||||
|
visibility: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 4px 0;
|
||||||
|
> a {
|
||||||
|
display: block;
|
||||||
|
opacity: 0;
|
||||||
|
padding: 4px 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.md_font(400, 16px, 32px);
|
||||||
|
text-align: left;
|
||||||
|
&,
|
||||||
|
&:hover {
|
||||||
|
color: @text_primary_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.material-icons {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-right: 8px;
|
||||||
|
vertical-align: -6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-animated {
|
||||||
|
.boxShadowHelper(1);
|
||||||
|
border-radius: 4px;
|
||||||
|
> i {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-fab-active {
|
||||||
|
.md-fab-sheet-actions {
|
||||||
|
visibility: visible;
|
||||||
|
> a {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar_secondary_active {
|
||||||
|
.md-fab-wrapper {
|
||||||
|
margin-right: @sidebar_secondary_width - 16;
|
||||||
|
@media @screen_medium_max {
|
||||||
|
margin-right: @sidebar_secondary_width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-toggle-group {
|
||||||
|
.md-toggle-button {
|
||||||
|
border-width: 0 0 2px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: transparent;
|
||||||
|
background: none;
|
||||||
|
line-height: 30px;
|
||||||
|
min-width: 42px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
&.md-toggle-active {
|
||||||
|
border-bottom-color: #212121;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-toggle-group-small {
|
||||||
|
.md-toggle-button {
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 24px;
|
||||||
|
min-width: 16px;
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-btn-group {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
position: relative;
|
||||||
|
font-size: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
.md-btn {
|
||||||
|
vertical-align: top;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
&:first-child {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
&:not(:first-child):not(:last-child) {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,525 @@
|
||||||
|
/* cards */
|
||||||
|
.md-card {
|
||||||
|
background: @white;
|
||||||
|
position: relative;
|
||||||
|
.boxShadowHelper(1);
|
||||||
|
border: none;
|
||||||
|
& + &,
|
||||||
|
& + .uk-grid,
|
||||||
|
.uk-grid + & {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
.full_width_in_card {
|
||||||
|
padding: 16px 24px;
|
||||||
|
background: @background_color_default;
|
||||||
|
}
|
||||||
|
.md-card-toolbar {
|
||||||
|
height: @header_main_height;
|
||||||
|
//position: relative;
|
||||||
|
//z-index: 11;
|
||||||
|
padding: 0 16px;
|
||||||
|
border-bottom: 1px solid @border_color;
|
||||||
|
background: @white;
|
||||||
|
.clearfix();
|
||||||
|
&-heading-text {
|
||||||
|
.md_font(500,14px,50px);
|
||||||
|
color: @text_primary_color;
|
||||||
|
margin: 0;
|
||||||
|
float: left;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 48px;
|
||||||
|
&.large {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-toggle-group {
|
||||||
|
float: left;
|
||||||
|
margin: 8px 0 0 16px;
|
||||||
|
&.md-toggle-group-small {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-card-toolbar-actions {
|
||||||
|
float: right;
|
||||||
|
padding-top: 10px;
|
||||||
|
.uk-open {
|
||||||
|
.md-card-toolbar-icon {
|
||||||
|
background: @background_color_default;
|
||||||
|
color: @text_primary_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-card-dropdown {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.selectize-control {
|
||||||
|
min-width: 220px;
|
||||||
|
margin-top: -3px;
|
||||||
|
.selectize-input {
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
.selectize-dropdown {
|
||||||
|
margin-top: -34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-icon {
|
||||||
|
+ .md-card-dropdown {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-card-fullscreen-deactivate {
|
||||||
|
margin: 9px 8px 0 0;
|
||||||
|
}
|
||||||
|
&-input {
|
||||||
|
border: none;
|
||||||
|
.md_font(400,18px,24px);
|
||||||
|
height: auto;
|
||||||
|
background: none !important;
|
||||||
|
padding: 12px 0;
|
||||||
|
width: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.uk-tab {
|
||||||
|
margin-top: -2px;
|
||||||
|
border-bottom: none;
|
||||||
|
li > a {
|
||||||
|
padding: 10px 8px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-card-head {
|
||||||
|
height: 160px;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid @border_color;
|
||||||
|
&-menu {
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
|
&-avatar {
|
||||||
|
width: 82px;
|
||||||
|
height: 82px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 16px;
|
||||||
|
border: 2px solid @white;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
&-text {
|
||||||
|
padding: 8px 16px 16px;
|
||||||
|
.md_font(500,16px,22px);
|
||||||
|
color: @text_primary_color;
|
||||||
|
margin: 0;
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
.md_font(400,12px,18px);
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
&.text_dark {
|
||||||
|
color: @text_primary_color !important;
|
||||||
|
}
|
||||||
|
&-over {
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-subtext {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 0 16px;
|
||||||
|
text-align: right;
|
||||||
|
color: @white;
|
||||||
|
span {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-icon {
|
||||||
|
font-size: 48px;
|
||||||
|
color: @white;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
&.head_background {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
background-size: cover;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
.md-card-head-text {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
&_top {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
}
|
||||||
|
&_bottom {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.head_chart {
|
||||||
|
height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute !important;
|
||||||
|
left: 0;
|
||||||
|
top: 40px;
|
||||||
|
}
|
||||||
|
.fitVid_player {
|
||||||
|
width: 100%;
|
||||||
|
height: 160px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
&-img {
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-card-content {
|
||||||
|
padding: 16px;
|
||||||
|
&.padding-reset {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
&.large-padding {
|
||||||
|
padding: 24px 35px;
|
||||||
|
}
|
||||||
|
&.small-padding {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-card-footer {
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
.md-card-footer-head {
|
||||||
|
.md_font(500,16px,20px);
|
||||||
|
margin: 0 0 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-card-fullscreen {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9998;
|
||||||
|
overflow-x: hidden;
|
||||||
|
.md-card-fullscreen-activate {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-card-fullscreen-content {
|
||||||
|
display: none;
|
||||||
|
padding: 16px 0;
|
||||||
|
.md-card-fullscreen-content-hidden & {
|
||||||
|
display: block;
|
||||||
|
visibility: hidden;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.mdToolbar_fixed {
|
||||||
|
overflow-y: hidden;
|
||||||
|
> .md-card-toolbar {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
.boxShadowHelper(2);
|
||||||
|
}
|
||||||
|
> .md-card-content {
|
||||||
|
overflow-y: scroll;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: @header_main_height;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-card-overlay {
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom: 54px;
|
||||||
|
.md-card-content {
|
||||||
|
height: 142px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&.no_truncate {
|
||||||
|
position: relative;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 8px;
|
||||||
|
background-image: linear-gradient(to top, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
|
||||||
|
display: block;
|
||||||
|
content: '';
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> pre {
|
||||||
|
margin-top: 0;
|
||||||
|
max-height: 110px;
|
||||||
|
> code {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-card-overlay-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 0 16px;
|
||||||
|
margin-top: -54px;
|
||||||
|
border-top: 1px solid @border_color;
|
||||||
|
text-align: left;
|
||||||
|
bottom: 0;
|
||||||
|
background: @white;
|
||||||
|
z-index: 10;
|
||||||
|
transition: all 280ms @md_easing;
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
+ * {
|
||||||
|
margin-top: 16px
|
||||||
|
}
|
||||||
|
+ p {
|
||||||
|
margin-top: 4px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-card-overlay-header {
|
||||||
|
.clearfix;
|
||||||
|
padding: 12px 0;
|
||||||
|
h3,
|
||||||
|
h4 {
|
||||||
|
margin: 0;
|
||||||
|
.truncate_line;
|
||||||
|
padding-right: 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
.md_font(400, 16px, 30px);
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
.md_font(500, 14px, 30px);
|
||||||
|
}
|
||||||
|
.md-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 12px;
|
||||||
|
top: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-active {
|
||||||
|
.md-card-overlay-content {
|
||||||
|
top: -1px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-card-hover {
|
||||||
|
transition: all 280ms @md_easing;
|
||||||
|
will-change: box-shadow;
|
||||||
|
&:hover {
|
||||||
|
.boxShadowHelper(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// ui-kit sortable
|
||||||
|
.uk-sortable-dragged & {
|
||||||
|
.boxShadowHelper(3);
|
||||||
|
canvas {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.heading_list {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
&-primary,
|
||||||
|
&-success,
|
||||||
|
&-danger,
|
||||||
|
&-warning {
|
||||||
|
border-left: 4px solid transparent;
|
||||||
|
}
|
||||||
|
&-primary {
|
||||||
|
border-left-color: @primary_color;
|
||||||
|
}
|
||||||
|
&-success {
|
||||||
|
border-left-color: @success_color;
|
||||||
|
}
|
||||||
|
&-danger {
|
||||||
|
border-left-color: @danger_color;
|
||||||
|
}
|
||||||
|
&-warning {
|
||||||
|
border-left-color: @warning_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-expand,
|
||||||
|
.md-expand-group > * {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.md-card-placeholder {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
.md-card-list-wrapper {
|
||||||
|
.border-box();
|
||||||
|
.md-card-list-header {
|
||||||
|
position: absolute;
|
||||||
|
top: -24px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.md-card-list {
|
||||||
|
margin: 48px 0 0 0;
|
||||||
|
position: relative;
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
> ul {
|
||||||
|
.reset_list();
|
||||||
|
> li {
|
||||||
|
min-height: 34px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
.clearfix();
|
||||||
|
transition: background 150ms,padding 200ms;
|
||||||
|
background: @white;
|
||||||
|
.boxShadowHelper(1);
|
||||||
|
&.item-shown {
|
||||||
|
background: @white;
|
||||||
|
padding: 8px 36px;
|
||||||
|
.md-card-list-item {
|
||||||
|
&-subject {
|
||||||
|
@media @screen_medium_max {
|
||||||
|
clear: both;
|
||||||
|
float: none;
|
||||||
|
padding-top: 16px;
|
||||||
|
> span {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-sender {
|
||||||
|
width: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-card-list-item-selected {
|
||||||
|
position: relative;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 8px;
|
||||||
|
background: @theme_light_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-card-list-item {
|
||||||
|
&-select,
|
||||||
|
&-avatar-wrapper,
|
||||||
|
&-sender {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
&-select {
|
||||||
|
padding: 6px 8px 0 0;
|
||||||
|
}
|
||||||
|
&-avatar-wrapper,
|
||||||
|
&-sender,
|
||||||
|
&-subject,
|
||||||
|
&-date {
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
&-avatar-wrapper {
|
||||||
|
.md-card-list-item-avatar {
|
||||||
|
background: #757575;
|
||||||
|
color: @white;
|
||||||
|
.md-user-image;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
span.md-card-list-item-avatar {
|
||||||
|
line-height: 34px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
&-sender {
|
||||||
|
width: 220px;
|
||||||
|
line-height: 34px;
|
||||||
|
> span {
|
||||||
|
.truncate_line();
|
||||||
|
}
|
||||||
|
@media @screen_xlarge_max {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-subject {
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: 500;
|
||||||
|
> span {
|
||||||
|
line-height: 34px;
|
||||||
|
.truncate_line();
|
||||||
|
}
|
||||||
|
.md-card-list-item-sender-small {
|
||||||
|
display: none;
|
||||||
|
@media @screen_xlarge_max {
|
||||||
|
display: block;
|
||||||
|
+ span {
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
.truncate_line();
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-date {
|
||||||
|
line-height: 34px;
|
||||||
|
float: right;
|
||||||
|
color: #999;
|
||||||
|
@media @screen_small_max {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-menu {
|
||||||
|
float: right;
|
||||||
|
margin: 0 0 0 8px;
|
||||||
|
position: relative;
|
||||||
|
.uk-dropdown {
|
||||||
|
.material-icons {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-content-wrapper {
|
||||||
|
display: none;
|
||||||
|
clear: both;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
&-content {
|
||||||
|
padding: 16px 16px 0 0;
|
||||||
|
max-height: 360px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
margin: 0 0 40px;
|
||||||
|
top: 20px;
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
+ .md-card-list-item-reply {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-reply {
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
&-selected {
|
||||||
|
background: @theme_light_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,274 @@
|
||||||
|
// colors
|
||||||
|
|
||||||
|
@md-color-red-50: #ffebee;
|
||||||
|
@md-color-red-100: #ffcdd2;
|
||||||
|
@md-color-red-200: #ef9a9a;
|
||||||
|
@md-color-red-300: #e57373;
|
||||||
|
@md-color-red-400: #ef5350;
|
||||||
|
@md-color-red-500: #f44336;
|
||||||
|
@md-color-red-600: #e53935;
|
||||||
|
@md-color-red-700: #d32f2f;
|
||||||
|
@md-color-red-800: #c62828;
|
||||||
|
@md-color-red-900: #b71c1c;
|
||||||
|
@md-color-red-A100: #ff8a80;
|
||||||
|
@md-color-red-A200: #ff5252;
|
||||||
|
@md-color-red-A400: #ff1744;
|
||||||
|
@md-color-red-A700: #d50000;
|
||||||
|
|
||||||
|
@md-color-pink-50: #fce4ec;
|
||||||
|
@md-color-pink-100: #f8bbd0;
|
||||||
|
@md-color-pink-200: #f48fb1;
|
||||||
|
@md-color-pink-300: #f06292;
|
||||||
|
@md-color-pink-400: #ec407a;
|
||||||
|
@md-color-pink-500: #e91e63;
|
||||||
|
@md-color-pink-600: #d81b60;
|
||||||
|
@md-color-pink-700: #c2185b;
|
||||||
|
@md-color-pink-800: #ad1457;
|
||||||
|
@md-color-pink-900: #880e4f;
|
||||||
|
@md-color-pink-A100: #ff80ab;
|
||||||
|
@md-color-pink-A200: #ff4081;
|
||||||
|
@md-color-pink-A400: #f50057;
|
||||||
|
@md-color-pink-A700: #c51162;
|
||||||
|
|
||||||
|
@md-color-purple-50: #f3e5f5;
|
||||||
|
@md-color-purple-100: #e1bee7;
|
||||||
|
@md-color-purple-200: #ce93d8;
|
||||||
|
@md-color-purple-300: #ba68c8;
|
||||||
|
@md-color-purple-400: #ab47bc;
|
||||||
|
@md-color-purple-500: #9c27b0;
|
||||||
|
@md-color-purple-600: #8e24aa;
|
||||||
|
@md-color-purple-700: #7b1fa2;
|
||||||
|
@md-color-purple-800: #6a1b9a;
|
||||||
|
@md-color-purple-900: #4a148c;
|
||||||
|
@md-color-purple-A100: #ea80fc;
|
||||||
|
@md-color-purple-A200: #e040fb;
|
||||||
|
@md-color-purple-A400: #d500f9;
|
||||||
|
@md-color-purple-A700: #aa00ff;
|
||||||
|
|
||||||
|
@md-color-deep-purple-50: #ede7f6;
|
||||||
|
@md-color-deep-purple-100: #d1c4e9;
|
||||||
|
@md-color-deep-purple-200: #b39ddb;
|
||||||
|
@md-color-deep-purple-300: #9575cd;
|
||||||
|
@md-color-deep-purple-400: #7e57c2;
|
||||||
|
@md-color-deep-purple-500: #673ab7;
|
||||||
|
@md-color-deep-purple-600: #5e35b1;
|
||||||
|
@md-color-deep-purple-700: #512da8;
|
||||||
|
@md-color-deep-purple-800: #4527a0;
|
||||||
|
@md-color-deep-purple-900: #311b92;
|
||||||
|
@md-color-deep-purple-A100: #b388ff;
|
||||||
|
@md-color-deep-purple-A200: #7c4dff;
|
||||||
|
@md-color-deep-purple-A400: #651fff;
|
||||||
|
@md-color-deep-purple-A700: #6200ea;
|
||||||
|
|
||||||
|
@md-color-indigo-50: #e8eaf6;
|
||||||
|
@md-color-indigo-100: #c5cae9;
|
||||||
|
@md-color-indigo-200: #9fa8da;
|
||||||
|
@md-color-indigo-300: #7986cb;
|
||||||
|
@md-color-indigo-400: #5c6bc0;
|
||||||
|
@md-color-indigo-500: #3f51b5;
|
||||||
|
@md-color-indigo-600: #3949ab;
|
||||||
|
@md-color-indigo-700: #303f9f;
|
||||||
|
@md-color-indigo-800: #283593;
|
||||||
|
@md-color-indigo-900: #1a237e;
|
||||||
|
@md-color-indigo-A100: #8c9eff;
|
||||||
|
@md-color-indigo-A200: #536dfe;
|
||||||
|
@md-color-indigo-A400: #3d5afe;
|
||||||
|
@md-color-indigo-A700: #304ffe;
|
||||||
|
|
||||||
|
@md-color-blue-50: #e3f2fd;
|
||||||
|
@md-color-blue-100: #bbdefb;
|
||||||
|
@md-color-blue-200: #90caf9;
|
||||||
|
@md-color-blue-300: #64b5f6;
|
||||||
|
@md-color-blue-400: #42a5f5;
|
||||||
|
@md-color-blue-500: #2196f3;
|
||||||
|
@md-color-blue-600: #1e88e5;
|
||||||
|
@md-color-blue-700: #1976d2;
|
||||||
|
@md-color-blue-800: #1565c0;
|
||||||
|
@md-color-blue-900: #0d47a1;
|
||||||
|
@md-color-blue-A100: #82b1ff;
|
||||||
|
@md-color-blue-A200: #448aff;
|
||||||
|
@md-color-blue-A400: #2979ff;
|
||||||
|
@md-color-blue-A700: #2962ff;
|
||||||
|
|
||||||
|
@md-color-light-blue-50: #e1f5fe;
|
||||||
|
@md-color-light-blue-100: #b3e5fc;
|
||||||
|
@md-color-light-blue-200: #81d4fa;
|
||||||
|
@md-color-light-blue-300: #4fc3f7;
|
||||||
|
@md-color-light-blue-400: #29b6f6;
|
||||||
|
@md-color-light-blue-500: #03a9f4;
|
||||||
|
@md-color-light-blue-600: #039be5;
|
||||||
|
@md-color-light-blue-700: #0288d1;
|
||||||
|
@md-color-light-blue-800: #0277bd;
|
||||||
|
@md-color-light-blue-900: #01579b;
|
||||||
|
@md-color-light-blue-A100: #80d8ff;
|
||||||
|
@md-color-light-blue-A200: #40c4ff;
|
||||||
|
@md-color-light-blue-A400: #00b0ff;
|
||||||
|
@md-color-light-blue-A700: #0091ea;
|
||||||
|
|
||||||
|
@md-color-cyan-50: #e0f7fa;
|
||||||
|
@md-color-cyan-100: #b2ebf2;
|
||||||
|
@md-color-cyan-200: #80deea;
|
||||||
|
@md-color-cyan-300: #4dd0e1;
|
||||||
|
@md-color-cyan-400: #26c6da;
|
||||||
|
@md-color-cyan-500: #00bcd4;
|
||||||
|
@md-color-cyan-600: #00acc1;
|
||||||
|
@md-color-cyan-700: #0097a7;
|
||||||
|
@md-color-cyan-800: #00838f;
|
||||||
|
@md-color-cyan-900: #006064;
|
||||||
|
@md-color-cyan-A100: #84ffff;
|
||||||
|
@md-color-cyan-A200: #18ffff;
|
||||||
|
@md-color-cyan-A400: #00e5ff;
|
||||||
|
@md-color-cyan-A700: #00b8d4;
|
||||||
|
|
||||||
|
@md-color-teal-50: #e0f2f1;
|
||||||
|
@md-color-teal-100: #b2dfdb;
|
||||||
|
@md-color-teal-200: #80cbc4;
|
||||||
|
@md-color-teal-300: #4db6ac;
|
||||||
|
@md-color-teal-400: #26a69a;
|
||||||
|
@md-color-teal-500: #009688;
|
||||||
|
@md-color-teal-600: #00897b;
|
||||||
|
@md-color-teal-700: #00796b;
|
||||||
|
@md-color-teal-800: #00695c;
|
||||||
|
@md-color-teal-900: #004d40;
|
||||||
|
@md-color-teal-A100: #a7ffeb;
|
||||||
|
@md-color-teal-A200: #64ffda;
|
||||||
|
@md-color-teal-A400: #1de9b6;
|
||||||
|
@md-color-teal-A700: #00bfa5;
|
||||||
|
|
||||||
|
@md-color-green-50: #e8f5e9;
|
||||||
|
@md-color-green-100: #c8e6c9;
|
||||||
|
@md-color-green-200: #a5d6a7;
|
||||||
|
@md-color-green-300: #81c784;
|
||||||
|
@md-color-green-400: #66bb6a;
|
||||||
|
@md-color-green-500: #4caf50;
|
||||||
|
@md-color-green-600: #43a047;
|
||||||
|
@md-color-green-700: #388e3c;
|
||||||
|
@md-color-green-800: #2e7d32;
|
||||||
|
@md-color-green-900: #1b5e20;
|
||||||
|
@md-color-green-A100: #b9f6ca;
|
||||||
|
@md-color-green-A200: #69f0ae;
|
||||||
|
@md-color-green-A400: #00e676;
|
||||||
|
@md-color-green-A700: #00c853;
|
||||||
|
|
||||||
|
@md-color-light-green-50: #f1f8e9;
|
||||||
|
@md-color-light-green-100: #dcedc8;
|
||||||
|
@md-color-light-green-200: #c5e1a5;
|
||||||
|
@md-color-light-green-300: #aed581;
|
||||||
|
@md-color-light-green-400: #9ccc65;
|
||||||
|
@md-color-light-green-500: #8bc34a;
|
||||||
|
@md-color-light-green-600: #7cb342;
|
||||||
|
@md-color-light-green-700: #689f38;
|
||||||
|
@md-color-light-green-800: #558b2f;
|
||||||
|
@md-color-light-green-900: #33691e;
|
||||||
|
@md-color-light-green-A100: #ccff90;
|
||||||
|
@md-color-light-green-A200: #b2ff59;
|
||||||
|
@md-color-light-green-A400: #76ff03;
|
||||||
|
@md-color-light-green-A700: #64dd17;
|
||||||
|
|
||||||
|
@md-color-lime-50: #f9fbe7;
|
||||||
|
@md-color-lime-100: #f0f4c3;
|
||||||
|
@md-color-lime-200: #e6ee9c;
|
||||||
|
@md-color-lime-300: #dce775;
|
||||||
|
@md-color-lime-400: #d4e157;
|
||||||
|
@md-color-lime-500: #cddc39;
|
||||||
|
@md-color-lime-600: #c0ca33;
|
||||||
|
@md-color-lime-700: #afb42b;
|
||||||
|
@md-color-lime-800: #9e9d24;
|
||||||
|
@md-color-lime-900: #827717;
|
||||||
|
@md-color-lime-A100: #f4ff81;
|
||||||
|
@md-color-lime-A200: #eeff41;
|
||||||
|
@md-color-lime-A400: #c6ff00;
|
||||||
|
@md-color-lime-A700: #aeea00;
|
||||||
|
|
||||||
|
@md-color-yellow-50: #fffde7;
|
||||||
|
@md-color-yellow-100: #fff9c4;
|
||||||
|
@md-color-yellow-200: #fff59d;
|
||||||
|
@md-color-yellow-300: #fff176;
|
||||||
|
@md-color-yellow-400: #ffee58;
|
||||||
|
@md-color-yellow-500: #ffeb3b;
|
||||||
|
@md-color-yellow-600: #fdd835;
|
||||||
|
@md-color-yellow-700: #fbc02d;
|
||||||
|
@md-color-yellow-800: #f9a825;
|
||||||
|
@md-color-yellow-900: #f57f17;
|
||||||
|
@md-color-yellow-A100: #ffff8d;
|
||||||
|
@md-color-yellow-A200: #ffff00;
|
||||||
|
@md-color-yellow-A400: #ffea00;
|
||||||
|
@md-color-yellow-A700: #ffd600;
|
||||||
|
|
||||||
|
@md-color-amber-50: #fff8e1;
|
||||||
|
@md-color-amber-100: #ffecb3;
|
||||||
|
@md-color-amber-200: #ffe082;
|
||||||
|
@md-color-amber-300: #ffd54f;
|
||||||
|
@md-color-amber-400: #ffca28;
|
||||||
|
@md-color-amber-500: #ffc107;
|
||||||
|
@md-color-amber-600: #ffb300;
|
||||||
|
@md-color-amber-700: #ffa000;
|
||||||
|
@md-color-amber-800: #ff8f00;
|
||||||
|
@md-color-amber-900: #ff6f00;
|
||||||
|
@md-color-amber-A100: #ffe57f;
|
||||||
|
@md-color-amber-A200: #ffd740;
|
||||||
|
@md-color-amber-A400: #ffc400;
|
||||||
|
@md-color-amber-A700: #ffab00;
|
||||||
|
|
||||||
|
@md-color-orange-50: #fff3e0;
|
||||||
|
@md-color-orange-100: #ffe0b2;
|
||||||
|
@md-color-orange-200: #ffcc80;
|
||||||
|
@md-color-orange-300: #ffb74d;
|
||||||
|
@md-color-orange-400: #ffa726;
|
||||||
|
@md-color-orange-500: #ff9800;
|
||||||
|
@md-color-orange-600: #fb8c00;
|
||||||
|
@md-color-orange-700: #f57c00;
|
||||||
|
@md-color-orange-800: #ef6c00;
|
||||||
|
@md-color-orange-900: #e65100;
|
||||||
|
@md-color-orange-A100: #ffd180;
|
||||||
|
@md-color-orange-A200: #ffab40;
|
||||||
|
@md-color-orange-A400: #ff9100;
|
||||||
|
@md-color-orange-A700: #ff6d00;
|
||||||
|
|
||||||
|
@md-color-deep-orange-50: #fbe9e7;
|
||||||
|
@md-color-deep-orange-100: #ffccbc;
|
||||||
|
@md-color-deep-orange-200: #ffab91;
|
||||||
|
@md-color-deep-orange-300: #ff8a65;
|
||||||
|
@md-color-deep-orange-400: #ff7043;
|
||||||
|
@md-color-deep-orange-500: #ff5722;
|
||||||
|
@md-color-deep-orange-600: #f4511e;
|
||||||
|
@md-color-deep-orange-700: #e64a19;
|
||||||
|
@md-color-deep-orange-800: #d84315;
|
||||||
|
@md-color-deep-orange-900: #bf360c;
|
||||||
|
@md-color-deep-orange-A100: #ff9e80;
|
||||||
|
@md-color-deep-orange-A200: #ff6e40;
|
||||||
|
@md-color-deep-orange-A400: #ff3d00;
|
||||||
|
@md-color-deep-orange-A700: #dd2c00;
|
||||||
|
|
||||||
|
@md-color-brown-50: #efebe9;
|
||||||
|
@md-color-brown-100: #d7ccc8;
|
||||||
|
@md-color-brown-200: #bcaaa4;
|
||||||
|
@md-color-brown-300: #a1887f;
|
||||||
|
@md-color-brown-400: #8d6e63;
|
||||||
|
@md-color-brown-500: #795548;
|
||||||
|
@md-color-brown-600: #6d4c41;
|
||||||
|
@md-color-brown-700: #5d4037;
|
||||||
|
@md-color-brown-800: #4e342e;
|
||||||
|
@md-color-brown-900: #3e2723;
|
||||||
|
|
||||||
|
@md-color-grey-50: #fafafa;
|
||||||
|
@md-color-grey-100: #f5f5f5;
|
||||||
|
@md-color-grey-200: #eeeeee;
|
||||||
|
@md-color-grey-300: #e0e0e0;
|
||||||
|
@md-color-grey-400: #bdbdbd;
|
||||||
|
@md-color-grey-500: #9e9e9e;
|
||||||
|
@md-color-grey-600: #757575;
|
||||||
|
@md-color-grey-700: #616161;
|
||||||
|
@md-color-grey-800: #424242;
|
||||||
|
@md-color-grey-900: #212121;
|
||||||
|
|
||||||
|
@md-color-blue-grey-50: #eceff1;
|
||||||
|
@md-color-blue-grey-100: #cfd8dc;
|
||||||
|
@md-color-blue-grey-200: #b0bec5;
|
||||||
|
@md-color-blue-grey-300: #90a4ae;
|
||||||
|
@md-color-blue-grey-400: #78909c;
|
||||||
|
@md-color-blue-grey-500: #607d8b;
|
||||||
|
@md-color-blue-grey-600: #546e7a;
|
||||||
|
@md-color-blue-grey-700: #455a64;
|
||||||
|
@md-color-blue-grey-800: #37474f;
|
||||||
|
@md-color-blue-grey-900: #263238;
|
|
@ -0,0 +1,239 @@
|
||||||
|
/* forms */
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
input:not([type]),
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="datetime"],
|
||||||
|
input[type="datetime-local"],
|
||||||
|
input[type="date"],
|
||||||
|
input[type="month"],
|
||||||
|
input[type="time"],
|
||||||
|
input[type="week"],
|
||||||
|
input[type="number"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="url"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="tel"],
|
||||||
|
input[type="color"] {
|
||||||
|
outline: none;
|
||||||
|
&.md-input {
|
||||||
|
border-radius: 0;
|
||||||
|
border-width: 0 0 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: @border_color;
|
||||||
|
.md_font(400,15px,18px);
|
||||||
|
box-shadow: inset 0 -1px 0 rgba(0,0,0,0);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 12px 4px;
|
||||||
|
background: transparent;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
&.md-input-danger {
|
||||||
|
border-color: @danger_color;
|
||||||
|
&:focus {
|
||||||
|
border-bottom-color: @danger_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-input-success {
|
||||||
|
border-color: @success_color;
|
||||||
|
&:focus {
|
||||||
|
border-bottom-color: @success_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
background: transparent;
|
||||||
|
border-color: @border_color;
|
||||||
|
}
|
||||||
|
&-small {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
&.uk-form-width {
|
||||||
|
&-mini {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
&-small {
|
||||||
|
width: 130px;
|
||||||
|
}
|
||||||
|
&-medium {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
&-large {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select.md-input {
|
||||||
|
&.uk-form-width-mini {
|
||||||
|
width: 65px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-input {
|
||||||
|
&-width-small {
|
||||||
|
min-width: 80px !important;
|
||||||
|
}
|
||||||
|
&-width-medium {
|
||||||
|
min-width: 160px !important;
|
||||||
|
}
|
||||||
|
&-width-large {
|
||||||
|
min-width: 320px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
&.md-input {
|
||||||
|
min-height: 80px;
|
||||||
|
resize: none;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 200ms ease-out;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
&.no_autosize {
|
||||||
|
min-height: inherit;
|
||||||
|
overflow: auto;
|
||||||
|
transition: none;
|
||||||
|
resize: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-input-wrapper {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 4px;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
.md-input-bar {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: @primary_color_dark;
|
||||||
|
transition: width 400ms @md_easing;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
left: 50%
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: 50%
|
||||||
|
}
|
||||||
|
&.uk-form-width {
|
||||||
|
&-mini {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
&-small {
|
||||||
|
width: 130px;
|
||||||
|
}
|
||||||
|
&-medium {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
&-large {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> label {
|
||||||
|
color: @text_secondary_color;
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 4px;
|
||||||
|
right: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 150ms ease-out;
|
||||||
|
}
|
||||||
|
+ * {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
&.md-input-wrapper-disabled {
|
||||||
|
> label {
|
||||||
|
color: @input_disabled_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-count {
|
||||||
|
padding-bottom: 24px;
|
||||||
|
.md-input-bar {
|
||||||
|
bottom: 24px;
|
||||||
|
}
|
||||||
|
.text-count-wrapper {
|
||||||
|
font-size: 12px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 200ms ease-in;
|
||||||
|
.md-input-wrapper-count > & {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-input-filled,
|
||||||
|
.md-input-focus {
|
||||||
|
> label {
|
||||||
|
top: -6px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
&.md-input-wrapper-count {
|
||||||
|
.text-count-wrapper {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-input-focus {
|
||||||
|
.md-input-bar:before,
|
||||||
|
.md-input-bar:after {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-input-wrapper-danger {
|
||||||
|
.md-input-bar {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
background: @danger_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-input-wrapper-count {
|
||||||
|
.text-count-wrapper {
|
||||||
|
color: @danger_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-input-wrapper-success {
|
||||||
|
.md-input-bar {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
background: @success_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-input-wrapper-count {
|
||||||
|
.text-count-wrapper {
|
||||||
|
color: @success_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-form-group {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.md-label {
|
||||||
|
color: #999;
|
||||||
|
padding: 0 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
|
@ -0,0 +1,58 @@
|
||||||
|
// Material Design Icons
|
||||||
|
// http://google.github.io/material-design-icons/
|
||||||
|
@material_icons_directory: '../icons/material-design-icons/';
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url("@{material_icons_directory}MaterialIcons-Regular.eot"); /* For IE6-8 */
|
||||||
|
src: local('Material Icons'),
|
||||||
|
local('MaterialIcons-Regular'),
|
||||||
|
url("@{material_icons_directory}MaterialIcons-Regular.woff2") format('woff2'),
|
||||||
|
url("@{material_icons_directory}MaterialIcons-Regular.woff") format('woff'),
|
||||||
|
url("@{material_icons_directory}MaterialIcons-Regular.ttf") format('truetype');
|
||||||
|
}
|
||||||
|
.material-icons {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 18px; /* Preferred icon size */
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
line-height: 1;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
/* Support for all WebKit browsers. */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
/* Support for Safari and Chrome. */
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
/* Support for Firefox. */
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* Support for IE. */
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
vertical-align: -4px;
|
||||||
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
&.md-inactive {
|
||||||
|
color: rgba(0, 0, 0, 0.26);
|
||||||
|
}
|
||||||
|
&.md-24 {
|
||||||
|
font-size: 24px;
|
||||||
|
vertical-align: -8px;
|
||||||
|
}
|
||||||
|
&.md-36 {
|
||||||
|
font-size: 36px;
|
||||||
|
vertical-align: -16px;
|
||||||
|
}
|
||||||
|
&.md-48 {
|
||||||
|
font-size: 48px;
|
||||||
|
vertical-align: -24px;
|
||||||
|
}
|
||||||
|
&.md-light {
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
&.md-inactive {
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,285 @@
|
||||||
|
/* list */
|
||||||
|
.md-list {
|
||||||
|
.reset_list;
|
||||||
|
.border-box;
|
||||||
|
.uk-nestable-list > li,
|
||||||
|
> li {
|
||||||
|
min-height: 48px;
|
||||||
|
padding: 8px 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 1px solid @border_color;
|
||||||
|
position: relative;
|
||||||
|
> .md-list-content {
|
||||||
|
overflow: hidden;
|
||||||
|
> span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.md-list-heading {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 500;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
}
|
||||||
|
.md-list-menu {
|
||||||
|
float: right;
|
||||||
|
.md-list-menu-toggle {
|
||||||
|
display: block;
|
||||||
|
font-size: 18px;
|
||||||
|
color: rgba(0,0,0,.8);
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
border-radius: 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uk-badge {
|
||||||
|
float: right;
|
||||||
|
color: @white !important;
|
||||||
|
}
|
||||||
|
.md-list-action {
|
||||||
|
float: right;
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-top: 2px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.md-list-action-placeholder {
|
||||||
|
float: right;
|
||||||
|
margin-left: 8px;
|
||||||
|
display: none;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-list-action-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
top: 10px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
> a.md-list-content {
|
||||||
|
display: block;
|
||||||
|
color: @text_primary_color;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
&.md-list-item-active {
|
||||||
|
color: @accent_color;
|
||||||
|
background: @background_color_default_hex;
|
||||||
|
}
|
||||||
|
&.md-list-item-disabled {
|
||||||
|
> .md-list-content {
|
||||||
|
color: @muted_color;
|
||||||
|
span {
|
||||||
|
color: @muted_color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.heading_list {
|
||||||
|
min-height: 32px;
|
||||||
|
padding: 32px 8px 16px;
|
||||||
|
border-bottom: none;
|
||||||
|
background: transparent !important;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.uk-touch &,
|
||||||
|
&:hover {
|
||||||
|
> .md-list-addon-element {
|
||||||
|
.uk-nestable-handle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .md-list-content {
|
||||||
|
.md-list-action,
|
||||||
|
.md-list-action-placeholder {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-list-action-dropdown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uk-nestable-list > li {
|
||||||
|
margin-left: 64px;
|
||||||
|
}
|
||||||
|
&-addon {
|
||||||
|
> li {
|
||||||
|
margin-left: 64px;
|
||||||
|
position: relative;
|
||||||
|
&:last-child {
|
||||||
|
.md-list-addon-element {
|
||||||
|
border-bottom: none;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
.md-list-addon-element {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-list-item-active {
|
||||||
|
.md-list-addon-element {
|
||||||
|
&,
|
||||||
|
.material-icons {
|
||||||
|
color: @accent_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-element {
|
||||||
|
position: absolute;
|
||||||
|
left: -64px;
|
||||||
|
top: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
width: 64px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
display: block;
|
||||||
|
.element-status {
|
||||||
|
position: absolute;
|
||||||
|
right: 12px;
|
||||||
|
top: 10px;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: @muted_color;
|
||||||
|
border: 1px solid @white;
|
||||||
|
&-danger {
|
||||||
|
background: @danger_color;
|
||||||
|
}
|
||||||
|
&-success {
|
||||||
|
background: @success_color;
|
||||||
|
}
|
||||||
|
&-warning {
|
||||||
|
background: @warning_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .md-list-addon-avatar {
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
> .md-list-addon-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
margin-top: 4px;
|
||||||
|
color: @text_secondary_color;
|
||||||
|
}
|
||||||
|
> .material-icons {
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
.iradio_md,
|
||||||
|
.icheckbox_md {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.uk-nestable-handle {
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
top: 12px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-interactive {
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-bg {
|
||||||
|
background: @white;
|
||||||
|
}
|
||||||
|
&-separated {
|
||||||
|
li {
|
||||||
|
background: @white;
|
||||||
|
padding: 8px;
|
||||||
|
+ li {
|
||||||
|
border-top: none;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-bg-no-sep {
|
||||||
|
background: @white;
|
||||||
|
padding: 8px;
|
||||||
|
li > .md-list-content {
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-outside {
|
||||||
|
> li {
|
||||||
|
padding: 0;
|
||||||
|
> .md-list-content {
|
||||||
|
padding: 8px 16px;
|
||||||
|
display: block;
|
||||||
|
color: @text_primary_color;
|
||||||
|
}
|
||||||
|
&.md-list-item-active,
|
||||||
|
&:hover:not(.heading_list) {
|
||||||
|
background: @background_color_default;
|
||||||
|
}
|
||||||
|
&.heading_list {
|
||||||
|
padding: 32px 16px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.md-list-addon {
|
||||||
|
li {
|
||||||
|
margin-left: 0;
|
||||||
|
.md-list-addon-element {
|
||||||
|
position: relative;
|
||||||
|
top: auto;
|
||||||
|
left: auto;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.md-list-content {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*&-outside-wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
}*/
|
||||||
|
.uk-nestable-list {
|
||||||
|
padding-left: 0;
|
||||||
|
.uk-nestable-item {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uk-nestable-item + .uk-nestable-item {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
&-right {
|
||||||
|
&.md-list-addon {
|
||||||
|
> li {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 64px;
|
||||||
|
.md-list-addon-element {
|
||||||
|
left: auto;
|
||||||
|
right: -64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-borderless {
|
||||||
|
> li {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uk-touch {
|
||||||
|
.md-list-addon-element {
|
||||||
|
.uk-nestable-handle {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-list-content {
|
||||||
|
.md-list-action,
|
||||||
|
.md-list-action-placeholder {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-list-action-dropdown {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,49 @@
|
||||||
|
/* panels */
|
||||||
|
.md-panel-full {
|
||||||
|
.border-box();
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100%;
|
||||||
|
> .uk-grid {
|
||||||
|
height: 100%;
|
||||||
|
[class*=uk-width] {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-panel-full-aside {
|
||||||
|
margin: 16px 16px 32px;
|
||||||
|
padding: 16px;
|
||||||
|
&.md-panel-full-aside-bg {
|
||||||
|
background: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-panel-full-content {
|
||||||
|
background: @white;
|
||||||
|
padding: 25px 25px 90px;
|
||||||
|
width: inherit;
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
> .md-panel-full-content-inner {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
width: inherit;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background: @white;
|
||||||
|
display: block;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
.md-box-shadow-left();
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.md-panel-full-content-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
.md-panel-full-content-menu {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,59 @@
|
||||||
|
// variables
|
||||||
|
@color_variants: 50,100,200,300,400,500,600,700,800,900,A100,A200,A400,A700;
|
||||||
|
@color_array: 'red','pink','purple','deep-purple','indigo','blue','light-blue','cyan','teal','green','light-green','lime','yellow','amber','orange','deep-orange';
|
||||||
|
@color_array_no_accent: 'brown','grey','blue-grey';
|
||||||
|
|
||||||
|
// colors with accents
|
||||||
|
.makeMdVariants(@i, @actColor) when (@i <= 14) {
|
||||||
|
|
||||||
|
@colorVariant: extract(@color_variants, @i);
|
||||||
|
|
||||||
|
.md-color-@{actColor}-@{colorVariant} {
|
||||||
|
color: ~"@{md-color-@{actColor}-@{colorVariant}}" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-bg-@{actColor}-@{colorVariant} {
|
||||||
|
background-color: ~"@{md-color-@{actColor}-@{colorVariant}}" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.makeMdVariants(@i + 1,@actColor);
|
||||||
|
}
|
||||||
|
.makeMdColors(@i) when (@i <= 16) {
|
||||||
|
|
||||||
|
@actColor: extract(@color_array, @i);
|
||||||
|
|
||||||
|
.makeMdVariants(1,e(@actColor));
|
||||||
|
|
||||||
|
.makeMdColors(@i + 1);
|
||||||
|
}
|
||||||
|
.makeMdColors(1);
|
||||||
|
|
||||||
|
|
||||||
|
// colors without accent
|
||||||
|
.makeMdVariantsNoAccent(@i, @actColor) when (@i <= 10) {
|
||||||
|
|
||||||
|
@colorVariant: extract(@color_variants, @i);
|
||||||
|
|
||||||
|
.md-color-@{actColor}-@{colorVariant} {
|
||||||
|
color: ~"@{md-color-@{actColor}-@{colorVariant}}" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-bg-@{actColor}-@{colorVariant} {
|
||||||
|
background-color: ~"@{md-color-@{actColor}-@{colorVariant}}" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.makeMdVariantsNoAccent(@i + 1,@actColor);
|
||||||
|
}
|
||||||
|
.makeMdColorsNoAccent(@i) when (@i <= 3) {
|
||||||
|
|
||||||
|
@actColorNoAccent: extract(@color_array_no_accent, @i);
|
||||||
|
|
||||||
|
.makeMdVariantsNoAccent(1,e(@actColorNoAccent));
|
||||||
|
|
||||||
|
.makeMdColorsNoAccent(@i + 1);
|
||||||
|
}
|
||||||
|
.makeMdColorsNoAccent(1);
|
||||||
|
|
||||||
|
.md-color-white {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
|
@ -0,0 +1,33 @@
|
||||||
|
/* top bar */
|
||||||
|
.md-top-bar {
|
||||||
|
.md-top-bar-checkbox {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.md-top-bar-icons {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.md-top-bar-icons,
|
||||||
|
.md-top-bar-checkbox {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.md-btn-group {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.md-top-bar-actions-left {
|
||||||
|
float: left;
|
||||||
|
padding-left: 16px;
|
||||||
|
.md-btn-group {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-top-bar-actions-right {
|
||||||
|
float: right;
|
||||||
|
padding-right: 16px;
|
||||||
|
.md-btn-group {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-btn-small {
|
||||||
|
padding: 2px 12px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,191 @@
|
||||||
|
/*** utils ***/
|
||||||
|
|
||||||
|
/* avatar */
|
||||||
|
.md-user-image {
|
||||||
|
width: 34px;
|
||||||
|
border-radius: 50%;
|
||||||
|
&-large {
|
||||||
|
width: 82px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-user {
|
||||||
|
&-placeholder {
|
||||||
|
background-color: @background_color_default;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
&-letters {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 35px;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
background-color: @background_color_default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* icons */
|
||||||
|
.md-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px !important;
|
||||||
|
height: 32px !important;
|
||||||
|
color: @text_secondary_color;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 280ms ease-out,color 280ms ease-out;
|
||||||
|
width: 32px !important;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&.active {
|
||||||
|
color: @text_primary_color;
|
||||||
|
background: rgba(0,0,0,.08);
|
||||||
|
}
|
||||||
|
&-light {
|
||||||
|
color: @white;
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: @white;
|
||||||
|
background: rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-dark {
|
||||||
|
color: @text_primary_color;
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: @text_primary_color;
|
||||||
|
background: rgba(255,255,255,.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& + & {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
&-btn {
|
||||||
|
display: inline-block;
|
||||||
|
&.active {
|
||||||
|
.md-icon {
|
||||||
|
color: @text_primary_color;
|
||||||
|
background: rgba(0,0,0,.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button& {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uk-open {
|
||||||
|
.md-icon {
|
||||||
|
color: @text_primary_color;
|
||||||
|
background: rgba(0,0,0,.08);
|
||||||
|
&-light {
|
||||||
|
color: @white;
|
||||||
|
background: rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
&-dark {
|
||||||
|
color: @text_primary_color;
|
||||||
|
background: rgba(255,255,255,.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* dropdown list */
|
||||||
|
.md-list-inputs {
|
||||||
|
.reset_list();
|
||||||
|
li {
|
||||||
|
+ li {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
.icheckbox_md {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
overflow: hidden;
|
||||||
|
padding-left: 8px;
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hr */
|
||||||
|
.md-hr {
|
||||||
|
margin: 32px 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 2px solid @border_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* animated show */
|
||||||
|
@keyframes hierarchical_show {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale3d(.2, .2, 2);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hierarchical_show {
|
||||||
|
will-change: transform, opacity;
|
||||||
|
> * {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
&_inView {
|
||||||
|
> * {
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-timing-function: @md_easing;
|
||||||
|
animation-duration: 700ms;
|
||||||
|
animation-name: hierarchical_show;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hierarchical_slide {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(0, 160%, 0);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hierarchical_slide {
|
||||||
|
will-change: transform, opacity;
|
||||||
|
> * {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
&_inView {
|
||||||
|
> * {
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-timing-function: @md_easing;
|
||||||
|
animation-duration: 700ms;
|
||||||
|
animation-name: hierarchical_slide;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fast_animation {
|
||||||
|
animation-duration: 350ms;
|
||||||
|
}
|
|
@ -0,0 +1,61 @@
|
||||||
|
// shadows
|
||||||
|
.boxShadowHelper(@level: 1){
|
||||||
|
& when (@level = 0) {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
& when (@level = 1) {
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||||
|
}
|
||||||
|
& when (@level = 2) {
|
||||||
|
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
& when (@level = 3) {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
& when (@level = 4) {
|
||||||
|
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||||
|
}
|
||||||
|
& when (@level = 5) {
|
||||||
|
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-box-shadow-left() {
|
||||||
|
box-shadow: -2px 2px 5px rgba(0,0,0,.26);
|
||||||
|
}
|
||||||
|
.md-box-shadow-right() {
|
||||||
|
box-shadow: 2px 2px 5px rgba(0,0,0,.26);
|
||||||
|
}
|
||||||
|
.md-box-shadow-medium-right() {
|
||||||
|
box-shadow: 4px 0 8px rgba(0,0,0,.26);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* bg colors */
|
||||||
|
.md-bg-cyan {
|
||||||
|
background-color: @md-color-cyan-600 !important;
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
.md-bg-light-green {
|
||||||
|
background-color: @md-color-light-green-600 !important;
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
.md-bg-grey {
|
||||||
|
background-color: @md-color-grey-700 !important;
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
.md-bg-red {
|
||||||
|
background-color: @md-color-red-700 !important;
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
.md-bg-light-blue {
|
||||||
|
background-color: @md-color-light-blue-700 !important;
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
.md-bg-teal {
|
||||||
|
background-color: @md-color-teal-600 !important;
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
.md-bg-purple {
|
||||||
|
background-color: @md-color-purple-600 !important;
|
||||||
|
color: @white;
|
||||||
|
}
|
|
@ -0,0 +1,21 @@
|
||||||
|
// variables_mixins
|
||||||
|
@import '_md_variables_mixins';
|
||||||
|
// buttons
|
||||||
|
@import '_md_buttons';
|
||||||
|
// colors
|
||||||
|
@import '_md_colors';
|
||||||
|
@import '_md_precompiled_colors';
|
||||||
|
// cards
|
||||||
|
@import '_md_cards';
|
||||||
|
// forms
|
||||||
|
@import '_md_forms';
|
||||||
|
// icons
|
||||||
|
@import '_md_icons';
|
||||||
|
// list
|
||||||
|
@import '_md_list';
|
||||||
|
// panels
|
||||||
|
@import '_md_panels';
|
||||||
|
// top bar
|
||||||
|
@import '_md_top_bar';
|
||||||
|
// utils
|
||||||
|
@import '_md_utils';
|
|
@ -0,0 +1,23 @@
|
||||||
|
// default theme
|
||||||
|
@theme_default_color: @md-color-light-blue-500;
|
||||||
|
@theme_default_colorLight: @md-color-light-blue-50;
|
||||||
|
@theme_default_colorDark: @md-color-light-blue-700;
|
||||||
|
@theme_default_colorAccent: @md-color-light-green-A200;
|
||||||
|
|
||||||
|
.uk-navbar {
|
||||||
|
background: @theme_default_color;
|
||||||
|
&-nav {
|
||||||
|
> li > a {
|
||||||
|
color: @white;
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
background: none;
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero_section {
|
||||||
|
background: @theme_default_color;
|
||||||
|
}
|
|
@ -0,0 +1,11 @@
|
||||||
|
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
|
||||||
|
# For additional information regarding the format and rule options, please see:
|
||||||
|
# https://github.com/browserslist/browserslist#queries
|
||||||
|
#
|
||||||
|
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
|
||||||
|
|
||||||
|
> 0.5%
|
||||||
|
last 2 versions
|
||||||
|
Firefox ESR
|
||||||
|
not dead
|
||||||
|
not IE 9-11
|
|
@ -0,0 +1,6 @@
|
||||||
|
export const environment = {
|
||||||
|
production: true,
|
||||||
|
API_ENDPOINT: '/api',
|
||||||
|
FAQ_ENDPOINT: '/uoa-admin-tools/api',
|
||||||
|
FAQ_HOMEPAGE: '/uoa-admin-tools/dashboard'
|
||||||
|
};
|
|
@ -0,0 +1,19 @@
|
||||||
|
// This file can be replaced during build by using the `fileReplacements` array.
|
||||||
|
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
||||||
|
// The list of file replacements can be found in `angular.json`.
|
||||||
|
|
||||||
|
export const environment = {
|
||||||
|
production: false,
|
||||||
|
API_ENDPOINT: '/uoa-repository-manager-service',
|
||||||
|
FAQ_ENDPOINT: 'http://audrey.athenarc.gr:5555/api',
|
||||||
|
FAQ_HOMEPAGE: 'http://audrey.athenarc.gr:5555'
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* For easier debugging in development mode, you can import the following file
|
||||||
|
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||||
|
*
|
||||||
|
* This import should be commented out in production mode because it will have a negative impact
|
||||||
|
* on performance if an error is thrown.
|
||||||
|
*/
|
||||||
|
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
Binary file not shown.
After Width: | Height: | Size: 5.3 KiB |
|
@ -0,0 +1,51 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Open Science Observatory</title>
|
||||||
|
<base href="/">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
|
||||||
|
<!--<script src="https://kit.fontawesome.com/dfd38f32b9.js" crossorigin="anonymous"></script>-->
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- uikit -->
|
||||||
|
<link rel="stylesheet" href="assets/css/uikit.almost-flat.min.css" media="all">
|
||||||
|
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/css/uikit.css" />-->
|
||||||
|
|
||||||
|
<!-- altair landing page -->
|
||||||
|
<link rel="stylesheet" href="assets/css/main.css" media="all">
|
||||||
|
<link rel="stylesheet" href="assets/css/os-observatory-custom.css" media="all">
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="header_sticky">
|
||||||
|
<!--<body class="header_sticky header_shadow">-->
|
||||||
|
|
||||||
|
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
|
||||||
|
<noscript>
|
||||||
|
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
|
||||||
|
Your web browser must have JavaScript enabled
|
||||||
|
in order for this application to display correctly.
|
||||||
|
</div>
|
||||||
|
</noscript>
|
||||||
|
|
||||||
|
<app-root>
|
||||||
|
<div uk-spinner="ratio: 2" class="uk-overlay uk-position-center uk-dark" style="margin: auto"></div>
|
||||||
|
</app-root>
|
||||||
|
|
||||||
|
<!-- uikit functions -->
|
||||||
|
<!--<script src="assets/js/uikit_custom.js"></script>-->
|
||||||
|
|
||||||
|
<!-- common functions -->
|
||||||
|
<!--<script src="assets/js/common.min.js"></script>-->
|
||||||
|
|
||||||
|
<!-- altair common functions/helpers -->
|
||||||
|
<!--<script src="assets/js/altair_lp_common.min.js"></script>-->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,31 @@
|
||||||
|
// Karma configuration file, see link for more information
|
||||||
|
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||||
|
|
||||||
|
module.exports = function (config) {
|
||||||
|
config.set({
|
||||||
|
basePath: '',
|
||||||
|
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||||
|
plugins: [
|
||||||
|
require('karma-jasmine'),
|
||||||
|
require('karma-chrome-launcher'),
|
||||||
|
require('karma-jasmine-html-reporter'),
|
||||||
|
require('karma-coverage-istanbul-reporter'),
|
||||||
|
require('@angular-devkit/build-angular/plugins/karma')
|
||||||
|
],
|
||||||
|
client: {
|
||||||
|
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||||
|
},
|
||||||
|
coverageIstanbulReporter: {
|
||||||
|
dir: require('path').join(__dirname, '../coverage'),
|
||||||
|
reports: ['html', 'lcovonly'],
|
||||||
|
fixWebpackSourcePaths: true
|
||||||
|
},
|
||||||
|
reporters: ['progress', 'kjhtml'],
|
||||||
|
port: 9876,
|
||||||
|
colors: true,
|
||||||
|
logLevel: config.LOG_INFO,
|
||||||
|
autoWatch: true,
|
||||||
|
browsers: ['Chrome'],
|
||||||
|
singleRun: false
|
||||||
|
});
|
||||||
|
};
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { enableProdMode } from '@angular/core';
|
||||||
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||||
|
|
||||||
|
import { AppModule } from './app/app.module';
|
||||||
|
import { environment } from './environments/environment';
|
||||||
|
|
||||||
|
if (environment.production) {
|
||||||
|
enableProdMode();
|
||||||
|
}
|
||||||
|
|
||||||
|
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||||
|
.catch(err => console.error(err));
|
|
@ -0,0 +1,80 @@
|
||||||
|
/**
|
||||||
|
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||||
|
* You can add your own extra polyfills to this file.
|
||||||
|
*
|
||||||
|
* This file is divided into 2 sections:
|
||||||
|
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||||
|
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||||
|
* file.
|
||||||
|
*
|
||||||
|
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||||
|
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||||||
|
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
||||||
|
*
|
||||||
|
* Learn more in https://angular.io/guide/browser-support
|
||||||
|
*/
|
||||||
|
|
||||||
|
/***************************************************************************************************
|
||||||
|
* BROWSER POLYFILLS
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
|
||||||
|
// import 'core-js/es6/symbol';
|
||||||
|
// import 'core-js/es6/object';
|
||||||
|
// import 'core-js/es6/function';
|
||||||
|
// import 'core-js/es6/parse-int';
|
||||||
|
// import 'core-js/es6/parse-float';
|
||||||
|
// import 'core-js/es6/number';
|
||||||
|
// import 'core-js/es6/math';
|
||||||
|
// import 'core-js/es6/string';
|
||||||
|
// import 'core-js/es6/date';
|
||||||
|
// import 'core-js/es6/array';
|
||||||
|
// import 'core-js/es6/regexp';
|
||||||
|
// import 'core-js/es6/map';
|
||||||
|
// import 'core-js/es6/weak-map';
|
||||||
|
// import 'core-js/es6/set';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If the application will be indexed by Google Search, the following is required.
|
||||||
|
* Googlebot uses a renderer based on Chrome 41.
|
||||||
|
* https://developers.google.com/search/docs/guides/rendering
|
||||||
|
**/
|
||||||
|
// import 'core-js/es6/array';
|
||||||
|
|
||||||
|
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||||
|
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||||
|
|
||||||
|
/** IE10 and IE11 requires the following for the Reflect API. */
|
||||||
|
// import 'core-js/es6/reflect';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Web Animations `@angular/platform-browser/animations`
|
||||||
|
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||||||
|
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||||||
|
**/
|
||||||
|
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||||
|
|
||||||
|
/**
|
||||||
|
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||||
|
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||||
|
*/
|
||||||
|
|
||||||
|
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||||
|
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||||
|
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||||
|
|
||||||
|
/*
|
||||||
|
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||||
|
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||||
|
*/
|
||||||
|
// (window as any).__Zone_enable_cross_context_check = true;
|
||||||
|
|
||||||
|
/***************************************************************************************************
|
||||||
|
* Zone JS is required by default for Angular itself.
|
||||||
|
*/
|
||||||
|
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||||
|
|
||||||
|
|
||||||
|
/***************************************************************************************************
|
||||||
|
* APPLICATION IMPORTS
|
||||||
|
*/
|
|
@ -0,0 +1 @@
|
||||||
|
/* You can add global styles to this file, and also import other style files */
|
|
@ -0,0 +1,20 @@
|
||||||
|
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||||
|
|
||||||
|
import 'zone.js/dist/zone-testing';
|
||||||
|
import { getTestBed } from '@angular/core/testing';
|
||||||
|
import {
|
||||||
|
BrowserDynamicTestingModule,
|
||||||
|
platformBrowserDynamicTesting
|
||||||
|
} from '@angular/platform-browser-dynamic/testing';
|
||||||
|
|
||||||
|
declare const require: any;
|
||||||
|
|
||||||
|
// First, initialize the Angular testing environment.
|
||||||
|
getTestBed().initTestEnvironment(
|
||||||
|
BrowserDynamicTestingModule,
|
||||||
|
platformBrowserDynamicTesting()
|
||||||
|
);
|
||||||
|
// Then we find all the tests.
|
||||||
|
const context = require.context('./', true, /\.spec\.ts$/);
|
||||||
|
// And load the modules.
|
||||||
|
context.keys().map(context);
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"extends": "../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../out-tsc/app",
|
||||||
|
"types": []
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"test.ts",
|
||||||
|
"**/*.spec.ts"
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"extends": "../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../out-tsc/spec",
|
||||||
|
"types": [
|
||||||
|
"jasmine",
|
||||||
|
"node"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"test.ts",
|
||||||
|
"polyfills.ts"
|
||||||
|
],
|
||||||
|
"include": [
|
||||||
|
"**/*.spec.ts",
|
||||||
|
"**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"extends": "../tslint.json",
|
||||||
|
"rules": {
|
||||||
|
"directive-selector": [
|
||||||
|
true,
|
||||||
|
"attribute",
|
||||||
|
"app",
|
||||||
|
"camelCase"
|
||||||
|
],
|
||||||
|
"component-selector": [
|
||||||
|
true,
|
||||||
|
"element",
|
||||||
|
"app",
|
||||||
|
"kebab-case"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"compileOnSave": false,
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "./",
|
||||||
|
"outDir": "./dist/out-tsc",
|
||||||
|
"sourceMap": true,
|
||||||
|
"declaration": false,
|
||||||
|
"module": "es2015",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"emitDecoratorMetadata": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"target": "es5",
|
||||||
|
"typeRoots": [
|
||||||
|
"node_modules/@types"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"es2018",
|
||||||
|
"dom"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,131 @@
|
||||||
|
{
|
||||||
|
"rulesDirectory": [
|
||||||
|
"node_modules/codelyzer"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"arrow-return-shorthand": true,
|
||||||
|
"callable-types": true,
|
||||||
|
"class-name": true,
|
||||||
|
"comment-format": [
|
||||||
|
true,
|
||||||
|
"check-space"
|
||||||
|
],
|
||||||
|
"curly": true,
|
||||||
|
"deprecation": {
|
||||||
|
"severity": "warn"
|
||||||
|
},
|
||||||
|
"eofline": true,
|
||||||
|
"forin": true,
|
||||||
|
"import-blacklist": [
|
||||||
|
true,
|
||||||
|
"rxjs/Rx"
|
||||||
|
],
|
||||||
|
"import-spacing": true,
|
||||||
|
"indent": [
|
||||||
|
true,
|
||||||
|
"spaces"
|
||||||
|
],
|
||||||
|
"interface-over-type-literal": true,
|
||||||
|
"label-position": true,
|
||||||
|
"max-line-length": [
|
||||||
|
true,
|
||||||
|
140
|
||||||
|
],
|
||||||
|
"member-access": false,
|
||||||
|
"member-ordering": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"order": [
|
||||||
|
"static-field",
|
||||||
|
"instance-field",
|
||||||
|
"static-method",
|
||||||
|
"instance-method"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-arg": true,
|
||||||
|
"no-bitwise": true,
|
||||||
|
"no-console": [
|
||||||
|
true,
|
||||||
|
"debug",
|
||||||
|
"info",
|
||||||
|
"time",
|
||||||
|
"timeEnd",
|
||||||
|
"trace"
|
||||||
|
],
|
||||||
|
"no-construct": true,
|
||||||
|
"no-debugger": true,
|
||||||
|
"no-duplicate-super": true,
|
||||||
|
"no-empty": false,
|
||||||
|
"no-empty-interface": true,
|
||||||
|
"no-eval": true,
|
||||||
|
"no-inferrable-types": [
|
||||||
|
true,
|
||||||
|
"ignore-params"
|
||||||
|
],
|
||||||
|
"no-misused-new": true,
|
||||||
|
"no-non-null-assertion": true,
|
||||||
|
"no-redundant-jsdoc": true,
|
||||||
|
"no-shadowed-variable": true,
|
||||||
|
"no-string-literal": false,
|
||||||
|
"no-string-throw": true,
|
||||||
|
"no-switch-case-fall-through": true,
|
||||||
|
"no-trailing-whitespace": true,
|
||||||
|
"no-unnecessary-initializer": true,
|
||||||
|
"no-unused-expression": true,
|
||||||
|
"no-use-before-declare": true,
|
||||||
|
"no-var-keyword": true,
|
||||||
|
"object-literal-sort-keys": false,
|
||||||
|
"one-line": [
|
||||||
|
true,
|
||||||
|
"check-open-brace",
|
||||||
|
"check-catch",
|
||||||
|
"check-else",
|
||||||
|
"check-whitespace"
|
||||||
|
],
|
||||||
|
"prefer-const": true,
|
||||||
|
"quotemark": [
|
||||||
|
true,
|
||||||
|
"single"
|
||||||
|
],
|
||||||
|
"radix": true,
|
||||||
|
"semicolon": [
|
||||||
|
true,
|
||||||
|
"always"
|
||||||
|
],
|
||||||
|
"triple-equals": [
|
||||||
|
true,
|
||||||
|
"allow-null-check"
|
||||||
|
],
|
||||||
|
"typedef-whitespace": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"call-signature": "nospace",
|
||||||
|
"index-signature": "nospace",
|
||||||
|
"parameter": "nospace",
|
||||||
|
"property-declaration": "nospace",
|
||||||
|
"variable-declaration": "nospace"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"unified-signatures": true,
|
||||||
|
"variable-name": false,
|
||||||
|
"whitespace": [
|
||||||
|
true,
|
||||||
|
"check-branch",
|
||||||
|
"check-decl",
|
||||||
|
"check-operator",
|
||||||
|
"check-separator",
|
||||||
|
"check-type"
|
||||||
|
],
|
||||||
|
"no-output-on-prefix": true,
|
||||||
|
"use-input-property-decorator": true,
|
||||||
|
"use-output-property-decorator": true,
|
||||||
|
"use-host-property-decorator": true,
|
||||||
|
"no-input-rename": true,
|
||||||
|
"no-output-rename": true,
|
||||||
|
"use-life-cycle-interface": true,
|
||||||
|
"use-pipe-transform-interface": true,
|
||||||
|
"component-class-suffix": true,
|
||||||
|
"directive-class-suffix": true
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue