Skip to content

Commit

Permalink
Demo update
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Oct 22, 2019
1 parent 53cfaee commit d36f8f5
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 42 deletions.
63 changes: 56 additions & 7 deletions src/sass/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@
border-top-right-radius: $val;
}

@mixin flex() {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

body {
margin: 0px;
height: 100%;
Expand Down Expand Up @@ -1213,19 +1219,50 @@ pre[class*="language-"] {

/* Demos */
.dataview-demo {
.ui-button {
margin-top: 3em;
}
.p-dataview {
.car-details {
@include flex();
justify-content: space-between;
align-items: center;
padding: 2em;
border-bottom: 1px solid #d9dad9;

.filter-container {
text-align: center;
& > div {
display: flex;
align-items: center;

img {
margin-right: 14px;
}
}
}

.car-detail {
padding: 0 1em 1em 1em;
border-bottom: 1px solid #d9dad9;
margin: 1em;
}

.p-panel-content {
padding: 1em;
}
}
}

.car-data > div {
padding: .429em;
@media (max-width: 1024px) {
.dataview-demo {
.p-dataview {
.car-details {

img {
width: 75px;
}
}
}
}
}


.loading-text {
display: block;
background-color: #f1f1f1;
Expand Down Expand Up @@ -1570,5 +1607,17 @@ pre[class*="language-"] {
}
}
}

.dataview-demo {
.p-dataview {
.car-details {
border-bottom-color: #191919;
}

.car-detail {
border-bottom: 1px solid #191919;
}
}
}
}
}
55 changes: 20 additions & 35 deletions src/showcase/dataview/DataViewDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,21 +51,18 @@ export class DataViewDemo extends Component {

renderListItem(car) {
return (
<div className="p-col-12 car-details" style={{padding: '2em', borderBottom: '1px solid #d9d9d9'}}>
<div className="p-grid">
<div className="p-col-12 p-md-3">
<div className="p-col-12">
<div className="car-details">
<div>
<img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand}/>
<div class="p-grid">
<div className="p-col-12">Vin: <b>{car.vin}</b></div>
<div className="p-col-12">Year: <b>{car.year}</b></div>
<div className="p-col-12">Brand: <b>{car.brand}</b></div>
<div className="p-col-12">Color: <b>{car.color}</b></div>
</div>
</div>
<div className="p-col-12 p-md-8 car-data">
<div>Vin: <b>{car.vin}</b></div>
<div>Year: <b>{car.year}</b></div>
<div>Brand: <b>{car.brand}</b></div>
<div>Color: <b>{car.color}</b></div>
</div>

<div className="p-col-12 p-md-1 search-icon" style={{marginTop:'40px'}}>
<Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
</div>
<Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
</div>
</div>
);
Expand All @@ -77,7 +74,6 @@ export class DataViewDemo extends Component {
<Panel header={car.vin} style={{ textAlign: 'center' }}>
<img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand} />
<div className="car-detail">{car.year} - {car.color}</div>
<hr className="ui-widget-content" style={{ borderTop: 0 }} />
<Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
</Panel>
</div>
Expand Down Expand Up @@ -667,27 +663,17 @@ export class DataViewDemo extends Component {
renderListItem(car) {
return (
<div className="p-col-12" style={{padding: '2em', borderBottom: '1px solid #d9d9d9'}}>
<div className="p-col-12 p-md-3">
<img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand}/>
</div>
<div className="p-col-12 p-md-8 car-details">
<div className="p-grid">
<div className="p-col-2 p-sm-6">Vin:</div>
<div className="p-col-10 p-sm-6">{car.vin}</div>
<div className="p-col-2 p-sm-6">Year:</div>
<div className="p-col-10 p-sm-6">{car.year}</div>
<div className="p-col-2 p-sm-6">Brand:</div>
<div className="p-col-10 p-sm-6">{car.brand}</div>
<div className="p-col-2 p-sm-6">Color:</div>
<div className="p-col-10 p-sm-6">{car.color}</div>
<div className="p-col-12">
<div className="car-details">
<div>
<img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand}/>
<div class="p-grid">
<div className="p-col-12">Vin: <b>{car.vin}</b></div>
<div className="p-col-12">Year: <b>{car.year}</b></div>
<div className="p-col-12">Brand: <b>{car.brand}</b></div>
<div className="p-col-12">Color: <b>{car.color}</b></div>
</div>
</div>
</div>
<div className="p-col-12 p-md-1 search-icon" style={{marginTop:'40px'}}>
<Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
</div>
</div>
Expand All @@ -700,7 +686,6 @@ export class DataViewDemo extends Component {
<Panel header={car.vin} style={{ textAlign: 'center' }}>
<img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand} />
<div className="car-detail">{car.year} - {car.color}</div>
<hr className="ui-widget-content" style={{ borderTop: 0 }} />
<Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
</Panel>
</div>
Expand Down

0 comments on commit d36f8f5

Please sign in to comment.