Skip to content

B
baas-ide
Commit 334fc5a0 authored by ninabreznik's avatar ninabreznik Committed by yann300
Browse files
Options

Unify buttons and fix other styling issues

parent c48f803b
Show whitespace changes
Inline Side-by-side
Showing with 42 additions and 52 deletions
assets/css/browser-solidity.css
View file @ 334fc5a0
...@@ -51,7 +51,6 @@ ...@@ -51,7 +51,6 @@
} }
#righthand-panel { #righthand-panel {
font-size: 13px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
...@@ -147,7 +146,6 @@ ...@@ -147,7 +146,6 @@
#righthand-panel #optionViews .pre { #righthand-panel #optionViews .pre {
word-wrap: break-word; word-wrap: break-word;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
font-family: monospace;
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
padding: 0 0.6em; padding: 0 0.6em;
...@@ -158,7 +156,6 @@ ...@@ -158,7 +156,6 @@
} }
#righthand-panel .info { #righthand-panel .info {
font-family: monospace;
min-height: 6em; min-height: 6em;
padding: 0.25em 0; padding: 0.25em 0;
padding-left: 6em; padding-left: 6em;
...@@ -189,10 +186,6 @@ ...@@ -189,10 +186,6 @@
cursor: pointer; cursor: pointer;
} }
#staticanalysismodules label {
display: block;
}
#header .origin { #header .origin {
display: block; display: block;
word-wrap: break-word; word-wrap: break-word;
...@@ -269,7 +262,7 @@ ...@@ -269,7 +262,7 @@
.sol.warning pre { .sol.warning pre {
background-color: transparent; background-color: transparent;
margin: 0; margin: 0;
font-size: 10px; font-size: 12px;
border: 0 none; border: 0 none;
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
......
assets/css/styles.css
View file @ 334fc5a0
...@@ -62,12 +62,13 @@ blockquote { ...@@ -62,12 +62,13 @@ blockquote {
} }
code, pre { code, pre {
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;
color: #333; color: #333;
font-size: 12px; font-size: 11px;
} }
pre { pre {
font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
padding: 8px 15px; padding: 8px 15px;
background: #f8f8f8; background: #f8f8f8;
border-radius: 5px; border-radius: 5px;
......
assets/css/universal-dapp.css
View file @ 334fc5a0
...@@ -219,7 +219,6 @@ ...@@ -219,7 +219,6 @@
background-color: #9DC1F5; background-color: #9DC1F5;
border-color: #9DC1F5; border-color: #9DC1F5;
width: 25%; width: 25%;
font-style: italic;
outline: none; outline: none;
} }
......
src/app/staticanalysis/staticAnalysisView.js
View file @ 334fc5a0
...@@ -10,7 +10,8 @@ var styles = styleGuide() ...@@ -10,7 +10,8 @@ var styles = styleGuide()
var css = csjs` var css = csjs`
.analysis { .analysis {
font-height: 1.5em; display: flex;
flex-direction: column;
} }
.result { .result {
margin-top: 1%; margin-top: 1%;
...@@ -20,11 +21,17 @@ var css = csjs` ...@@ -20,11 +21,17 @@ var css = csjs`
align-items: center; align-items: center;
} }
.buttonRun extends ${styles.button} { .buttonRun extends ${styles.button} {
background-color: ${styles.colors.blue};
margin-right: 1%; margin-right: 1%;
} }
.analysisModulesContainer extends ${styles.displayBox} { .analysisModulesContainer extends ${styles.displayBox} {
margin-bottom: 1%; margin-bottom: 1%;
line-height: 2em;
display: flex;
flex-direction: column;
}
.label {
display: flex;
align-items: center;
} }
` `
...@@ -56,7 +63,7 @@ staticAnalysisView.prototype.render = function () { ...@@ -56,7 +63,7 @@ staticAnalysisView.prototype.render = function () {
</div> </div>
<div class="${css.buttons}"> <div class="${css.buttons}">
<button class=${css.buttonRun} onclick=${function () { self.run() }} >Run</button> <button class=${css.buttonRun} onclick=${function () { self.run() }} >Run</button>
<label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label> <label class="${css.label}" for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
</div> </div>
<div class="${css.result}" "id='staticanalysisresult'></div> <div class="${css.result}" "id='staticanalysisresult'></div>
</div> </div>
...@@ -125,7 +132,7 @@ function renderModules (modules) { ...@@ -125,7 +132,7 @@ function renderModules (modules) {
var category = groupedModules[categoryId] var category = groupedModules[categoryId]
var entriesDom = category.map((item, i) => { var entriesDom = category.map((item, i) => {
return yo` return yo`
<label> <label class="${css.label}">
<input id="staticanalysismodule_${categoryId}_${i}" <input id="staticanalysismodule_${categoryId}_${i}"
type="checkbox" type="checkbox"
name="staticanalysismodule" name="staticanalysismodule"
...@@ -137,9 +144,7 @@ function renderModules (modules) { ...@@ -137,9 +144,7 @@ function renderModules (modules) {
` `
}) })
return yo`<div class="${css.analysisModulesContainer}"> return yo`<div class="${css.analysisModulesContainer}">
<label> <label class="${css.label}"><b>${category[0].categoryDisplayName}</b></label>
<b>${category[0].categoryDisplayName}</b>
</label>
${entriesDom} ${entriesDom}
</div>` </div>`
}) })
......
src/app/tabs/analysis-tab.js
View file @ 334fc5a0
...@@ -9,6 +9,8 @@ var css = csjs` ...@@ -9,6 +9,8 @@ var css = csjs`
.analysisTabView { .analysisTabView {
padding: 2%; padding: 2%;
padding-bottom: 3em; padding-bottom: 3em;
display: flex;
flex-direction: column;
} }
.infoBox extends ${styles.infoTextBox} { .infoBox extends ${styles.infoTextBox} {
margin-bottom: 1em; margin-bottom: 1em;
......
src/app/tabs/compile-tab.js
View file @ 334fc5a0
...@@ -26,30 +26,28 @@ var css = csjs` ...@@ -26,30 +26,28 @@ var css = csjs`
} }
.autocompileContainer { .autocompileContainer {
width: 90px; width: 90px;
display: flex;
align-items: center;
} }
.autocompile {}
.autocompileTitle { .autocompileTitle {
font-weight: bold; font-weight: bold;
margin: 1% 0; margin: 1% 0;
} }
.autocompile {
float: left;
align-self: center;
}
.autocompileText { .autocompileText {
align-self: center;
margin: 1% 0; margin: 1% 0;
font-size: 11px; font-size: 12px;
overflow: hidden; overflow: hidden;
word-break: normal; word-break: normal;
line-height: initial; line-height: initial;
margin-left: 3%;
} }
.warnCompilationSlow { .warnCompilationSlow {
color: orange; color: orange;
margin-left: 1%;
} }
.compileButtons { .compileButtons {
display: flex; display: flex;
align-items: baseline; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.name { .name {
...@@ -59,13 +57,10 @@ var css = csjs` ...@@ -59,13 +57,10 @@ var css = csjs`
display: flex; display: flex;
} }
.compileButton extends ${styles.button} { .compileButton extends ${styles.button} {
width: 130px; width: 120px;
min-width: 130px; min-width: 110px;
display: flex;
align-items: baseline;
justify-content: center;
margin-right: 1%; margin-right: 1%;
font-size: 13px; font-size: 12px;
} }
.container extends ${styles.displayBox} { .container extends ${styles.displayBox} {
margin: 0; margin: 0;
...@@ -82,10 +77,8 @@ var css = csjs` ...@@ -82,10 +77,8 @@ var css = csjs`
text-align: center; text-align: center;
} }
.details extends ${styles.button} { .details extends ${styles.button} {
min-width: 70px;
} }
.publish extends ${styles.button} { .publish extends ${styles.button} {
min-width: 70px;
margin-left: 2%; margin-left: 2%;
} }
.log { .log {
......
src/app/tabs/run-tab.js
View file @ 334fc5a0
...@@ -35,16 +35,16 @@ var css = csjs` ...@@ -35,16 +35,16 @@ var css = csjs`
.col1_1 extends ${styles.titleM} { .col1_1 extends ${styles.titleM} {
font-size: 12px; font-size: 12px;
width: 25%; width: 25%;
min-width: 50px; min-width: 75px;
float: left; float: left;
align-self: center; align-self: center;
} }
.col2 extends ${styles.inputField}{ .col2 extends ${styles.inputField}{
width: 75%;
float: left;
} }
.select extends ${styles.dropdown} { .select extends ${styles.dropdown} {
text-align: center; text-align: center;
font-weight: normal;
min-width: 150px;
} }
.copyaddress { .copyaddress {
color: #C6CFF7; color: #C6CFF7;
...@@ -81,20 +81,16 @@ var css = csjs` ...@@ -81,20 +81,16 @@ var css = csjs`
margin-top: 2%; margin-top: 2%;
} }
.atAddress extends ${styles.button} { .atAddress extends ${styles.button} {
background-color: ${styles.colors.green};
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.create extends ${styles.button} { .create extends ${styles.button} {
background-color: ${styles.colors.lightRed};
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.input extends ${styles.inputField} { .input extends ${styles.inputField} {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
width: 75%;
font-size: 10px;
padding-left: 10px; padding-left: 10px;
} }
.noInstancesText extends ${styles.displayBox} { .noInstancesText extends ${styles.displayBox} {
......
src/app/ui/modaldialog.js
View file @ 334fc5a0
...@@ -37,7 +37,7 @@ var css = csjs` ...@@ -37,7 +37,7 @@ var css = csjs`
margin: auto; margin: auto;
padding: 0; padding: 0;
line-height: 18px; line-height: 18px;
font-size: 13px; font-size: 12px;
border: 1px solid #888; border: 1px solid #888;
width: 50%; width: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
......
src/style-guide.js
View file @ 334fc5a0
...@@ -59,7 +59,7 @@ function styleGuide () { ...@@ -59,7 +59,7 @@ function styleGuide () {
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
var textBoxes = csjs` var textBoxes = csjs`
.display-box { .display-box {
font-size : 1em; font-size : 12px;
padding : 10px 15px; padding : 10px 15px;
line-height : 20px; line-height : 20px;
background : ${colors.white}; background : ${colors.white};
...@@ -120,7 +120,8 @@ function styleGuide () { ...@@ -120,7 +120,8 @@ function styleGuide () {
border : 1px solid ${colors.lightGrey}; // light-grey border : 1px solid ${colors.lightGrey}; // light-grey
margin : .3em; margin : .3em;
height : 25px; height : 25px;
font-size : 10px; width : 250px;
font-size : 12px;
border-radius : 3px; border-radius : 3px;
padding : 0 8px; padding : 0 8px;
overflow : hidden; overflow : hidden;
...@@ -132,14 +133,17 @@ function styleGuide () { ...@@ -132,14 +133,17 @@ function styleGuide () {
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
var buttons = csjs` var buttons = csjs`
.button { .button {
display : flex;
align-items : center;
justify-content : center;
border-color : transparent; border-color : transparent;
border-radius : 3px; border-radius : 3px;
border : .3px solid ${colors.lightGrey}; border : .3px solid ${colors.lightGrey};
cursor : pointer; cursor : pointer;
min-height : 25px; min-height : 25px;
max-height : 25px; max-height : 25px;
padding : 3px; width : 70px;
min-width : 100px; min-width : 70px;
font-size : 12px; font-size : 12px;
overflow : hidden; overflow : hidden;
word-break : normal; word-break : normal;
...@@ -159,7 +163,7 @@ function styleGuide () { ...@@ -159,7 +163,7 @@ function styleGuide () {
cursor : pointer; cursor : pointer;
border : 1px solid ${colors.lightGrey}; border : 1px solid ${colors.lightGrey};
border-radius : 3px; border-radius : 3px;
height : 30px; height : 25px;
width : 250px; width : 250px;
text-align : center; text-align : center;
overflow : hidden; overflow : hidden;
......
src/universal-dapp.js
View file @ 334fc5a0
...@@ -29,16 +29,13 @@ var css = csjs` ...@@ -29,16 +29,13 @@ var css = csjs`
align-items: center; align-items: center;
} }
.title extends ${styles.dropdown} { .title extends ${styles.dropdown} {
width: 400px;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
height: 32px; align-items: center;
font-size: 11px;
width: 100%;
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
line-height: initial; line-height: initial;
font-weight: bold;
background-color: ${styles.colors.white}; background-color: ${styles.colors.white};
} }
.titleText { .titleText {
......
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