-
+
@@ -65,7 +75,7 @@ export default {
margin-bottom: 5px;
position: relative;
- .image-wrap, .status-wrap {
+ .image-wrap {
height: 160px;
border: 1px solid black;
border-top-left-radius: 6px;
@@ -77,32 +87,6 @@ export default {
overflow-y: hidden;
}
- .status-wrap {
- border-bottom-left-radius: 6px;
- border-bottom-right-radius: 6px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- text-align: center;
- }
-
- .progress {
- width: calc(100% - 1.5px);
- background-color: #F2F2F3;
- height: 22px;
- position: absolute;
- bottom: -19.5px;
- left: 1px;
- border-radius: 0;
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
-
- > div {
- background-color: #365EBE;
- height: 22px;
- }
- }
-
.item-text {
text-align: center;
min-height: 75px;
@@ -125,10 +109,27 @@ export default {
margin-bottom: 10px;
}
- img {
+ img.rotate-0 {
width: 98%;
}
+ img.rotate-90 {
+ transform: rotate(90deg);
+ height: 98%;
+ max-width: 98%;
+ }
+
+ img.rotate-180 {
+ transform: rotate(180deg);
+ width: 98%;
+ }
+
+ img.rotate-270 {
+ transform: rotate(270deg);
+ height: 98%;
+ max-width: 98%;
+ }
+
button {
position: relative;
z-index: 2;
diff --git a/vue/src/components/ProgressBar.vue b/vue/src/components/ProgressBar.vue
new file mode 100644
index 00000000..253e708a
--- /dev/null
+++ b/vue/src/components/ProgressBar.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+ Uploading... {{ file.progress}}%
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/vue/src/components/Uploader.vue b/vue/src/components/Uploader.vue
index 754b659c..8331492f 100644
--- a/vue/src/components/Uploader.vue
+++ b/vue/src/components/Uploader.vue
@@ -39,7 +39,9 @@
:file-count="files.length"
@remove="remove(file)"
@moveup="moveUp(index)"
- @movedown="moveDown(index)"/>
+ @movedown="moveDown(index)"
+ @rotateleft="rotateLeft(index)"
+ @rotateright="rotateRight(index)"/>