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