changed position of toggle button on live-panel

Real-Dev-Squad · Oct 16, 2023 · 2be1d34 · 2be1d34
1 parent 5853807
commit 2be1d34
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 93 deletions.
diff --git a/app/components/live-panel.hbs b/app/components/live-panel.hbs
@@ -1,4 +1,11 @@
 <div class='live-panel' data-test-live-panel>
+  <Reusables::IconButton
+    @id='toggle-panel'
+    @class='icon-button--md icon__sidebar__toggle'
+    @title='toggle sidebar panel'
+    @onClick={{@sidebarDisplayToggle}}
+    @icon='material-symbols:chevron-right'
+  />
   {{#if (eq @role this.ROLES.host)}}
     <Reusables::IconButton
       @id='screen-share'

diff --git a/app/components/live-sidebar.hbs b/app/components/live-sidebar.hbs
@@ -4,12 +4,6 @@
     {{if this.isSideBarOpen "open" "close"}}
     {{if @isExpanded "sidebarCloses" "sidebarOpens"}}'
 >
-  <IconifyIcon
-    @icon='ci:hamburger-lg'
-    class='openbtn {{if @isExpanded "closeBtn"}}'
-    type='button'
-    {{on 'click' @sidebarDisplayToggle}}
-  />
 
   <div
     data-test-sidebar-participants

diff --git a/app/styles/icon-button.module.css b/app/styles/icon-button.module.css
@@ -1,34 +1,49 @@
 .icon-button {
-    all: unset;
-    background-color: var(--color-lightgrey);
-    cursor: pointer;
-    display: inline-block;
+  all: unset;
+  background-color: var(--color-lightgrey);
+  cursor: pointer;
+  display: inline-block;
 }
 
 .icon-button--pink-bg {
-    background-color: var(--color-pink);
-    color: var(--color-white)
+  background-color: var(--color-pink);
+  color: var(--color-white);
 }
 
 .icon-button--md {
-    border-radius: 50%;
-    height: 54px;
-    width: 54px;
-    margin-right: 2rem;
-    position: relative;
+  border-radius: 50%;
+  height: 54px;
+  width: 54px;
+  margin-right: 2rem;
+  position: relative;
+}
+
+.icon-button--md .icon__sidebar__toggle {
+  height: 50%;
+  width: 50%;
+  position: absolute;
+  bottom: 50%;
+  right: 50%;
+  transform: translate(50%, 50%);
 }
 
 .icon-button--md .iconify.iconify--material-symbols {
-    height: 50%;
-    width: 50%;
-    position: absolute;
-    bottom: 50%;
-    right: 50%;
-    transform: translate(50%, 50%);
+  height: 50%;
+  width: 50%;
+  position: absolute;
+  bottom: 50%;
+  right: 50%;
+  transform: translate(50%, 50%);
 }
 
 @media (max-width: 425px) {
-    .icon-button--md {
-        margin-right: 1rem;
-    }
-}
+  .icon-button--md {
+    margin-right: 1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .icon__sidebar__toggle {
+    display: none;
+  }
+}
diff --git a/app/styles/live-sidebar.module.css b/app/styles/live-sidebar.module.css
@@ -39,27 +39,6 @@
   border-radius: 10px;
 }
 
-.openbtn {
-  font-size: 1.2rem;
-  cursor: pointer;
-  background-color: var(--color-sidebar);
-  color: var(--color-pink);
-  border: none;
-  width: 2rem;
-  height: 2rem;
-  top: 0rem;
-  margin: 0px 0px 0.6rem 12.3rem;
-  display: block;
-  border-radius: 5px;
-}
-
-.closeBtn {
-  /* margin-left: 8.3rem; */
-  position: absolute;
-  top: 16rem;
-  right: 17rem;
-}
-
 .participants__heading--hide {
   display: none;
 }
@@ -188,46 +167,11 @@
   cursor: pointer;
 }
 
-@media only screen and (max-width: 1235px) {
-  .openbtn {
-    margin: 0px 0px 0.6rem 12rem;
-  }
-  /* .closeBtn {
-    top: 16rem;
-    right: 31rem;
-  } */
-}
-
-@media only screen and (min-width: 1981px) {
-  .closeBtn {
-    top: 16rem;
-    right: 31rem;
-  }
-}
-
-@media only screen and (max-width: 960px) {
-  .openbtn {
-    margin: 0px 0px 1rem 10rem;
-  }
-  .closeBtn {
-    top: 16rem;
-    right: 31rem;
-  }
-}
-
 @media only screen and (max-width: 768px) {
-   .sidebar {
+  .sidebar {
     height: 70px;
     width: 100%;
   }
-  .openbtn {
-    display: none;
-  }
-
-  .closeBtn {
-    top: 12rem;
-    right: 2rem;
-  }
 
   .participantsHeadingHide {
     display: block;
@@ -317,14 +261,6 @@
     width: 100%;
     padding-top: 1rem;
   }
-  .openbtn {
-    display: none;
-  }
-
-  .closeBtn {
-    top: 12rem;
-    right: 2rem;
-  }
 
   .participantsHeadingHide {
     display: block;

diff --git a/app/styles/live.module.css b/app/styles/live.module.css
@@ -32,6 +32,11 @@
   aspect-ratio: 16/9;
 }
 
+.live__video-container--show {
+  width: 100%;
+  aspect-ratio: 16/9;
+}
+
 .container__sidebar {
   display: flex;
   width: 0%;

diff --git a/app/templates/live.hbs b/app/templates/live.hbs
@@ -46,7 +46,7 @@
         <div class='live__container'>
           <div
             class='live__video-container
-              {{if this.isExpanded "" "live__video-container--show"}}
+              {{if this.isExpanded "live__video-container--show" ""}}
               {{if this.liveService.isScreenShareOn "bg-black" ""}}'
             data-test-video-container
           >
@@ -89,6 +89,7 @@
               @role={{this.role}}
               @buttonClickHandler={{this.buttonClickHandler}}
               @openRoomCodeModal={{this.toggleRoomCodeModal}}
+              @sidebarDisplayToggle={{this.sidebarDisplayToggle}}
             />
           {{/if}}
         </div>