From ceae1f4f8f2b5965105b47746ff196e11df0e47b Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Thu, 26 Nov 2020 18:29:14 +0100 Subject: [PATCH] WIP #4064 @7 --- .../mu-plugins/cube/src/Customizer/Setup.php | 121 +++++++++ web/app/mu-plugins/cube/src/Init.php | 1 + .../themes/Usines/app/View/Composers/App.php | 5 +- web/app/themes/Usines/app/admin.php | 19 +- web/app/themes/Usines/app/setup.php | 10 +- web/app/themes/Usines/package.json | 6 +- .../resources/assets/images/icons/email.svg | 2 +- .../resources/assets/images/icons/phone.svg | 2 +- .../resources/assets/scripts/customizer.js | 6 +- .../assets/styles/common/global.styl | 4 + .../assets/styles/common/mixins.styl | 32 +++ .../assets/styles/components/footer.styl | 45 +++- .../assets/styles/components/navigation.styl | 5 +- .../resources/views/partials/footer.blade.php | 55 +++- .../resources/views/partials/header.blade.php | 14 +- .../views/partials/social-networks.blade.php | 12 +- web/app/themes/Usines/tailwind.config.js | 56 ++-- web/app/themes/Usines/yarn.lock | 251 +++++++++++------- 18 files changed, 486 insertions(+), 160 deletions(-) create mode 100644 web/app/mu-plugins/cube/src/Customizer/Setup.php diff --git a/web/app/mu-plugins/cube/src/Customizer/Setup.php b/web/app/mu-plugins/cube/src/Customizer/Setup.php new file mode 100644 index 0000000..9a91682 --- /dev/null +++ b/web/app/mu-plugins/cube/src/Customizer/Setup.php @@ -0,0 +1,121 @@ +get_section('title_tagline')->title = __('Site Details', 'usines'); + // Remove tagline control + $wp_customize->remove_control('blogdescription'); + + //-- Contact e-mail address (used in footer) + $wp_customize->add_setting( + 'contact_email', + [ + 'type' => 'option', + 'capability' => 'edit_theme_options' + ] + ); + + $wp_customize->add_control(new WP_Customize_Control( + $wp_customize, + 'contact_email', + [ + 'label' => __('Adresse email', 'usines'), + 'settings' => 'contact_email', + 'section' => 'title_tagline', + 'type' => 'text', + 'priority' => 11, + ] + )); + + //-- Contact phone number (used in header and footer) + $wp_customize->add_setting( + 'contact_phone', + [ + 'type' => 'option', + 'capability' => 'edit_theme_options' + ] + ); + + $wp_customize->add_control(new WP_Customize_Control( + $wp_customize, + 'contact_phone', + [ + 'label' => __('Numéro de téléphone', 'usines'), + 'description' => __("Utilisé dans l'en-tête et le pied de page", 'usines'), + 'settings' => 'contact_phone', + 'section' => 'title_tagline', + 'type' => 'text', + 'priority' => 11, + ] + )); + + //-- Header contact text + $wp_customize->add_setting( + 'contact_header_text', + [ + 'type' => 'option', + 'capability' => 'edit_theme_options' + ] + ); + + $wp_customize->add_control(new WP_Customize_Control( + $wp_customize, + 'contact_header_text', + [ + 'label' => __("Texte de contact d'en-tête", 'usines'), + 'settings' => 'contact_header_text', + 'section' => 'title_tagline', + 'type' => 'text', + 'priority' => 12, + ] + )); + + //-- Footer contact text + $wp_customize->add_setting( + 'contact_footer_text', + [ + 'type' => 'option', + 'capability' => 'edit_theme_options' + ] + ); + + $wp_customize->add_control(new WP_Customize_Control( + $wp_customize, + 'contact_footer_text', + [ + 'label' => __('Texte de contact de pied de page', 'usines'), + 'settings' => 'contact_footer_text', + 'section' => 'title_tagline', + 'type' => 'textarea', + 'priority' => 13, + ] + )); + + + }); + + } + +} diff --git a/web/app/mu-plugins/cube/src/Init.php b/web/app/mu-plugins/cube/src/Init.php index e93ae26..fed9d24 100644 --- a/web/app/mu-plugins/cube/src/Init.php +++ b/web/app/mu-plugins/cube/src/Init.php @@ -14,6 +14,7 @@ final class Init { // Marked as final because this class should never be extende public static function classes() { return [ Common\Setup::class, + Customizer\Setup::class, Elementor\Setup::class, ]; } diff --git a/web/app/themes/Usines/app/View/Composers/App.php b/web/app/themes/Usines/app/View/Composers/App.php index 0d870d4..21e63c3 100644 --- a/web/app/themes/Usines/app/View/Composers/App.php +++ b/web/app/themes/Usines/app/View/Composers/App.php @@ -23,7 +23,10 @@ class App extends Composer public function with() { return [ - 'siteName' => $this->siteName(), + 'site_name' => $this->siteName(), + 'contact_email' => get_option('contact_email'), + 'contact_phone' => get_option('contact_phone'), + 'contact_phone_link' => 'tel:' . str_replace(' ', '', get_option('contact_phone')), ]; } diff --git a/web/app/themes/Usines/app/admin.php b/web/app/themes/Usines/app/admin.php index 6e69103..bf65798 100644 --- a/web/app/themes/Usines/app/admin.php +++ b/web/app/themes/Usines/app/admin.php @@ -11,19 +11,22 @@ use WP_Customize_Manager; use function Roots\asset; /** - * Register the `.brand` selector to the blogname. + * Add extra fields to WordPress customizer * * @param \WP_Customize_Manager $wp_customize * @return void */ add_action('customize_register', function (WP_Customize_Manager $wp_customize) { - $wp_customize->get_setting('blogname')->transport = 'postMessage'; - $wp_customize->selective_refresh->add_partial('blogname', [ - 'selector' => '.brand', - 'render_callback' => function () { - bloginfo('name'); - } - ]); + + // For site details (as opposed to theme settings), fields are added in the Cube mu-plugin + + //$wp_customize->get_setting('blogname')->transport = 'postMessage'; + //$wp_customize->selective_refresh->add_partial('blogname', [ + // 'selector' => '.brand', + // 'render_callback' => function () { + // bloginfo('name'); + // } + //]); }); /** diff --git a/web/app/themes/Usines/app/setup.php b/web/app/themes/Usines/app/setup.php index 0544797..3f10af8 100755 --- a/web/app/themes/Usines/app/setup.php +++ b/web/app/themes/Usines/app/setup.php @@ -152,7 +152,7 @@ add_action('widgets_init', function () { $config = [ 'before_widget' => '
', 'after_widget' => '
', - 'before_title' => '

', + 'before_title' => '

', 'after_title' => '

' ]; @@ -164,14 +164,6 @@ add_action('widgets_init', function () { 'name' => __('Footer Column 2', 'usines'), 'id' => 'sidebar-footer-2' ] + $config); - register_sidebar([ - 'name' => __('Footer Column 3', 'usines'), - 'id' => 'sidebar-footer-3' - ] + $config); - register_sidebar([ - 'name' => __('Footer Column 4', 'usines'), - 'id' => 'sidebar-footer-4' - ] + $config); register_sidebar([ 'name' => __('Footer Copyright', 'usines'), 'id' => 'sidebar-footer-copyright' diff --git a/web/app/themes/Usines/package.json b/web/app/themes/Usines/package.json index a6926b2..fba0fd7 100644 --- a/web/app/themes/Usines/package.json +++ b/web/app/themes/Usines/package.json @@ -50,12 +50,14 @@ "stylelint-config-standard": "^20.0.0", "stylus": "github:acidjazz/stylus#dev", "stylus-loader": "^3.0.2", - "tailwindcss": "^1.9.6", + "tailwindcss": "^2.0.1", "tailwindcss-wordpress": "^0.1", "vue-template-compiler": "^2.6.11" }, "dependencies": { + "autoprefixer": "^10.0.2", "jquery": "^3.5.1", - "popper.js": "^1.16.1" + "popper.js": "^1.16.1", + "postcss": "^8.1.10" } } diff --git a/web/app/themes/Usines/resources/assets/images/icons/email.svg b/web/app/themes/Usines/resources/assets/images/icons/email.svg index c47fdf1..e76fdea 100644 --- a/web/app/themes/Usines/resources/assets/images/icons/email.svg +++ b/web/app/themes/Usines/resources/assets/images/icons/email.svg @@ -1 +1 @@ - + diff --git a/web/app/themes/Usines/resources/assets/images/icons/phone.svg b/web/app/themes/Usines/resources/assets/images/icons/phone.svg index f93fa84..122f3dc 100644 --- a/web/app/themes/Usines/resources/assets/images/icons/phone.svg +++ b/web/app/themes/Usines/resources/assets/images/icons/phone.svg @@ -1 +1 @@ - + diff --git a/web/app/themes/Usines/resources/assets/scripts/customizer.js b/web/app/themes/Usines/resources/assets/scripts/customizer.js index ade7b8d..06d985c 100644 --- a/web/app/themes/Usines/resources/assets/scripts/customizer.js +++ b/web/app/themes/Usines/resources/assets/scripts/customizer.js @@ -10,6 +10,6 @@ * * @param {string} value */ -wp.customize('blogname', value => { - value.bind(to => $('.brand').text(to)); -}); +// wp.customize('blogname', value => { +// value.bind(to => $('.brand').text(to)); +// }); 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 af68a8a..04176e6 100644 --- a/web/app/themes/Usines/resources/assets/styles/common/global.styl +++ b/web/app/themes/Usines/resources/assets/styles/common/global.styl @@ -4,5 +4,9 @@ html body min-width: 320px +a + @apply transition-colors unquote('hover:text-red') + + p:not(:last-child) margin-bottom: 1.5em diff --git a/web/app/themes/Usines/resources/assets/styles/common/mixins.styl b/web/app/themes/Usines/resources/assets/styles/common/mixins.styl index 7f59d6b..f6aa58a 100644 --- a/web/app/themes/Usines/resources/assets/styles/common/mixins.styl +++ b/web/app/themes/Usines/resources/assets/styles/common/mixins.styl @@ -46,3 +46,35 @@ center(max-width = $content-max-width) margin: 0 auto //---------------------------------------// + +// Automatically convert font-size in px to rem with fallback +// Inspired by: https://davidwalsh.name/stylus-rem +font-size(value, arguments...) + + // Handle special cases first: + // 1) Allow disabling of this conversion by including the word "fixed" after the value + // 2) Don't do any conversion when setting on the html selector (because it is the root!) + // 3) Leave alone if 'inherit' is the value + if (arguments is 'fixed' || selector() is 'html' || value is 'inherit') { + font-size: value + } else { + // Only px values are converted to rem but we still want to use the px value as a fallback + // Other values like 'inherit' or rems/ems are displayed as normal... + font-size: value arguments + + if (unit(value) is 'px') { + font-size: r(value) arguments // rem value + } + } + + +//---------------------------------------// +// Standalone function for converting px to rem +// Non-px values will be passed back in their original units +r(value) + u = unit(value) + + if (u is 'px') + return unit(value / $font-size-base, 'rem') + else + return value diff --git a/web/app/themes/Usines/resources/assets/styles/components/footer.styl b/web/app/themes/Usines/resources/assets/styles/components/footer.styl index 9a2e532..63d7c93 100644 --- a/web/app/themes/Usines/resources/assets/styles/components/footer.styl +++ b/web/app/themes/Usines/resources/assets/styles/components/footer.styl @@ -1,5 +1,42 @@ -.footer-logo - max-width: 156px +$breakpoint-footer-2-cols = 1180px +$breakpoint-footer-1-col = 650px - path - fill: currentColor +.footer + &-container + @apply flex mx-auto + max-width: $base-width * 0.85 + + +below($breakpoint-footer-2-cols) + @apply flex-wrap + + &-col + @apply flex-1 px-6 + + +below($breakpoint-footer-2-cols) + flex-basis: 50% + +below($breakpoint-footer-1-col) + flex-basis: 100% + + // Extra top margin for last 3 columns to align with logo + &-col-2, &-col-3, &-col-4 + margin-top: 5.25rem + + &-col-2 + +below($breakpoint-footer-2-cols) + order: 4 + margin-top: 3rem + &-col-3 + +below($breakpoint-footer-2-cols) + order: 2 + +below($breakpoint-footer-1-col) + margin-top: 3rem + &-col-4 + +below($breakpoint-footer-2-cols) + order: 3 + margin-top: 3rem + + &-logo + max-width: 156px + + path + fill: currentColor 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 bd3239f..295b5bc 100644 --- a/web/app/themes/Usines/resources/assets/styles/components/navigation.styl +++ b/web/app/themes/Usines/resources/assets/styles/components/navigation.styl @@ -21,6 +21,7 @@ .menu-item @apply text-lg font-medium + @apply leading-10 // Line height matches height of social icons so both sides of menu align properly @apply mx-8 +below(1600px) @@ -28,7 +29,7 @@ +below(1500px) @apply mx-4 +below(1380px) - @apply text-base + font-size: 1rem &.current-menu-item, &.current-menu-parent @apply text-red @@ -39,7 +40,7 @@ @apply mr-0 a - @apply whitespace-no-wrap + @apply whitespace-nowrap transition: color 0.2s &:hover diff --git a/web/app/themes/Usines/resources/views/partials/footer.blade.php b/web/app/themes/Usines/resources/views/partials/footer.blade.php index c63f4cd..8fea83b 100644 --- a/web/app/themes/Usines/resources/views/partials/footer.blade.php +++ b/web/app/themes/Usines/resources/views/partials/footer.blade.php @@ -1,29 +1,60 @@ -