Xefir/nextcloud-app-radio
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

table component: style sticky table header

Browse Source
This commit is contained in:
Jonas Heinrich 2020-10-16 18:28:35 +02:00
parent faa9dc67c0
commit 6ecd8c59d6
2 changed files with 58 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -12,12 +12,12 @@
</template>
</AppNavigation>
<AppContent>
<Breadcrumbs>
<Breadcrumbs class="breadcrumbs">
<Breadcrumb title="Home" href="/" />
<Breadcrumb title="Top" href="/Top" />
</Breadcrumbs>
<Table
:stationData="tableData"
:station-data="tableData"
station-uuid="960b6cd6-0601-11e8-ae97-52543be04c81"
station-isfav="false"
station-img="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Radio_SRF_Virus.svg/205px-Radio_SRF_Virus.svg.png" />
@ -50,7 +50,7 @@ export default {
}),
mounted() {
const vm = this
this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations/topclick?limit=10')
this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations/topclick?limit=20')
.done(function(data) {
vm.tableData = data
})

123
src/components/Table/Table.vue
View File

@ -12,7 +12,8 @@
<tbody v-if="stationData">
<tr v-for="(obj, ind) in stationData" :key="ind">
<td>
<div class="stationIcon" :style="style" />
<div class="stationIcon"
:style="{ backgroundImage: `url('${ obj.favicon }')` }" />
</td>
<td class="filenameColumn">
<span class="innernametext">
@ -31,7 +32,6 @@
</td>
</tr>
</tbody>
{{ stationData }}
</table>
</template>
@ -63,28 +63,21 @@ export default {
default: '',
},
},
computed: {
style() {
return 'background-image: url(' + this.stationImg + ')'
},
},
}
</script>
<style lang="scss">
table {
position: relative;
width: 100%;
min-width: 250px;
display: block;
flex-direction: column;
thead {
position: sticky;
z-index: 60;
display: block;
background-color: var(--color-main-background-translucent);
z-index: 60;
position: sticky;
position: -webkit-sticky;
top: 50px;
th {
border-bottom: 1px solid var(--color-border);
@ -92,70 +85,64 @@ table {
height: 50px;
}
th, th a {
color: var(--color-text-maxcontrast);
}
th.nameColumn {
width: 100%;
padding-left: 57px;
}
}
tbody {
display: table;
width: 100%;
td {
padding: 0 15px;
font-style: normal;
background-position: 8px center;
background-repeat: no-repeat;
border-bottom: 1px solid var(--color-border);
}
tr {
height: 51px;
background-color: var(--color-background-light);
tr:hover, tr:focus, tr.mouseOver td {
background-color: var(--color-background-hover);
}
}
tr td:first-child {
padding-left: 40px;
width: 32px;
padding-right: 0px;
}
td.filenameColumn .innernametext {
color: var(--color-main-text);
}
.stationIcon {
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.actionColumn {
width: auto;
padding-right: 40px;
}
.filenameColumn {
width: 100%;
}
}
}
table th, table th a {
color: var(--color-text-maxcontrast);
}
table td {
padding: 0 15px;
font-style: normal;
background-position: 8px center;
background-repeat: no-repeat;
}
tr {
height: 51px;
background-color: var(--color-background-light);
tr:hover, tr:focus, tr.mouseOver td {
background-color: var(--color-background-hover);
}
}
tr td:first-child {
padding-left: 40px;
width: 32px;
padding-right: 0px;
}
td {
border-bottom: 1px solid var(--color-border);
}
td.filenameColumn .innernametext {
color: var(--color-main-text);
}
.stationIcon {
width: 32px;
height: 32px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.actionColumn {
width: auto;
padding-right: 40px;
}
.filenameColumn {
width: 100%;
}
</style>