Skip to content

#2582 - Ensure Global Search & Add New Contact Option Within Mobile Nav #2695

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jun 17, 2025
Merged

#2582 - Ensure Global Search & Add New Contact Option Within Mobile Nav #2695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
319f473
Ensure global search and add new contact option is always visible wit…
kodinkat Jun 11, 2025
03352c0
Enhance mobile add new dropdown functionality and styling in the top …
kodinkat Jun 13, 2025
02ba5bd
fix styles
corsacca Jun 13, 2025
c0c3bca
Merge branch 'develop' into 2582-add-new-icon-in-mobile-nav
corsacca Jun 13, 2025
5a41a27
Rebuild styles
corsacca Jun 13, 2025
312f87e
Refactor top navigation bar to enhance mobile add new dropdown and re…
kodinkat Jun 16, 2025
ec10699
Merge branch '2582-add-new-icon-in-mobile-nav' of github.com:kodinkat…
kodinkat Jun 16, 2025
3a0d80c
Enhance mobile navigation by adding functionality to close the dropdo…
kodinkat Jun 16, 2025
cb41ba0
Update minified CSS file to include latest styles and improvements fo…
kodinkat Jun 16, 2025
58df69d
Update CSS files to improve layout consistency and remove unnecessary…
kodinkat Jun 16, 2025
730a824
rebuild styles
corsacca Jun 17, 2025
dc2a8da
Fix text alignment.
corsacca Jun 17, 2025
ad3601d
Also remove some weird white space on the create record pages.
corsacca Jun 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dt-assets/build/css/style.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dt-assets/build/js/scripts.min.js
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions dt-assets/js/footer-scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,19 @@ jQuery(document).ready(function ($) {
required_parent.find('a').first().addClass('side-menu-item-highlight');
}
});

/**
* Mobile navigation dropdown functionality
*/
jQuery(document).ready(function ($) {
// Close mobile add new dropdown when clicking outside
$(document).on('click', function (e) {
if (
!$(e.target).closest(
'#mobile-add-new-dropdown, [data-toggle="mobile-add-new-dropdown"]',
).length
) {
$('#mobile-add-new-dropdown').foundation('close');
}
});
});
40 changes: 39 additions & 1 deletion dt-assets/parts/nav-topbar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,45 @@
</div>
<?php endif; ?>
</div>
<div class="title-bar-right"></div>
<div class="title-bar-right">

<!-- add new -->
<?php if ( isset( $dt_nav_tabs['admin']['add_new']['hidden'] ) && empty( $dt_nav_tabs['admin']['add_new']['hidden'] ) ) : ?>
<div class="has-submenu center-items add-buttons mobile-add-buttons">
<button type="button" data-toggle="mobile-add-new-dropdown">
<img title="<?php echo esc_html( $dt_nav_tabs['admin']['add_new']['label'] ?? '' ); ?>"
src="<?php echo esc_url( $dt_nav_tabs['admin']['add_new']['icon'] ?? get_template_directory_uri() . '/dt-assets/images/circle-add-green.svg' ); ?>"
style="width:24px;">
</button>
<!-- /* MOBILE add menu */ -->
<div class="dropdown-pane add-new-items-dropdown" id="mobile-add-new-dropdown" data-dropdown data-position="bottom" data-alignment="right" data-v-offset="5">
<ul class="menu vertical">
<?php if ( isset( $dt_nav_tabs['admin']['add_new']['submenu'] ) && ! empty( $dt_nav_tabs['admin']['add_new']['submenu'] ) ) : ?>
<?php foreach ( $dt_nav_tabs['admin']['add_new']['submenu'] as $dt_nav_submenu ) : ?>
<?php if ( ! isset( $dt_nav_submenu['hidden'] ) || ! $dt_nav_submenu['hidden'] ) { ?>
<li>
<a class="add-new-menu-item" href="<?php echo esc_url( $dt_nav_submenu['link'] ) ?>">
<img title="<?php echo esc_html( $dt_nav_submenu['label'] ); ?>"
src="<?php echo esc_url( $dt_nav_submenu['icon'] ?? get_template_directory_uri() . '/dt-assets/images/circle-add-green.svg' ) ?>">
<?php echo esc_html( $dt_nav_submenu['label'] ); ?>
</a>
</li>
<?php } ?>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
</div>
<?php endif; // end add new ?>

<!-- advanced search -->
<?php if ( isset( $dt_nav_tabs['admin']['advanced_search']['hidden'] ) && empty( $dt_nav_tabs['admin']['advanced_search']['hidden'] ) ) : ?>
<a class="advanced-search-nav-button" href="<?php echo esc_url( $dt_nav_tabs['admin']['advanced_search']['link'] ?? '#' ); ?>">
<img class="dt-white-icon" title="<?php echo esc_html( $dt_nav_tabs['admin']['advanced_search']['label'] ); ?>" src="<?php echo esc_url( $dt_nav_tabs['admin']['advanced_search']['icon'] ); ?>" style="width:24px;">
</a>
<?php endif; // end advanced search ?>

</div>
</div>

<?php // hook for nav header below menu bar
Expand Down
56 changes: 56 additions & 0 deletions dt-assets/scss/_main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,6 +400,62 @@ html[dir="rtl"] #top-bar-menu {
}
}

// Mobile add new dropdown styling
.mobile-add-buttons {
margin-left: 5px;
position: relative;
display: inline-block;
vertical-align: top;
}

.title-bar-right {
float: right;
text-align: left;
}

.title-bar-right > * {
float: right;
margin-left: 10px;
}

#mobile-add-new-dropdown {
background-color: #3f729b;
border: 1px solid #999;
border-radius: 4px;
min-width: 160px;
max-width: 180px;
padding: 4px 0;

.menu.vertical {
margin: 0;
li {
margin: 0;

.add-new-menu-item {
display: flex;
align-items: center;
padding: 12px 16px;
color: white;
text-decoration: none;
font-size: 14px;
font-weight: bold;
transition: background-color 0.2s;

&:hover {
background-color: #4a7fa8;
}

img {
width: 20px;
height: 20px;
margin-right: 12px;
flex-shrink: 0;
}
}
}
}
}

nav.second-bar {
padding: 0.5em;
background-color: white;
Expand Down
7 changes: 2 additions & 5 deletions template-new-post.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,8 @@
?>

<div id="content" class="template-new-post">
<div id="inner-content" class="grid-x grid-margin-x">
<div class="large-2 medium-12 small-12 cell"></div>

<span class="large-8 medium-12 small-12 cell">
<div id="inner-content" class="grid-x grid-margin-x" style="justify-content: center;">
<div class="large-8 medium-12 small-12 cell">
<form class="js-create-post bordered-box display-fields">

<table>
Expand Down Expand Up @@ -170,7 +168,6 @@ class="form-field <?php echo esc_html( $classes ); ?>">

</div>

<div class="large-2 medium-12 small-12 cell"></div>
</div>
</div>

Expand Down