add algolia instantsearch searchbox, better responsive classes

This commit is contained in:
Xevion
2020-08-05 01:51:40 -05:00
parent f742144cc7
commit 281613c8d1
7 changed files with 419 additions and 39 deletions

View File

@@ -1,25 +1,25 @@
<template>
<table class="quote-list mb-4 px-3 w-100">
<table class="quote-list px-3 w-100">
<tr v-for="(quote, index) in quotes" :key="`quote-${index}`">
<td class="quote-speaker pl-3" v-if="quote.speaker">
<span class="my-3">
{{ quote.speaker }}
</span>
</td>
<td class="quote-text w-100">{{ quote.text }}</td>
<td class="quote-text w-100 pr-3">{{ quote.text }}</td>
</tr>
</table>
</template>
<style lang="scss">
tr {
&:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
}
/*tr {*/
/* &:not(:first-child) {*/
/* border-top: 1px solid rgba(255, 255, 255, 0.1);*/
/* }*/
/*}*/
.quote-list > tr {
white-space: nowrap;
&:hover { background-color: #242424; }
}
.quote-text {
@@ -27,11 +27,12 @@
}
.quote-speaker {
/*min-width: 100px;*/
min-width: 100px;
padding-right: 1em;
font-weight: 600;
vertical-align: text-top;
text-align: right;
font-family: 'Montserrat', sans-serif;
}
</style>