From 35c76715789fab21141c9e5e96b2b6502333b3fc Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 15 Nov 2017 17:08:44 -0500 Subject: [PATCH 1/3] Add class-table partial to make class tables more maintainable --- docs/source/_partials/class-table.blade.php | 20 ++++ docs/source/docs/background-color.blade.md | 33 +++--- docs/source/docs/background-position.blade.md | 107 ++++++++---------- 3 files changed, 82 insertions(+), 78 deletions(-) create mode 100644 docs/source/_partials/class-table.blade.php diff --git a/docs/source/_partials/class-table.blade.php b/docs/source/_partials/class-table.blade.php new file mode 100644 index 000000000000..0194745187b0 --- /dev/null +++ b/docs/source/_partials/class-table.blade.php @@ -0,0 +1,20 @@ +
+ + + + + + + + + + @foreach ($rows as $row) + + + + + + @endforeach + +
ClassPropertiesDescription
{{ $row[0] }}{{ $row[1] }}{{ $row[2] }}
+
diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md index ec36b4da93e6..3b50820925ad 100644 --- a/docs/source/docs/background-color.blade.md +++ b/docs/source/docs/background-color.blade.md @@ -11,26 +11,19 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - @foreach ($page->config['colors'] as $name => $value) - - - - - - @endforeach - -
ClassPropertiesDescription
.bg-{{ $name }}background-color: {{ $value }};Set the background color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.
-
+@include('_partials.class-table', [ + 'rows' => $page->config['colors']->map(function ($value, $name) { + $class = ".bg-{$name}"; + $code = "background-color: {$value};"; + $color = implode(' ', array_reverse(explode('-', $name))); + $description = "Set the background color of an element to {$color}."; + return [ + $class, + $code, + $description, + ]; + })->all() +]) ## Hover diff --git a/docs/source/docs/background-position.blade.md b/docs/source/docs/background-position.blade.md index c0d2dbf0edb7..5dd2ae2c5159 100644 --- a/docs/source/docs/background-position.blade.md +++ b/docs/source/docs/background-position.blade.md @@ -11,61 +11,52 @@ features: @include('_partials.work-in-progress') -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassPropertiesDescription
.bg-bottombackground-position: bottom;Place the background image on the bottom edge.
.bg-centerbackground-position: center;Place the background image in the center.
.bg-leftbackground-position: left;Place the background image on the left edge.
.bg-left-bottombackground-position: left bottom;Place the background image on the left bottom edge.
.bg-left-topbackground-position: left top;Place the background image on the left top edge.
.bg-rightbackground-position: right;Place the background image on the right edge.
.bg-right-bottombackground-position: right bottom;Place the background image on the right bottom edge.
.bg-right-topbackground-position: right top;Place the background image on the right top edge.
.bg-topbackground-position: top;Place the background image on the top edge.
-
+@include('_partials.class-table', [ + 'rows' => [ + [ + '.bg-bottom', + 'background-position: bottom;', + 'Place the background image on the bottom edge.', + ], + [ + '.bg-center', + 'background-position: center;', + 'Place the background image in the center.', + ], + [ + '.bg-left', + 'background-position: left;', + 'Place the background image on the left edge.', + ], + [ + '.bg-left-bottom', + 'background-position: left bottom;', + 'Place the background image on the left bottom edge.', + ], + [ + '.bg-left-top', + 'background-position: left top;', + 'Place the background image on the left top edge.', + ], + [ + '.bg-right', + 'background-position: right;', + 'Place the background image on the right edge.', + ], + [ + '.bg-right-bottom', + 'background-position: right bottom;', + 'Place the background image on the right bottom edge.', + ], + [ + '.bg-right-top', + 'background-position: right top;', + 'Place the background image on the right top edge.', + ], + [ + '.bg-top', + 'background-position: top;', + 'Place the background image on the top edge.', + ], + ] +]) From 25ef0198a0a1ed720a82ed28acac7b1dd44b107d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 15 Nov 2017 17:32:39 -0500 Subject: [PATCH 2/3] Add WIP Vue component --- docs/source/_assets/js/app.js | 1 + .../_assets/js/components/ClassTable.vue | 39 +++++++++++++++++++ docs/source/_partials/class-table.blade.php | 6 ++- docs/source/docs/background-color.blade.md | 2 +- 4 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 docs/source/_assets/js/components/ClassTable.vue diff --git a/docs/source/_assets/js/app.js b/docs/source/_assets/js/app.js index 7fa375b53b10..634c5cea51c8 100644 --- a/docs/source/_assets/js/app.js +++ b/docs/source/_assets/js/app.js @@ -5,6 +5,7 @@ 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' diff --git a/docs/source/_assets/js/components/ClassTable.vue b/docs/source/_assets/js/components/ClassTable.vue new file mode 100644 index 000000000000..a773cd1fcc01 --- /dev/null +++ b/docs/source/_assets/js/components/ClassTable.vue @@ -0,0 +1,39 @@ + + + diff --git a/docs/source/_partials/class-table.blade.php b/docs/source/_partials/class-table.blade.php index 0194745187b0..ed1b0013eee6 100644 --- a/docs/source/_partials/class-table.blade.php +++ b/docs/source/_partials/class-table.blade.php @@ -1,4 +1,7 @@ -
+
+ +
+{{--
@@ -18,3 +21,4 @@
+ --}} diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md index 3b50820925ad..9fdb51cbc5b6 100644 --- a/docs/source/docs/background-color.blade.md +++ b/docs/source/docs/background-color.blade.md @@ -22,7 +22,7 @@ features: $code, $description, ]; - })->all() + })->values()->all() ]) ## Hover From 051705aef7ba387643a19de5033cfd41c3e9686d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 16 Nov 2017 11:02:55 -0500 Subject: [PATCH 3/3] Ditch Vue component in favor of simple scrolling table Better Algolia indexing and stuff and just simpler overall. --- docs/source/_assets/js/app.js | 1 - .../_assets/js/components/ClassTable.vue | 39 ---------------- docs/source/_partials/class-table.blade.php | 44 +++++++++---------- docs/tailwind.js | 4 ++ 4 files changed, 25 insertions(+), 63 deletions(-) delete mode 100644 docs/source/_assets/js/components/ClassTable.vue diff --git a/docs/source/_assets/js/app.js b/docs/source/_assets/js/app.js index 634c5cea51c8..7fa375b53b10 100644 --- a/docs/source/_assets/js/app.js +++ b/docs/source/_assets/js/app.js @@ -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' diff --git a/docs/source/_assets/js/components/ClassTable.vue b/docs/source/_assets/js/components/ClassTable.vue deleted file mode 100644 index a773cd1fcc01..000000000000 --- a/docs/source/_assets/js/components/ClassTable.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - diff --git a/docs/source/_partials/class-table.blade.php b/docs/source/_partials/class-table.blade.php index ed1b0013eee6..17b225d589ac 100644 --- a/docs/source/_partials/class-table.blade.php +++ b/docs/source/_partials/class-table.blade.php @@ -1,24 +1,22 @@ -
- +
+
+ + + + + + + + + + @foreach ($rows as $row) + + + + + + @endforeach + +
ClassPropertiesDescription
{{ $row[0] }}{{ $row[1] }}{{ $row[2] }}
+
-{{--
- - - - - - - - - - @foreach ($rows as $row) - - - - - - @endforeach - -
ClassPropertiesDescription
{{ $row[0] }}{{ $row[1] }}{{ $row[2] }}
-
- --}} diff --git a/docs/tailwind.js b/docs/tailwind.js index 52cc443e5d0a..4a65da7a5ed7 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -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',