Fixed header style
This commit is contained in:
parent
186912e2e8
commit
44dabc45c0
|
|
@ -1,3 +1,4 @@
|
|||
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.97121 2.33657L7.66496 2.11338V1.39995C7.66498 1.39963 7.665 1.39929 7.66503 1.39893C7.66579 1.3886 7.66785 1.36706 7.67279 1.33844C7.68346 1.27662 7.70299 1.20871 7.73221 1.1523C7.75902 1.10054 7.78543 1.07394 7.81129 1.05731C7.83259 1.0436 7.9088 1 8.09959 1C8.29037 1 8.36659 1.0436 8.38789 1.05731C8.41374 1.07394 8.44015 1.10054 8.46697 1.1523C8.49619 1.20871 8.51571 1.27662 8.52639 1.33844C8.53133 1.36706 8.53338 1.3886 8.53414 1.39893C8.53417 1.39929 8.53419 1.39963 8.53422 1.39995V2.11338L9.22796 2.33657C11.4033 3.03639 12.8381 4.98635 12.8381 7.14777V11.5805C12.8381 12.6186 13.2522 13.3378 13.7865 13.9077C14.0341 14.1717 14.3122 14.4092 14.5603 14.6191C14.5811 14.6367 14.6017 14.6541 14.6223 14.6715C14.8226 14.8408 15.0112 15.0003 15.1969 15.1732C15.2049 15.2629 15.1981 15.3919 15.1681 15.5279C15.1613 15.5589 15.1537 15.5882 15.1456 15.6154H9.53422H8.53422V16.6C8.53419 16.6004 8.53417 16.6007 8.53414 16.6011C8.53338 16.6114 8.53133 16.6329 8.52639 16.6616C8.51571 16.7234 8.49619 16.7913 8.46697 16.8477C8.44015 16.8995 8.41374 16.9261 8.38789 16.9427C8.36659 16.9564 8.29037 17 8.09959 17C7.9088 17 7.83259 16.9564 7.81129 16.9427C7.78543 16.9261 7.75902 16.8995 7.73221 16.8477C7.70299 16.7913 7.68346 16.7234 7.67279 16.6616C7.66785 16.6329 7.66579 16.6114 7.66503 16.6011C7.665 16.6007 7.66498 16.6004 7.66496 16.6V15.6154H6.66496H1.05437C1.04632 15.5882 1.03872 15.5589 1.03187 15.5279C1.00187 15.3919 0.995103 15.2629 1.00309 15.1732C1.18866 15.0004 1.37707 14.8411 1.57711 14.6719C1.59784 14.6544 1.61869 14.6368 1.63967 14.619C1.88772 14.409 2.16578 14.1715 2.41322 13.9075C2.9474 13.3375 3.36106 12.6184 3.36106 11.5805V7.14777C3.36106 4.98635 4.79591 3.03639 6.97121 2.33657ZM1.12345 15.7819C1.12341 15.7818 1.12338 15.7818 1.12334 15.7817L1.12345 15.7819Z" stroke="black" stroke-width="2"/>
|
||||
<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M9 0.75C8.1224 0.75 7.61458 1.35156 7.36458 1.90625C6.01042 2.17969 3.65104 3.35937 3.35937 6.27865C3.25 8 3.04427 11.2057 1.89844 11.737C1.81771 11.7734 1.74479 11.8255 1.6849 11.888C1.58854 11.9818 0.75 12.8594 0.75 14.25C0.75 14.6641 1.08594 15 1.5 15H6.47135C6.61979 16.2656 7.69531 17.25 9 17.25C10.3047 17.25 11.3802 16.2656 11.5286 15H16.5C16.9141 15 17.25 14.6641 17.25 14.25C17.25 12.8594 16.4115 11.9818 16.3151 11.888C16.2552 11.8255 16.1823 11.7734 16.1016 11.737C14.9557 11.2057 14.75 8 14.638 6.25C14.3464 3.35417 11.987 2.17708 10.6354 1.90625C10.3854 1.35156 9.8776 0.75 9 0.75ZM9 2.25C9.22656 2.25 9.28646 2.48177 9.33333 2.72135C9.39844 3.07031 9.70573 3.34375 10.0703 3.34375C10.099 3.34375 12.8672 3.61979 13.1432 6.375C13.3333 9.34896 13.6458 12.0938 15.3151 13.0182C15.3854 13.1094 15.5 13.276 15.5938 13.5H2.40625C2.5 13.2734 2.61719 13.1068 2.6849 13.0208C4.35417 12.0964 4.66667 9.35156 4.85417 6.40104C5.13281 3.61979 7.90104 3.34375 7.92969 3.34375C8.28646 3.34375 8.60156 3.0599 8.66667 2.72917C8.71094 2.4974 8.77344 2.25 9 2.25ZM8 15H10C9.86979 15.4323 9.47396 15.75 9 15.75C8.52604 15.75 8.13021 15.4323 8 15Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,3 +1,4 @@
|
|||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 0.700195C4.04148 0.700195 0 4.74168 0 9.7002C0 14.6587 4.04148 18.7002 9 18.7002V21.792L10.5391 20.8057C12.7749 19.3716 16.8521 16.2755 17.7988 11.583C17.9284 10.9778 18 10.348 18 9.7002C18 4.74168 13.9585 0.700195 9 0.700195ZM9 2.7002C12.8775 2.7002 16 5.82271 16 9.7002C16 10.2044 15.9446 10.6956 15.8418 11.1729L15.8398 11.1807L15.8379 11.1865C15.2437 14.1346 12.9716 16.3054 11 17.8389V16.499L9.875 16.6396C9.57406 16.6773 9.28394 16.7002 9 16.7002C5.12252 16.7002 2 13.5777 2 9.7002C2 5.82271 5.12252 2.7002 9 2.7002Z" fill="black"/>
|
||||
<svg viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M10 0.75C15.1693 0.75 19.375 4.10677 19.375 8.23177C19.375 12.3594 15.1693 15.7161 10 15.7161C9.75781 15.7161 9.50781 15.7057 9.25521 15.6901C6.49219 17.7552 4.22656 18.0339 4.13021 18.0469C4.10156 18.0495 4.07292 18.0521 4.04427 18.0521C3.78125 18.0521 3.53646 17.9141 3.39844 17.6849C3.2474 17.4297 3.26042 17.112 3.42969 16.8698C3.4401 16.8568 4.16667 15.8203 4.93229 14.5312C2.25521 13.1641 0.625 10.8099 0.625 8.23177C0.625 4.10677 4.83073 0.75 10 0.75ZM10 14.2161C14.3411 14.2161 17.875 11.5313 17.875 8.23177C17.875 4.93229 14.3411 2.25 10 2.25C5.65885 2.25 2.125 4.9349 2.125 8.23177C2.125 10.4297 3.71615 12.4479 6.27604 13.5C6.47396 13.5807 6.6276 13.7448 6.70052 13.9453C6.77083 14.1484 6.7526 14.3724 6.64583 14.5599C6.36458 15.0625 6.07552 15.5469 5.80729 15.9792C6.58073 15.6458 7.53906 15.1276 8.56771 14.3281C8.71875 14.2135 8.90625 14.1562 9.09375 14.1745C9.40365 14.2005 9.70833 14.2161 10 14.2161Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 654 B After Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,3 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5529 2.13822C5.01017 2.13822 2.13822 5.01017 2.13822 8.5529C2.13822 12.0956 5.01017 14.9676 8.5529 14.9676C10.3246 14.9676 11.9268 14.2508 13.0888 13.0888C14.2508 11.9268 14.9676 10.3246 14.9676 8.5529C14.9676 5.01017 12.0956 2.13822 8.5529 2.13822ZM0 8.5529C0 3.82926 3.82926 0 8.5529 0C13.2765 0 17.1058 3.82926 17.1058 8.5529C17.1058 10.5289 16.4347 12.3496 15.3095 13.7975L20 18.488L18.488 20L13.7975 15.3095C12.3496 16.4347 10.5289 17.1058 8.5529 17.1058C3.82926 17.1058 0 13.2765 0 8.5529Z" fill="#141414"/>
|
||||
<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7.125 0.375C3.40365 0.375 0.375 3.40365 0.375 7.125C0.375 10.8464 3.40365 13.875 7.125 13.875C8.67448 13.875 10.0964 13.3464 11.237 12.4661L16.1432 17.3698C16.4818 17.7109 17.0313 17.7109 17.3698 17.3698C17.7109 17.0313 17.7109 16.4818 17.3698 16.1432L12.4661 11.237C13.3464 10.0964 13.875 8.67448 13.875 7.125C13.875 3.40365 10.8464 0.375 7.125 0.375ZM7.125 1.875C10.0208 1.875 12.375 4.22917 12.375 7.125C12.375 10.0208 10.0208 12.375 7.125 12.375C4.22917 12.375 1.875 10.0208 1.875 7.125C1.875 4.22917 4.22917 1.875 7.125 1.875Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 669 B After Width: | Height: | Size: 647 B |
|
|
@ -1 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM10,26.39a6,6,0,0,1,11.94,0,11.87,11.87,0,0,1-11.94,0Zm13.74-1.26a8,8,0,0,0-15.54,0,12,12,0,1,1,15.54,0ZM16,8a5,5,0,1,0,5,5A5,5,0,0,0,16,8Zm0,8a3,3,0,1,1,3-3A3,3,0,0,1,16,16Z" data-name="13 User, Account, Circle, Person"/></svg>
|
||||
<svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7.99995 8.625C5.93224 8.625 4.24995 6.85938 4.24995 4.6875C4.24995 2.51563 5.93224 0.75 7.99995 0.75C10.0677 0.75 11.75 2.51563 11.75 4.6875C11.75 6.85938 10.0677 8.625 7.99995 8.625ZM15.0182 14.2005C15.4296 15.3073 14.5963 16.5 13.4036 16.5H11.75H10.5H9.5C8.99995 16.5 8.24474 16.5 7.89839 16.5C7.52599 16.5 6.69797 16.5 6 16.5H5H4H2.39578C1.20828 16.5 0.364535 15.3151 0.778597 14.2005C1.75516 11.5703 4.61453 9.80208 7.89839 9.80208C11.1822 9.80469 14.0442 11.5703 15.0182 14.2005Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 339 B After Width: | Height: | Size: 600 B |
|
|
@ -1,6 +1,9 @@
|
|||
.circlewrap {
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
margin-right: 1.2rem;
|
||||
min-width: 32px;
|
||||
max-width: 32px;
|
||||
|
|
@ -24,7 +27,9 @@
|
|||
}
|
||||
|
||||
.anonymous {
|
||||
height: 17px !important;
|
||||
object-fit: contain;
|
||||
width: 20px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default (props: UserpicProps) => {
|
|||
<img
|
||||
src={props.user.userpic || '/icons/user-default.svg'}
|
||||
alt={props.user.name || ''}
|
||||
classList={{ anonymous: !props.user.userpic }}
|
||||
classList={{ [styles.anonymous]: !props.user.userpic }}
|
||||
/>
|
||||
}
|
||||
>
|
||||
|
|
@ -50,7 +50,7 @@ export default (props: UserpicProps) => {
|
|||
<img
|
||||
src={props.user.userpic || '/icons/user-default.svg'}
|
||||
alt={props.user.name || ''}
|
||||
classList={{ anonymous: !props.user.userpic }}
|
||||
classList={{ [styles.anonymous]: !props.user.userpic }}
|
||||
loading="lazy"
|
||||
/>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.mainHeader {
|
||||
background: #fff;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 2.2rem;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -12,17 +13,6 @@
|
|||
padding: 0 divide($container-padding-x, 2);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
.icon {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainHeaderInner {
|
||||
|
|
@ -77,7 +67,6 @@
|
|||
height: 56px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
transition: height 0.2s;
|
||||
text-align: center;
|
||||
z-index: 9;
|
||||
|
||||
|
|
@ -85,14 +74,6 @@
|
|||
padding: 0 6rem 0 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
|
|
@ -100,14 +81,6 @@
|
|||
transition: height 0.2s;
|
||||
vertical-align: middle;
|
||||
width: 100px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: 175px;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
|
|
@ -158,8 +131,10 @@
|
|||
}
|
||||
|
||||
.mainNavigation {
|
||||
font-size: 1.4rem !important;
|
||||
margin: 0 !important;
|
||||
opacity: 1;
|
||||
text-transform: capitalize;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
li {
|
||||
|
|
@ -331,16 +306,12 @@
|
|||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
right: 6rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
right: 1.5rem;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
right: 1.5rem;
|
||||
@include media-breakpoint-up(xl) {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.control {
|
||||
|
|
@ -378,6 +349,7 @@
|
|||
.userControl {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
z-index: 1;
|
||||
|
|
@ -388,10 +360,6 @@
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
@include font-size(1.7rem);
|
||||
|
||||
justify-content: flex-end;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: divide($container-padding-x, 2);
|
||||
}
|
||||
|
|
@ -412,7 +380,7 @@
|
|||
display: flex;
|
||||
height: 2.4em;
|
||||
justify-content: center;
|
||||
margin-left: 0.5em;
|
||||
margin-left: 0.3rem;
|
||||
position: relative;
|
||||
transition: margin-left 0.3s;
|
||||
width: 2.4em;
|
||||
|
|
@ -472,8 +440,9 @@
|
|||
|
||||
.icon {
|
||||
img {
|
||||
height: 20px;
|
||||
width: auto;
|
||||
height: 17px;
|
||||
max-width: none;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ export const Header = (props: Props) => {
|
|||
<img src="/logo.svg" alt={t('Discours')} />
|
||||
</a>
|
||||
</div>
|
||||
<div class={clsx(styles.mainNavigationWrapper, 'col-auto offset-md-1')}>
|
||||
<div class={clsx(styles.mainNavigationWrapper, 'col offset-md-1')}>
|
||||
<Show when={props.title}>
|
||||
<div class={styles.articleHeader}>{props.title}</div>
|
||||
</Show>
|
||||
|
|
@ -119,17 +119,11 @@ export const Header = (props: Props) => {
|
|||
</li>
|
||||
)}
|
||||
</For>
|
||||
<li class={styles.headerSearch}>
|
||||
<a href="#">
|
||||
<Icon name="search" class={styles.icon} />
|
||||
{t('Search')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<HeaderAuth setIsProfilePopupVisible={setIsProfilePopupVisible} />
|
||||
<Show when={props.title}>
|
||||
<div class={styles.articleControls}>
|
||||
<div class={clsx(styles.articleControls, 'col-auto')}>
|
||||
<SharePopup
|
||||
title={props.title}
|
||||
imageUrl={props.cover}
|
||||
|
|
|
|||
|
|
@ -118,11 +118,21 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
|
|||
</div>
|
||||
</Show>
|
||||
|
||||
<div class={styles.userControlItem}>
|
||||
<a href="#">
|
||||
<Icon name="search" class={styles.icon} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<Show when={showNotifications()}>
|
||||
<div class={styles.userControlItem}>
|
||||
<a href="#" onClick={handleBellIconClick}>
|
||||
<div>
|
||||
<Icon name="bell-white" counter={isAuthenticated() ? warnings().length : 1} />
|
||||
<Icon
|
||||
name="bell-white"
|
||||
counter={isAuthenticated() ? warnings().length : 1}
|
||||
class={styles.icon}
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -180,7 +190,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
|
|||
<a href="/inbox">
|
||||
{/*FIXME: replace with route*/}
|
||||
<div classList={{ entered: page().path === '/inbox' }}>
|
||||
<Icon name="inbox-white" counter={session()?.news?.unread || 0} />
|
||||
<Icon name="inbox-white" counter={session()?.news?.unread || 0} class={styles.icon} />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.snackbar {
|
||||
min-height: 4px;
|
||||
min-height: 2px;
|
||||
background-color: #141414;
|
||||
color: #fff;
|
||||
transition: background-color 0.3s;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user