Biukop
/
SFM-Broker
Segui 1
Vota 0
Forka 0
Codice Problemi 1 Pull Requests 0 Rilasci 2 Wiki Attività
Sfoglia il codice sorgente

added bootstrap and using navbar, and added timeline into dashboard

tags/2.037
Patrick Sun 5 anni fa
parent
116a9c3675
commit
bf77aeeea8
11 ha cambiato i file con 628 aggiunte e 13 eliminazioni
Visualizzazione separata
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      angular.json
  2. +69
    -0
      package-lock.json
  3. +5
    -0
      package.json
  4. +24
    -9
      src/app/app.component.html
  5. +2
    -1
      src/app/app.component.ts
  6. +10
    -1
      src/app/app.module.ts
  7. +0
    -2
      src/app/canvas/canvas.component.html
  8. +149
    -0
      src/app/dashboard/dashboard.component.html
  9. +171
    -0
      src/app/dashboard/dashboard.component.scss
  10. +197
    -0
      src/app/dashboard/dist/dashboard.component.css
  11. BIN
      src/assets/img/avatar.png

+ 1
- 0
angular.json Vedi File

@@ -28,6 +28,7 @@
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
{
"input": "node_modules/@progress/kendo-theme-default/dist/all.css"
},

+ 69
- 0
package-lock.json Vedi File

@@ -2045,6 +2045,22 @@
}
}
},
"@progress/kendo-angular-indicators": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@progress/kendo-angular-indicators/-/kendo-angular-indicators-0.2.0.tgz",
"integrity": "sha512-FLLDG2jcRQWAnMCxz3EiAo/Rzy/YNRJWjgg8gU7jFc+7hpEnORwOjOuUyLaPsqpWDyCQvQWIDV0r6+IN4NyN/w==",
"requires": {
"@progress/kendo-schematics": "^1.1.0",
"tslib": "^1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"@progress/kendo-angular-inputs": {
"version": "6.7.2",
"resolved": "https://registry.npmjs.org/@progress/kendo-angular-inputs/-/kendo-angular-inputs-6.7.2.tgz",
@@ -2102,6 +2118,22 @@
}
}
},
"@progress/kendo-angular-layout": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@progress/kendo-angular-layout/-/kendo-angular-layout-5.0.4.tgz",
"integrity": "sha512-K/4ytlwnIxCEekHLqsrXdYJoXI05Qn89EJ5W8GnfrSnJ0FEvODE+g4RAdPP2Hp6cSfjRaGCrITrK0ZTWs1u0Kg==",
"requires": {
"@progress/kendo-schematics": "^1.0.0",
"tslib": "^1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"@progress/kendo-angular-menu": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@progress/kendo-angular-menu/-/kendo-angular-menu-2.0.4.tgz",
@@ -2118,6 +2150,22 @@
}
}
},
"@progress/kendo-angular-navigation": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/@progress/kendo-angular-navigation/-/kendo-angular-navigation-0.2.0.tgz",
"integrity": "sha512-MetE+o+F+1nluS5CSohAK3M4hXkUAH+X+08+RqvrD4Aie88+qBy1xWR+ChdXlhGz5NeH7lAxvuXmzOXJmR4JAw==",
"requires": {
"@progress/kendo-schematics": "^1.1.0",
"tslib": "^1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"@progress/kendo-angular-pdf-export": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@progress/kendo-angular-pdf-export/-/kendo-angular-pdf-export-2.0.4.tgz",
@@ -2152,6 +2200,22 @@
}
}
},
"@progress/kendo-angular-progressbar": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/@progress/kendo-angular-progressbar/-/kendo-angular-progressbar-0.2.4.tgz",
"integrity": "sha512-GN74p8f65fn5KoMU69oRA4rQdOIskMadtjtFq/WsenNrbXs6dO5REdC3EYGXOwB6toAWuikNliVsFGznvEQeqA==",
"requires": {
"@progress/kendo-schematics": "^1.0.0",
"tslib": "^1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"@progress/kendo-common": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@progress/kendo-common/-/kendo-common-0.2.1.tgz",
@@ -3229,6 +3293,11 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true
},
"bootstrap": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz",
"integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

+ 5
- 0
package.json Vedi File

@@ -31,16 +31,21 @@
"@progress/kendo-angular-excel-export": "^3.0.0",
"@progress/kendo-angular-grid": "^4.8.0",
"@progress/kendo-angular-icons": "^0.2.1",
"@progress/kendo-angular-indicators": "^0.2.0",
"@progress/kendo-angular-inputs": "^6.0.0",
"@progress/kendo-angular-intl": "^2.0.0",
"@progress/kendo-angular-l10n": "^2.0.0",
"@progress/kendo-angular-layout": "^5.0.4",
"@progress/kendo-angular-menu": "^2.0.4",
"@progress/kendo-angular-navigation": "^0.2.0",
"@progress/kendo-angular-pdf-export": "^2.0.0",
"@progress/kendo-angular-popup": "^3.0.0",
"@progress/kendo-angular-progressbar": "^0.2.3",
"@progress/kendo-data-query": "^1.0.0",
"@progress/kendo-drawing": "^1.5.12",
"@progress/kendo-svg-icons": "^0.0.3",
"@progress/kendo-theme-default": "latest",
"bootstrap": "^3.4.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"

+ 24
- 9
src/app/app.component.html Vedi File

@@ -1,13 +1,28 @@
<kendo-appbar [position]="'top'" [positionMode]="'sticky'">
<kendo-appbar-section>
<kendo-menu [items]="items" (select)="onSelect($event)">
<ng-template kendoMenuItemTemplate let-item="item">
<fa-icon *ngIf="menuItemHasFontawesome(item)" [icon]="item.fa"></fa-icon> &nbsp;
{{ item.text }}
</ng-template>
</kendo-menu>
</kendo-appbar-section>
<kendo-appbar-spacer></kendo-appbar-spacer>
<kendo-appbar-section class="actions">
<kendo-badge-container>
<button class="k-button k-button-clear">
<kendo-icon [name]="'bell'"></kendo-icon>
</button>
<kendo-badge [shape]="'dot'" [themeColor]="'warning'" [size]="'small'" [position]="'inside'"></kendo-badge>
</kendo-badge-container>
<span class="k-appbar-separator"></span>
</kendo-appbar-section>

<kendo-appbar-section>
<kendo-avatar [imageSrc]="kendokaAvatar" [shape]="'circle'" [width]="'26px'" [height]="'26px'"></kendo-avatar>
</kendo-appbar-section>
</kendo-appbar>

<div class=topMenuBar >
<!-- <kendo-icon [name]="'photo-camera'" [size]="'medium'" style="color:yellow;float:left;"></kendo-icon> -->
<kendo-menu [items]="items" (select)="onSelect($event)">
<ng-template kendoMenuItemTemplate let-item="item">
<fa-icon *ngIf="menuItemHasFontawesome(item)" [icon]="item.fa"></fa-icon> &nbsp;
{{ item.text }}
</ng-template>
</kendo-menu>
</div>
<app-loan-edit #loanEditComponent></app-loan-edit>
<router-outlet></router-outlet>


+ 2
- 1
src/app/app.component.ts Vedi File

@@ -13,6 +13,7 @@ export class AppComponent {

title = 'broker';
public items: any[] = mainMenuItems;
kendokaAvatar = "./assets/img/avatar.png"
@ViewChild('loanEditComponent', {static: true}) loanEdit: LoanEditComponent;

@@ -30,7 +31,7 @@ export class AppComponent {
this.menuService.itemClicked.emit(item);
//console.log("emit on select : " + item.text);
if ( item.popup == "loanEdit"){
this.loanEdit.somedata = "changed";
this.loanEdit.somedata = "" + Math.random() + "changed";
this.loanEdit.open('dialog');
}
}

+ 10
- 1
src/app/app.module.ts Vedi File

@@ -20,6 +20,12 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { CanvasComponent } from './canvas/canvas.component';
import { MenuService } from './service/menu.service';
import { LoanEditComponent } from './loan-edit/loan-edit.component';
import { NavigationModule } from '@progress/kendo-angular-navigation';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { IndicatorsModule } from '@progress/kendo-angular-indicators';






@@ -43,7 +49,10 @@ import { LoanEditComponent } from './loan-edit/loan-edit.component';
GridModule,
InputsModule,
IconsModule,
FontAwesomeModule
FontAwesomeModule,
NavigationModule,
LayoutModule,
IndicatorsModule
],
providers: [MenuService],
bootstrap: [AppComponent]

+ 0
- 2
src/app/canvas/canvas.component.html Vedi File

@@ -45,5 +45,3 @@

<hr>

<hr>
<div class="col-xs-6">some text</div><div class="col-xs-6">some other text</div>

+ 149
- 0
src/app/dashboard/dashboard.component.html Vedi File

@@ -8,3 +8,152 @@
</div>
<kendo-contextmenu [target]="target" [items]="items"> </kendo-contextmenu> -->

<!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> -->
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>Horizontal timeline</h1>
</div>
<div style="display:inline-block;width:100%;overflow-y:auto;">
<ul class="timeline timeline-horizontal">
<li class="timeline-item">
<div class="timeline-badge primary"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds 1</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis faiz elementum girarzis, nisi eros gostis.</p>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge success"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds 2</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis faiz elementum girarzis, nisi eros gostis.</p>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge info"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds 3</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipisci. Mé faiz elementum girarzis, nisi eros gostis.</p>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge danger"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds 4</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis.</p>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds 5</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis.</p>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds 6</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>Timeline</h1>
</div>
<ul class="timeline">
<li class="timeline-item">
<div class="timeline-badge"><i class="glyphicon glyphicon-off"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds 1</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds 2</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros gostis.</p>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds 3</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds 4</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

+ 171
- 0
src/app/dashboard/dashboard.component.scss Vedi File

@@ -0,0 +1,171 @@
/* Timeline */
.timeline,
.timeline-horizontal {
list-style: none;
padding: 20px;
position: relative;
}
.timeline:before {
top: 40px;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline .timeline-item {
margin-bottom: 20px;
position: relative;
}
.timeline .timeline-item:before,
.timeline .timeline-item:after {
content: "";
display: table;
}
.timeline .timeline-item:after {
clear: both;
}
.timeline .timeline-item .timeline-badge {
color: #fff;
width: 54px;
height: 54px;
line-height: 52px;
font-size: 22px;
text-align: center;
position: absolute;
top: 18px;
left: 50%;
margin-left: -25px;
background-color: #7c7c7c;
border: 3px solid #ffffff;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline .timeline-item .timeline-badge i,
.timeline .timeline-item .timeline-badge .fa,
.timeline .timeline-item .timeline-badge .glyphicon {
top: 2px;
left: 0px;
}
.timeline .timeline-item .timeline-badge.primary {
background-color: #1f9eba;
}
.timeline .timeline-item .timeline-badge.info {
background-color: #5bc0de;
}
.timeline .timeline-item .timeline-badge.success {
background-color: #59ba1f;
}
.timeline .timeline-item .timeline-badge.warning {
background-color: #d1bd10;
}
.timeline .timeline-item .timeline-badge.danger {
background-color: #ba1f1f;
}
.timeline .timeline-item .timeline-panel {
position: relative;
width: 46%;
float: left;
right: 16px;
border: 1px solid #c0c0c0;
background: #ffffff;
border-radius: 2px;
padding: 20px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline .timeline-item .timeline-panel:before {
position: absolute;
top: 26px;
right: -16px;
display: inline-block;
border-top: 16px solid transparent;
border-left: 16px solid #c0c0c0;
border-right: 0 solid #c0c0c0;
border-bottom: 16px solid transparent;
content: " ";
}
.timeline .timeline-item .timeline-panel .timeline-title {
margin-top: 0;
color: inherit;
}
.timeline .timeline-item .timeline-panel .timeline-body > p,
.timeline .timeline-item .timeline-panel .timeline-body > ul {
margin-bottom: 0;
}
.timeline .timeline-item .timeline-panel .timeline-body > p + p {
margin-top: 5px;
}
.timeline .timeline-item:last-child:nth-child(even) {
float: right;
}
.timeline .timeline-item:nth-child(even) .timeline-panel {
float: right;
left: 16px;
}
.timeline .timeline-item:nth-child(even) .timeline-panel:before {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-horizontal {
list-style: none;
position: relative;
padding: 20px 0px 20px 0px;
display: inline-block;
}
.timeline-horizontal:before {
height: 3px;
top: auto;
bottom: 26px;
left: 56px;
right: 0;
width: 100%;
margin-bottom: 20px;
}
.timeline-horizontal .timeline-item {
display: table-cell;
height: 280px;
width: 20%;
min-width: 320px;
float: none !important;
padding-left: 0px;
padding-right: 20px;
margin: 0 auto;
vertical-align: bottom;
}
.timeline-horizontal .timeline-item .timeline-panel {
top: auto;
bottom: 64px;
display: inline-block;
float: none !important;
left: 0 !important;
right: 0 !important;
width: 100%;
margin-bottom: 20px;
}
.timeline-horizontal .timeline-item .timeline-panel:before {
top: auto;
bottom: -16px;
left: 28px !important;
right: auto;
border-right: 16px solid transparent !important;
border-top: 16px solid #c0c0c0 !important;
border-bottom: 0 solid #c0c0c0 !important;
border-left: 16px solid transparent !important;
}
.timeline-horizontal .timeline-item:before,
.timeline-horizontal .timeline-item:after {
display: none;
}
.timeline-horizontal .timeline-item .timeline-badge {
top: auto;
bottom: 0px;
left: 43px;
}

+ 197
- 0
src/app/dashboard/dist/dashboard.component.css Vedi File

@@ -0,0 +1,197 @@
/* Timeline */
.timeline,
.timeline-horizontal {
list-style: none;
padding: 20px;
position: relative;
}

.timeline:before {
top: 40px;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}

.timeline .timeline-item {
margin-bottom: 20px;
position: relative;
}

.timeline .timeline-item:before,
.timeline .timeline-item:after {
content: "";
display: table;
}

.timeline .timeline-item:after {
clear: both;
}

.timeline .timeline-item .timeline-badge {
color: #fff;
width: 54px;
height: 54px;
line-height: 52px;
font-size: 22px;
text-align: center;
position: absolute;
top: 18px;
left: 50%;
margin-left: -25px;
background-color: #7c7c7c;
border: 3px solid #ffffff;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}

.timeline .timeline-item .timeline-badge i,
.timeline .timeline-item .timeline-badge .fa,
.timeline .timeline-item .timeline-badge .glyphicon {
top: 2px;
left: 0px;
}

.timeline .timeline-item .timeline-badge.primary {
background-color: #1f9eba;
}

.timeline .timeline-item .timeline-badge.info {
background-color: #5bc0de;
}

.timeline .timeline-item .timeline-badge.success {
background-color: #59ba1f;
}

.timeline .timeline-item .timeline-badge.warning {
background-color: #d1bd10;
}

.timeline .timeline-item .timeline-badge.danger {
background-color: #ba1f1f;
}

.timeline .timeline-item .timeline-panel {
position: relative;
width: 46%;
float: left;
right: 16px;
border: 1px solid #c0c0c0;
background: #ffffff;
border-radius: 2px;
padding: 20px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline .timeline-item .timeline-panel:before {
position: absolute;
top: 26px;
right: -16px;
display: inline-block;
border-top: 16px solid transparent;
border-left: 16px solid #c0c0c0;
border-right: 0 solid #c0c0c0;
border-bottom: 16px solid transparent;
content: " ";
}

.timeline .timeline-item .timeline-panel .timeline-title {
margin-top: 0;
color: inherit;
}

.timeline .timeline-item .timeline-panel .timeline-body > p,
.timeline .timeline-item .timeline-panel .timeline-body > ul {
margin-bottom: 0;
}

.timeline .timeline-item .timeline-panel .timeline-body > p + p {
margin-top: 5px;
}

.timeline .timeline-item:last-child:nth-child(even) {
float: right;
}

.timeline .timeline-item:nth-child(even) .timeline-panel {
float: right;
left: 16px;
}

.timeline .timeline-item:nth-child(even) .timeline-panel:before {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}

.timeline-horizontal {
list-style: none;
position: relative;
padding: 20px 0px 20px 0px;
display: inline-block;
}

.timeline-horizontal:before {
height: 3px;
top: auto;
bottom: 26px;
left: 56px;
right: 0;
width: 100%;
margin-bottom: 20px;
}

.timeline-horizontal .timeline-item {
display: table-cell;
height: 280px;
width: 20%;
min-width: 320px;
float: none !important;
padding-left: 0px;
padding-right: 20px;
margin: 0 auto;
vertical-align: bottom;
}

.timeline-horizontal .timeline-item .timeline-panel {
top: auto;
bottom: 64px;
display: inline-block;
float: none !important;
left: 0 !important;
right: 0 !important;
width: 100%;
margin-bottom: 20px;
}

.timeline-horizontal .timeline-item .timeline-panel:before {
top: auto;
bottom: -16px;
left: 28px !important;
right: auto;
border-right: 16px solid transparent !important;
border-top: 16px solid #c0c0c0 !important;
border-bottom: 0 solid #c0c0c0 !important;
border-left: 16px solid transparent !important;
}

.timeline-horizontal .timeline-item:before,
.timeline-horizontal .timeline-item:after {
display: none;
}

.timeline-horizontal .timeline-item .timeline-badge {
top: auto;
bottom: 0px;
left: 43px;
}

BIN
src/assets/img/avatar.png Vedi File

Before After
Width: 26  |  Height: 26  |  Size: 2.8KB

Write Preview
Loading…
Annulla
Salva