isabelle/Falcon-PrestaShop-9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(standard-styling) Enhance search and styling

Browse Source 
Improves search bar with SVG icon support for better visual consistency.

Adds utility SCSS file for managing global styles like heading selectors.

Introduces a checkmark SVG asset and reorganizes custom SCSS files following the 7-in-1 structure for better maintainability.

Comments out optional USP bar code in header.tpl to allow easy activation.
This commit is contained in:
Isabelle Oving - Anno
2025-12-24 09:30:17 +01:00
parent 7ba1dfd4c8
commit cb3fe5849f
5 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
falcon/_dev/css/theme/custom/_custom.scss
View File

@ -1,11 +1,18 @@
// NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
/*
This is the main custom SCSS file for the Falcon theme.
I am loosely following the 7 in 1 structure for better organization of the styles. Learn more here:
https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1
⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
*/
//Abstracts: Things used throughout the site such as utility classes and generic overrides.
@import "abstracts/utilities";
//@import "abstracts/base";
//@import "abstracts/utilities";
// Components: parts of the theme itself that are not associated with a module.
//@import "components/";
@import "components/forms";
// Modules: Styling for specific modules.

3
falcon/_dev/css/theme/custom/abstracts/_utilities.scss Normal file
View File

@ -0,0 +1,3 @@
// Header selector for interpolation
// Example usage: #{$headings} { ... }
$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";

3
falcon/_dev/img/checkmark.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 271 B

7
falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl
View File

@ -9,7 +9,12 @@
name="s"
value="{$search_string}">
<button type="submit" class="search-form__btn btn">
<span class="material-icons">search</span>
{capture name="svg_output"}{svg_icon file='search.svg'}{/capture}
{if $smarty.capture.svg_output}
{$smarty.capture.svg_output nofilter}
{else}
<span class="header-top__icon material-icons">search</span>
{/if}
</button>
</div>
</form>

15
falcon/templates/_partials/header.tpl
View File

@ -33,11 +33,24 @@
{/block}
{block name='header_top'}
{* Optional: Add USP bar at the top of the header
Uncomment the code below to enable it
Use the uspanywhere module and hook to "displayHeaderTopUsps" *}
{*
<div class="header-cta d-none d-lg-block py-2 py-lg-3 bg-primary">
<div class="container">
<div class="row d-flex gap-20">
{hook h='displayHeaderTopUsps'}
</div>
</div>
</div>
*}
<div class="js-header-top-wrapper">
<div class="header-top js-header-top">
<div class="header-top__content pb-md-0 py-2">
<div class="container">
<div class="row header-top__row">
<div class="col flex-grow-0 header-top__block header-top__block--menu-toggle d-block d-md-none">