jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-23 11:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve "Burn another" screen design

Browse Source 
Fixes: https://github.com/resin-io/etcher/issues/74
This commit is contained in:
Juan Cruz Viotti 2016-02-05 12:48:42 -04:00
parent d1844b3830
commit 3caf9859b0
5 changed files with 64 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
build/css/main.css
View File

@ -5847,6 +5847,9 @@ button.close {
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.space-medium {
margin: 15px; }
.space-vertical-medium {
margin: 15px 0; }
@ -5875,12 +5878,14 @@ hero-badge[disabled] .badge {
hero-icon[disabled] hero-caption {
color: #787c7f; }
hero-button .btn[disabled] {
background-color: #313339;
color: #787c7f;
pointer-events: none; }
hero-button .btn[disabled]:hover {
background-color: #36383e; }
hero-button .btn {
min-width: 170px; }
hero-button .btn[disabled] {
background-color: #313339;
color: #787c7f;
pointer-events: none; }
hero-button .btn[disabled]:hover {
background-color: #36383e; }
hero-progress-button .bar {
background: #6ca1e0; }
@ -5949,3 +5954,13 @@ body {
.tiny {
font-size: 10px; }
.separator-xs {
flex-grow: 0;
background-color: #64686a;
padding: 0px;
min-width: 2px; }
.button-label {
margin: 0 auto 15px;
max-width: 165px; }

2
lib/components/hero-button.html
View File

@ -13,8 +13,6 @@
letter-spacing: 0.5px;
outline: none;
min-width: 170px;
position: relative;
}

31
lib/index.html
View File

@ -100,15 +100,28 @@
<h3><hero-tick type="success" class="space-right-tiny"></hero-tick> Burn Complete!</h3>
<p class="soft">Safely ejected and ready for use</p>
<div class="space-vertical-large">
<hero-button ng-click="app.restart({ preserveImage: true })">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
Burn image again
</hero-button>
<hero-button ng-click="app.restart()">
<span class="glyphicon glyphicon-cd" aria-hidden="true"></span>
Burn another image
</hero-button>
<div class="row center-xs space-vertical-large">
<div class="col-xs-4 space-medium">
<div class="box">
<p class="soft button-label">Would you like to burn the same image?</p>
<hero-button ng-click="app.restart({ preserveImage: true })">
Use <b>same</b> image
</hero-button>
</div>
</div>
<div class="col-xs separator-xs"></div>
<div class="col-xs-4 space-medium">
<div class="box">
<p class="soft button-label">Would you like to burn a new image?</p>
<hero-button ng-click="app.restart()">
Use <b>new</b> image
</hero-button>
</div>
</div>
</div>
</div>
</div>

17
lib/scss/main.scss
View File

@ -25,6 +25,7 @@ $color-disabled: rgb(120, 124, 127);
$btn-disabled: rgb(49, 51, 57);
$badge-disabled: rgb(92, 94, 92);
$btn-padding: 10px;
$btn-min-width: 170px;
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@ -49,6 +50,8 @@ hero-icon[disabled] hero-caption {
}
hero-button .btn {
min-width: $btn-min-width;
&[disabled] {
background-color: $btn-disabled;
color: $color-disabled;
@ -154,3 +157,17 @@ body {
.tiny {
font-size: 10px;
}
.separator-xs {
flex-grow: 0;
background-color: darken($color-disabled, 8%);
padding: 0px;
min-width: 2px;
}
.button-label {
margin: 0 auto $spacing-medium;
// Keep some spacing at the sides
max-width: $btn-min-width - 5px;
}

4
lib/scss/modules/_space.scss
View File

@ -19,6 +19,10 @@ $spacing-large: 30px;
$spacing-medium: 15px;
$spacing-tiny: 5px;
.space-medium {
margin: $spacing-medium;
}
.space-vertical-medium {
margin: $spacing-medium 0;
}