Skip to content

Commit

Permalink
refactor: make header and upsell for custom layout responsive on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@Soare-Robert-Daniel
Soare-Robert-Daniel committed Jan 20, 2025
1 parent 5a33f9b commit 6677d46
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 14 deletions.
45 changes: 39 additions & 6 deletions inc/admin/dashboard/main.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -797,19 +797,38 @@ public function render_custom_layout_header() {
color: #555;
line-height: 1.6;
}

/* Hide text on small screens but keep it accessible to screen readers */
@media (max-width: 500px) {
.cl-header-btn-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
border: 0 !important;
clip: rect(0 0 0 0);
overflow: hidden;
white-space: nowrap; /* Prevent text wrapping inside the clipped area */
}
}
</style>

<div class="cl-header-container">
<div class="cl-header-row">
<h2><?php esc_html_e( 'Custom Layouts', 'neve' ); ?></h2>
<div class="cl-header-actions">
<button id="cl-open-modal" class="cl-btn-action button button-primary">
<span class="dashicons dashicons-plus-alt2"></span>
<?php esc_html_e( 'Add New Layout', 'neve' ); ?>
<span class="dashicons dashicons-plus-alt2" aria-hidden="true"></span>
<span class="cl-header-btn-text">
<?php esc_html_e( 'Add New Layout', 'neve' ); ?>
</span>
</button>
<a href="https://docs.themeisle.com/article/1062-custom-layouts-module" target="_blank" class="button cl-btn-action">
<span class="dashicons dashicons-welcome-learn-more"></span>
<?php esc_html_e( 'View Tutorial', 'neve' ); ?>
<span class="dashicons dashicons-welcome-learn-more" aria-hidden="true"></span>
<span class="cl-header-btn-text">
<?php esc_html_e( 'View Tutorial', 'neve' ); ?>
</span>
</a>
</div>
</div>
Expand Down Expand Up @@ -856,8 +875,22 @@ public function render_neve_header() {
margin-right: 20px;
border-radius: 8px;
border: 1px solid #ddd;
gap: 10px;
flex-wrap: wrap;
}

@media (max-width: 450px) {
.nv-admin-header {
justify-content: center;
width: fit-content;
}
}

@media (min-width: 451px) {
.nv-admin-header-left {
flex-grow: 1;
}
}
.nv-admin-header-left {
display: flex;
align-items: center;
Expand Down Expand Up @@ -929,12 +962,12 @@ public function render_neve_header() {

<div class="nv-admin-header-right">
<a href="https://docs.themeisle.com/collection/1557-neve" target="_blank">
<span class="dashicons dashicons-book-alt"></span>
<span class="dashicons dashicons-book-alt" aria-hidden="true"></span>
<?php esc_html_e( 'Documentation', 'neve' ); ?>
</a>
<span style="color: #ccc;">|</span>
<a href="https://github.com/Codeinwp/neve/blob/master/CHANGELOG.md" target="_blank">
<span class="dashicons dashicons-media-text"></span>
<span class="dashicons dashicons-media-text" aria-hidden="true"></span>
<?php esc_html_e( 'Changelog', 'neve' ); ?>
</a>
</div>
Expand Down
33 changes: 25 additions & 8 deletions inc/admin/hooks_upsells.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,9 +270,9 @@ public function render_custom_layouts_upsell_modal() {
left: 0;
width: 100%;
height: 100%;
z-index: 999999; /* on top of everything */
z-index: 80;
background: rgba(0, 0, 0, 0.5);
display: flex; /* center the modal */
display: flex;
align-items: center;
justify-content: center;
}
Expand Down Expand Up @@ -345,10 +345,11 @@ public function render_custom_layouts_upsell_modal() {
align-items: flex-start;
flex: 0 0 48%; /* 2 columns in a row on large screens */
gap: 10px;
flex-grow: 1;
}
.cl-feature .dashicons {
font-size: 24px;
color: #0073aa; /* WP blue, for example */
color: #0073aa;
flex-shrink: 0;
margin-top: -2px;
}
Expand Down Expand Up @@ -390,12 +391,28 @@ public function render_custom_layouts_upsell_modal() {
text-align: center;
color: #444;
}

@media (max-width: 480px) {
.cl-quote {
display: none;
}

.cl-features {
max-height: 350px;
overflow-y: auto;
padding: 0 40px;
}

.cl-modal {
padding: 20px 0px;
}
}
</style>

<div class="cl-overlay">
<div class="cl-modal">
<div class="cl-modal-header">
<span class="dashicons dashicons-star-filled"></span>
<span class="dashicons dashicons-star-filled" aria-hidden="true"></span>
<h2><?php echo esc_html__( 'Take Your Site to the Next Level', 'neve' ); ?></h2>
</div>

Expand All @@ -405,28 +422,28 @@ public function render_custom_layouts_upsell_modal() {

<div class="cl-features">
<div class="cl-feature">
<span class="dashicons dashicons-admin-appearance"></span>
<span class="dashicons dashicons-admin-appearance" aria-hidden="true"></span>
<div>
<h3><?php echo esc_html__( 'Build Without Code', 'neve' ); ?></h3>
<p><?php echo esc_html__( 'Create stunning headers, footers, and content sections with our visual drag & drop builder', 'neve' ); ?></p>
</div>
</div>
<div class="cl-feature">
<span class="dashicons dashicons-layout"></span>
<span class="dashicons dashicons-layout" aria-hidden="true"></span>
<div>
<h3><?php echo esc_html__( 'Smart Display Rules', 'neve' ); ?></h3>
<p><?php echo esc_html__( 'Show different layouts based on user roles, devices, or content types', 'neve' ); ?></p>
</div>
</div>
<div class="cl-feature">
<span class="dashicons dashicons-cart"></span>
<span class="dashicons dashicons-cart" aria-hidden="true"></span>
<div>
<h3><?php echo esc_html__( 'WooCommerce Ready', 'neve' ); ?></h3>
<p><?php echo esc_html__( 'Design custom shop pages, product layouts, and checkout experiences', 'neve' ); ?></p>
</div>
</div>
<div class="cl-feature">
<span class="dashicons dashicons-performance"></span>
<span class="dashicons dashicons-performance" aria-hidden="true"></span>
<div>
<h3><?php echo esc_html__( 'Optimized Performance', 'neve' ); ?></h3>
<p><?php echo esc_html__( 'All layouts are lightweight and load only where needed', 'neve' ); ?></p>
Expand Down

0 comments on commit 6677d46

Please sign in to comment.