Table component further styling
This commit is contained in:
Jonas Heinrich
parent
1d8aa90db6
commit
ae0c27bca6
12
src/App.vue
12
src/App.vue
@ -73,3 +73,15 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.app-navigation-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-content-vue {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -2,25 +2,19 @@
|
||||
<table id="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="headerName" class="hidden column-name">
|
||||
<div id="headerName-container">
|
||||
<a class="name sort columntitle" data-sort="name">
|
||||
<span>Name</span>
|
||||
<span class="sort-indicator" />
|
||||
</a>
|
||||
<span id="selectedActionsList" class="selectedActions">
|
||||
<a href="" class="actions-selected">
|
||||
<span class="icon icon-more" />
|
||||
<span>Actions</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<th />
|
||||
<th class="nameColumn">
|
||||
Name
|
||||
</th>
|
||||
<th>Options</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TableItem />
|
||||
<TableItem
|
||||
station-name="SRF Virus"
|
||||
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" />
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
@ -37,6 +31,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
table {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -44,33 +39,28 @@ table {
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
|
||||
// FIXME
|
||||
thead {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
//@include position('sticky');
|
||||
// header + breadcrumbs
|
||||
//top: $header-height;
|
||||
// under breadcrumbs, over file list
|
||||
z-index: 60;
|
||||
display: block;
|
||||
background-color: var(--color-main-background-translucent);
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 15px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
th.nameColumn {
|
||||
width: 100%;
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
tr {
|
||||
height: 51px;
|
||||
background-color: var(--color-background-light);
|
||||
|
||||
tr:hover, tr:focus, tr.mouseOver td {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -79,27 +69,6 @@ table th, table th a {
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
|
||||
table th .columntitle {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table th .columntitle.name {
|
||||
padding-left: 0;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: 0 15px;
|
||||
font-style: normal;
|
||||
@ -107,33 +76,4 @@ table td {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
table th#headerName {
|
||||
position: relative;
|
||||
width: 9999px; /* not really sure why this works better than 100% … table styling */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#headerName-container {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
table th#headerSize, table td.filesize {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table th#headerDate, table td.date,
|
||||
table th.column-last, table td.column-last {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
/* this can not be just width, both need to be set … table styling */
|
||||
min-width: 130px;
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
#app-content-files thead {
|
||||
top: 94px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="stationIcon" />
|
||||
<div class="stationIcon" :style="style" />
|
||||
</td>
|
||||
<td class="filenameColumn">
|
||||
<span class="innernametext">
|
||||
SRF Virus
|
||||
{{ stationName }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="actionColumn">
|
||||
@ -31,16 +31,54 @@ export default {
|
||||
Actions,
|
||||
ActionButton,
|
||||
},
|
||||
props: {
|
||||
stationName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stationIsfav: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
stationUuid: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stationImg: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
return 'background-image: url(' + this.stationImg + ')'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
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 {
|
||||
margin-left: 20px;
|
||||
width: 32px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
td.filenameColumn .innernametext {
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
@ -48,7 +86,6 @@ td.filenameColumn .innernametext {
|
||||
.stationIcon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Radio_SRF_Virus.svg/205px-Radio_SRF_Virus.svg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user