Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fixes hella ton of annoyances with file upload display

Browse source
This commit is contained in:
Henry Jameson 2018-08-15 14:53:40 +03:00
parent 3fa9d90712
commit 627e227076
2 changed files with 43 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/attachment/attachment.vue
View file

@ -38,7 +38,6 @@
.attachments { .attachments {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: -0.7em;
.attachment.media-upload-container { .attachment.media-upload-container {
flex: 0 0 auto; flex: 0 0 auto;

49
src/components/post_status_form/post_status_form.vue
View file

@ -65,12 +65,14 @@
<i class="icon-cancel" @click="clearError"></i> <i class="icon-cancel" @click="clearError"></i>
</div> </div>
<div class="attachments"> <div class="attachments">
<div class="media-upload-container attachment" v-for="file in newStatus.files"> <div class="media-upload-wrapper" v-for="file in newStatus.files">
<i class="fa icon-cancel" @click="removeMediaFile(file)"></i> <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
<img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img> <div class="media-upload-container attachment">
<video v-if="type(file) === 'video'" :src="file.image" controls></video> <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
<audio v-if="type(file) === 'audio'" :src="file.image" controls></audio> <video v-if="type(file) === 'video'" :src="file.image" controls></video>
<a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a> <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
<a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
</div>
</div> </div>
</div> </div>
</form> </form>
@ -139,14 +141,49 @@
text-align: center; text-align: center;
} }
.media-upload-wrapper {
flex: 0 0 auto;
max-width: 100%;
min-width: 50px;
margin-right: .2em;
margin-bottom: .5em;
.icon-cancel {
display: inline-block;
position: static;
margin: 0;
padding-bottom: 0;
margin-left: $fallback--attachmentRadius;
margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.attachments { .attachments {
padding: 0 0.5em; padding: 0 0.5em;
.attachment { .attachment {
margin: 0;
position: relative; position: relative;
flex: 0 0 auto;
border: 1px solid $fallback--border; border: 1px solid $fallback--border;
border: 1px solid var(--border, $fallback--border); border: 1px solid var(--border, $fallback--border);
margin: 0.5em 0.8em 0.2em 0; text-align: center;
audio {
min-width: 300px;
flex: 1 0 auto;
}
a {
display: block;
text-align: left;
line-height: 1.2;
padding: .5em;
}
} }
i { i {