archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Ditch Vue component in favor of simple scrolling table

Browse Source 
Better Algolia indexing and stuff and just simpler overall.
This commit is contained in:
Adam Wathan 2017-11-16 11:02:55 -05:00
parent 25ef0198a0
commit 051705aef7
4 changed files with 25 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/source/_assets/js/app.js
View File

@ -5,7 +5,6 @@ window.anchors = new anchorJS()
window.Vue = require('vue')
Vue.component('responsive-code-sample', require('./components/ResponsiveCodeSample.vue'))
Vue.component('class-table', require('./components/ClassTable.vue'))
const app = new Vue({
el: '#app'

39
docs/source/_assets/js/components/ClassTable.vue
View File

@ -1,39 +0,0 @@
<template>
<div class="border-t border-grey-lighter">
<table class="w-full text-left table-collapse">
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
<tr v-for="(row, i) in visibleRows">
<td :class="i === 0 ? 'border-smoke' : 'border-smoke-light'" class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">{{ row[0] }}</td>
<td :class="i === 0 ? 'border-smoke' : 'border-smoke-light'" class="p-2 border-t font-mono text-xs text-blue-dark whitespace-pre">{{ row[1] }}</td>
<td :class="i === 0 ? 'border-smoke' : 'border-smoke-light'" class="p-2 border-t text-sm text-grey-darker">{{ row[2] }}</td>
</tr>
</tbody>
</table>
<p class="text-center py-4" v-show="!showAll && rows.length > 10">
<span role="button" @click="showAll = true" class="text-sm text-blue hover:underline">Show all {{rows.length}}</span>
</p>
</div>
</template>
<script>
export default {
props: ['rows'],
data() {
return {
showAll: false,
}
},
computed: {
visibleRows() {
return this.showAll ? this.rows : this.rows.slice(0, 10)
}
}
}
</script>

44
docs/source/_partials/class-table.blade.php
View File

@ -1,24 +1,22 @@
<div>
<class-table :rows="{{ json_encode($rows) }}"></class-table>
<div class="border-t border-b border-grey-light">
<div class="max-h-sm overflow-y-scroll">
<table class="w-full text-left table-collapse">
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
@foreach ($rows as $row)
<tr>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{{ $row[0] }}</td>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{{ $row[1] }}</td>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker whitespace-no-wrap lg:whitespace-normal">{{ $row[2] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
{{-- <div class="border-t border-grey-lighter">
<table class="w-full text-left table-collapse">
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
@foreach ($rows as $row)
<tr>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{{ $row[0] }}</td>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{{ $row[1] }}</td>
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">{{ $row[2] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
--}}

4
docs/tailwind.js
View File

@ -70,6 +70,10 @@ config.height = Object.assign(config.height, {
'7': '1.75rem',
})
config.maxHeight = Object.assign(config.maxHeight, {
'sm': '30rem',
})
config.padding = Object.assign(config.padding, {
'10': '2.5rem',
'12': '3rem',