Skip to content

Commit

Permalink
chore(demo): update styles for demo site
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkuri
jkuri committed Jun 8, 2018
1 parent fa3268e commit 5445f1e
Show file tree
Hide file tree
Showing 4 changed files with 210 additions and 71 deletions.
74 changes: 53 additions & 21 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,61 @@
<div class="hero-body">
<div class="container">
<div class="columns is-multiline">
<div class="column is-8 is-offset-2">
<div class="drop-container" ngFileDrop [options]="options" (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
<p>
Drag a file here or
<label class="upload-button">
<input type="file" ngFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple> browse
</label>
to upload.
</p>
</div>
</div>
<div class="column is-8 is-offset-2">
<div class="upload-items">
<div class="upload-item" *ngFor="let f of files; let i = index;">
<span class="filename">
<span>{{ f.name }} ({{ f.id }}) - {{ f.progress?.data?.percentage }}%</span>
<span>uploading with {{ f.progress?.data?.speedHuman }}</span>
<span>ETA {{ f.progress?.data?.etaHuman }}</span>
</span>
<div class="progress">
<span class="bar" [style.width]="f?.progress?.data?.percentage + '%'"></span>
<div class="column is-6 is-offset-3">
<div class="upload-box">
<div class="upload-box-header">
<div class="control-circles">
<span class="circle is-green"></span>
<span class="circle is-yellow"></span>
<span class="circle is-red"></span>
</div>
<div class="header-title">
<h2>Uploads</h2>
</div>
<div class="gh-icon">
<a target="_blank" href="https://github.com/bleenco/ngx-uploader">
<i class="ionicon ion-social-github"></i>
</a>
</div>
</div>
<div class="upload-box-content">
<div class="drop-container" ngFileDrop [options]="options" (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
<p>
Drag files here or
<label class="upload-button">
<input type="file" ngFileSelect [options]="options" (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple> browse
</label>
to upload.
</p>
</div>
<div class="upload-item" *ngFor="let f of files; let i = index;">
<div class="upload-item-content">
<div class="filename">
<i class="ionicon ion-ios-copy"></i>
<span>{{ f.name }}</span>
</div>
<div class="progress-content">
<div class="progress">
<span class="bar" [style.width]="f?.progress?.data?.percentage + '%'" [class.is-done]="f?.progress?.data?.percentage === 100"></span>
</div>
</div>
<div class="progress-text-content">
<span class="progress-text" [class.is-done]="f?.progress?.data?.percentage === 100">
<span>{{ f.progress?.data?.percentage }}% </span>
<span *ngIf="f.progress?.data?.percentage !== 100">Uploading...</span>
<span *ngIf="f.progress?.data?.percentage === 100">Done</span>
</span>
<span class="speed-and-eta-text" *ngIf="f.progress?.data?.percentage !== 0 && f.progress?.data?.percentage !== 100">
<span>{{ f.progress?.data?.speedHuman }} </span>
<span>ETA {{ f.progress?.data?.etaHuman }}</span>
</span>
</div>
</div>
</div>
</div>
<div class="help-text">
<span>Upload concurrency is intentionally set to single file. All files are immediately deleted after uploaded.</span>
</div>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export class AppComponent {
};

this.uploadInput.emit(event);
} else if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') {
} else if (output.type === 'addedToQueue' && typeof output.file !== 'undefined') {
this.files.push(output.file);
} else if (output.type === 'uploading' && typeof output.file !== 'undefined') {
const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);
Expand All @@ -53,8 +53,8 @@ export class AppComponent {
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'http://ngx-uploader.com/upload',
method: 'POST',
url: 'http://ngx-uploader.com/upload',
method: 'POST',
data: { foo: 'bar' }
};

Expand Down
2 changes: 1 addition & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgxUploader</title>
<title>ngx-uploader - Angular File Uploader</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
Expand Down
199 changes: 153 additions & 46 deletions src/styles/app.sass
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,189 @@
@charset 'utf8'

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,600,700')
@import url('https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css')
@import '../../node_modules/bulma/bulma'

$blue: #38A2FB
$purple: #5754A3
$border: #EDEDED
$grey: #D7D8D7
$green: #93E777
$red: #C11161
$blue: #13EBFF
$green: #6CEFBD
$red: #FF7080
$yellow: #FFE28B

$text: #74809D
$text: #8793A2
$text-light: #C0C4C7
$border: #D2D6DA

$upload-box-background: #2C3139
$upload-box-header-background: #3A414A
$upload-box-progress-background: #3A4048

html, body
width: 100%
height: 100%

body
background: $white
background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)
font-family: 'Roboto', sans-serif
font-size: 12px
color: $text

.hero
background: $white
background: transparent

.upload-box
width: 100%
height: auto
display: inline-block
border-radius: 10px
background: $upload-box-background

.drop-container
background: $white
border-radius: 6px
height: 150px
.upload-box-header
width: 100%
box-shadow: 1px 2px 20px rgba($black, 0.1)
height: 50px
border-top-left-radius: 10px
border-top-right-radius: 10px
background: $upload-box-header-background
display: flex
align-items: center
justify-content: center
border: 2px dashed $text-light
justify-content: space-between

.control-circles
padding-left: 15px
height: 14px

.circle
display: inline-block
margin: 0 4px
width: 14px
height: 14px
border-radius: 50%

&.is-green
background: $green

&.is-yellow
background: $yellow

&.is-red
background: $red

.header-title

h2
+unselectable
font-size: 18px
font-weight: 400
color: $text

.gh-icon
padding-right: 15px

i
font-size: 24px
color: $text
margin-right: 5px
margin-left: 36px
cursor: pointer

.upload-box-content

.upload-item, .drop-container
width: 100%
height: 150px
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.6)

.drop-container
display: flex
align-items: center
justify-content: center

p
font-size: 16px
font-weight: 400
color: $text-light
p
font-size: 16px
font-weight: 400
color: $text

.upload-button
display: inline-block
border: none
outline: none
cursor: pointer
color: $purple
font-weight: 600
padding: 0 2px

input
display: none

.upload-items
display: block
width: 100%

.upload-item
width: 100%
display: block
margin-top: 20px

.filename
display: block
padding: 0 0 5px 5px
color: $text
display: flex
align-items: center
padding: 0 30px

.progress
display: block
position: relative
.upload-item-content
width: 100%
height: 15px
border: 1px solid $purple
border-radius: 2px

.bar
position: absolute
top: 0
left: 0
height: 15px
background: $purple

.filename
display: flex
align-items: center

i
color: $text
opacity: .8
font-size: 24px
margin-right: 12px

span
color: $text
font-size: 14px
font-weight: 400

.progress-content
display: flex
align-items: center
margin: 10px 30px

.progress
display: block
position: relative
width: 100%
height: 12px
border-radius: 10px
background: $upload-box-progress-background

.bar
position: absolute
top: 0
left: 0
height: 12px
background: linear-gradient(90deg, rgba(19,235,255,1) 0%, rgba(108,239,189,1) 100%)

&.is-done
background: $green

.progress-text-content
display: flex
align-items: center
justify-content: space-between
margin: 10px 30px 0

.progress-text
font-size: 13px
font-weight: 600
color: $blue
transition: color 200ms ease-out

&.is-done
color: $green

.speed-and-eta-text
font-size: 13px
font-weight: 600
color: $text

.help-text
display: flex
padding: 10px 30px
font-size: 12px
justify-content: center
align-items: center
color: $text
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.6)

0 comments on commit 5445f1e

Please sign in to comment.