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

feature 9125: Fix top menu for mobile screens #9143

Merged
merged 9 commits into from Aug 24, 2023
Merged

feature 9125: Fix top menu for mobile screens #9143

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ad5b3f5
feature-9125: Fix top menu for mobile screens
ntthitrinh Aug 18, 2023
897bb45
feature-9125: Fix top menu for mobile screens
ntthitrinh Aug 18, 2023
3a4d3b0
feature-9125: Fix top menu for mobile screens
ntthitrinh Aug 18, 2023
0eb540a
feature-9125: Fix top menu for mobile screens
ntthitrinh Aug 18, 2023
3db2a7f
Merge branch 'development' into ntthitrinh-tma/feature-9125
odkhang Aug 18, 2023
64405b3
feature-9125: Fix top menu for mobile screens
odkhang Aug 21, 2023
7cb68d2
feature-9125: Fix top menu for mobile screens
odkhang Aug 22, 2023
718f816
feature-9125: Fix top menu for mobile screens
odkhang Aug 22, 2023
4ab9705
Merge branch 'development' into ntthitrinh-tma/feature-9125
khangon Aug 22, 2023
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
10 changes: 2 additions & 8 deletions app/styles/pages/public-event.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,17 +228,11 @@
}

.logo-event {
margin: 10px !important;
width: 56px !important;
// margin: 10px !important;
// width: 56px !important;
height: auto;
}

.btn-un-bd {
border: unset;
padding: unset !important;
height: 46px !important;
}

.public-social-links {
margin-top: 1.5rem !important;
}
Expand Down
143 changes: 136 additions & 7 deletions app/styles/partials/nav-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,10 @@
}

.menu-item-public {
height: 100%;
padding-left: unset !important;
padding-right: unset !important;
font-size: 12px;
font-size: 10px;
}

.item-exhibition {
Expand All @@ -45,10 +46,6 @@
}
}

.rm-pd-l {
width: 100% !important;
}

.item-public {
font-size: .85714286rem !important;
}
Expand All @@ -62,6 +59,138 @@
}

.item-padding {
padding-left: 8px !important;
padding-right: 8px !important;
padding-left: 16px !important;
padding-right: 16px !important;
}



.layout-header-mobile {
.reset-pd {
padding: unset !important;
}

.bl-one {
display: flex !important;
margin-right: -22px !important;
padding-left: 18px !important;
border-left: 1px solid rgba(34, 36, 38, .15) !important;

.item-bl-one {
width: calc(100% - 44px);
}
}

.bl-two {
margin-left: 9px !important;
border-left: 1px solid rgba(34, 36, 38, .15);
font-size: 14px;
padding-right: 7px !important;

.item-bl-two-login {
border-right: 1px solid rgba(34, 36, 38, .15) !important;
height: 100%;
display: flex !important;
justify-content: center;
align-items: center;
}

.btn-un-bd {
border: unset;
padding: unset !important;
height: 46px !important;
width: 100%;
padding-left: 14px !important;

img {
width: 80%;
}
}
}

.bl-three {

.menu-schedule {
border-right: 1px solid rgba(34, 36, 38, .15);
}
}

.bl-four {
margin-right: 10px;

.menu-speakers {
padding-left: 8px !important;
padding-right: 8px !important;
}
}

.bl-six-border {
padding-left: 10px !important;
border-left: 1px solid rgba(34, 36, 38, .15);
}

.bl-seven {
border-left: 1px solid rgba(34, 36, 38, .15);
margin-left: -4px !important;
display: flex !important;
justify-content: center;
align-items: center;

a {
background-color: #fff !important;
}


.a-login {
width: calc(100% - 4px);
padding-left: 10px !important;
padding-top: unset !important;
padding-right: unset !important;
padding-bottom: unset !important;
}

.a-login-public {
width: calc(100% - 4px);
padding-left: 5px !important;
padding-top: unset !important;
padding-right: unset !important;
padding-bottom: unset !important;
}
}

.bl-six-login {
padding-left: 3px !important;
margin-right: 11px !important;

button {
padding-left: 7px !important;
}
}

.bl-seven-not-login {
margin-right: unset !important;
}

.bl-seven-login {
margin-right: -4px !important;
}

.item {
&::before {
position: unset !important;
content: unset !important;
top: unset !important;
right: unset !important;
height: unset !important;
width: unset !important;
background: unset !important;
}
}
}

.set-bd-home {
padding-left: 21px !important;
padding-top: unset !important;
padding-right: unset !important;
padding-bottom: unset !important;
}
153 changes: 85 additions & 68 deletions app/templates/components/nav-bar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,88 +68,105 @@
</div>
</div>


<div class="mobile only row">
<div class="ui navbar {{if (and this.showSessions this.showSpeakers this.showExhibitors (not isNotPublicPageRoute)) 'six item item-public' 'tiny'}} menu">
<a href="#" class="menu item open sidebar">
<i class="large content icon"></i>
</a>
{{#if this.session.isAuthenticated}}
{{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute this.isNotEventDetailPageRoute)}}
<LinkTo
@route="index" class="item" @activeClass="">
<div class="ui header small text">{{this.settings.appName}}</div>
</LinkTo>
{{else }}
{{#if this.globalData.logoUrl}}
<button class="item btn-un-bd" {{on "click" this.handleClick}}>
<img src="{{this.globalData.logoUrl}}" class="logo-event mr-8"/>
</button>
{{else}}
<button class="item btn-un-bd" {{on "click" this.handleClick}}>
<div class="ui header small text item-padding">Home</div>
</button>
{{/if}}
{{/if}}
{{else}}
{{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute this.isNotEventDetailPageRoute)}}
<div class="ui six column grid navbar menu layout-header-mobile">
<div class="row reset-pd">
<div id="mobile-bar" class="search-bar search-bar-mobile d-flex items-center space-between m-1 p-2">
<Input @class="prompt" id="mobileSearchBar" @type="text" @key-up={{action "handleKeyPress"}} @value={{this.event_name}} placeholder={{t "Search"}} />
<i role="button" class="search icon" style="cursor: auto;" {{on "click" this.searchOnClick}}></i>
</div>
<div class="three wide column reset-pd bl-one ">
<a href="#" class="menu item open sidebar reset-pd item-bl-one">
<i class="large content icon"></i>
</a>
</div>
<div class="four wide column reset-pd bl-two" >
<div class="item-bl-two-login">
{{#if this.session.isAuthenticated}}
{{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute this.isNotEventDetailPageRoute)}}
<LinkTo
@route="index" class="item" @activeClass="">
<div class="ui header small text">{{this.settings.appName}}</div>
@route="index" class="item reset-pd" @activeClass="">
<div class="ui header small text reset-pd">{{this.settings.appName}}</div>
</LinkTo>
{{else }}
{{#if this.globalData.logoUrl}}
<button class="item btn-un-bd reset-pd " {{on "click" this.handleClick}} >
<img src="{{this.globalData.logoUrl}}" class="logo-event " style="width: 80%;"/>
</button>
{{else}}
<button class="item btn-un-bd reset-pd" {{on "click" this.handleClick}} >
<div class="ui header small text item-padding">Home</div>
</button>
{{/if}}
{{/if}}
{{else}}
{{#if this.globalData.logoUrl}}
<button class="item btn-un-bd" {{on "click" this.handleClick}}>
<img src="{{this.globalData.logoUrl}}" class="logo-event mr-8"/>
</button>
{{else}}
<button class="item btn-un-bd" {{on "click" this.handleClick}}>
<div class="ui header small text item-padding">Home</div>
</button>
{{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute this.isNotEventDetailPageRoute)}}
<LinkTo
@route="index" class="item reset-pd" @activeClass="">
<div class="ui header small text reset-pd">{{this.settings.appName}}</div>
</LinkTo>
{{else}}
{{#if this.globalData.logoUrl}}
<button class="item btn-un-bd reset-pd" {{on "click" this.handleClick}} >
<img src="{{this.globalData.logoUrl}}" class="logo-event "/ style="width: 80%;">
</button>
{{else}}
<button class="item btn-un-bd reset-pd " {{on "click" this.handleClick}}>
<div class="ui header small text item-padding">Home</div>
</button>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
<div class="{{if (not this.isNotPublicPageRoute) 'two' 'one'}} wide column reset-pd bl-three">
{{#if (not this.isNotPublicPageRoute)}}
{{#if this.showSessions}}
<div role="button" class="item menu-item-public menu-schedule" {{on "click" (fn this.redirectToPage 'schedule')}}>Schedule</div>
{{/if}}
{{/if}}
{{#if (not this.isNotPublicPageRoute)}}
{{#if this.showSessions}}
<div role="button" class="item menu-item-public{{if (not (and showSessions showSpeakers showExhibitors)) 'item-padding' ''}} " {{on "click" (fn this.redirectToPage 'schedule')}}>Schedule</div>
{{/if}}
{{#if this.showSpeakers}}
<div role="button" class="item menu-item-public {{if (not (and showSessions showSpeakers showExhibitors)) 'item-padding' ''}} " {{on "click" (fn this.redirectToPage 'speakers')}}>Speakers</div>
{{/if}}
{{#if this.showExhibitors}}
<div role="button" class="item menu-item-public item-exhibition" {{on "click" (fn this.redirectToPage 'exhibition')}}>Exhibition</div>
</div>
<div class="two wide column reset-pd bl-four">
{{#if (not this.isNotPublicPageRoute)}}
{{#if this.showSpeakers}}
<div role="button" class="item menu-item-public menu-speakers " {{on "click" (fn this.redirectToPage 'speakers')}}>Speakers</div>
{{/if}}
{{/if}}
{{/if}}
<div id="mobile-bar" class="search-bar search-bar-mobile d-flex items-center space-between m-1 p-2">
<Input @class="prompt" id="mobileSearchBar" @type="text" @key-up={{action "handleKeyPress"}} @value={{this.event_name}} placeholder={{t "Search"}} />
<i role="button" class="search icon" style="cursor: auto;" {{on "click" this.searchOnClick}}></i>
</div>
<div class="{{if (and showSessions showSpeakers showExhibitors (not isNotPublicPageRoute)) 'item-menu-right' 'right menu nav-bar' }}">
{{!-- {{#if this.session.isAuthenticated}} --}}
{{!-- <NotificationDropdown
@notifications={{this.notifications}} /> --}}
{{!-- {{/if}} --}}
{{#if (and this.isNotEventPageRoute this.isNotExplorePageRoute this.isNotWizardPageRoute)}}
<div class="{{if this.session.isAuthenticated 'bl-six-login two' 'three'}} wide column reset-pd bl-six {{if (and (not this.isNotPublicPageRoute) this.showExhibitors) 'bl-six-border' ''}}">
{{#if (not this.isNotPublicPageRoute)}}
{{#if this.showExhibitors}}
<div role="button" class="item menu-item-public item-exhibition" {{on "click" (fn this.redirectToPage 'exhibition')}}>Exhibition</div>
{{/if}}
{{/if}}
{{#if (and this.isNotEventPageRoute this.isNotExplorePageRoute this.isNotWizardPageRoute)}}
<div role="button" class="item ui" {{action "toggleMobileSearchBar"}} >
<i class="search icon"></i>
</div>
{{/if}}
{{#if this.session.isAuthenticated}}
{{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute this.isNotEventDetailPageRoute)}}
<LinkTo
@route="create" class="item ui blue button-text small text">
<div>
{{t 'Create Event'}}
</div>
</LinkTo>
{{else}}
<LinkTo
@route="index" class="item {{if (and showSessions showSpeakers showExhibitors (not isNotPublicPageRoute)) 'rm-pd-l' ''}}" @activeClass="">
<div class="ui header small text " >{{this.settings.appName}}</div>
</LinkTo>
{{/if}}
</div>
{{#if this.session.isAuthenticated}}
<div class="{{if (not this.isNotPublicPageRoute) 'three reset-pd' 'four set-bd-home'}} wide right floated column bl-seven {{if this.session.isAuthenticated 'bl-seven-login' 'bl-seven-not-login'}}" >
{{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute this.isNotEventDetailPageRoute)}}
<LinkTo
@route="create" class="item ui blue button-text small text reset-pd">
<div style="font-size: 11.4286px !important;">
{{t 'Create Event'}}
</div>
</LinkTo>
{{else}}
<LinkTo
@route="index" class="item reset-pd" @activeClass="" >
<div class="ui header small text reset-pd" style="font-size: 11.4286px !important;">{{this.settings.appName}}</div>
</LinkTo>
{{/if}}
</div>
{{else}}
<a href="{{href-to 'login'}}" class="item {{if (and showSessions showSpeakers showExhibitors (not isNotPublicPageRoute)) 'rm-pd-l' ''}}">{{t 'Login'}}</a>
<div class="two wide right floated column reset-pd bl-seven">
<a href="{{href-to 'login'}}" class="item {{if (not this.isNotPublicPageRoute) 'a-login-public' 'a-login'}}">{{t 'Login'}}</a>
</div>
{{/if}}
</div>
</div>
</div>
</div>