adam/wp-rdnyc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

initial grid-based navbar working

Browse source
This commit is contained in:
Adam Piontek 2021-07-26 13:07:57 -04:00
parent 5e3c175ec0
commit df1f2a31f6
13 changed files with 311 additions and 221 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

209
assets/css/_nav-bar-help.scss
View file

@ -1,84 +1,145 @@
// navbar-brand coloring
.navbar-dark {
a {
&.navbar-brand {
/*
* top navbar css grid layout
*/
nav#top-navbar-grid-outer {
@extend .container-fluid;
@extend .mt-4;
@extend .mt-md-5;
@extend .mb-4;
@extend .px-3;
@extend .px-sm-4;
@extend .px-md-5;
@extend .d-grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: calc(4.3rem / 2) calc(4.3rem / 2) auto;
@include media-breakpoint-up(md) {
grid-template-rows: calc(5.3rem / 2) calc(5.3rem / 2) auto;
}
// grid-auto-rows: calc(4.3rem / 2);
div#top-navbar-grid-brand-outer {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
a#top-navbar-grid-brand-link {
color: $gray-300;
svg.header-logo {
height: 4.3rem;
@include media-breakpoint-up(md) {
height: 5.3rem;
}
}
}
}
div#top-navbar-grid-toggle-button-outer {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
justify-items: end;
@extend .d-lg-none;
}
div#top-navbar-grid-socialicon-widget-outer {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
display: grid;
justify-items: end;
align-items: end;
@include media-breakpoint-up(lg) {
grid-row-start: 1;
grid-row-end: 2;
align-items: start;
}
section.widget_block {
ul.wp-block-social-links {
@extend .mb-0;
li.wp-social-link {
@extend .mx-0;
@extend .my-0;
@extend .px-0;
@extend .py-0;
a.wp-block-social-link-anchor {
@extend .px-1;
@extend .px-md-2;
@extend .py-0;
color: $gray-300;
&:hover {
color: $primary;
}
svg {
height: 1.1em;
width: 1.1em;
@include media-breakpoint-up(md) {
height: 1.25em;
width: 1.25em;
}
}
}
&:first-child {
a.wp-block-social-link-anchor {
@extend .ps-0;
}
}
&:last-child {
a.wp-block-social-link-anchor {
@extend .pe-0;
}
}
}
}
}
}
div#top-navbar-grid-main-menu-outer {
@extend .d-none;
&.show, &.collapsing {
@extend .d-grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
justify-items: center;
}
@extend .d-lg-grid;
@include media-breakpoint-up(lg) {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
justify-items: end;
align-items: end;
}
ul#menu-navbar-main-menu {
@extend .d-grid;
grid-template-columns: 1fr;
list-style-type: none;
padding: 0;
margin: 1em 0 0 0;
@extend .d-lg-inline;
@include media-breakpoint-up(lg) {
margin: 0;
}
li.menu-item {
@extend .text-center;
@extend .py-2;
@extend .d-lg-inline;
@include media-breakpoint-up(lg) {
padding: 0 0 0 1.5em !important;
}
a.top-navbar-grid-main-menu-item-link {
@extend .fw-bold;
@extend .text-uppercase;
@extend .text-decoration-none;
color: $gray-300;
}
}
}
}
// navbar widget social icon coloring
// #block-7 > ul > li.wp-social-link.wp-block-social-link > a
.navbar-dark {
.widget_block {
ul {
&.wp-block-social-links {
&.is-style-logos-only {
li {
&.wp-social-link {
&.wp-block-social-link {
a {
&.wp-block-social-link-anchor {
&:hover {
@extend .text-decoration-underline;
text-decoration-color: $primary !important;
color: $gray-300;
}
}
}
}
}
}
}
}
}
}
// navbar menu layout
.navbar-expand-lg {
.nav-item {
// margin-left: 2px;
a {
&.nav-link {
// padding: 0 0 0 6px;
// margin: 8px 0 8px 0;
// border-left: 6px transparent solid;
&.active {
// border-left: 6px $secondary solid;
// border-bottom: none;
}
&:hover, &:active {
// color: $primary !important;
// border-left: 6px $secondary solid;
// border-bottom: none;
}
}
}
}
}
@include media-breakpoint-up(lg) {
.navbar-expand-lg {
.nav-item {
// margin-left: 0;
a {
&.nav-link {
// padding: 0 0 2px 0;
// margin: 0 12px 0 12px;
// border-left: none;
// border-top: 6px transparent solid;
// border-bottom: 6px transparent solid;
&.active {
// border-left: none;
// border-bottom: 6px $secondary solid;
}
&:hover, &:active {
// color: $primary !important;
// border-left: none;
// border-bottom: 6px $secondary solid;
}
}
}
}
}
}

106
assets/css/_nav-burger.scss
View file

@ -1,56 +1,58 @@
/* Hamburger settings overrides */
$hamburger-padding-x: 0.95rem !default;
$hamburger-padding-y: 0.625rem !default;
$hamburger-layer-width: 1.5rem !default;
$hamburger-layer-height: 2px !default;
$hamburger-layer-spacing: 6px !default;
// * skipping default color, using color from bootstrap instead, below
// $hamburger-layer-color: rgba(0, 0, 0, 0.55) !default;
$hamburger-layer-border-radius: 0.25rem !default;
$hamburger-hover-opacity: 0.7 !default;
// * skipping default color, using color from bootstrap instead, below
// $hamburger-active-layer-color: $hamburger-layer-color !default;
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
// /* Hamburger settings overrides */
// $hamburger-padding-x: 0.95rem !default;
// $hamburger-padding-y: 0.625rem !default;
$hamburger-padding-x: 0 !default;
$hamburger-padding-y: 0 !default;
// $hamburger-layer-width: 1.5rem !default;
// $hamburger-layer-height: 2px !default;
// $hamburger-layer-spacing: 6px !default;
// // * skipping default color, using color from bootstrap instead, below
$hamburger-layer-color: $primary !default;
// $hamburger-layer-border-radius: 0.25rem !default;
// $hamburger-hover-opacity: 0.7 !default;
// // * skipping default color, using color from bootstrap instead, below
// // $hamburger-active-layer-color: $hamburger-layer-color !default;
// $hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
/* import hamburgers sass */
@import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss";
/* correct colors to match bootstrap defaults */
.navbar-light {
.hamburger {
&.navbar-toggler {
border: 1px $navbar-light-toggler-border-color solid !important;
.hamburger-inner {
&,
&::before,
&::after {
background-color: $navbar-light-color;
}
}
&.is-active {
.hamburger-inner::after {
background-color: $navbar-light-color;
}
}
}
}
}
.navbar-dark {
.hamburger {
&.navbar-toggler {
border: 1px $navbar-dark-toggler-border-color solid !important;
.hamburger-inner {
&,
&::before,
&::after {
background-color: $navbar-dark-color;
}
}
&.is-active {
.hamburger-inner::after {
background-color: $navbar-dark-color;
}
}
}
}
}
// /* correct colors to match bootstrap defaults */
// .navbar-light {
// .hamburger {
// &.navbar-toggler {
// border: 1px $navbar-light-toggler-border-color solid !important;
// .hamburger-inner {
// &,
// &::before,
// &::after {
// background-color: $primary;
// }
// }
// &.is-active {
// .hamburger-inner::after {
// background-color: $primary;
// }
// }
// }
// }
// }
// .navbar-dark {
// .hamburger {
// &.navbar-toggler {
// border: 1px $navbar-dark-toggler-border-color solid !important;
// .hamburger-inner {
// &,
// &::before,
// &::after {
// background-color: $primary;
// }
// }
// &.is-active {
// .hamburger-inner::after {
// background-color: $primary;
// }
// }
// }
// }
// }

4
assets/css/_svg-icons.scss
View file

@ -20,12 +20,8 @@
position: relative;
}
svg {
&.img {
fill: currentColor;
&.header-logo {
height: 5.3rem;
}
}
}

4
assets/js/_hamburger-helper.js
View file

@ -1,5 +1,5 @@
const togglerBtn = document.getElementById("navbarSupportedContentToggler");
const navbarContent = document.getElementById("navbarSupportedContent");
const togglerBtn = document.getElementById("top-navbar-grid-toggle-button");
const navbarContent = document.getElementById("top-navbar-grid-main-menu-outer");
navbarContent.addEventListener("show.bs.collapse", () => {
console.log("opening navbar content");

21
assets/js/main.js
View file

@ -1,37 +1,20 @@
// Import SCSS
import '../css/app.scss'
// Import icons for sprite-loader
// // navbar brand icon
// import "../../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand
// Import svg files for webpack handling
import "../raw/rdnyc-logo.svg"; // rdnyc logo
// other:
// import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon
// import "../../node_modules/@mdi/svg/svg/home.svg";
// import "../../node_modules/@mdi/svg/svg/information.svg";
// import "../../node_modules/@mdi/svg/svg/account.svg";
// import "../../node_modules/@mdi/svg/svg/briefcase-account.svg";
// import "../../node_modules/@mdi/svg/svg/zip-disk.svg";
// import "../../node_modules/@mdi/svg/svg/typewriter.svg";
// import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
// import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
// import "../../node_modules/@mdi/svg/svg/rss.svg";
// import "../../node_modules/@mdi/svg/svg/account-hard-hat.svg";
// import "../../node_modules/@mdi/svg/svg/open-in-new.svg";
// social
// import "../../node_modules/@mdi/svg/svg/linkedin.svg";
// import "../../node_modules/@mdi/svg/svg/github.svg";
// import "../../node_modules/@mdi/svg/svg/key-variant.svg";
// import "../../node_modules/@mdi/svg/svg/goodreads.svg";
// import "../../node_modules/@mdi/svg/svg/twitter.svg";
// import "../../node_modules/@mdi/svg/svg/facebook.svg";
// import "../../node_modules/@mdi/svg/svg/instagram.svg";
// import "../../node_modules/@mdi/svg/svg/steam.svg";
// import "../../node_modules/@mdi/svg/svg/discord.svg";
// Import Bootstrap JS
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/dropdown';

18
custom-functions.php
View file

@ -1,7 +1,7 @@
<?php
/**
* example inline SVG function args array supported keys
* example inline SVG function atts array supported keys
*/
// array(
// 'div_class' => 'icon baseline', // or 'img logo' or something
@ -16,13 +16,15 @@
* desired SVG must exist in ./dist/images,
* preferably by import in main.js and processing by webpack
*/
function inline_svg( $svg_name, $args = array() ) {
// load args or defaults
$div_class = array_key_exists( 'div_class', $args ) ? $args['div_class'] : '';
$svg_class = array_key_exists( 'svg_class', $args ) ? $args['svg_class'] : '';
$svg_title = array_key_exists( 'svg_title', $args ) ? $args['svg_title'] : '';
$svg_role_img = array_key_exists( 'svg_role_img', $args ) ? $args['svg_role_img'] : false;
$svg_aria_hidden = array_key_exists( 'svg_aria_hidden', $args ) ? $args['svg_aria_hidden'] : true;
function inline_svg( $svg_name, $atts = array() ) {
// load atts or set defaults
extract(shortcode_atts(array(
'div_class' => '',
'svg_class' => '',
'svg_title' => '',
'svg_role_img' => false,
'svg_aria_hidden' => true,
), $atts));
// load initial svg content
$svg_content = file_get_contents( get_template_directory_uri() . '/dist/images/' . $svg_name . '.svg' );

2
front-page.php
View file

@ -9,7 +9,7 @@
namespace WP_RDNYC;
get_header(); ?>
<main class="container d-flex justify-content-center">
<main class="container-fluid">
<div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-sm-3 mt-md-4 pt-md-4 mt-lg-5 pt-lg-5 pb-5" id="tek-front-page">
<?php

100
header.php
View file

@ -39,10 +39,78 @@ namespace WP_RDNYC;
<body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
<nav class="navbar navbar-expand-lg navbar-dark px-1 px-sm-2 px-lg-3 px-xl-4 px-xxl-5 pt-5 pb-3 ">
<div class="container-fluid">
<nav id="top-navbar-grid-outer">
<h1 class="my-0 py-0 lh-base">
<div id="top-navbar-grid-brand-outer">
<h1>
<!-- my-0 py-0 -->
<?php
printf( '<a id="top-navbar-grid-brand-link" href="%1$s" rel="home">',
esc_url( home_url( '/' ) )
);
echo inline_svg( 'svg-rdnyc-logo',
array(
'svg_class' => 'img header-logo',
'svg_title' => 'Recovery Dharma New York City',
'svg_role_img' => true,
'svg_aria_hidden' => false
)
);
echo "</a>";
?>
</h1>
</div>
<div id="top-navbar-grid-toggle-button-outer">
<button class="hamburger hamburger--squeeze" id="top-navbar-grid-toggle-button"
type="button" data-bs-toggle="collapse" data-bs-target="#top-navbar-grid-main-menu-outer"
aria-controls="top-navbar-grid-main-menu-outer" aria-expanded="false" aria-label="Toggle navigation"
>
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div id="top-navbar-grid-socialicon-widget-outer">
<?php
// using widget to include social icons, so they can be edited by wordpress users
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
dynamic_sidebar( 'navbar-socialicon-widget' );
endif;
?>
</div>
<?php
// main navigation menu
if ( has_nav_menu( 'navbar-main-menu' ) ) {
// echo '<section>';
wp_nav_menu([
'theme_location' => 'navbar-main-menu',
'depth' => 1,
'menu' => 'navbar-main-menu',
'container' => 'div',
'container_id' => 'top-navbar-grid-main-menu-outer',
'menu_class' => 'top-navbar-grid-main-menu',
'menu_item_class' => 'top-navbar-grid-main-menu-item',
'link_class' => 'top-navbar-grid-main-menu-item-link'
]);
// echo '</section>';
}
?>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark d-none">
<div id="navbarInnerContainer">
<h1>
<!-- my-0 py-0 -->
<?php
printf( '<a class="navbar-brand" href="%1$s" rel="home">',
esc_url( home_url( '/' ) )
@ -61,38 +129,42 @@ namespace WP_RDNYC;
?>
</h1>
<button class="hamburger hamburger--vortex collapsed navbar-toggler" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="hamburger-box d-flex">
<!-- collapsed navbar-toggler -->
<!-- <button class="hamburger hamburger--squeeze" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</button> -->
<?php
// using widget to include social icons, so they can be edited by wordpress users
if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
dynamic_sidebar( 'navbar-socialicon-widget' );
endif;
?>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
// main navigation menu
if ( has_nav_menu( 'navbar-main-menu' ) ) {
// echo '<section>';
wp_nav_menu([
'theme_location' => 'navbar-main-menu',
'depth' => 1,
'menu' => 'navbar-main-menu',
'container' => '',
'container_class' => '',
// 'container' => 'div',
// 'container_id' => 'section-navbar-main-menu',
'menu_class' => 'navbar-nav',
'menu_item_class' => 'nav-item',
'link_class' => 'nav-link font-monospace fs-6'
'link_class' => 'nav-link'
]);
// echo '</section>';
}
?>
</div>
</div>
</nav>
</nav>

2
index.php
View file

@ -9,7 +9,7 @@
namespace WP_RDNYC;
get_header(); ?>
<main class="container d-flex justify-content-center">
<main class="container-fluid">
<div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 pb-2 mb-4 mt-3">
<?php if (is_archive()) : ?>

2
page.php
View file

@ -9,7 +9,7 @@
namespace WP_RDNYC;
get_header(); ?>
<main class="container d-flex justify-content-center">
<main class="container-fluid d-flex">
<div class="col-12 col-md-10 col-lg-9 col-xl-8 col-xxl-7 border-bottom border-gray pb-4 mb-3">
<?php

2
searchform.php
View file

@ -21,7 +21,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es
<label id="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" for="<?php echo esc_attr( $seventythreek_unique_id ); ?>" aria-hidden class="form-label d-none"><?php _e( 'Search&hellip;', 'seventythreek' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
<input type="search" id="<?php echo esc_attr( $seventythreek_unique_id ); ?>" class="form-control me-2 tek-search-input" value="<?php echo get_search_query(); ?>" name="s" aria-labelledby="<?php echo esc_attr( $seventythreek_unique_id ) . '-label'; ?>" placeholder="Search blog&hellip;" />
<button type="submit" class="btn btn-outline-light" title="Search">
<?php echo inline_svg( 'mdi-magnify', array( 'div_class' => 'icon baseline' ) ) ?>
<?php echo inline_svg( 'mdi-magnify', array( 'div_class' => 'icon baseline' ) ); ?>
</button>
</div>
</form>

4
svgo.config.js
View file

@ -17,7 +17,7 @@ module.exports = {
'removeHiddenElems',
'removeEmptyText',
'removeEmptyContainers',
'removeViewBox',
// 'removeViewBox',
'cleanupEnableBackground',
'minifyStyles',
// 'convertStyleToAttrs',
@ -41,7 +41,7 @@ module.exports = {
'convertEllipseToCircle',
'sortAttrs',
'sortDefsChildren',
// 'removeDimensions',
'removeDimensions',
// 'removeAttrs',
{
name: 'removeAttrs',

26
webpack.config.js
View file

@ -3,7 +3,6 @@ const glob = require("glob-all");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
// const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const PurgecssPlugin = require("purgecss-webpack-plugin");
@ -77,30 +76,6 @@ const config = {
}
],
},
// {
// test: /\.svg$/,
// loader: "svg-sprite-loader",
// options: {
// extract: true,
// spriteFilename: "icon-sprites.svg",
// publicPath: "./images/",
// symbolId: (filePath) => {
// if (filePath.includes("bootstrap-icons")) {
// return `bi-${path.basename(filePath).slice(0, -4)}`;
// } else if (filePath.includes("@mdi")) {
// return `mdi-${path.basename(filePath).slice(0, -4)}`;
// } else if (filePath.includes("heroicons")) {
// if (filePath.includes("outline")) {
// return `hio-${path.basename(filePath).slice(0, -4)}`;
// } else {
// return `his-${path.basename(filePath).slice(0, -4)}`;
// }
// } else {
// return `${path.basename(filePath).slice(0, -4)}`;
// }
// },
// },
// },
]
},
optimization: {
@ -115,7 +90,6 @@ const config = {
},
plugins: [
new MiniCssExtractPlugin({ filename: `[name]${prefix}.css` }),
// new SpriteLoaderPlugin({ plainSprite: true }),
new CopyWebpackPlugin({
patterns: [{
from: './assets/images/',