Skip to content
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

feat: remove current edition and change cross style #1725

Merged
merged 26 commits into from
Jul 5, 2024
Merged

feat: remove current edition and change cross style #1725

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
6b0b4dd
feat: remove current edition and change cross style to move it to the…
Jun 18, 2024
52a81cd
feat: change placeholder text
Jun 18, 2024
7ae2a9c
feat: merge with main
Jun 18, 2024
23faceb
feat: modify logo and close styles
Jun 19, 2024
eff85f2
feat: modify search and submit styles
Jun 24, 2024
0731137
feat: modify edition switcher style and remove logo from drawer
Jul 1, 2024
6904897
feat: update hex code
Jul 2, 2024
264441f
feat: add padding to item only inside edition switcher
Jul 2, 2024
5fb7ffc
feat: change variable value and font size only for search
Jul 2, 2024
4cf74e4
Merge branch 'main' into CON-3426-searchNavBarRedesign
danieleruiz Jul 2, 2024
2ef7186
feat: use button mixin
Jul 2, 2024
c38d48d
feat: merge with main
Jul 2, 2024
810919d
feat: change margin with spacing by name
Jul 2, 2024
d4f24cb
feat: add more padding to drawer tools and move subscribe button
Jul 2, 2024
553eff5
feat: remove border top
Jul 2, 2024
11b9077
feat: remove unnecessary styles from button
Jul 2, 2024
a93e691
feat: use o-forms styles for input and button
Jul 3, 2024
68c2f7f
feat: modify search home styles
Jul 3, 2024
256e844
chore: remove old demos
notlee Jul 3, 2024
283a167
chore: install o-footer as a peer dependency
notlee Jul 3, 2024
8449f68
feat!: Add o-header migraiton guide
notlee Jul 3, 2024
d3a27f7
Update components/o-header/src/scss/features/_drawer.scss
danieleruiz Jul 3, 2024
d1d92ef
feat: change markup insted use flex order remove logo class
Jul 3, 2024
9c2e984
feat: change markup insted use flex order remove logo class
Jul 3, 2024
aec0998
feat: fix vertical spaces and add o-forms structure to sticky search
Jul 4, 2024
03d96da
CON-3426: add extra padding only in mobile with anon links
Jul 4, 2024
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
7 changes: 2 additions & 5 deletions components/o-header/demos/src/grid-demo.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
<div class="o-header__container">
<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
<label class="o-header__visually-hidden" for="o-header-search-term">Search the <abbr title="Financial Times">FT</abbr></label>
<input class="o-header__search-term" id="o-header-search-term" name="q" type="text" placeholder="Search the FT">
<input class="o-header__search-term" id="o-header-search-term" name="q" type="text" placeholder="Search for stories, topics or securities">
<button class="o-header__search-submit" type="submit">
Search
</button>
Expand All @@ -67,7 +67,7 @@
<div class="o-header__container">
<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
<label class="o-header__visually-hidden" for="o-header-search-term-js">Search the <abbr title="Financial Times">FT</abbr></label>
<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search the FT">
<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search for stories, topics or securities">
<button class="o-header__search-submit" type="submit">
Search
</button>
Expand Down Expand Up @@ -134,9 +134,6 @@
<button type="button" class="o-header__drawer-tools-close" aria-controls="o-header-drawer" title="Close side navigation menu">
<span class="o-header__visually-hidden">Close side navigation menu</span>
</button>
{{#editions}}
<p class="o-header__drawer-current-edition">{{editions.current.name}} Edition</p>
{{/editions}}
</div>

<div class="o-header__drawer-search">
Expand Down
7 changes: 2 additions & 5 deletions components/o-header/demos/src/header.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
<div class="o-header__container">
<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
<label class="o-header__visually-hidden" for="o-header-search-term">Search the <abbr title="Financial Times">FT</abbr></label>
<input class="o-header__search-term" id="o-header-search-term" name="q" type="text" placeholder="Search the FT">
<input class="o-header__search-term" id="o-header-search-term" name="q" type="text" placeholder="Search for stories, topics or securities">
<button class="o-header__search-submit" type="submit">
Search
</button>
Expand All @@ -70,7 +70,7 @@
<div class="o-header__container">
<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
<label class="o-header__visually-hidden" for="o-header-search-term-js">Search the <abbr title="Financial Times">FT</abbr></label>
<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search the FT">
<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search for stories, topics or securities">
<button class="o-header__search-submit" type="submit">
Search
</button>
Expand Down Expand Up @@ -137,9 +137,6 @@
<button type="button" class="o-header__drawer-tools-close" aria-controls="o-header-drawer" title="Close side navigation menu">
<span class="o-header__visually-hidden">Close side navigation menu</span>
</button>
{{#editions}}
<p class="o-header__drawer-current-edition">{{editions.current.name}} Edition</p>
{{/editions}}
</div>


Expand Down
7 changes: 2 additions & 5 deletions components/o-header/demos/src/pa11y.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
<div class="o-header__container">
<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
<label class="o-header__visually-hidden" for="o-header-search-term">Search the <abbr title="Financial Times">FT</abbr></label>
<input class="o-header__search-term" id="o-header-search-term" name="q" type="text" placeholder="Search the FT">
<input class="o-header__search-term" id="o-header-search-term" name="q" type="text" placeholder="Search for stories, topics or securities">
<button class="o-header__search-submit" type="submit">
Search
</button>
Expand All @@ -65,7 +65,7 @@
<div class="o-header__container">
<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
<label class="o-header__visually-hidden" for="o-header-search-term-js">Search the <abbr title="Financial Times">FT</abbr></label>
<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search the FT">
<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search for stories, topics or securities">
<button class="o-header__search-submit" type="submit">
Search
</button>
Expand Down Expand Up @@ -132,9 +132,6 @@
<button type="button" class="o-header__drawer-tools-close" aria-controls="o-header-drawer" title="Close side navigation menu">
<span class="o-header__visually-hidden">Close side navigation menu</span>
</button>
{{#editions}}
<p class="o-header__drawer-current-edition">{{editions.current.name}} Edition</p>
{{/editions}}
</div>

<div class="o-header__drawer-search">
Expand Down
5 changes: 1 addition & 4 deletions components/o-header/demos/src/simple-header.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<div class="o-header__container">
<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
<label class="o-header__visually-hidden" for="o-header-search-term-js">Search the <abbr title="Financial Times">FT</abbr></label>
<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search the FT">
<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search for stories, topics or securities">
<button class="o-header__search-submit" type="submit">
Search
</button>
Expand All @@ -61,9 +61,6 @@
<button type="button" class="o-header__drawer-tools-close" aria-controls="o-header-drawer" title="Close side navigation menu">
<span class="o-header__visually-hidden">Close side navigation menu</span>
</button>
{{#editions}}
<p class="o-header__drawer-current-edition">{{editions.current.name}} Edition</p>
{{/editions}}
</div>

<div class="o-header__drawer-search">
Expand Down
5 changes: 1 addition & 4 deletions components/o-header/demos/src/sticky-header.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
<div class="o-header__container">
<form class="o-header__search-form" action="/search" role="search" aria-label="Site search">
<label class="o-header__visually-hidden" for="o-header-search-term-js">Search the <abbr title="Financial Times">FT</abbr></label>
<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search the FT">
<input class="o-header__search-term" id="o-header-search-term-js" name="q" type="text" placeholder="Search for stories, topics or securities">
<button class="o-header__search-submit" type="submit">
Search
</button>
Expand All @@ -97,9 +97,6 @@
<button type="button" class="o-header__drawer-tools-close" aria-controls="o-header-drawer" title="Close side navigation menu">
<span class="o-header__visually-hidden">Close side navigation menu</span>
</button>
{{#editions}}
<p class="o-header__drawer-current-edition">{{editions.current.name}} Edition</p>
{{/editions}}
</div>

<div class="o-header__drawer-search">
Expand Down
61 changes: 44 additions & 17 deletions components/o-header/src/scss/features/_drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
}



&.o-header__drawer--open {
// use a 2D transform because 3D are unsupported by IE9
transform: translateX(0);
Expand All @@ -57,6 +56,7 @@
&::-webkit-scrollbar {
width: 12px;
}

&::-webkit-scrollbar-thumb {
background: oColorsByName('black-30');
// you can't set the dimensions so use a border as a margin...
Expand All @@ -74,27 +74,54 @@
padding: ($_o-header-drawer-padding-y * 1.5) 0 $_o-header-drawer-padding-y $_o-header-drawer-padding-x;
background-color: _oHeaderGet('drawer-tools-background');
color: _oHeaderGet('drawer-tools-text');
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;

.o-header__drawer-edition-switcher {
order: 2;
danieleruiz marked this conversation as resolved.
Show resolved Hide resolved
display: flex;

.o-header__drawer-menu-link {
padding-left: 12px;
text-decoration: underline;
}

.o-header__drawer-current-edition {
font-weight: 600;
color: var(--Black-Tints-Black-60, #66605C);
danieleruiz marked this conversation as resolved.
Show resolved Hide resolved
}
.o-header__drawer-menu-item {
padding-top: 12px;
padding-right: 12px;
font-size: 18px;
}
}
}

.o-header__drawer-tools-logo {
danieleruiz marked this conversation as resolved.
Show resolved Hide resolved
@include _oHeaderBrandImage('brand-ft-masthead', _oHeaderGet('header-icon'), 210);
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
width: 210px;
width: 100%;
height: 18px;
border-bottom: 0;
order: 2;
background-position: center;
margin-left: -40px;
}

.o-header__drawer-tools-close {
// dividing by 1px removes the unit
@include oIconsContent('cross', _oHeaderGet('drawer-tools-close'), $size: $_o-header-icon-size-large);
box-sizing: border-box;
float: right;
border: 0;
opacity: 0.75;
cursor: pointer;
margin-top: -10px;
order: 1;
margin-left: -10px;
notlee marked this conversation as resolved.
Show resolved Hide resolved

&:hover,
&:focus {
opacity: 1;
Expand All @@ -105,15 +132,6 @@
}
}

//
// Editions
//
.o-header__drawer-current-edition {
@include oTypographySans($scale: -1);
color: oColorsByName('black-60');
margin: 0.5em 0;
}

//
// Actions
//
Expand Down Expand Up @@ -144,11 +162,12 @@
.o-header__drawer-search-term,
.o-header__drawer-search-submit {
box-sizing: border-box;
height: 32px;
height: 40px;
padding: 8px (div($_o-header-drawer-padding-x, 2));
border: 1px solid;
// prevent zoom on focus
font-size: 100%;
line-height: 40px;
}

.o-header__drawer-search-term {
danieleruiz marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -164,6 +183,7 @@
// margin copied from o-forms since introducing a new dependency would
// be a breaking change, this colour could go in o-colors as a usecase
notlee marked this conversation as resolved.
Show resolved Hide resolved
border: 1px solid oColorsByName('black-50');
margin-right: 10px;
danieleruiz marked this conversation as resolved.
Show resolved Hide resolved

&:focus { //currently overriden by o-normalise
border-color: _oHeaderGet('drawer-search-term-highlight-border');
Expand All @@ -173,11 +193,11 @@
.o-header__drawer-search-submit {
background-color: _oHeaderGet('drawer-search-submit-background');
border-color: _oHeaderGet('drawer-search-submit-border');
padding: 0;

&:after {
@include oIconsContent('search', oColorsByName('white'), $size: $_o-header-icon-size);
@include oIconsContent('search', oColorsByName('white'), $size: 40);
content: '';
margin-top: -(div($_o-header-drawer-padding-y, 2));
}
}

Expand Down Expand Up @@ -233,6 +253,13 @@
.o-header__drawer-menu-item {
margin-top: 1px;
}
.o-header__drawer-divider {
margin-top: 16px;
width: 1px;
height: 16px;
notlee marked this conversation as resolved.
Show resolved Hide resolved
background-color: #333333;
danieleruiz marked this conversation as resolved.
Show resolved Hide resolved
display: inline-block;
}


.o-header__drawer-menu-item--heading {
Expand Down
Loading
Loading