gilles/webgems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

table beautification complete

Browse Source
This commit is contained in:
Erin
2019-07-27 17:16:21 -05:00
parent 394fdeb6aa
commit 65461a14cc
4 changed files with 57 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/Sidebar.vue
View File

@@ -44,24 +44,27 @@ export default {
padding: 0.5rem 1rem 0.5rem 1rem; padding: 0.5rem 1rem 0.5rem 1rem;
font-weight: 600; font-weight: 600;
} }
.toggleWrapper { div {
display: grid; cursor: pointer;
grid-template-columns: 1fr 1fr; }
width: min-content; .toggleWrapper {
border: 3px; display: grid;
border-color: #08e5ff; grid-template-columns: 1fr 1fr;
border-style: solid; width: min-content;
border-radius: .5rem; border: 3px;
overflow:hidden; border-color: #08e5ff;
} border-style: solid;
.viewToggle { border-radius: 0.5rem;
padding: 0 .2rem; overflow: hidden;
color: #008190; }
} .viewToggle {
.active { padding: 0 0.2rem;
background-color: #08e5ff; color: #008190;
color: #232331; }
} .active {
background-color: #08e5ff;
color: #232331;
}
} }
@media (max-width: 400px) { @media (max-width: 400px) {

52
components/TableHead.vue
View File

@@ -52,58 +52,26 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.tableHead { .tableHead {
background: #2d3748; background: #2d3748;
border-radius: 0.3rem; padding: 0.25rem;
padding: 1rem;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
// display: flex; width: 1fr;
// flex-direction: column; display: grid;
// position: relative; grid-template-columns: minmax(150px, 2fr) 8fr 125px;
&--active {
box-shadow: inset 0px 0px 0px 3px #08e5ff;
}
&--reference {
cursor: pointer;
}
&--links {
display: flex;
justify-content: flex-end;
img {
width: 1rem;
margin-left: 0.5rem;
}
}
&--title { &--title {
font-weight: 900; color: #008190;
margin: 0;
} }
&--description { &--description {
// display: flex; color: #008190;
// align-content: stretch;
// flex: 1 1 auto;
// flex-direction: column;
font-size: 13px;
color: white;
margin: 0 0 0.7rem 0;
line-height: 1.3; line-height: 1.3;
letter-spacing: 0.5px;
max-width: 15rem;
} }
a {
font-size: 12px;
line-height: 1;
align-self: flex-end;
margin-left: 1.7rem;
&:hover::before { &--links {
opacity: 0.5; cursor: pointer;
} color: #008190;
} }
&--reference { &--reference {
&::before { &::before {
position: absolute; position: absolute;

53
components/TableRow.vue
View File

@@ -57,58 +57,41 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.tableRow { .tableRow {
background: #2d3748; background: #2d3748;
border-radius: 0.3rem; padding: 0.25rem;
padding: 1rem;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
// display: flex; width: 1fr;
// flex-direction: column; display: grid;
// position: relative; grid-template-columns: minmax(150px, 2fr) 8fr 125px;
&--active { &--title {
box-shadow: inset 0px 0px 0px 3px #08e5ff; color: white;
} }
&--reference { &--description {
cursor: pointer; color: #008190;
line-height: 1.3;
margin-right: 10px;
} }
&--links { &--links {
display: flex; cursor: pointer;
justify-content: flex-end;
tr {
width: 100%;
display: flex;
justify-content: space-between;
}
img { img {
width: 1rem; width: 1rem;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
}
&--title {
font-weight: 900;
margin: 0;
}
&--description {
// display: flex;
// align-content: stretch;
// flex: 1 1 auto;
// flex-direction: column;
font-size: 13px;
color: white;
margin: 0 0 0.7rem 0;
line-height: 1.3;
letter-spacing: 0.5px;
max-width: 15rem;
}
a {
font-size: 12px;
line-height: 1;
align-self: flex-end;
margin-left: 1.7rem;
&:hover::before { &:hover::before {
opacity: 0.5; opacity: 0.5;
} }
} }
&--reference { &--reference {
&::before { &::before {
position: absolute; position: absolute;

10
pages/_category.vue
View File

@@ -4,7 +4,7 @@
.cards(v-if="cardsShown") .cards(v-if="cardsShown")
template(v-for='resource in category.resources') template(v-for='resource in category.resources')
Card(:title='resource.title' :desc='resource.desc' :url='resource.url') Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
.table(v-if="!cardsShown") table(v-if="!cardsShown")
TableHead(:title="'Welcome'" :desc="'Description'" :url="'URL'") TableHead(:title="'Welcome'" :desc="'Description'" :url="'URL'")
template(v-for='resource in category.resources') template(v-for='resource in category.resources')
TableRow(:title='resource.title' :desc='resource.desc' :url='resource.url') TableRow(:title='resource.title' :desc='resource.desc' :url='resource.url')
@@ -36,4 +36,10 @@ export default {
}, },
components: { Card, TableHead, TableRow } components: { Card, TableHead, TableRow }
}; };
</script> </script>
<style lang="scss" scoped>
table {
width: 100%;
}
</style>