From 02a1b2a53c331e2088ea05d2202be6eb2b1d051f Mon Sep 17 00:00:00 2001 From: SvetlanaMuravlova <83700465+SvetlanaMuravlova@users.noreply.github.com> Date: Tue, 7 Sep 2021 11:35:02 +0300 Subject: [PATCH] feat(demo): updated up to bootstrap 5 (#1186) * feat(demo): updated up to bootstrap 5 * feat(demo): deleted commented and extra code * fix(readme): deleted slack link * fix(readme): deleted slack link --- README.md | 2 +- apps/demo/src/app/app.component.ts | 24 +-- .../app/components/file-upload-section.html | 51 +++--- .../components/file-upload/simple-demo.html | 43 +++-- apps/demo/src/assets/css/style.css | 161 ++++++++---------- apps/demo/src/index.html | 2 +- libs/ng2-file-upload/README.md | 2 +- package-lock.json | 11 +- package.json | 2 +- 9 files changed, 146 insertions(+), 152 deletions(-) diff --git a/README.md b/README.md index 7c2aa4d..0034c78 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# ng2-file-upload [![npm version](https://badge.fury.io/js/ng2-file-upload.svg)](http://badge.fury.io/js/ng2-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-file-upload.svg)](https://npmjs.org/ng2-file-upload)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com) +# ng2-file-upload [![npm version](https://badge.fury.io/js/ng2-file-upload.svg)](http://badge.fury.io/js/ng2-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-file-upload.svg)](https://npmjs.org/ng2-file-upload) Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-file-upload/)) [![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide) diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts index 5c95d2a..0de4db1 100644 --- a/apps/demo/src/app/app.component.ts +++ b/apps/demo/src/app/app.component.ts @@ -7,22 +7,24 @@ const gettingStarted = require('html-loader!markdown-loader!../getting-started.m template: `
-

ng2-file-upload

-

The Angular2 File Upload directives

- View on GitHub -
-
- +
+

ng2-file-upload

+

The Angular2 File Upload directives

+

+ View on GitHub +

+
+
+
+ npm latest version -
-
- + npm next version + +
-
-
diff --git a/apps/demo/src/app/components/file-upload-section.html b/apps/demo/src/app/components/file-upload-section.html index 865da07..1641ace 100644 --- a/apps/demo/src/app/components/file-upload-section.html +++ b/apps/demo/src/app/components/file-upload-section.html @@ -2,39 +2,42 @@
-
+

- -
- - -
- 
{{desc.html}}
-
- - -
- 
{{desc.ts}}
-
-
- - -
- 
{{desc.js}}
-
- - +
+
+ + +
+ 
{{desc.html}}
+
+ + +
+ 
{{desc.ts}}
+
+
+ + +
+ 
{{desc.js}}
+
+ + +
-
-

API

-
+
+
+

API

+
+
diff --git a/apps/demo/src/app/components/file-upload/simple-demo.html b/apps/demo/src/app/components/file-upload/simple-demo.html index 4333d7b..45373e0 100644 --- a/apps/demo/src/app/components/file-upload/simple-demo.html +++ b/apps/demo/src/app/components/file-upload/simple-demo.html @@ -2,13 +2,12 @@ .my-drop-zone { border: dotted 3px lightgray; } .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */ .another-file-over-class { border: dotted 3px green; } - html, body { height: 100%; } -
+
-
+
Angular2 File Upload
@@ -24,7 +23,7 @@ [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [uploader]="uploader" - class="well my-drop-zone"> + class="well my-drop-zone p-2 mb-3"> Base drop zone
@@ -32,21 +31,21 @@ [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}" (fileOver)="fileOverAnother($event)" [uploader]="uploader" - class="well my-drop-zone"> + class="well my-drop-zone p-2 mb-3"> Another drop zone
- Multiple -
+ Multiple
+
- Single - + Single
+

Upload queue

-

Queue length: {{ uploader?.queue?.length }}

+

Queue length: {{ uploader?.queue?.length ? uploader?.queue?.length : 'Empty'}}

@@ -58,21 +57,21 @@ - + - - - + + - -
Actions
{{ item?.file?.name }}{{ item?.file?.size/1024/1024 | number:'.2' }} MB + {{ item?.file?.name }}{{ item?.file?.size/1024/1024 | number:'.2' }} MB
+ + - @@ -119,9 +118,9 @@
-
-
Response
-
+
+
Response
+
{{ response }}
diff --git a/apps/demo/src/assets/css/style.css b/apps/demo/src/assets/css/style.css index 459bfcb..33f09b4 100644 --- a/apps/demo/src/assets/css/style.css +++ b/apps/demo/src/assets/css/style.css @@ -14,6 +14,15 @@ font-size: 36px; } +td { + vertical-align: middle; +} + +a, .nav-tabs a.nav-link { + text-decoration: none; + color: #6f5499; +} + .btn-group-lg > .btn, .btn-lg { font-size: 18px; } @@ -22,10 +31,6 @@ section { padding-top: 30px; } -.bd-pageheader { - margin-top: 51px; -} - .page-header { padding-bottom: 9px; margin: 40px 0 20px; @@ -37,43 +42,24 @@ section { } .navbar { - padding: 0; + padding: 15px; + background-color: #f8f8f8; + border-color: #e7e7e7; } .navbar-nav .nav-item { margin-left: 0 !important; } -.nav > li > a { - position: relative; - display: block; - padding: 10px 15px; -} - -.nav .navbar-brand { - float: left; - height: 50px; - padding: 15px 15px; - font-size: 18px; - line-height: 20px; - margin-right: 0 !important; -} - .navbar-brand { color: #777; - float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px; } -.navbar-toggler { - margin-top: 8px; - margin-right: 15px; -} - -.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { +.navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { color: #333; background-color: transparent; } @@ -113,42 +99,10 @@ section { margin: 10px 0; } -.scrollable-menu .nav-link { - color: #337ab7; - font-size: 14px; +.card { + border-radius: 0 0 .25rem .25rem; } -.scrollable-menu .nav-link:hover { - color: #23527c; - background-color: #eee; -} - -simple-demo { - max-width: 100%; -} - -simple-demo >.container { - max-width: 100%; -} - -.block_links { - display: flex; - align-items: center; - width: auto; - padding: 0 0 0 15px; - margin-bottom: 10px; -} - -.block_links:first-child { - padding-left: 15px; -} - -.d-flex { - display: flex; - flex-wrap: wrap; -} - - @media (min-width: 992px) { .bd-pageheader h1, .bd-pageheader p { margin-right: 380px; @@ -193,6 +147,53 @@ simple-demo >.container { padding: 0; margin: 0; } + + table { + border: 0; + } + + table caption { + font-size: 1.3em; + } + + table thead { + border: none; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + table tr { + border-bottom: 3px solid #ddd; + display: block; + margin-bottom: .625em; + } + + table td { + border-bottom: 1px solid #ddd; + font-size: .8em; + display: flex; + justify-content: space-between; + align-items: center; + } + + table td::before { + content: attr(data-label); + font-weight: bold; + text-transform: uppercase; + } + + table td:last-child { + border-bottom: 0; + } + + td[data-label="Progress"] .progress { + width: 75%; + } } @media (max-width: 400px) { @@ -211,13 +212,6 @@ simple-demo >.container { * iOS Resolution Quick Reference: http://www.iosres.com/ */ -.scrollable-menu { - height: 90vh !important; - width: 100vw; - overflow-x: hidden; - padding: 0 0 20px; -} - /** * iPad with portrait orientation. */ @@ -246,29 +240,22 @@ simple-demo >.container { } } -.navbar-default .navbar-toggle .icon-bar { - background-color: #888; -} - -.navbar-toggle:focus { - outline: 0 -} - -.navbar-toggle .icon-bar { - display: block; - width: 22px; - height: 2px; - border-radius: 1px -} - -.navbar-toggle .icon-bar + .icon-bar { - margin-top: 4px -} - pre { white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ + line-height: 1.42857143; + color: #333; + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 4px; + padding: 15px; } + +pre.prettyprint { + margin-bottom: 0; +} + + diff --git a/apps/demo/src/index.html b/apps/demo/src/index.html index 967a7fc..541bdd6 100644 --- a/apps/demo/src/index.html +++ b/apps/demo/src/index.html @@ -12,7 +12,7 @@ - +