franzz/spot
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Fix upload progress bar

Browse Source
This commit is contained in:
Franzz
2026-05-07 19:48:57 +02:00
parent 3f1f98f98c
commit 1cb82838b2
2 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/upload.vue
View File

@@ -127,9 +127,10 @@ export default {
<input id="fileupload" type="file" name="files[]" multiple accept=".gif,.jpg,.jpeg,.png,.mov,.mp4" @change="onFileChange" /> <input id="fileupload" type="file" name="files[]" multiple accept=".gif,.jpg,.jpeg,.png,.mov,.mp4" @change="onFileChange" />
</div> </div>
<div class="section progress" v-if="progress > 0"> <div class="section progress" v-if="progress > 0">
<div class="total"></div>
<div class="bar" :style="{width:progress+'%'}"></div> <div class="bar" :style="{width:progress+'%'}"></div>
</div> </div>
<div class="section comment" v-for="file in files"> <div class="section comment" v-for="file in files" :key="file.id">
<img class="thumb" :src="file.thumbnail" /> <img class="thumb" :src="file.thumbnail" />
<div class="form"> <div class="form">
<input class="content" name="content" type="text" v-model="file.content" /> <input class="content" name="content" type="text" v-model="file.content" />
@@ -139,7 +140,7 @@ export default {
</div> </div>
<div class="section location" v-if="project.editable"> <div class="section location" v-if="project.editable">
<h2>{{ lang.get('upload.position.title') }}</h2> <h2>{{ lang.get('upload.position.title') }}</h2>
<SpotButton :icon="'message'" :text="lang.get('upload.position.new')" @click="addPosition()" /> <SpotButton :icon="'marker'" :text="lang.get('upload.position.new')" @click="addPosition()" />
</div> </div>
<div class="section logs" v-if="logs.length > 0"> <div class="section logs" v-if="logs.length > 0">
<p class="log" v-for="log in logs">{{ log }}.</p> <p class="log" v-for="log in logs">{{ log }}.</p>

36
src/styles/_page.upload.scss
View File

@@ -2,10 +2,10 @@
@use "@styles/color"; @use "@styles/color";
#upload { #upload {
padding: 1em; padding: var.$block-spacing;
.section { .section {
border-radius: 3px; border-radius: var.$block-radius;
& + .section { & + .section {
margin-top: var.$block-spacing; margin-top: var.$block-spacing;
@@ -17,36 +17,50 @@
} }
.progress { .progress {
position: relative;
height: 1rem;
div {
position: absolute;
height: 100%;
border-radius: var.$block-radius;
top: 0;
}
.bar { .bar {
height: 18px;
background: color.$success; background: color.$success;
}
.total {
background: color.$default-bg;
width: 100%;
} }
} }
.comment { .comment {
.thumb { .thumb {
width: 30%; width: 30%;
max-width: 100px; max-width: 120px;
} }
.form { .form {
display: inline-block; display: inline-block;
width: calc(70% - 2rem); width: 70%;
min-width: calc(100% - 100px - 2rem); min-width: calc(100% - 120px);
padding: var.$block-spacing; padding-left: var.$block-spacing;
vertical-align: top; vertical-align: top;
box-sizing: border-box; box-sizing: border-box;
.content { .content {
width: calc(100% - 2rem); width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0.5em; padding: var.$elem-spacing;
background: color.$default-bg; background: color.$default-bg;
} }
.save { button.save {
margin-top: var.$block-spacing; margin-top: var.$block-spacing;
padding: 0.5em; padding: var.$elem-spacing;
} }
} }
} }