Skip to content

Commit

Permalink
Issue #SB-23215 merge: Merge pull request Sunbird-Lern#83 from ArtiSi…
Browse files Browse the repository at this point in the history
…ngh23/SB-23215

Issue#SB-23215 DF>>Portal>>main menus are clickable only in some positions and also added  menu burger for mobile.
  • Loading branch information
vinukumar-vs authored Feb 18, 2021
2 parents 9145531 + 7341a26 commit a84673e
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 62 deletions.
16 changes: 13 additions & 3 deletions projects/discussion-ui/assets/styles/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ html[layout='joy'] {
}

.df-back-btn {
margin-left: 1rem;
margin-left: 4px;
}

.df-main-content {
Expand All @@ -36,7 +36,7 @@ html[layout='joy'] {

@media (max-width: 768px) {
margin-right: 0;
padding: 1.5rem;
padding: 1rem;
}
}

Expand Down Expand Up @@ -67,8 +67,18 @@ html[layout='joy'] {
.df-sidebar-menu-list:hover,
.menu-active {
background: var(--df-gray-bg) !important;
font-weight: 700;
border-left: 3px solid #005391;
color: #002e50;
}


.df-sidebar-menu-list:hover {
background: var(--df-gray-bg) !important;
font-weight: 700;
color: #002e50;
}

/* start discussion modal */
.discussion-start-modal .discussion-start-modal-content{
.discussion-start-form .start-form-field .start-form-field-control {
border-radius: var(--sbt-bradius-sm) !important;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,5 +38,7 @@
.discuss-main-panel{
width: auto;
padding: 16px 0px;
position: relative;
z-index: 1;
}
}
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
<ul class="sb-sidebar-menu pl-0" *ngIf="!hideSidePanel">
<!-- <li class="df-sidebar-menu-list" *ngIf="false" (click)="navigate('home', $event)" id="all-discussions"><a>All discussions</a></li> -->
<li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'categories'}" (click)="navigate('categories', $event)" id="discussion-categories"><a>Categories</a></li>
<li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'tags'}" (click)="navigate('tags', $event)" id="discussion-tags"><a>Tags</a></li>
<li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'my-discussion'}" (click)="navigate('my-discussion', $event)" id="my-discussion"><a>My discussions</a></li>
<li class="df-sidebar-menu-list" *ngIf="false" (click)="navigate('home', $event)" id="all-discussions"><a>All discussions</a></li>
<li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'categories'}" (click)="navigate('categories', $event)" id="discussion-categories"><a>Categories</a></li>
<li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'tags'}" (click)="navigate('tags', $event)" id="discussion-tags"><a>Tags</a></li>
<li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'my-discussion'}" (click)="navigate('my-discussion', $event)" id="my-discussion"><a>My discussions</a></li>
</ul>


<!-- for mobile-view -->

<!-- <button type="button" class="openbtn" (click)="showMenuButton()">☰</button>
<div class="overlay-sidebar" *ngIf="!showSideMenu">
<div class="overlay-sidebar__menu">
<a href="javascript:void(0)" class="closebtn" click="closeNav()">&times;</a>
<div class="sidebar-menu__content">
</div>
<ul class="sb-sidebar-menu pl-0">
<li *ngIf="false" (click)="navigate('home', $event)" id="all-discussions"><a>All discussions</a></li>
<li [ngClass]="{'active': selectedTab === 'categories'}" (click)="navigate('categories', $event)" id="discussion-categories"><a>Categories</a></li>
<li [ngClass]="{'active': selectedTab === 'tags'}" (click)="navigate('tags', $event)" id="discussion-tags"><a>Tags</a></li>
<li [ngClass]="{'active': selectedTab === 'my-discussion'}" (click)="navigate('my-discussion', $event)" id="my-discussion"><a>My discussions</a></li>
</ul>
</div>
</div> -->
<button type="button" class="openbtn" (click)="showMenuButton()"></button>
<div class="overlay-sidebar" *ngIf="!showSideMenu">
<div class="overlay-sidebar__menu">
<a href="javascript:void(0)" class="closebtn" (click)="closeNav()">&times;</a>
<div class="sidebar-menu__content">
<ul class="sb-sidebar-menu-mob pl-0">
<li class="df-sidebar-menu-list" *ngIf="false" (click)="navigate('home', $event)" id="all-discussions"><a>All discussions</a></li>
<li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'categories'}" (click)="navigate('categories', $event)" id="discussion-categories"><a>Categories</a></li>
<li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'tags'}" (click)="navigate('tags', $event)" id="discussion-tags"><a>Tags</a></li>
<li class="df-sidebar-menu-list" [ngClass]="{'menu-active': selectedTab === 'my-discussion'}" (click)="navigate('my-discussion', $event)" id="my-discussion"><a>My discussions</a></li>
</ul>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@
list-style-type: none;
margin-bottom: 0;
height: 100%;
}

.hide{
display:inline;
display: inline;
}

.sb-sidebar-menu li {
Expand All @@ -18,39 +15,38 @@
cursor: pointer;
}

.sb-sidebar-menu li.menu-active{
.sb-sidebar-menu li.menu-active {
background-color: var(--white);
font-weight: 700;
border-left: 3px solid #005391;
color: #002e50;
border-bottom: 0px;
}

.sb-sidebar-menu li:hover {
background-color: var(--white);
}

.openbtn,.overlay-sidebar{
display: none;
.openbtn,
.overlay-sidebar {
display: none;
}

@media (max-width: 768px) {
.sb-sidebar-menu {
padding-left: 0px;
display: none;
}

.sb-sidebar-menu li {
padding: 12px 8px;
.openbtn {
display: inline;
background: var(--black);
color: var(--white);
border: none;
margin-left: 8px;
cursor: pointer;
}

.sb-sidebar-menu,.openbtn{
display: inline;
}

.overlay-sidebar {
height: 100vh;
width: 100%;
overflow: hidden;
background: rgba(0, 0, 0,.4);
background: rgba(0, 0, 0, .4);
top: 0;
left: 0;
right: 0;
Expand All @@ -59,34 +55,65 @@
display: inline;
z-index: 3;
transition-duration: .4s;
transition-timing-function: cubic-bezier(.25,.8,.25,1);
transition-property: background-color,visibility;
}
.overlay-sidebar__menu{
transition-timing-function: cubic-bezier(.25, .8, .25, 1);
transition-property: background-color, visibility;
}

.overlay-sidebar__menu {
position: relative;
top: 0;
height: 100%;
width: 15rem;
width: 15rem;
right: 0;
z-index: 100000;
overflow-y: auto;
overflow-x: hidden;
background-color: #f5f6fa;
color: rgba(0,0,0,.87);
box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,1);
}
color: rgba(0, 0, 0, .87);
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, 1);
}

.sidebar-menu__content{
margin: 24px 16px;
.sidebar-menu__content {
padding: 0 1rem;
height: 100%;
}

.closebtn {
font-size: 2.5rem;
display: flex;
justify-content: flex-end;
padding-right: 1rem;
cursor: pointer;
}

.df-sidebar-menu-list {
margin-bottom: 0.5rem;
position: relative;
top: 32px;
}
padding: 0.675rem;
font-size: 0.875rem;
}

.closebtn{
position: absolute;
top: 0px;
font-size: 2rem;
right: 12px;
}
.sb-sidebar-menu-mob li {
margin-bottom: 0px;
padding: 0.75rem 1rem;
font-size: 14px;
color: #333;
cursor: pointer;
border-left: 0.125rem solid transparent;
cursor: pointer;
}

.sb-sidebar-menu-mob li.menu-active {
background-color: var(--white);
font-weight: 700;
border-left: 3px solid #005391;
color: #002e50;
border-bottom: 0px;
}

.sb-sidebar-menu-mob li:hover {
background-color: var(--white);
font-weight: 700;
color: #002e50;
}
}

0 comments on commit a84673e

Please sign in to comment.