mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #422 from ethereum/homeRef

Browse Source 
changed the way media panels are shown
pull/412/head
yann300 4 years ago committed by GitHub
parent e14e5f8edd 17fc959900
commit f68fde6b75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 152 additions and 109 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 125
      apps/remix-ide/src/app/ui/landing-page/landing-page.js

125
apps/remix-ide/src/app/ui/landing-page/landing-page.js
Unescape View File

@ -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="mx-4 ${css.logoContainer}">${img}</div>
<div class="d-flex justify-content-between">
<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 id="remixIDE_TwitterBlock" class="border-left p-2 mx-0 mb-0 ${css.block} ${css.remixHomeMedia}">
<input type="radio" name="media" id="remixIDE_TwitterRadio" class="d-none" checked />
<label class="mx-1 mt-0 mb-1 btn p-0 text-info fab fa-twitter ${css.cursorStyle}" for="remixIDE_TwitterRadio"></label>
${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 class="d-flex flex-column">
<div class="d-flex pr-2 py-2 align-self-end">
${this.badgeTwitter}
${this.badgeMedium}
</div>
<div class="mr-3 d-flex bg-light ${css.panels}">
${this.mediumPanel}
${this.twitterPanel}
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save