Merge pull request #30498 from woocommerce/update/marketplace-mobile-fixes
Marketplace mobile layout fixes
This commit is contained in:
And Finally
GitHub
commit
68559fa6d5
|
|
@ -30,7 +30,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 216px;
|
||||
padding: 24px;
|
||||
padding: 24px 16px;
|
||||
width: 100%;
|
||||
|
||||
&__title {
|
||||
|
|
@ -84,30 +84,63 @@
|
|||
background: #fff;
|
||||
box-shadow: inset 0 -1px 0 #ccc;
|
||||
display: block;
|
||||
height: 60px;
|
||||
margin: 0 0 16px;
|
||||
|
||||
@media only screen and ( min-width: 768px ) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.current-section-dropdown {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
|
||||
@media only screen and ( min-width: 600px ) {
|
||||
margin-left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.current-section-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 20px 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.current-section-name:after {
|
||||
background-image: url(../images/icons/gridicons-chevron-down.svg);
|
||||
background-size: contain;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
background: #fff;
|
||||
box-shadow: inset 0 -1px 0 #ccc;
|
||||
display: flex;
|
||||
border: 1px solid #1E1E1E;
|
||||
border-radius: 2px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: left;
|
||||
margin: 0 auto;
|
||||
max-width: 1056px;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 14px 0;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
|
||||
@media only screen and ( min-width: 1100px ) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -117,17 +150,30 @@
|
|||
a:focus {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
color: #1e1e1e;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
padding: 20px 12px;
|
||||
white-space: nowrap;
|
||||
|
||||
&.current {
|
||||
box-shadow: inset 0 -3px 0 #3171a6, inset 0 -1px 0 #ccc;
|
||||
}
|
||||
padding: 10px 18px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a.current:after {
|
||||
background-image: url(../images/icons/gridicons-checkmark.svg);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 7px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.current-section-dropdown:hover ul {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -626,6 +672,7 @@
|
|||
|
||||
@media only screen and ( max-width: 768px ) {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="0" fill="none" width="24" height="24"/><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg>
|
||||
|
After Width: | Height: | Size: 201 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="0" fill="none" width="24" height="24"/><g><path d="M20 9l-8 8-8-8 1.414-1.414L12 14.172l6.586-6.586"/></g></svg>
|
||||
|
After Width: | Height: | Size: 181 B |
|
|
@ -11,6 +11,8 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
exit;
|
||||
}
|
||||
|
||||
$current_section_name = __( 'Browse Categories', 'woocommerce' );
|
||||
|
||||
?>
|
||||
<div class="woocommerce wc-addons-wrap">
|
||||
<h1 class="screen-reader-text"><?php esc_html_e( 'Marketplace', 'woocommerce' ); ?></h1>
|
||||
|
|
@ -35,8 +37,14 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
</div>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="current-section-dropdown">
|
||||
<ul>
|
||||
<?php foreach ( $sections as $section ) : ?>
|
||||
<?php
|
||||
if ( $current_section === $section->slug && '_featured' !== $section->slug ) {
|
||||
$current_section_name = $section->label;
|
||||
}
|
||||
?>
|
||||
<li>
|
||||
<a
|
||||
class="<?php echo $current_section === $section->slug ? 'current' : ''; ?>"
|
||||
|
|
@ -46,6 +54,8 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<div class="current-section-name"><?php echo esc_html( $current_section_name ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wp-header-end"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue