Skip to content

Commit

Permalink
chore(demo): update demo ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkuri
jkuri committed May 13, 2017
1 parent 3f721dd commit a64285b
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 70 deletions.
27 changes: 23 additions & 4 deletions src/app/components/app-home/app-home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,26 @@
<div class="columns is-multiline">
<div class="column is-6 is-offset-3">
<div class="drop-container" ngFileDrop (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" [ngClass]="{ 'is-drop-over': dragOver }">
<svg width="121px" height="61px" viewBox="0 0 121 61" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Source-Sans---Dark-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="11---Dark---Upload-Center" transform="translate(-429.000000, -354.000000)">
<g id="Step-3" transform="translate(280.000000, 171.000000)">
<g id="Item-1" transform="translate(134.000000, 183.000000)">
<g id="Illustration---Upload" transform="translate(15.000000, 0.000000)">
<path d="M53.96875,8 L69,23.0625 C69,23.0625 69,23.6105 69,24.139 L69,50 C69,51.1045 68.1045,52 67,52 L37,52 C35.8955,52 35,51.1045 35,50 L35,10 C35,8.8955 35.8955,8 37,8 L53.089,8 L53.96875,8 Z M37,50 L67,50 L67,26 L52.953,26 C51.8485,26 51,25.0645 51,23.96 L51,10 L37,10 L37,50 Z M66.9955,24 L53.089,10 L53,10 L53,24 L66.9955,24 Z M35,18 L35,24 L37,24 L37,18 L35,18 Z M35,20 L37,20 L37,22 L35,22 L35,20 Z" id="File-Icon" fill="#FFFFFF"></path>
<path d="M55.9994705,39.1247502 C55.9994705,39.7095768 55.5255495,40.183739 54.9406938,40.183739 C54.3558382,40.183739 53.8819172,39.7095768 53.8819172,39.1244855 L53.8819172,37.6156526 L49.8081808,41.6897163 C49.6011382,41.8964838 49.3300236,42 49.058909,42 C48.7880592,42 48.5169446,41.8964838 48.3101667,41.6897163 C47.8966111,41.2761811 47.8966111,40.6058412 48.3101667,40.1923061 L52.3841679,36.1179776 L50.8747306,36.1179776 C50.289875,36.1179776 49.8156892,35.6438154 49.8156892,35.0589888 C49.8156892,34.4741622 50.289875,34 50.8747306,34 L54.9409586,34 C55.2218693,34 55.4911306,34.1114586 55.6899656,34.310019 C55.8885359,34.5085794 56,34.778092 56,35.0589888 L55.9994705,39.1247502 Z" id="Arrow" fill="#FFFFFF" transform="translate(52.000000, 38.000000) rotate(-45.000000) translate(-52.000000, -38.000000) "></path>
<g id="Cloud">
<path d="M37.8972124,51.9980018 C37.8409423,51.9993317 37.7845693,52 37.7281043,52 L17.987462,52 C14.4453919,52 11.298506,49.388477 11.0929572,45.912962 C10.9391271,43.3222895 12.3448157,41.0574058 14.4666099,39.8975976 C14.9784927,39.6174193 15.3033924,39.0766098 15.2291296,38.5058279 C15.0633645,37.2430705 15.2211729,35.7040442 16.8881074,33.998214 C17.8681111,32.9934814 19.342758,32.4539751 20.7590556,32.4539751 C21.9141073,32.4552783 22.9776566,32.8084333 23.8608534,33.4052784 C24.4668909,33.813166 25.3129563,33.7193388 25.7160972,33.1159779 C27.3047906,30.7416292 30.1811477,29.2755796 33.3717957,29.682164 C33.9330957,29.7540002 34.4783528,29.8893726 35,30.0807311 L35,48.9925801 C35,50.6173799 36.2872703,51.9397978 37.8972124,51.9980018 Z" fill="#48556B"></path>
<path d="M114.399595,11.5509785 C114.648296,9.82515917 114.445588,7.95872988 113.486558,5.99688672 C112.011389,2.98381701 109.088307,0.764188992 105.713816,0.332315667 C101.615368,-0.189949749 97.9206324,1.69321882 95.8799256,4.74311493 C95.3620835,5.51814342 94.2752964,5.63866621 93.4968298,5.11472686 C92.3623467,4.34806802 90.9961974,3.89443363 89.5125115,3.8927597 C87.6932504,3.8927597 85.7990384,4.58576574 84.5402051,5.87636393 C82.398996,8.06753518 82.1962881,10.0444437 82.4092166,11.6664795 C82.5046085,12.3996598 82.0872687,13.0943398 81.4297454,13.4542342 C78.7042606,14.9440298 76.8986268,17.853316 77.0962245,21.1810841 C77.3602558,25.6454491 81.4024906,29 85.9523469,29 L111.309577,29 C115.50512,29 119.305468,26.1275402 119.969805,22.0565483 C120.59837,18.1931233 118.509967,14.7665935 115.300709,13.2433194 C114.653406,12.9353167 114.299093,12.2523542 114.399595,11.5509785 Z" fill="#8D9AB0"></path>
<path d="M17.4340999,9.04117149 C17.5464115,8.26180245 17.4548699,7.41893486 17.021778,6.53297897 C16.3556012,5.17229586 15.0355558,4.16992598 13.5116571,3.97489473 C11.6608241,3.73904299 9.99230513,4.58946993 9.07073492,5.96678361 C8.83688071,6.31678154 8.34609457,6.37120887 7.994544,6.13460119 C7.48221866,5.78838294 6.86527433,5.58352454 6.19525125,5.5827686 C5.37368449,5.5827686 4.51827041,5.89572571 3.94978929,6.47855164 C2.9828329,7.46807064 2.89129129,8.36082994 2.98744845,9.09333101 C3.03052685,9.42443057 2.84205882,9.73814362 2.54512552,9.90066965 C1.31431389,10.5734519 0.498901186,11.887267 0.58813503,13.3900659 C0.707369906,15.4061447 2.5328174,16.9210385 4.58750356,16.9210385 L16.0386672,16.9210385 C17.9333479,16.9210385 19.6495609,15.623854 19.9495712,13.7854199 C20.2334271,12.0407218 19.2903177,10.4933227 17.841037,9.80542184 C17.5487193,9.66632978 17.3887138,9.35790828 17.4340999,9.04117149 Z" fill="#606E84"></path>
<path d="M85.0358989,48.8634013 C85.2094109,47.6630144 85.0679867,46.3648268 84.398896,45.0002745 C83.3697086,42.9045456 81.3303487,41.360692 78.9760526,41.0603042 C76.1166704,40.6970445 73.538948,42.0068751 72.115199,44.1282184 C71.7539138,44.6672864 70.9956903,44.7511156 70.452574,44.3866916 C69.6610742,43.8534451 68.7079468,43.5379214 67.6728171,43.5367571 C66.4035652,43.5367571 65.0820219,44.0187748 64.2037661,44.9164453 C62.7098993,46.4405059 62.5684752,47.8155369 62.7170299,48.9437376 C62.7835825,49.4536983 62.4924151,49.9368802 62.033678,50.1872034 C60.1321769,51.2234249 58.8724325,53.2469675 59.0102913,55.5615836 C59.1944992,58.6667552 62.014663,61 65.1889814,61 L82.880072,61 C85.8071953,61 88.4586008,59.0020718 88.9220917,56.1705093 C89.3606254,53.4833192 87.9036002,51.1000097 85.6645827,50.0405024 C85.2129762,49.8262723 84.965781,49.3512404 85.0358989,48.8634013 Z" fill="#77859D"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<h1>Drag & Drop</h1>
</div>
</div>
Expand All @@ -21,15 +41,15 @@ <h1>Drag & Drop</h1>
</div>
<div class="column is-4 centered">
<label class="label">Auto Upload</label>
<div class="slideOne">
<div class="checkbox">
<input type="checkbox" value="None" id="autoUpload" name="autoUpload" [(ngModel)]="formData.autoUpload" />
<label for="autoUpload"></label>
</div>
</div>
<div class="column is-4 centered">
<label class="label">Verbose</label>
<div class="slideOne">
<input type="checkbox" value="None" id="verbose" name="check" [(ngModel)]="formData.verbose" />
<div class="checkbox">
<input type="checkbox" value="None" id="verbose" name="verbose" [(ngModel)]="formData.verbose" />
<label for="verbose"></label>
</div>
</div>
Expand All @@ -38,7 +58,6 @@ <h1>Drag & Drop</h1>
<div class="column is-6 is-offset-3" *ngIf="files && files.length">
<div class="upload-file" *ngFor="let f of files; let i = index;">
<div class="progress-bar-container">
<span>{{ f.name }}</span>
<div class="bar" [style.width]="f.progress.data.percentage + '%'" [ngClass]="{ 'green': f.progress.data.percentage === 100 }"></div>
</div>
</div>
Expand Down
130 changes: 64 additions & 66 deletions src/styles/app.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,34 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600,700')
@import '../../node_modules/rash/rash'

html, body
$blue: #1991EB

html, body, .hero
width: 100%
font-family: 'Open Sans', sans-serif
-webkit-font-smoothing: antialiased
background: #1D2838

.drop-container
padding: 40px 0
border: 2px dashed $blue
border-radius: 10px
margin-bottom: 10px
border: 1px solid #313D4F
margin-top: 20px
background: lighten($blue, 50)
display: flex
justify-content: center
align-items: center
background: #273142
svg
width: 100px
margin: 20px auto
display: block
h1
color: $text
font-size: 28px
display: block
color: $white
font-size: 22px
text-align: center
font-weight: 600

&.is-drop-over
background: lighten($blue, 45)
background: lighten(#273142, 45)

.upload-button, .start-upload-btn
width: 200px
Expand All @@ -40,7 +45,7 @@ html, body
cursor: pointer
color: $white
border: none
font-weight: 200
font-weight: 400
transition: all 250ms linear
input
display: none
Expand All @@ -56,12 +61,12 @@ html, body

.progress-bar-container
width: 100%
height: 40px
height: 4px
border-radius: 10px
background: $white
margin: 10px 0
background: #414E63
margin: 30px 0
position: relative
border: 1px dashed $blue
border: none
display: flex
justify-content: center
align-items: center
Expand All @@ -76,85 +81,78 @@ html, body
position: absolute
top: 0
left: 0
height: 38px
background: $red
height: 4px
background: $blue
&.green
background: lighten($blue, 45)
background: $blue
span
z-index: 2

.circle
display: flex
justify-content: center
align-items: center
width: 20px
height: 20px
background: $blue
border-radius: 50%
margin: 5px auto 0 auto
cursor: pointer
svg
display: block
margin: 8px auto
height: 8px
g
g
fill: $white
&.green
background: $blue

.verbose-data
color: $text
padding-bottom: 20px
pre
code
background: lighten($blue, 50)
border: 2px dashed $blue
background: #273142
border: 1px solid #313D4F
border-radius: 5px
font-size: 11px
color: $white

.label
margin: 5px 10px 0 0
color: #7F8FA4

.input-field
background: #222C3C
width: 60px
height: 30px
font-size: 12px
padding: 3px
text-align: center
border: 1px solid #333
border: 1px solid #313D4F
font-weight: $weight-semibold
color: $white

&:hover, &:focus
border: 1px solid #333

.slideOne
border: 1px solid #333
width: 50px
height: 10px
background: $light
margin: 20px 0
border: 1px solid $blue

.checkbox
width: 25px
margin: 20px 100px
position: relative
border-radius: 50px
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2)

label
display: block
width: 16px
height: 16px
position: absolute
top: -3px
left: -3px
cursor: pointer
background: #fcfff4
background: linear-gradient(to bottom, $black 0%, $grey-darker 40%, $grey-dark 100%)
border-radius: 50px
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3)
transition: all 0.4s ease

input[type=checkbox]
visibility: hidden
&:checked + label
left: 37px;
position: absolute
width: 25px
height: 25px
top: 0
left: 0
background: #1B2431
border: 1px solid #313D4F
border-radius: 4px

&:after
opacity: 0
content: ''
position: absolute
width: 12px
height: 7px
background: transparent
top: 7px
left: 6px
border: 3px solid $white
border-top: none
border-right: none
transform: rotate(-45deg)

&:hover
&::after
opacity: 0.2

input[type="checkbox"]:checked + label:after
opacity: 1

.centered
display: flex
Expand Down

0 comments on commit a64285b

Please sign in to comment.