From 786164d1aa96fd8acdb76b280d9143171fa4f957 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Mon, 21 Sep 2020 23:06:55 +0200
Subject: [PATCH 1/3] adjust right panel height

---
 .../src/app/ui/landing-page/landing-page.js   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
index 5fb0a700d0..2d57e7cec3 100644
--- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js
+++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
@@ -29,7 +29,7 @@ let css = csjs`
     flex-grow: 3;
   }
   .hpLogoContainer {
-    margin:30px;
+    margin: 30px;
     padding-right: 90px;
   }
   .mediaBadge {
@@ -44,12 +44,16 @@ let css = csjs`
     height: 10em;
   }
   .hpSections {
-    min-width: 640px;
+  }
+  .rightPanel {
+    right: 0;
+    position: absolute;
+    z-index: 1000;
   }
   .remixHomeMedia {
     overflow-y: auto;
     overflow-x: hidden;
-    max-height: 570px;
+    max-height: 720px;
   }
   .panels {
     box-shadow: 0px 0px 17px -7px;
@@ -107,6 +111,7 @@ export class LandingPage extends ViewPlugin {
     this.verticalIcons = verticalIcons
     this.gistHandler = new GistHandler()
     const themeQuality = globalRegistry.get('themeModule').api.currentTheme().quality
+    window.addEventListener('resize', () => this.adjustRightPanel())
     this.twitterFrame = yo`
       <div class="px-2 ${css.media}">
         <a class="twitter-timeline"
@@ -153,12 +158,18 @@ export class LandingPage extends ViewPlugin {
         </div>
       </div>
     `
+    this.adjustRightPanel()
     globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
       console.log("theme is ", theme.quality)
       this.onThemeChanged(theme.quality)
     })
   }
 
+  adjustRightPanel () {
+    this.twitterPanel.style.maxHeight = Math.max(window.innerHeight - 130, 200) + 'px'
+    this.mediumPanel.style.maxHeight = Math.max(window.innerHeight - 130, 200) + 'px'
+  }
+
   onThemeChanged (themeQuality) {
     console.log("themes in listener is", themeQuality)
     let twitterFrame = yo`
@@ -399,7 +410,7 @@ export class LandingPage extends ViewPlugin {
                 </div>
               </div><!-- end of hpSections -->
             </div>
-            <div class="d-flex flex-column">
+            <div class="d-flex flex-column ${css.rightPanel}">
               <div class="d-flex pr-2 py-2 align-self-end">
                 ${this.badgeTwitter}
                 ${this.badgeMedium}

From c5f58295b091d30628af90fd774307a82ee46ff1 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Mon, 21 Sep 2020 23:15:00 +0200
Subject: [PATCH 2/3] adjusted

---
 apps/remix-ide/src/app/ui/landing-page/landing-page.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
index 2d57e7cec3..7f5a847f4e 100644
--- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js
+++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
@@ -166,8 +166,8 @@ export class LandingPage extends ViewPlugin {
   }
 
   adjustRightPanel () {
-    this.twitterPanel.style.maxHeight = Math.max(window.innerHeight - 130, 200) + 'px'
-    this.mediumPanel.style.maxHeight = Math.max(window.innerHeight - 130, 200) + 'px'
+    this.twitterPanel.style.maxHeight = Math.max(window.innerHeight - 150, 200) + 'px'
+    this.mediumPanel.style.maxHeight = Math.max(window.innerHeight - 150, 200) + 'px'
   }
 
   onThemeChanged (themeQuality) {

From d874d504fbef07c17af73216bc3775d6f6943c31 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Tue, 22 Sep 2020 11:48:27 +0200
Subject: [PATCH 3/3] hideing on click outside panel

---
 .../src/app/ui/landing-page/landing-page.js   | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/apps/remix-ide/src/app/ui/landing-page/landing-page.js b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
index 7f5a847f4e..defeac4676 100644
--- a/apps/remix-ide/src/app/ui/landing-page/landing-page.js
+++ b/apps/remix-ide/src/app/ui/landing-page/landing-page.js
@@ -111,7 +111,8 @@ export class LandingPage extends ViewPlugin {
     this.verticalIcons = verticalIcons
     this.gistHandler = new GistHandler()
     const themeQuality = globalRegistry.get('themeModule').api.currentTheme().quality
-    window.addEventListener('resize', () => this.adjustRightPanel())
+    window.addEventListener('resize', () => this.adjustMediaPanel())
+    window.addEventListener('click', (e) => this.hideMediaPanel(e))
     this.twitterFrame = yo`
       <div class="px-2 ${css.media}">
         <a class="twitter-timeline"
@@ -158,18 +159,29 @@ export class LandingPage extends ViewPlugin {
         </div>
       </div>
     `
-    this.adjustRightPanel()
+    this.adjustMediaPanel()
     globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
       console.log("theme is ", theme.quality)
       this.onThemeChanged(theme.quality)
     })
   }
 
-  adjustRightPanel () {
+  adjustMediaPanel () {
     this.twitterPanel.style.maxHeight = Math.max(window.innerHeight - 150, 200) + 'px'
     this.mediumPanel.style.maxHeight = Math.max(window.innerHeight - 150, 200) + 'px'
   }
 
+  hideMediaPanel (e) {
+    const mediaPanelsTitle = document.getElementById('remixIDEMediaPanelsTitle')
+    const mediaPanels = document.getElementById('remixIDEMediaPanels')
+    if (!mediaPanelsTitle.contains(e.target) && !mediaPanels.contains(e.target)) {
+      this.mediumPanel.classList.remove('d-block')
+      this.mediumPanel.classList.add('d-none')
+      this.twitterPanel.classList.remove('d-block')
+      this.twitterPanel.classList.add('d-none')
+    }
+  }
+
   onThemeChanged (themeQuality) {
     console.log("themes in listener is", themeQuality)
     let twitterFrame = yo`
@@ -411,11 +423,11 @@ export class LandingPage extends ViewPlugin {
               </div><!-- end of hpSections -->
             </div>
             <div class="d-flex flex-column ${css.rightPanel}">
-              <div class="d-flex pr-2 py-2 align-self-end">
+              <div class="d-flex pr-2 py-2 align-self-end"  id="remixIDEMediaPanelsTitle">
                 ${this.badgeTwitter}
                 ${this.badgeMedium}
               </div>
-              <div class="mr-3 d-flex bg-light ${css.panels}">
+              <div class="mr-3 d-flex bg-light ${css.panels}" id="remixIDEMediaPanels">
                 ${this.mediumPanel}
                 ${this.twitterPanel}
               </div>