From 2f17feced8d470811ed84e57c5c06dd41ab09b7f Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Mon, 11 Jan 2021 19:36:20 +0100 Subject: [PATCH] WIP #4064 @8 --- web/app/themes/Usines/app/setup.php | 71 +++++++++++++++++++ .../assets/styles/common/global.styl | 4 +- .../assets/styles/components/forms.styl | 41 +++++++++++ .../assets/styles/components/navigation.styl | 2 +- .../assets/styles/widgets/text-block.styl | 4 +- .../Usines/resources/views/single.blade.php | 12 +++- .../views/widgets/intro-carousel.blade.php | 2 +- web/app/themes/Usines/tailwind.config.js | 6 +- 8 files changed, 132 insertions(+), 10 deletions(-) create mode 100644 web/app/themes/Usines/resources/assets/styles/components/forms.styl diff --git a/web/app/themes/Usines/app/setup.php b/web/app/themes/Usines/app/setup.php index 3f10af8..2d030fd 100755 --- a/web/app/themes/Usines/app/setup.php +++ b/web/app/themes/Usines/app/setup.php @@ -169,3 +169,74 @@ add_action('widgets_init', function () { 'id' => 'sidebar-footer-copyright' ] + $config); }); + +/** + * Add Custom Styles to TinyMCE editor + */ +// https://codex.wordpress.org/TinyMCE_Custom_Styles +// Callback function to insert 'styleselect' into the $buttons array +add_filter( 'mce_buttons_2', function($buttons) { + array_unshift( $buttons, 'styleselect' ); + return $buttons; +}); + +// Add format classes to style dropdown +add_filter( 'tiny_mce_before_init', function($init_array) { + + // Text size styles + $sizes = [ + 'sm' => 'Small', + 'base' => 'Normal', + 'lg' => 'Large', + 'xl' => 'Extra Large', + '2xl' => 'XXL', + ]; + + $size_formats = []; + + foreach ($sizes as $size => $size_label) { + $size_formats[] = [ + 'title' => $size_label, + 'inline' => 'span', + 'selector' => 'h1, h2, h3, h4, h5, p, div', + 'classes' => 'text-'. $size, + 'wrapper' => false, + ]; + } + + // Add submenu for font sizes + $style_formats[] = [ + 'title' => 'Font Size', + 'items' => $size_formats, + ]; + + // Font weights + $weights = [ + 'normal', + 'medium', + 'semibold', + ]; + + $weight_formats = []; + + foreach ($weights as $weight) { + $weight_formats[] = [ + 'title' => ucfirst($weight), + 'inline' => 'span', + 'selector' => 'h1, h2, h3, h4, h5, p, div, li', + 'classes' => 'font-'. $weight, + 'wrapper' => false, + ]; + } + + // Add submenu for font weights + $style_formats[] = [ + 'title' => 'Font Weight', + 'items' => $weight_formats, + ]; + + // Insert the array, JSON ENCODED, into 'style_formats' + $init_array['style_formats'] = json_encode( $style_formats ); + + return $init_array; +}); diff --git a/web/app/themes/Usines/resources/assets/styles/common/global.styl b/web/app/themes/Usines/resources/assets/styles/common/global.styl index b5dc881..89da7be 100644 --- a/web/app/themes/Usines/resources/assets/styles/common/global.styl +++ b/web/app/themes/Usines/resources/assets/styles/common/global.styl @@ -11,5 +11,5 @@ img .rounded-full & // So this can be applied to parent element and also to override Elementor default CSS border-radius: 999px -p:not(:last-child) - margin-bottom: 1.5em +//p:not(:last-child) +// margin-bottom: 1.5em diff --git a/web/app/themes/Usines/resources/assets/styles/components/forms.styl b/web/app/themes/Usines/resources/assets/styles/components/forms.styl new file mode 100644 index 0000000..6291662 --- /dev/null +++ b/web/app/themes/Usines/resources/assets/styles/components/forms.styl @@ -0,0 +1,41 @@ +input, textarea + &::-webkit-input-placeholder /* Chrome/Opera/Safari */ + @apply text-dark + &::-moz-placeholder /* Firefox 19+ */ + @apply text-dark + &:-ms-input-placeholder /* IE 10+ */ + @apply text-dark + &:-moz-placeholder /* Firefox 18- */ + @apply text-dark + +input, textarea, select + @apply bg-white w-full px-6 py-2 rounded-md + border: none + outline: none + +input[type="text"], input[type="email"], input[type="number"], select + appearance: none + +input[type="submit"] + width: auto + +select + background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 15 9' xml:space='preserve'%3E%3Cg fill='none' stroke='%233b3b3b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M13.9 1.3L7.5 7.7'/%3E%3Cpath d='M1.1 1.3l6.4 6.4'/%3E%3C/g%3E%3C/svg%3E") 98% center no-repeat + background-size: 0.8em auto + +textarea + min-height: 12rem + padding: 1em + +//================================ + +.form-wrapper + > * + * + margin-top: 1.5rem + +.form-row + display: grid + constrain(grid-column-gap, 2vw) + // Automatic columns based on number of child elements + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) + grid-row-gap: 1.5rem // When wrapping columns (to match vertical gap between other rows) diff --git a/web/app/themes/Usines/resources/assets/styles/components/navigation.styl b/web/app/themes/Usines/resources/assets/styles/components/navigation.styl index 295b5bc..f6fda9f 100644 --- a/web/app/themes/Usines/resources/assets/styles/components/navigation.styl +++ b/web/app/themes/Usines/resources/assets/styles/components/navigation.styl @@ -1,5 +1,5 @@ .nav-logo - @apply mx-20 + @apply mx-20 w-full max-width: 156px +below(1600px) diff --git a/web/app/themes/Usines/resources/assets/styles/widgets/text-block.styl b/web/app/themes/Usines/resources/assets/styles/widgets/text-block.styl index 5643b43..ba2d966 100644 --- a/web/app/themes/Usines/resources/assets/styles/widgets/text-block.styl +++ b/web/app/themes/Usines/resources/assets/styles/widgets/text-block.styl @@ -22,10 +22,10 @@ font-weight: 300 > * + * // Automatic spacing between direct child elements - margin-top: 1.5em + margin-top: 1.5rem h3 + p, h4 + p - margin-top: 0.5em + margin-top: 0.5rem h3 @apply font-medium text-lg diff --git a/web/app/themes/Usines/resources/views/single.blade.php b/web/app/themes/Usines/resources/views/single.blade.php index d88c199..849a82f 100644 --- a/web/app/themes/Usines/resources/views/single.blade.php +++ b/web/app/themes/Usines/resources/views/single.blade.php @@ -1,7 +1,13 @@ @extends('layouts.app') @section('content') - @while(have_posts()) @php(the_post()) - @includeFirst(['partials.content-single-' . get_post_type(), 'partials.content-single']) - @endwhile + +
+ + @while(have_posts()) @php(the_post()) + @includeFirst(['partials.content-single-' . get_post_type(), 'partials.content-single']) + @endwhile + +
+ @endsection diff --git a/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php b/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php index 008bb5d..e45779f 100644 --- a/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php +++ b/web/app/themes/Usines/resources/views/widgets/intro-carousel.blade.php @@ -8,7 +8,7 @@
{{ $body }}
- {{ $cta_text }} + {{ $cta_text }} diff --git a/web/app/themes/Usines/tailwind.config.js b/web/app/themes/Usines/tailwind.config.js index add8d37..2a541e9 100644 --- a/web/app/themes/Usines/tailwind.config.js +++ b/web/app/themes/Usines/tailwind.config.js @@ -71,7 +71,11 @@ module.exports = { './resources/assets/**/*.js', ], options: { - safelist: [].concat( + safelist: [ + 'mb-0!', + 'pb-6', + 'bg-light', + ].concat( require('purgecss-with-wordpress').whitelist, require('purgecss-with-wordpress').whitelistPatterns ) -- 2.39.5