Merge pull request #422 from ethereum/homeRef

changed the way media panels are shown

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -32,12 +32,27 @@ let css = csjs`
     margin:30px;
     padding-right: 90px;
   }
+  .mediaBadge {
+   font-size: 2em;
+   height: 2em;
+   width: 2em;
+  }
+  .mediaBadge:focus {
+    outline: none;
+  }
+  .logoImg {
+    height: 10em;
+  }
   .hpSections {
     min-width: 640px;
   }
   .remixHomeMedia {
-    overflow-x: hidden;
     overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 570px;
+  }
+  .panels {
+    box-shadow: 0px 0px 17px -7px;
   }
   .labelIt {
     margin-bottom: 0;
@@ -49,9 +64,6 @@ let css = csjs`
   .importFrom p {
     margin-right: 10px;
   }
-  .logoContainer {
-    float: left;
-  }
   .logoContainer img{
     height: 150px;
     opacity: 0.7;
@@ -66,19 +78,11 @@ let css = csjs`
     width: 120px;
     height: 70px;
   }
-  .block input[type='radio']:checked ~ .media{
-    width: auto;
-    display: block;
-    transition: .5s ease-in;
-  }
   .media {
-    width: 0;
-    display: none;
     overflow: hidden;
-    transition: .5s ease-out;
-  }
-  .mediumPanel {
     width: 400px;
+    transition: .5s ease-out;
+    z-index: 1000;
   }
 }
 `
@@ -106,7 +110,7 @@ export class LandingPage extends ViewPlugin {
     this.twitterFrame = yo`
       <div class="px-2 ${css.media}">
         <a class="twitter-timeline"
-          data-width="400"
+          data-width="350"
           data-theme="${themeQuality}"
           data-chrome="nofooter noheader transparent"
           data-tweet-limit="8"
@@ -116,6 +120,39 @@ export class LandingPage extends ViewPlugin {
         <script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
       </div>
     `
+    this.badgeTwitter = yo`<button
+      class="btn-info p-2 m-1 border rounded-circle ${css.mediaBadge} fab fa-twitter"
+      src="assets/img/sleepingRemiCroped.webp"
+      id="remixIDEHomeTwitterbtn"
+      onclick=${(e) => this.showMediaPanel(e)}
+    ></button>`
+    this.badgeMedium = yo`<button
+      class="btn-danger p-2 m-1 border rounded-circle ${css.mediaBadge} fab fa-medium"
+      src="assets/img/sleepingRemiCroped.webp"
+      id="remixIDEHomeMediumbtn"
+      onclick=${(e) => this.showMediaPanel(e)}
+    ></button>`
+    this.twitterPanel = yo`
+      <div id="remixIDE_TwitterBlock" class="p-2 mx-0 mb-0 d-none ${css.remixHomeMedia}">
+        ${this.twitterFrame}
+      </div>
+    `
+    this.mediumPanel = yo`
+      <div id="remixIDE_MediumBlock" class="p-2 mx-04 mb-0 d-none ${css.remixHomeMedia}">
+        <div id="medium-widget" class="p-3 ${css.media}">
+          <div
+            id="retainable-rss-embed"
+            data-rss="https://medium.com/feed/remix-ide"
+            data-maxcols="1"
+            data-layout="grid"
+            data-poststyle="external"
+            data-readmore="More..."
+            data-buttonclass="btn mb-3"
+            data-offset="-100">
+          </div>
+        </div>
+      </div>
+    `
     globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
       console.log("theme is ", theme.quality)
       this.onThemeChanged(theme.quality)
@@ -127,7 +164,7 @@ export class LandingPage extends ViewPlugin {
     let twitterFrame = yo`
       <div class="px-2 ${css.media}">
         <a class="twitter-timeline"
-          data-width="400"
+          data-width="350"
           data-theme="${themeQuality}"
           data-chrome="nofooter noheader transparent"
           data-tweet-limit="8"
@@ -140,6 +177,18 @@ export class LandingPage extends ViewPlugin {
     yo.update(this.twitterFrame, twitterFrame)
   }
 
+  showMediaPanel (e) {
+    console.log(e)
+    if (e.target.id === 'remixIDEHomeTwitterbtn') {
+      this.mediumPanel.classList.remove('d-block')
+      this.mediumPanel.classList.add('d-none')
+      this.twitterPanel.classList.toggle('d-block')
+    } else {
+      this.twitterPanel.classList.remove('d-block')
+      this.twitterPanel.classList.add('d-none')
+      this.mediumPanel.classList.toggle('d-block')
+    }
+  }
   render () {
     let load = (service, item, examples, info) => {
       let compilerImport = new CompilerImport()
@@ -233,7 +282,11 @@ export class LandingPage extends ViewPlugin {
 
     const createLargeButton = (imgPath, envID, envText, callback) => {
       return yo`
-        <button class="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center ${css.envButton}" data-id="landingPageStartSolidity" onclick=${() => callback()}>
+        <button
+          class="btn border-secondary d-flex mr-3 text-nowrap justify-content-center flex-column align-items-center ${css.envButton}"
+          data-id="landingPageStartSolidity"
+          onclick=${() => callback()}
+        >
           <img class="m-2 align-self-center ${css.envLogo}" id=${envID} src="${imgPath}">
           <label class="text-uppercase text-dark ${css.cursorStyle}">${envText}</label>
         </button>
@@ -263,16 +316,19 @@ export class LandingPage extends ViewPlugin {
       query.update({appVersion: '0.7.7'})
       document.location.reload()
     }
-    const img = yo`<img src="assets/img/sleepingRemiCroped.webp"></img>`
+    const img = yo`<img class=${css.logoImg} src="assets/img/sleepingRemiCroped.webp"></img>`
 
     // to retrieve medium posts
     document.body.appendChild(yo`<script src="https://www.retainable.io/assets/retainable/rss-embed/retainable-rss-embed.js"></script>`)
     const container = yo`
       <div class="${css.homeContainer} d-flex" data-id="landingPageHomeContainer">
         <div class="${css.mainContent} bg-light">
-          <div class="border-bottom clearfix py-3 align-items-center mb-4">
+          <div class="d-flex justify-content-between">
-            <div class="mx-4 ${css.logoContainer}">${img}</div>
+            <div class="d-flex flex-column">
+              <div class="border-bottom d-flex justify-content-between clearfix py-3 mb-4">
+                <div class="mx-4 w-100">${img}</div>
               </div>
+
               <div class="row ${css.hpSections} mx-4" data-id="landingPageHpSections">
                 <div class="ml-3">
                   <div class="plugins mb-5">
@@ -320,7 +376,7 @@ export class LandingPage extends ViewPlugin {
                         <button class="btn mx-1 btn-secondary  text-nowrap" onclick="${() => load('@resolver-engine', 'resolver-engine URL', ['github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'], yo`<span>please checkout <a class='text-primary' href="https://github.com/Crypto-Punkers/resolver-engine" target='_blank'>https://github.com/Crypto-Punkers/resolver-engine</a> for more information</span>`)}">Resolver-engine</button>
                       </div><!-- end of btn-group -->
                     </div><!-- end of div.file -->
-                <div class="ml-3">
+                    <div class="ml-4 pl-4">
                       <h4>Resources</h4>
                       <p class="mb-1">
                         <i class="mr-1 fas fa-book"></i>
@@ -343,27 +399,14 @@ export class LandingPage extends ViewPlugin {
                 </div>
               </div><!-- end of hpSections -->
             </div>
-        <div class="d-flex">
+            <div class="d-flex flex-column">
-          <div id="remixIDE_TwitterBlock" class="border-left p-2 mx-0 mb-0 ${css.block} ${css.remixHomeMedia}">
+              <div class="d-flex pr-2 py-2 align-self-end">
-            <input type="radio" name="media" id="remixIDE_TwitterRadio" class="d-none" checked />
+                ${this.badgeTwitter}
-            <label class="mx-1 mt-0 mb-1 btn p-0 text-info fab fa-twitter ${css.cursorStyle}" for="remixIDE_TwitterRadio"></label>
+                ${this.badgeMedium}
-            ${this.twitterFrame}
-          </div>
-          <div id="remixIDE_MediumBlock" class="border-left p-2 mx-0 mb-0 ${css.block} ${css.remixHomeMedia}">
-            <input type="radio" name="media" id="remixIDE_MediumRadio" class="d-none" />
-            <label class="mx-1 mt-0 mb-1 btn p-0 text-danger fab fa-medium ${css.cursorStyle}" for="remixIDE_MediumRadio"></label>
-            <div class="px-2 ${css.media}">
-              <div id="medium-widget" class="${css.mediumPanel}">
-                <div
-                  id="retainable-rss-embed"
-                  data-rss="https://medium.com/feed/remix-ide"
-                  data-maxcols="1"
-                  data-layout="grid"
-                  data-poststyle="external"
-                  data-readmore="More..."
-                  data-buttonclass="btn mb-3"
-                  data-offset="-100">
               </div>
+              <div class="mr-3 d-flex bg-light ${css.panels}">
+                ${this.mediumPanel}
+                ${this.twitterPanel}
               </div>
             </div>
           </div>