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

Merge branch 'tables-draft' into karn-dev

Browse Source
This commit is contained in:
Erin
2019-07-27 17:17:28 -05:00
parent 8de02c35f3 9dbeaedb7f
commit 8eddd395a9
5 changed files with 59 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app.html
View File

@@ -5,7 +5,7 @@
</head>
<body {{ BODY_ATTRS }}>
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
<!-- <script>
<script>
(function (f, a, t, h, o, m) {
a[h] = a[h] || function () {
(a[h].q = a[h].q || []).push(arguments)
@@ -19,7 +19,7 @@
})(document, window, '//stats.lost.services/tracker.js', 'fathom');
fathom('set', 'siteId', 'KQYXI');
fathom('trackPageview');
</script> -->
</script>
<!-- / Fathom -->
{{ APP }}
</body>

39
components/Sidebar.vue
View File

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

52
components/TableHead.vue
View File

@@ -52,58 +52,26 @@ export default {
<style lang="scss" scoped>
.tableHead {
background: #2d3748;
border-radius: 0.3rem;
padding: 1rem;
padding: 0.25rem;
transition: 0.2s ease-in-out;
// display: flex;
// flex-direction: column;
// position: relative;
&--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;
}
}
width: 1fr;
display: grid;
grid-template-columns: minmax(150px, 2fr) 8fr 125px;
&--title {
font-weight: 900;
margin: 0;
color: #008190;
}
&--description {
// display: flex;
// align-content: stretch;
// flex: 1 1 auto;
// flex-direction: column;
font-size: 13px;
color: white;
margin: 0 0 0.7rem 0;
color: #008190;
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 {
opacity: 0.5;
}
&--links {
cursor: pointer;
color: #008190;
}
&--reference {
&::before {
position: absolute;

53
components/TableRow.vue
View File

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

10
pages/_category.vue
View File

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