vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor on dataview demo and doc

pull/104/head
mertsincan 2019-10-22 15:37:55 +03:00
parent 2f23827e25
commit ff1dcbabfc
2 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/dataview/DataViewDemo.vue
View File

@ -40,7 +40,6 @@
<Panel :header="slotProps.data.vin" style="text-align: center"> <Panel :header="slotProps.data.vin" style="text-align: center">
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/> <img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div> <div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
<hr class="ui-widget-content" style="border-top: 0" />
<Button icon="pi pi-search"></Button> <Button icon="pi pi-search"></Button>
</Panel> </Panel>
</div> </div>
@ -123,15 +122,38 @@ export default {
} }
} }
} }
.car-detail {
padding: 0 1em 1em 1em;
border-bottom: 1px solid #d9dad9;
margin: 1em;
}
.p-panel-content {
padding: 1em;
}
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.p-dataview { .p-dataview {
.car-details { .car-details {
img { img {
width: 75px; width: 75px;
} }
} }
} }
} }
/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
.dark-theme {
.p-dataview {
.car-details {
border-bottom-color: #191919;
}
.car-detail {
border-bottom: 1px solid #191919;
}
}
}
</style> </style>

26
src/views/dataview/DataViewDoc.vue
View File

@ -58,7 +58,6 @@ export default {
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt; &lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt; &lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
&lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/div&gt; &lt;/div&gt;
@ -444,7 +443,6 @@ export default {
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt; &lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt; &lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
&lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/div&gt; &lt;/div&gt;
@ -520,18 +518,40 @@ export default {
} }
} }
} }
.car-detail {
padding: 0 1em 1em 1em;
border-bottom: 1px solid #d9dad9;
margin: 1em;
}
.p-panel-content {
padding: 1em;
}
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.p-dataview { .p-dataview {
.car-details { .car-details {
img { img {
width: 75px; width: 75px;
} }
} }
} }
} }
/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
.dark-theme {
.p-dataview {
.car-details {
border-bottom-color: #191919;
}
.car-detail {
border-bottom: 1px solid #191919;
}
}
}
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>