Skip to content

B
baas-ide
Commit 8f340fd2 authored by Rob Stupay's avatar Rob Stupay
Browse files
Options

update to css

parent f4cfbda4
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 47 deletions
src/app/ui/landing-page/landing-page.js
View file @ 8f340fd2
...@@ -40,17 +40,50 @@ let css = csjs` ...@@ -40,17 +40,50 @@ let css = csjs`
width : 100%; width : 100%;
font-size : xx-large; font-size : xx-large;
align-self : center; align-self : center;
} }
.text { .text {
cursor: pointer; cursor: pointer;
font-weight: normal; font-weight: normal;
max-width: 300px; max-width: 300px;
user-select: none; user-select: none;
color: var(--primary);
} }
.text:hover { .text:hover {
font-weight: bold; text-decoration: underline;
}
.jumbotronContainer {
margin: 0 60px;
width: 80%;
}
.thisJumboton {
padding: 2.5rem 5rem;
}
.hpLogoContainer {
margin:30px;
padding-right: 90px;
}
.jumboBtnContainer {
float: left;
vertical-align: bottom;
padding-top: 0px;
}
.headlineContainer {
float: left;
padding-right: 90px;
}
.hpSections {
margin: 0 60px;
} }
.solidityBtn {
margin-right: 40px;
}
.labelIt {
margin-bottom: 0;
}
.seeAll {
margin-top: 7px;
}
} }
` `
...@@ -129,11 +162,11 @@ export class LandingPage extends ApiFactory { ...@@ -129,11 +162,11 @@ export class LandingPage extends ApiFactory {
this.appManager.ensureActivated('pipeline') this.appManager.ensureActivated('pipeline')
this.appManager.ensureActivated('run') this.appManager.ensureActivated('run')
} }
let startDebugger = () => { let startDebugger = () => {
this.appManager.ensureActivated('debugger') this.appManager.ensureActivated('debugger')
globalRegistry.get('verticalicon').api.select('debugger') globalRegistry.get('verticalicon').api.select('debugger')
} }
let startPluginManager = () => { let startPluginManager = () => {
this.appManager.ensureActivated('pluginManager') this.appManager.ensureActivated('pluginManager')
globalRegistry.get('verticalicon').api.select('pluginManager') globalRegistry.get('verticalicon').api.select('pluginManager')
} }
...@@ -148,56 +181,62 @@ export class LandingPage extends ApiFactory { ...@@ -148,56 +181,62 @@ export class LandingPage extends ApiFactory {
let importFromExternal = () => { load('URL') } let importFromExternal = () => { load('URL') }
let container = yo`<div> let container = yo`<div>
<div><img src="${logo}" style="height:45px;" alt="Remix logo" /></div> <div class="${css.hpLogoContainer}"><img src="${logo}" style="height:45px;" alt="Remix logo" /></div>
<div> <div class="${css.jumbotronContainer}">
<div class="jumbotron"> <div class="jumbotron clearfix ${css.thisJumboton}">
<h1 class="display-4">The New Layout has arrived</h1> <div class="${css.headlineContainer}">
<button class="btn btn-primary btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button> <h3 class="">The new layout has arrived</h3>
</div> </div>
</div> <div class="${css.jumboBtnContainer}">
<div class="row"> <button class="btn btn-info btn-lg" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
<div class="col-sm-6"> </div>
<div class="environment"> </div><!-- end of jumbotron -->
<h3>Environments</h3> </div><!-- end of jumbotron container -->
<div class="row ${css.hpSections}">
<div id="col1" class="col-sm-6">
<div class="environment mb-5">
<h4>Environments</h4>
<div> <div>
<button class="btn btn-lg btn-primary" onclick=${() => { startSolidity() }}>Solidity</button> <button class="btn btn-lg btn-secondary ${css.solidityBtn}" onclick=${() => { startSolidity() }}>Solidity</button>
<button class="btn btn-lg btn-primary" onclick=${() => { startVyper() }}>Vyper</button> <button class="btn btn-lg btn-secondary" onclick=${() => { startVyper() }}>Vyper</button>
</div> </div>
</div> </div>
<div class="file"> <div class="file">
<h3>File</h3> <h4>File</h4>
<p onclick=${() => { createNewFile() }}><a>New File</a></p> <p class="mb-1 ${css.text}" onclick=${() => { createNewFile() }}>New File</p>
<label class="${css.text} m-0 h6 text-dark"> <p class="mb-1">
Open files <label class="${css.labelIt} ${css.text}">
<input title="open file" type="file" onchange="${ Open Files
(event) => { <input title="open file" type="file" onchange="${
event.stopPropagation() (event) => {
let fileExplorer = globalRegistry.get('fileexplorer/browser').api event.stopPropagation()
fileExplorer.uploadFile(event) let fileExplorer = globalRegistry.get('fileexplorer/browser').api
} fileExplorer.uploadFile(event)
}" multiple /> }
</label> }" multiple />
<p onclick=${() => { connectToLocalhost() }}><a>Connect to Localhost</a></p> </label>
<p onclick=${() => { importFromExternal() }}><a>Import From external source</a></p> </p>
</div> <p class="mb-1 ${css.text}" onclick=${() => { connectToLocalhost() }}>Connect to Localhost</p>
</div> <p class="mb-1 ${css.text} onclick=${() => { importFromExternal() }}">Import From external source</p>
<div class="col-sm-6"> </div><!-- end of div.file -->
<div class="plugins"> </div><!-- end of #col1 -->
<h3>Featured Plugins</h3> <div id="col2" class="col-sm-6">
<p onclick=${() => { startPipeline() }}>Pipeline</p> <div class="plugins mb-5">
<p onclick=${() => { startDebugger() }}>Debugger</p> <h4>Featured Plugins</h4>
<button onclick=${() => { startPluginManager() }} class="btn btn-lg btn-primary">see all<i class="fa fa-plug" ></i></button> <p class="mb-1 ${css.text}" onclick=${() => { startPipeline() }}>Pipeline</p>
<p class="mb-1 ${css.text}" onclick=${() => { startDebugger() }}>Debugger</p>
<p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-info ${css.seeAll}">See all Plugins <i class="fa fa-plug" ></i></button></p>
</div> </div>
<div class="resources"> <div class="resources">
<h3>Resources</h3> <h4>Resources</h4>
<p><a target="__blank" href="https://remix.readthedocs.io/en/latest/#">Documentation</a></p> <p class="mb-1"><a class="${css.text}" target="__blank" href="https://remix.readthedocs.io/en/latest/#">Documentation</a></p>
<p><a target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p> <p class="mb-1"><a class="${css.text}" target="__blank" href="https://gitter.im/ethereum/remix">Gitter channel</a></p>
<p><a target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p> <p class="mb-1"><a class="${css.text}" target="__blank" href="https://medium.com/remix-ide">Medium Posts</a></p>
<p><a target="__blank" href="">Tutorials</a></p> <p class="mb-1"><a class="${css.text}" target="__blank" href="">Tutorials</a></p>
<p><a target="__blank" href="">Workshops Slides</a></p> <p class="mb-1"><a class="${css.text}" target="__blank" href="">Workshops Slides</a></p>
</div> </div>
</div> </div><!-- end of #col2 -->
</div> </div><!-- end of hpSections -->
</div>` </div>`
return container return container
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment