MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

See #170: revamped track detail page

This commit is contained in:
Eliot Berriot 2020-03-26 16:18:37 +01:00
parent c43fe461c4
commit 27801ce541
No known key found for this signature in database
GPG Key ID: 6B501DFD73514E14
9 changed files with 297 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/package.json
View File

@ -28,6 +28,7 @@
"register-service-worker": "^1.6.2", "register-service-worker": "^1.6.2",
"sanitize-html": "^1.20.1", "sanitize-html": "^1.20.1",
"showdown": "^1.8.6", "showdown": "^1.8.6",
"text-clipper": "^1.3.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-gettext": "^2.1.0", "vue-gettext": "^2.1.0",
"vue-lazyload": "^1.2.6", "vue-lazyload": "^1.2.6",

2
front/src/components/audio/PlayButton.vue
View File

@ -7,7 +7,7 @@
:disabled="!playable" :disabled="!playable"
:class="buttonClasses.concat(['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}])"> :class="buttonClasses.concat(['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}])">
<i :class="[playIconClass, 'icon']"></i> <i :class="[playIconClass, 'icon']"></i>
<template v-if="!discrete && !iconOnly"><slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template> <template v-if="!discrete && !iconOnly">&nbsp;<slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template>
</button> </button>
<div <div
v-if="!discrete && !iconOnly" v-if="!discrete && !iconOnly"

26
front/src/components/common/RenderedDescription.vue
View File

@ -1,6 +1,18 @@
<template> <template>
<div> <div>
<div v-html="html" v-if="content && !isUpdating"></div> <template v-if="content && !isUpdating">
<div v-html="html"></div>
<template v-if="isTruncated">
<div class="ui small hidden divider"></div>
<a @click.stop.prevent="showMore = true" v-if="showMore === false">
<translate translate-context="*/*/Button,Label">Show more</translate>
</a>
<a @click.stop.prevent="showMore = false" v-else="showMore === true">
<translate translate-context="*/*/Button,Label">Show less</translate>
</a>
</template>
</template>
<p v-else-if="!isUpdating"> <p v-else-if="!isUpdating">
<translate translate-context="*/*/Placeholder">No description available</translate> <translate translate-context="*/*/Placeholder">No description available</translate>
</p> </p>
@ -33,6 +45,7 @@
<script> <script>
import {secondsToObject} from '@/filters' import {secondsToObject} from '@/filters'
import axios from 'axios' import axios from 'axios'
import clip from 'text-clipper'
export default { export default {
props: { props: {
@ -42,11 +55,13 @@ export default {
canUpdate: {required: false, default: true, type: Boolean}, canUpdate: {required: false, default: true, type: Boolean},
fetchHtml: {required: false, default: false, type: Boolean}, fetchHtml: {required: false, default: false, type: Boolean},
permissive: {required: false, default: false, type: Boolean}, permissive: {required: false, default: false, type: Boolean},
truncateLength: {required: false, default: 500, type: Number},
}, },
data () { data () {
return { return {
isUpdating: false, isUpdating: false,
showMore: false,
newText: (this.content || {text: ''}).text, newText: (this.content || {text: ''}).text,
errors: null, errors: null,
isLoading: false, isLoading: false,
@ -64,7 +79,16 @@ export default {
if (this.fetchHtml) { if (this.fetchHtml) {
return this.preview return this.preview
} }
if (this.truncateLength > 0 && !this.showMore) {
return this.truncatedHtml
}
return this.content.html return this.content.html
},
truncatedHtml () {
return clip(this.content.html, this.truncateLength)
},
isTruncated () {
return this.truncateLength > 0 && this.truncatedHtml.length < this.content.html.length
} }
}, },
methods: { methods: {

5
front/src/components/favorites/TrackFavoriteIcon.vue
View File

@ -7,7 +7,7 @@
<button <button
v-else v-else
@click.stop="$store.dispatch('favorites/toggle', track.id)" @click.stop="$store.dispatch('favorites/toggle', track.id)"
:class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', 'really', 'button']" :class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
:aria-label="title" :aria-label="title"
:title="title"> :title="title">
<i :class="['heart', {'pink': isFavorite}, 'basic', 'icon']"></i> <i :class="['heart', {'pink': isFavorite}, 'basic', 'icon']"></i>
@ -18,7 +18,8 @@
export default { export default {
props: { props: {
track: {type: Object}, track: {type: Object},
button: {type: Boolean, default: false} button: {type: Boolean, default: false},
border: {type: Boolean, default: false},
}, },
computed: { computed: {
title () { title () {

138
front/src/components/library/TrackBase.vue
View File

@ -5,63 +5,44 @@
</div> </div>
<template v-if="track"> <template v-if="track">
<section <section
:class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :class="['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']"
:style="headerStyle"
v-title="track.title" v-title="track.title"
> >
<div class="segment-content"> <div class="ui basic padded segment">
<h2 class="ui center aligned icon header"> <div class="ui stackable grid row container">
<i class="circular inverted music orange icon"></i> <div class="eight wide left aligned column">
<div class="content"> <h1 class="ui header">
{{ track.title }} {{ track.title }}
<div class="sub header" v-html="subtitle"></div> <div class="sub header" v-html="subtitle"></div>
</h1>
</div> </div>
</h2> <div class="eight wide right aligned column button-group">
<tags-list v-if="track.tags && track.tags.length > 0" :tags="track.tags"></tags-list>
<div class="ui hidden divider"></div>
<div class="header-buttons">
<div class="ui buttons">
<play-button class="orange" :track="track"> <play-button class="orange" :track="track">
<translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate> <translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate>
</play-button> </play-button>
</div> <track-favorite-icon v-if="$store.state.auth.authenticated" :border="true" :track="track"></track-favorite-icon>
<div class="ui buttons"> <track-playlist-icon class="circular" v-if="$store.state.auth.authenticated" :border="true" :track="track"></track-playlist-icon>
<track-favorite-icon :track="track" :button="true"></track-favorite-icon> <a v-if="upload" :href="downloadUrl" target="_blank" class="ui basic circular icon button" :title="labels.download">
</div>
<div class="ui buttons">
<track-playlist-icon :button="true" v-if="$store.state.auth.authenticated" :track="track"></track-playlist-icon>
</div>
<div class="ui buttons">
<a v-if="upload" :href="downloadUrl" target="_blank" class="ui icon labeled button">
<i class="download icon"></i> <i class="download icon"></i>
<translate translate-context="Content/Track/Link/Verb">Download</translate>
</a> </a>
</div> <modal v-if="publicLibraries.length > 0" :show.sync="showEmbedModal">
<div class="header">
<modal v-if="publicLibraries.length > 0" :show.sync="showEmbedModal"> <translate translate-context="Popup/Track/Title">Embed this track on your website</translate>
<div class="header">
<translate translate-context="Popup/Track/Title">Embed this track on your website</translate>
</div>
<div class="content">
<div class="description">
<embed-wizard type="track" :id="track.id" />
</div> </div>
</div> <div class="content">
<div class="actions"> <div class="description">
<div class="ui basic deny button"> <embed-wizard type="track" :id="track.id" />
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate> </div>
</div> </div>
</div> <div class="actions">
</modal> <div class="ui basic deny button">
<div class="ui buttons"> <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
<button class="ui button" @click="$refs.dropdown.click()"> </div>
<translate translate-context="*/*/Button.Label/Noun">More…</translate> </div>
</button> </modal>
<div class="ui floating dropdown icon button" ref="dropdown" v-dropdown> <div class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
<i class="dropdown icon"></i> <i class="ellipsis vertical icon"></i>
<div class="menu"> <div class="menu" style="right: 0; left: auto">
<div <div
role="button" role="button"
v-if="publicLibraries.length > 0" v-if="publicLibraries.length > 0"
@ -74,14 +55,10 @@
<i class="wikipedia w icon"></i> <i class="wikipedia w icon"></i>
<translate translate-context="Content/*/Button.Label/Verb">Search on Wikipedia</translate> <translate translate-context="Content/*/Button.Label/Verb">Search on Wikipedia</translate>
</a> </a>
<a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" rel="noreferrer noopener" class="basic item"> <a v-if="discogsUrl ":href="discogsUrl" target="_blank" rel="noreferrer noopener" class="basic item">
<i class="external icon"></i> <i class="external icon"></i>
<translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate> <translate translate-context="Content/*/Button.Label/Verb">Search on Discogs</translate>
</a> </a>
<a v-if="discogsUrl ":href="discogsUrl" target="_blank" rel="noreferrer noopener" class="basic item">
<i class="external icon"></i>
<translate translate-context="Content/*/Button.Label/Verb">Search on Discogs</translate>
</a>
<router-link <router-link
v-if="track.is_local" v-if="track.is_local"
:to="{name: 'library.tracks.edit', params: {id: track.id }}" :to="{name: 'library.tracks.edit', params: {id: track.id }}"
@ -144,11 +121,23 @@ import TrackFavoriteIcon from "@/components/favorites/TrackFavoriteIcon"
import TrackPlaylistIcon from "@/components/playlists/TrackPlaylistIcon" import TrackPlaylistIcon from "@/components/playlists/TrackPlaylistIcon"
import Modal from '@/components/semantic/Modal' import Modal from '@/components/semantic/Modal'
import EmbedWizard from "@/components/audio/EmbedWizard" import EmbedWizard from "@/components/audio/EmbedWizard"
import TagsList from "@/components/tags/List"
import ReportMixin from '@/components/mixins/Report' import ReportMixin from '@/components/mixins/Report'
import {momentFormat} from '@/filters'
const FETCH_URL = "tracks/" const FETCH_URL = "tracks/"
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
export default { export default {
props: ["id"], props: ["id"],
mixins: [ReportMixin], mixins: [ReportMixin],
@ -158,7 +147,6 @@ export default {
TrackFavoriteIcon, TrackFavoriteIcon,
Modal, Modal,
EmbedWizard, EmbedWizard,
TagsList,
}, },
data() { data() {
return { return {
@ -213,7 +201,9 @@ export default {
}, },
labels() { labels() {
return { return {
title: this.$pgettext('*/*/*/Noun', "Track") title: this.$pgettext('*/*/*/Noun', "Track"),
download: this.$pgettext('Content/Track/Link/Verb', "Download"),
more: this.$pgettext('*/*/Button.Label/Noun', "More…"),
} }
}, },
wikipediaUrl() { wikipediaUrl() {
@ -222,11 +212,6 @@ export default {
encodeURI(this.track.title + " " + this.track.artist.name) encodeURI(this.track.title + " " + this.track.artist.name)
) )
}, },
musicbrainzUrl() {
if (this.track.mbid) {
return "https://musicbrainz.org/recording/" + this.track.mbid
}
},
discogsUrl() { discogsUrl() {
if (this.track.album) { if (this.track.album) {
return ( return (
@ -251,10 +236,15 @@ export default {
} }
return u return u
}, },
cover() { attributedToUrl () {
if (this.track.cover) { let route = this.$router.resolve({
return this.track.cover name: 'profile.full.overview',
} params: {
username: this.track.attributed_to.preferred_username,
domain: this.track.attributed_to.domain
}
})
return route.href
}, },
albumUrl () { albumUrl () {
let route = this.$router.resolve({name: 'library.albums.detail', params: {id: this.track.album.id }}) let route = this.$router.resolve({name: 'library.albums.detail', params: {id: this.track.album.id }})
@ -276,12 +266,20 @@ export default {
}, },
subtitle () { subtitle () {
let msg let msg
if (this.track.album) { if (this.track.attributed_to) {
msg = this.$pgettext('Content/Track/Paragraph', 'From album <a class="internal" href="%{ albumUrl }">%{ album }</a> by <a class="internal" href="%{ artistUrl }">%{ artist }</a>') msg = this.$pgettext('Content/Track/Paragraph', 'Uploaded by <a class="internal" href="%{ uploaderUrl }">%{ uploader }</a> on <time title="%{ date }" datetime="%{ date }">%{ prettyDate }</time>')
return this.$gettextInterpolate(msg, {album: this.track.album.title, artist: this.track.artist.name, albumUrl: this.albumUrl, artistUrl: this.artistUrl}) return this.$gettextInterpolate(msg, {
uploaderUrl: this.attributedToUrl,
uploader: escapeHtml(`@${this.track.attributed_to.full_username}`),
date: escapeHtml(this.track.creation_date),
prettyDate: escapeHtml(momentFormat(this.track.creation_date, 'LL')),
})
} else { } else {
msg = this.$pgettext('Content/Track/Paragraph', 'By <a class="internal" href="%{ artistUrl }">%{ artist }</a>') msg = this.$pgettext('Content/Track/Paragraph', 'Uploaded by on <time title="%{ date }" datetime="%{ date }">%{ prettyDate }</time>')
return this.$gettextInterpolate(msg, {artist: this.track.artist.name, artistUrl: this.artistUrl}) return this.$gettextInterpolate(msg, {
date: escapeHtml(this.track.creation_date),
prettyDate: escapeHtml(momentFormat(this.track.creation_date, 'LL')),
})
} }
} }
}, },

247
front/src/components/library/TrackDetail.vue
View File

@ -1,88 +1,154 @@
<template> <template>
<div v-if="track"> <div v-if="track">
<section class="ui vertical stripe center aligned segment">
<h2 class="ui header">
<translate translate-context="Content/Track/Title/Noun">Track information</translate>
</h2>
<table class="ui very basic collapsing celled center aligned table">
<tbody>
<tr>
<td>
<translate translate-context="Content/Track/*/Noun">Copyright</translate>
</td>
<td v-if="track.copyright" :title="track.copyright">{{ track.copyright|truncate(50) }}</td>
<td v-else>
<translate translate-context="Content/Track/Table.Paragraph">No copyright information available for this track</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">License</translate>
</td>
<td v-if="license">
<a :href="license.url" target="_blank" rel="noopener noreferrer">{{ license.name }}</a>
</td>
<td v-else>
<translate translate-context="Content/Track/Table.Paragraph">No licensing information for this track</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*">Duration</translate>
</td>
<td v-if="upload && upload.duration">{{ time.parse(upload.duration) }}</td>
<td v-else>
<translate translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">Size</translate>
</td>
<td v-if="upload && upload.size">{{ upload.size | humanSize }}</td>
<td v-else>
<translate translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/Track/*/Noun">Bitrate</translate>
</td>
<td v-if="upload && upload.bitrate">{{ upload.bitrate | humanSize }}/s</td>
<td v-else>
<translate translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/Track/Table.Label/Noun">Type</translate>
</td>
<td v-if="upload && upload.extension">{{ upload.extension }}</td>
<td v-else>
<translate translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">Federation ID</translate>
</td>
<td :title="track.fid">
<a :href="track.fid" target="_blank" rel="noopener noreferrer">
{{ track.fid|truncate(65)}}
</a>
</td>
</tr>
</tbody>
</table>
</section>
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2> <div class="ui stackable grid row container">
<translate translate-context="Content/*/Title/Noun">User libraries</translate> <div class="six wide column">
</h2> <img class="image" v-if="cover && cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
<library-widget @loaded="$emit('libraries-loaded', $event)" :url="'tracks/' + id + '/libraries/'"> <template v-if="upload">
<translate translate-context="Content/Track/Paragraph" slot="subtitle">This track is present in the following libraries:</translate> <h3 class="ui header">
</library-widget> <translate translate-context="Content/*/*">Track Details</translate>
</h3>
<table class="ui basic table">
<tbody>
<tr>
<td>
<translate translate-context="Content/*/*">Duration</translate>
</td>
<td class="right aligned">
<template v-if="upload.duration">{{ time.parse(upload.duration) }}</template>
<translate v-else translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">Size</translate>
</td>
<td class="right aligned">
<template v-if="upload.size">{{ upload.size | humanSize }}</template>
<translate v-else translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">Codec</translate>
</td>
<td class="right aligned">
<template v-if="upload.extension">{{ upload.extension }}</template>
<translate v-else translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/Track/*/Noun">Bitrate</translate>
</td>
<td class="right aligned">
<template v-if="upload.bitrate">{{ upload.bitrate | humanSize }}/s</template>
<translate v-else translate-context="*/*/*">N/A</translate>
</td>
</tr>
</tbody>
</table>
</template>
</div>
<div class="ten wide column">
<template v-if="track.tags && track.tags.length > 0">
<tags-list :tags="track.tags"></tags-list>
<div class="ui hidden divider"></div>
</template>
<rendered-description
:content="track.description"
can-update="false"></rendered-description>
<h2 class="ui header">
<translate translate-context="Content/*/*">Release Details</translate>
</h2>
<table class="ui basic table ellipsis-rows">
<tbody>
<tr>
<td>
<translate translate-context="*/*/*/Noun">Artist</translate>
</td>
<td class="right aligned">
<router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id}}">
{{ track.artist.name }}
</router-link>
</td>
</tr>
<tr v-if="track.album">
<td>
<translate translate-context="*/*/*/Noun">Album</translate>
</td>
<td class="right aligned">
<router-link :to="{name: 'library.albums.detail', params: {id: track.album.id}}">
{{ track.album.title }}
</router-link>
</td>
</tr>
<tr>
<td>
<translate translate-context="*/*/*">Year</translate>
</td>
<td class="right aligned">
<template v-if="track.album && track.album.release_date">
{{ track.album.release_date | moment('Y') }}
</template>
<template v-else>
<translate translate-context="*/*/*">N/A</translate>
</template>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/Track/*/Noun">Copyright</translate>
</td>
<td class="right aligned">
<span v-if="track.copyright" :title="track.copyright">{{ track.copyright|truncate(50) }}</span>
<template v-else>
<translate translate-context="*/*/*">N/A</translate>
</template>
</td>
</tr>
<tr>
<td>
<translate translate-context="Content/*/*/Noun">License</translate>
</td>
<td class="right aligned">
<a v-if="license" :title="license.name" :href="license.url" target="_blank" rel="noopener noreferrer">{{ license.name }}</a>
<translate v-else translate-context="*/*/*">N/A</translate>
</td>
</tr>
<tr v-if="!track.is_local">
<td>
<translate translate-context="Content/*/*/Noun">URL</translate>
</td>
<td :title="track.fid">
<a :href="track.fid" target="_blank" rel="noopener noreferrer">
{{ track.fid|truncate(65)}}
</a>
</td>
</tr>
</tbody>
</table>
<a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" rel="noreferrer noopener">
<i class="external icon"></i>
<translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
</a>
<h2 class="ui header">
<translate translate-context="Content/*/Title/Noun">Related Playlists</translate>
</h2>
<playlist-widget :url="'playlists/'" :filters="{track: track.id, playable: true, ordering: '-modification_date'}">
</playlist-widget>
<h2 class="ui header">
<translate translate-context="Content/*/Title/Noun">Related Libraries</translate>
</h2>
<library-widget @loaded="$emit('libraries-loaded', $event)" :url="'tracks/' + id + '/libraries/'">
<translate translate-context="Content/Track/Paragraph" slot="subtitle">This track is present in the following libraries:</translate>
</library-widget>
</div>
</div>
</section> </section>
</div> </div>
</template> </template>
@ -93,6 +159,8 @@ import axios from "axios"
import url from "@/utils/url" import url from "@/utils/url"
import logger from "@/logging" import logger from "@/logging"
import LibraryWidget from "@/components/federation/LibraryWidget" import LibraryWidget from "@/components/federation/LibraryWidget"
import TagsList from "@/components/tags/List"
import PlaylistWidget from "@/components/playlists/Widget"
const FETCH_URL = "tracks/" const FETCH_URL = "tracks/"
@ -100,6 +168,8 @@ export default {
props: ["track", "libraries"], props: ["track", "libraries"],
components: { components: {
LibraryWidget, LibraryWidget,
TagsList,
PlaylistWidget,
}, },
data() { data() {
return { return {
@ -128,6 +198,11 @@ export default {
title: this.$pgettext('*/*/*/Noun', "Track") title: this.$pgettext('*/*/*/Noun', "Track")
} }
}, },
musicbrainzUrl() {
if (this.track.mbid) {
return "https://musicbrainz.org/recording/" + this.track.mbid
}
},
upload() { upload() {
if (this.track.uploads) { if (this.track.uploads) {
return this.track.uploads[0] return this.track.uploads[0]
@ -138,7 +213,15 @@ export default {
return null return null
} }
return this.licenseData return this.licenseData
} },
cover () {
if (this.track.cover && this.track.cover.original) {
return this.track.cover
}
if (this.track.album && this.track.album.cover) {
return this.track.album.cover
}
},
}, },
watch: { watch: {
track (v) { track (v) {

5
front/src/components/playlists/TrackPlaylistIcon.vue
View File

@ -9,7 +9,7 @@
<button <button
v-else v-else
@click.stop="$store.commit('playlists/chooseTrack', track)" @click.stop="$store.commit('playlists/chooseTrack', track)"
:class="['ui', 'basic', 'circular', 'icon', 'really', 'button']" :class="['ui', 'basic', 'circular', 'icon', {'really': !border}, 'button']"
:aria-label="labels.addToPlaylist" :aria-label="labels.addToPlaylist"
:title="labels.addToPlaylist"> :title="labels.addToPlaylist">
<i :class="['list', 'basic', 'icon']"></i> <i :class="['list', 'basic', 'icon']"></i>
@ -21,7 +21,8 @@
export default { export default {
props: { props: {
track: {type: Object}, track: {type: Object},
button: {type: Boolean, default: false} button: {type: Boolean, default: false},
border: {type: Boolean, default: false},
}, },
data () { data () {
return { return {

27
front/src/style/_main.scss
View File

@ -206,7 +206,27 @@ html {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.ellipsis-rows tr > {
td:nth-child(1) {
max-width: 4em;
}
td:nth-child(2) {
position: relative;
&:before {
content: '&nbsp;';
visibility: hidden;
}
> * {
position: absolute;
left: 0;
right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 0.5em;
}
}
}
.ui.small.text.container { .ui.small.text.container {
max-width: 500px !important; max-width: 500px !important;
} }
@ -686,5 +706,10 @@ input + .help {
font-size: 0.8em; font-size: 0.8em;
} }
} }
.button-group {
> *:not(:first-child) {
margin-left: 0.5em;
}
}
@import "./themes/_light.scss"; @import "./themes/_light.scss";
@import "./themes/_dark.scss"; @import "./themes/_dark.scss";

5
front/yarn.lock
View File

@ -9589,6 +9589,11 @@ terser@^4.4.3:
source-map "~0.6.1" source-map "~0.6.1"
source-map-support "~0.5.12" source-map-support "~0.5.12"
text-clipper@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/text-clipper/-/text-clipper-1.3.0.tgz#9cdda9a36f955b3600d73dfffd7487143aac890f"
integrity sha512-6MjWFsTsXI8VyqqpGxTkb7685IPUInyJzG8sNhHHD2xbrnwv9xENQg5dAAabaFLIUa1QXDtRd406HYTauM010Q==
text-table@^0.2.0: text-table@^0.2.0:
version "0.2.0" version "0.2.0"
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"