Skip to content

Commit

Permalink
Share + more mobile tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@akariv
akariv committed Dec 24, 2023
1 parent da7544e commit 843ef5c
Show file tree
Hide file tree
Showing 23 changed files with 274 additions and 131 deletions.
34 changes: 29 additions & 5 deletions projects/budgetkey/src/app/common-components/components/header/bk-header.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
<a [routerLink]='["/"]' aria-label='homepage' [style.background-image]='"url(assets/common/img/" + globalSettings.theme.siteLogo + ")"'>
</a>
</div>
<div *ngIf="showSearchBar" class="search-div">
<div *ngIf="showSearchBar" class="search-div layout-desktop">
<app-bk-search-bar [fake]='true'></app-bk-search-bar>
</div>
<div class="menu-links">
<div class='mobile-separator'></div>
<div class="menu-links layout-desktop">
<ng-container *ngFor="let link of globalSettings.theme.headerLinks">
<a [href]="link.href" [innerHtml]='link.title' [target]='link.href.indexOf("http") === 0 ? "_blank" : null' clickOnReturn></a>
</ng-container>
Expand All @@ -17,14 +18,37 @@
<a (activated)='switchLang("he")' clickOnReturn>עב</a>
</ng-container>
</div>
<div *ngIf="showSearchBar" class="collapsed-search" (click)='doSearch()'>
<div *ngIf="showSearchBar" class="collapsed-search layout-mobile" (click)='doSearch()'>
<img class="search-icon" src="/assets/common/img/search-glass-white.svg">
</div>
<div class="collapsed-menu" [ngClass]="{'with-search': showSearchBar}" [class.visible]='showCollapsedMenu' (click)='openCollapsedMenu()'>
<div *ngIf='showShare' class="collapsed-share" [class.visible]='showShareMenu()' (click)='openShareMenu()'>
<div class="share-icon"></div>
<div class='menu'>
<a class='menu-line' [href]='seo.twitterShare' target="_blank">
<span class='icon twitter'></span>
שיתוף בטוויטר
</a>
<a class='menu-line' [href]='seo.fbShare' target="_blank">
<span class='icon facebook'></span>
שיתוף בפייסבוק
</a>
<a class='menu-line' [href]='seo.whatsappShare' target="_blank">
<span class='icon whatsapp'></span>
שיתוף בוואטסאפ
</a>
<a class='menu-line layout-mobile' (activated)="seo.mobileShare()" clickOnReturn>
<span class='icon mobile-share'></span>
שיתוף אחר
</a>
</div>
</div>
<div class="collapsed-menu layout-mobile" [class.with-search]='showSearchBar' [class.visible]='showCollapsedMenu()' (click)='openCollapsedMenu()'>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<div class='menu'>
<ng-container *ngFor="let link of globalSettings.theme.headerLinks">
<a class='menu-line' (activated)="doNavigate(link.href)" [innerHtml]='link.title' clickOnReturn></a>
<a class='menu-line' (activated)="doNavigate(link.href)" clickOnReturn>
<span [innerHtml]='link.title'></span>
</a>
</ng-container>
</div>
</div>
Expand Down
127 changes: 88 additions & 39 deletions projects/budgetkey/src/app/common-components/components/header/bk-header.component.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,13 @@ header {
align-items: center;
background-color: #f8f8f8;
border-color: #e7e7e7;
gap: 24px;
.desktop({
padding: 0 24px;
});
.mobile({
padding: 0 16px;
});

.skip-to-content {
position: absolute;
Expand All @@ -27,10 +34,10 @@ header {
}

div.logo {
flex: 0 0 auto;
width: 80px;
height: 100%;
padding: 2px 0;
margin-right: 2%;

a {
width: 100%;
Expand All @@ -43,7 +50,6 @@ header {
}

div.search-div{
margin-right: 5%;
padding: 0;
flex: 1;

Expand All @@ -52,15 +58,13 @@ header {
}
}
div.menu-links {
margin-right: auto;
display: flex;
align-items: center;
flex-flow: row;
justify-content: left;
margin-left: 40px;
gap: 40px;

a {
margin-right: 40px;
cursor: pointer;
white-space: nowrap;
text-align: center;
Expand All @@ -71,9 +75,13 @@ header {
}
}

div.collapsed-search {
display: none;
.mobile-separator {
margin-right: auto;
margin-left: -24px;
}

div.collapsed-search {
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 17px;
Expand All @@ -84,16 +92,14 @@ header {
cursor: pointer;
}

div.collapsed-menu {
display: none;
div.collapsed-menu, div.collapsed-share {
flex: 0 0 auto;
position: relative;
margin-right: auto;
margin-left: 10px;
cursor: pointer;

&.with-search {
margin-right: 10px;
}
// &.with-search {
// margin-right: 10px;
// }

&:hover .menu {
display: flex;
Expand All @@ -104,26 +110,30 @@ header {

.menu {
position: absolute;
top: 16px;
right: -114px;
top: 32px;
right: -100px;
flex-flow: column;
align-items: flex-start;
width: 130px;
width: 150px;
border: 1px solid #EEEEEE;
border-radius: 4px;
background-color: #FFFFFF;
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
display: none;
z-index: 10;
z-index: 100;


.menu-line {
cursor: pointer;
padding: 6px 10px;
width: 100%;
color: #505050;
font-family: "Abraham TRIAL";
font-size: 14px;
.font-abraham;
display: flex;
flex-flow: row;
align-items: center;
gap: 8px;
}

.menu-line:hover {
Expand All @@ -134,32 +144,71 @@ header {
}
}

div.collapsed-share {
width: 32px;
height: 32px;
.share-icon {
display: flex;
width: 100%;
height: 100%;
.background-image;
width: 32px;
height: 32px;
background-size: 32px;
background-image: url(../../../../assets/common/img/icon-share-main.svg);
}
.menu {
top: 32px;
right: 16px;
transform: translateX(50%);

.menu-line {
.icon {
.background-image;
width: 24px;
height: 24px;
background-size: 24px;
background-image: url(../../../../assets/common/img/icon-share-main.svg);

&.twitter {
background-image: url(../../../../assets/common/img/icon-share-twitter.svg);
}
&.facebook {
background-image: url(../../../../assets/common/img/icon-share-facebook.svg);
}
&.whatsapp {
background-image: url(../../../../assets/common/img/icon-share-whatsapp.svg);
}
&.mobile-share {
background-image: url(../../../../assets/common/img/icon-share-mobile-share.svg);
}
}

&:hover {
.icon {
&.twitter {
background-image: url(../../../../assets/common/img/icon-share-twitter-hover.svg);
}
&.facebook {
background-image: url(../../../../assets/common/img/icon-share-facebook-hover.svg);
}
&.whatsapp {
background-image: url(../../../../assets/common/img/icon-share-whatsapp-hover.svg);
}
&.mobile-share {
background-image: url(../../../../assets/common/img/icon-share-mobile-share-hover.svg);
}
}
}
}
}
}
div.auth-widget{
margin-right: 5px;
margin-left: 2%;
padding: 0;
display: block;

.login {
color: #505050 !important;
}
}

@media only screen and (max-width: 799px) {
div.menu-links {
display: none;
}
div.collapsed-menu {
display: inherit;
flex-grow: 0;
}
div.collapsed-search {
display: block;
flex-grow: 0;
}
div.search-div {
display: none;
}
}

}
Loading

0 comments on commit 843ef5c

Please sign in to comment.