-restyleing of landing page.

-bg color for tabs
pull/3094/head
LianaHus 6 years ago
parent 4f323049bb
commit e7ba33ce68
  1. 2
      src/app/panels/tab-proxy.js
  2. 15
      src/app/ui/landing-page/landing-page.js
  3. 4
      src/app/ui/landing-page/section.js
  4. 2
      src/app/ui/styles/dropdown-styles.js

@ -107,7 +107,7 @@ export class TabProxy {
</div> </div>
` `
let tabsbar = yo` let tabsbar = yo`
<div class="d-flex"> <div class="d-flex bg-light">
<div class="m-1"> <div class="m-1">
<span class="p-1"> <span class="p-1">
<i class="m-1 fa fa-plus" style="color: var(--text-dark)" onclick=${increase} aria-hidden="true" title="increase editor font size"></i> <i class="m-1 fa fa-plus" style="color: var(--text-dark)" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>

@ -28,6 +28,7 @@ var css = csjs`
height : 100%; height : 100%;
padding : 20px; padding : 20px;
background-color: var(--bg-light); background-color: var(--bg-light);
margin-left : 75px;
} }
.im:hover { .im:hover {
} }
@ -61,18 +62,10 @@ export class LandingPage extends ApiFactory {
var actionsLearn = [ var actionsLearn = [
{ label: 'Remix documentation', type: `link`, payload: `https://remix.readthedocs.io/en/latest/#` }, { label: 'Remix documentation', type: `link`, payload: `https://remix.readthedocs.io/en/latest/#` },
{ label: 'GitHub repository', type: `link`, payload: `https://github.com/ethereum/remix-ide` },
{ label: 'Access local file system. remixd', type: `link`, payload: `https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html` }, { label: 'Access local file system. remixd', type: `link`, payload: `https://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html` },
{ label: 'npm module for remixd', type: `link`, payload: `https://www.npmjs.com/package/remixd` },
{ label: 'Medium posts', type: `link`, payload: `https://medium.com/remix-ide` }, { label: 'Medium posts', type: `link`, payload: `https://medium.com/remix-ide` },
{ label: 'Tutorials', type: `link`, payload: `https://github.com/ethereum/remix-workshops` } { label: 'Plugins & modules', type: `link`, payload: `https://github.com/ethereum/remix-plugin/blob/master/readme.md` },
] { label: 'GitHub repo', type: `link`, payload: `https://github.com/ethereum/remix-ide` },
var actionsPlugins = [
{ label: 'Remix plugins & modules', type: `link`, payload: `https://github.com/ethereum/remix-plugin/blob/master/readme.md` },
{ label: 'Repository on GitHub', type: `link`, payload: `https://github.com/ethereum/remix-plugin` },
{ label: 'Examples', type: `link`, payload: `https://github.com/ethereum/remix-plugin/tree/master/examples` },
{ label: 'Build a plugin for Remix', type: `link`, payload: `https://medium.com/remix-ide/build-a-plugin-for-remix-90d43b209c5a` }
] ]
var actionsHelp = [ var actionsHelp = [
@ -83,7 +76,6 @@ export class LandingPage extends ApiFactory {
// var sectionStart = new Section('Start', actionsStart) // var sectionStart = new Section('Start', actionsStart)
var sectionLearn = new Section('Learn', actionsLearn) var sectionLearn = new Section('Learn', actionsLearn)
var sectionPlugins = new Section('Plugins', actionsPlugins)
var sectionHelp = new Section('Help', actionsHelp) var sectionHelp = new Section('Help', actionsHelp)
var sectionsWorkspaces = [] var sectionsWorkspaces = []
@ -109,7 +101,6 @@ export class LandingPage extends ApiFactory {
this.sections.push(sectionWorkspace) this.sections.push(sectionWorkspace)
// this.sections.push(sectionStart) // this.sections.push(sectionStart)
this.sections.push(sectionLearn) this.sections.push(sectionLearn)
this.sections.push(sectionPlugins)
this.sections.push(sectionHelp) this.sections.push(sectionHelp)
} }

@ -25,12 +25,12 @@ class Section {
constructor (title, actions) { constructor (title, actions) {
this.title = title this.title = title
this.actions = actions this.actions = actions
this.cardStyle = (this.title === 'Workspaces') ? 'bg-success text-light' : 'bg-light text-dark border-dark' this.cardStyle = (this.title === 'Workspaces') ? 'bg-success text-light' : 'bg-light text-dark'
} }
render () { render () {
let sectionLook = yo` let sectionLook = yo`
<div class="card ${this.cardStyle} p-3" style="min-width: 300px;"> <div class="card ${this.cardStyle} p-3" style="min-width: 300px; min-height: 190px;">
<div class="card-header font-weight-bold">${this.title}</div> <div class="card-header font-weight-bold">${this.title}</div>
<p></p> <p></p>
</div> </div>

@ -33,7 +33,7 @@ var css = csjs`
display : flex; display : flex;
flex-direction : column; flex-direction : column;
align-items : end; align-items : end;
top : 30px; top : 32px;
right : 0; right : 0;
width : 230px; width : 230px;
border : 1px solid var(--dark); border : 1px solid var(--dark);

Loading…
Cancel
Save