woocommerce/plugins/woocommerce-admin/client/marketplace/components/footer/footer.scss

56 lines
1.1 KiB
SCSS
Raw Normal View History

@import "../../stylesheets/_variables.scss";
.woocommerce-marketplace__footer {
[wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page. - `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`. - `Discover` uses these values from context, instead of keeping a loading state in itself. - `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it. - Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer. - Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`. - Added FooterContent component to Footer, to allow the layout we want. - Changed use of context. This now only has states for the selected tab and loading state. - We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab. - We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete. - Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context. - Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`. - Renamed a constant and created constants for API paths. - Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
2023-08-23 15:49:36 +00:00
background: $gray-0;
border-top: 1px solid $gray-200;
margin: auto;
padding: $content-spacing-xlarge $content-spacing-small;
a {
text-decoration: none;
}
[wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page. - `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`. - `Discover` uses these values from context, instead of keeping a loading state in itself. - `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it. - Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer. - Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`. - Added FooterContent component to Footer, to allow the layout we want. - Changed use of context. This now only has states for the selected tab and loading state. - We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab. - We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete. - Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context. - Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`. - Renamed a constant and created constants for API paths. - Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
2023-08-23 15:49:36 +00:00
}
[wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page. - `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`. - `Discover` uses these values from context, instead of keeping a loading state in itself. - `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it. - Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer. - Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`. - Added FooterContent component to Footer, to allow the layout we want. - Changed use of context. This now only has states for the selected tab and loading state. - We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab. - We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete. - Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context. - Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`. - Renamed a constant and created constants for API paths. - Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
2023-08-23 15:49:36 +00:00
.woocommerce-marketplace__footer-content {
box-sizing: content-box;
max-width: $content-max-width;
margin: auto;
width: 100%;
}
[wccom-17942] Only showing feedback snackbar when content of in-app marketplace has finished loading. Making sure snackbar is fixed position, so it's visible wherever you are on the page. - `ProductListContextProvider` provides `setIsLoading` function as well as `isLoading`. - `Discover` uses these values from context, instead of keeping a loading state in itself. - `FeedbackModal` calls `maybSetTimeout` when `isLoading` changes. If `isLoading` isn't truthy, and snackbar hasn't already rendered, it sets a timeout of 5 seconds to show it. - Removed wrapping <WooFooterItem> from around Footer component, so it's no longer a child of the WooCommerce Admin `.woocommerce-layout__footer` footer. - Removed the `position: relative` from `.woocommerce-layout__footer`. It needs to be `position: fixed`. - Added FooterContent component to Footer, to allow the layout we want. - Changed use of context. This now only has states for the selected tab and loading state. - We use this context in `Tabs` and `Content` to keep track of which tab is selected, and set the selected tab. - We also use it in `Discover` and `Extensions`, which both report loading state to the context. This allows us to use it to only render the snackbar when loading is complete. - Extensions: moved `productList` and `setProductList` and logic for getting product list from the context provider to a state in this component. We don't need to share the list of products in the context. - Renamed `ProductListContext`, `ProductListContextProvider` and `productListContextValue` to more generic `MarketplaceContext`, `MarketplaceContextProvider` and `marketplaceContextValue`. - Renamed a constant and created constants for API paths. - Only shows snackbar after content has loaded, and after a timeout. We set a date `marketplace_redesign_2023_last_shown_date` in local storage to ensure we only show one snackbar.
2023-08-23 15:49:36 +00:00
.woocommerce-marketplace__footer-title {
color: $gutenberg-gray-900;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 28px;
max-width: 389px;
margin: 0 0 $content-spacing-large;
}
.woocommerce-marketplace__footer-columns {
display: flex;
flex-direction: column;
gap: $large-gap;
}
.woocommerce-marketplace__footer-logo {
color: $wp-gray-50;
display: flex;
font-size: 14px;
font-weight: 600;
line-height: 20px;
gap: $small-gap;
margin: 48px 0 0;
}
@media screen and (min-width: $breakpoint-medium) {
.woocommerce-marketplace__footer {
padding: $content-spacing-xlarge $content-spacing-large;
}
.woocommerce-marketplace__footer-columns {
flex-direction: row;
}
}