mirror of
				https://github.com/TeamPiped/Piped.git
				synced 2025-11-04 06:31:55 +00:00 
			
		
		
		
	Remove whitepace for spacing, and reduce grid dom size.
This commit is contained in:
		@@ -11,8 +11,7 @@
 | 
			
		||||
            <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
 | 
			
		||||
                <font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
 | 
			
		||||
            </a>
 | 
			
		||||
             
 | 
			
		||||
            <a href="https://github.com/TeamPiped/Piped#donations">
 | 
			
		||||
            <a class="ml-2" href="https://github.com/TeamPiped/Piped#donations">
 | 
			
		||||
                <font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
 | 
			
		||||
                {{ $t("actions.donations") }}
 | 
			
		||||
            </a>
 | 
			
		||||
 
 | 
			
		||||
@@ -17,9 +17,14 @@
 | 
			
		||||
        <hr />
 | 
			
		||||
 | 
			
		||||
        <div class="video-grid">
 | 
			
		||||
            <div v-for="video in channel.relatedStreams" :key="video.url">
 | 
			
		||||
                <VideoItem :video="video" height="94" width="168" hide-channel />
 | 
			
		||||
            </div>
 | 
			
		||||
            <VideoItem
 | 
			
		||||
                v-for="video in channel.relatedStreams"
 | 
			
		||||
                :key="video.url"
 | 
			
		||||
                :video="video"
 | 
			
		||||
                height="94"
 | 
			
		||||
                width="168"
 | 
			
		||||
                hide-channel
 | 
			
		||||
            />
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,5 +1,5 @@
 | 
			
		||||
<template>
 | 
			
		||||
    <div class="comment flex">
 | 
			
		||||
    <div class="comment flex mt-1.5">
 | 
			
		||||
        <img
 | 
			
		||||
            :src="comment.thumbnail"
 | 
			
		||||
            class="comment-avatar rounded-full w-12 h-12"
 | 
			
		||||
@@ -12,14 +12,15 @@
 | 
			
		||||
        <div class="comment-content pl-2">
 | 
			
		||||
            <div class="comment-header">
 | 
			
		||||
                <div v-if="comment.pinned" class="comment-pinned uk-text-meta">
 | 
			
		||||
                    <font-awesome-icon icon="thumbtack"></font-awesome-icon>  {{ $t("comment.pinned_by") }}
 | 
			
		||||
                    <font-awesome-icon icon="thumbtack"></font-awesome-icon
 | 
			
		||||
                    ><span class="ml-1.5">{{ $t("comment.pinned_by") }}</span>
 | 
			
		||||
                    {{ uploader }}
 | 
			
		||||
                </div>
 | 
			
		||||
 | 
			
		||||
                <div class="comment-author">
 | 
			
		||||
                    <router-link class="font-bold uk-text-small" :to="comment.commentorUrl">
 | 
			
		||||
                        {{ comment.author }} </router-link
 | 
			
		||||
                    > <font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
 | 
			
		||||
                    ><font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check"></font-awesome-icon>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="comment-meta uk-text-meta uk-margin-small-bottom">
 | 
			
		||||
                    {{ comment.commentedTime }}
 | 
			
		||||
@@ -36,15 +37,13 @@
 | 
			
		||||
            <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
 | 
			
		||||
                <div @click="loadReplies">
 | 
			
		||||
                    <a class="uk-link-text" v-t="'actions.show_replies'" />
 | 
			
		||||
                     
 | 
			
		||||
                    <font-awesome-icon icon="level-down-alt" />
 | 
			
		||||
                    <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
 | 
			
		||||
                </div>
 | 
			
		||||
            </template>
 | 
			
		||||
            <template v-if="showingReplies">
 | 
			
		||||
                <div @click="hideReplies">
 | 
			
		||||
                    <a class="uk-link-text" v-t="'actions.hide_replies'" />
 | 
			
		||||
                     
 | 
			
		||||
                    <font-awesome-icon icon="level-up-alt" />
 | 
			
		||||
                    <font-awesome-icon class="ml-1.5" icon="level-up-alt" />
 | 
			
		||||
                </div>
 | 
			
		||||
            </template>
 | 
			
		||||
            <div v-show="showingReplies" v-if="replies" class="replies">
 | 
			
		||||
@@ -53,8 +52,7 @@
 | 
			
		||||
                </div>
 | 
			
		||||
                <div v-if="nextpage" @click="loadReplies">
 | 
			
		||||
                    <a class="uk-link-text" v-t="'actions.load_more_replies'" />
 | 
			
		||||
                     
 | 
			
		||||
                    <font-awesome-icon icon="level-down-alt" />
 | 
			
		||||
                    <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
 
 | 
			
		||||
@@ -22,9 +22,7 @@
 | 
			
		||||
    <hr />
 | 
			
		||||
 | 
			
		||||
    <div class="video-grid">
 | 
			
		||||
        <div v-for="video in videos" :key="video.url">
 | 
			
		||||
            <VideoItem :video="video" />
 | 
			
		||||
        </div>
 | 
			
		||||
        <VideoItem v-for="video in videos" :key="video.url" :video="video" />
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -18,9 +18,7 @@
 | 
			
		||||
    <hr />
 | 
			
		||||
 | 
			
		||||
    <div class="video-grid">
 | 
			
		||||
        <div v-for="video in videos" :key="video.url">
 | 
			
		||||
            <VideoItem :video="video" />
 | 
			
		||||
        </div>
 | 
			
		||||
        <VideoItem v-for="video in videos" :key="video.url" :video="video" />
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <br />
 | 
			
		||||
 
 | 
			
		||||
@@ -27,9 +27,13 @@
 | 
			
		||||
        <hr />
 | 
			
		||||
 | 
			
		||||
        <div class="video-grid">
 | 
			
		||||
            <div v-for="video in playlist.relatedStreams" :key="video.url">
 | 
			
		||||
                <VideoItem :video="video" height="94" width="168" />
 | 
			
		||||
            </div>
 | 
			
		||||
            <VideoItem
 | 
			
		||||
                v-for="video in playlist.relatedStreams"
 | 
			
		||||
                :key="video.url"
 | 
			
		||||
                :video="video"
 | 
			
		||||
                height="94"
 | 
			
		||||
                width="168"
 | 
			
		||||
            />
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
<template>
 | 
			
		||||
    <div class="uk-flex uk-flex-between uk-flex-middle">
 | 
			
		||||
        <button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
 | 
			
		||||
            <font-awesome-icon icon="chevron-left" />  {{ $t("actions.back") }}
 | 
			
		||||
            <font-awesome-icon icon="chevron-left" /><span class="ml-1.5">{{ $t("actions.back") }}</span>
 | 
			
		||||
        </button>
 | 
			
		||||
        <span><h1 v-t="'titles.preferences'" class="font-bold text-center"/></span>
 | 
			
		||||
        <span />
 | 
			
		||||
 
 | 
			
		||||
@@ -39,16 +39,16 @@
 | 
			
		||||
                        <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <p>
 | 
			
		||||
                        {{ result.name }} <font-awesome-icon
 | 
			
		||||
                            v-if="result.verified"
 | 
			
		||||
                            icon="check"
 | 
			
		||||
                        ></font-awesome-icon>
 | 
			
		||||
                        {{ result.name
 | 
			
		||||
                        }}<font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check"></font-awesome-icon>
 | 
			
		||||
                    </p>
 | 
			
		||||
                </router-link>
 | 
			
		||||
                <p v-if="result.description">{{ result.description }}</p>
 | 
			
		||||
                <router-link v-if="result.uploaderUrl" class="uk-link-muted" :to="result.uploaderUrl">
 | 
			
		||||
                    <p>
 | 
			
		||||
                        {{ result.uploader }} <font-awesome-icon
 | 
			
		||||
                        {{ result.uploader
 | 
			
		||||
                        }}<font-awesome-icon
 | 
			
		||||
                            class="ml-1.5"
 | 
			
		||||
                            v-if="result.uploaderVerified"
 | 
			
		||||
                            icon="check"
 | 
			
		||||
                        ></font-awesome-icon>
 | 
			
		||||
 
 | 
			
		||||
@@ -4,9 +4,7 @@
 | 
			
		||||
    <hr />
 | 
			
		||||
 | 
			
		||||
    <div class="video-grid">
 | 
			
		||||
        <div v-for="video in videos" :key="video.url">
 | 
			
		||||
            <VideoItem :video="video" height="118" width="210" />
 | 
			
		||||
        </div>
 | 
			
		||||
        <VideoItem v-for="video in videos" :key="video.url" :video="video" height="118" width="210" />
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -56,10 +56,8 @@
 | 
			
		||||
                    :to="video.uploaderUrl"
 | 
			
		||||
                    :title="video.uploaderName"
 | 
			
		||||
                >
 | 
			
		||||
                    {{ video.uploaderName }} <font-awesome-icon
 | 
			
		||||
                        v-if="video.uploaderVerified"
 | 
			
		||||
                        icon="check"
 | 
			
		||||
                    ></font-awesome-icon>
 | 
			
		||||
                    {{ video.uploaderName
 | 
			
		||||
                    }}<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
 | 
			
		||||
                </router-link>
 | 
			
		||||
 | 
			
		||||
                <b v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small">
 | 
			
		||||
 
 | 
			
		||||
@@ -45,22 +45,18 @@
 | 
			
		||||
                            <b v-t="'video.ratings_disabled'" />
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </template>
 | 
			
		||||
                    <a :href="'https://youtu.be/' + getVideoId()" class="uk-margin-small-left btn">
 | 
			
		||||
                        <b>{{ $t("player.watch_on") }} </b>
 | 
			
		||||
                        <font-awesome-icon :icon="['fab', 'youtube']"></font-awesome-icon>
 | 
			
		||||
                    <a :href="'https://youtu.be/' + getVideoId()" class="btn">
 | 
			
		||||
                        <b>{{ $t("player.watch_on") }}</b>
 | 
			
		||||
                        <font-awesome-icon class="ml-1.5" :icon="['fab', 'youtube']"></font-awesome-icon>
 | 
			
		||||
                    </a>
 | 
			
		||||
                    <a
 | 
			
		||||
                        v-if="video.lbryId"
 | 
			
		||||
                        :href="'https://odysee.com/' + video.lbryId"
 | 
			
		||||
                        class="uk-margin-small-left btn"
 | 
			
		||||
                    >
 | 
			
		||||
                    <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
 | 
			
		||||
                        <b>{{ $t("player.watch_on") }} LBRY</b>
 | 
			
		||||
                    </a>
 | 
			
		||||
                    <router-link
 | 
			
		||||
                        :to="toggleListenUrl"
 | 
			
		||||
                        :aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
 | 
			
		||||
                        :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
 | 
			
		||||
                        class="uk-margin-small-left btn"
 | 
			
		||||
                        class="btn"
 | 
			
		||||
                    >
 | 
			
		||||
                        <font-awesome-icon :icon="isListening ? 'tv' : 'headphones'"></font-awesome-icon>
 | 
			
		||||
                    </router-link>
 | 
			
		||||
@@ -70,7 +66,7 @@
 | 
			
		||||
            <div class="flex">
 | 
			
		||||
                <div class="flex items-center">
 | 
			
		||||
                    <img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
 | 
			
		||||
                    <router-link v-if="video.uploaderUrl" class="link" :to="video.uploaderUrl">
 | 
			
		||||
                    <router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">
 | 
			
		||||
                        {{ video.uploader }} </router-link
 | 
			
		||||
                    ><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
 | 
			
		||||
                </div>
 | 
			
		||||
@@ -95,25 +91,13 @@
 | 
			
		||||
 | 
			
		||||
        <label for="chkAutoLoop"
 | 
			
		||||
            ><b>{{ $t("actions.loop_this_video") }}:</b></label
 | 
			
		||||
        > 
 | 
			
		||||
        <input
 | 
			
		||||
            id="chkAutoLoop"
 | 
			
		||||
            v-model="selectedAutoLoop"
 | 
			
		||||
            class="uk-checkbox"
 | 
			
		||||
            type="checkbox"
 | 
			
		||||
            @change="onChange($event)"
 | 
			
		||||
        />
 | 
			
		||||
        >
 | 
			
		||||
        <input id="chkAutoLoop" v-model="selectedAutoLoop" class="ml-1.5" type="checkbox" @change="onChange($event)" />
 | 
			
		||||
        <br />
 | 
			
		||||
        <label for="chkAutoPlay"
 | 
			
		||||
            ><b>{{ $t("actions.auto_play_next_video") }}:</b></label
 | 
			
		||||
        > 
 | 
			
		||||
        <input
 | 
			
		||||
            id="chkAutoPlay"
 | 
			
		||||
            v-model="selectedAutoPlay"
 | 
			
		||||
            class="uk-checkbox"
 | 
			
		||||
            type="checkbox"
 | 
			
		||||
            @change="onChange($event)"
 | 
			
		||||
        />
 | 
			
		||||
        >
 | 
			
		||||
        <input id="chkAutoPlay" v-model="selectedAutoPlay" class="ml-1.5" type="checkbox" @change="onChange($event)" />
 | 
			
		||||
 | 
			
		||||
        <hr />
 | 
			
		||||
 | 
			
		||||
@@ -132,14 +116,15 @@
 | 
			
		||||
                <a class="btn mb-2 sm:hidden" @click="showRecs = !showRecs">
 | 
			
		||||
                    {{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
 | 
			
		||||
                </a>
 | 
			
		||||
                <div
 | 
			
		||||
                <VideoItem
 | 
			
		||||
                    v-for="related in video.relatedStreams"
 | 
			
		||||
                    class="w-auto"
 | 
			
		||||
                    v-show="showRecs || !smallView"
 | 
			
		||||
                    :key="related.url"
 | 
			
		||||
                    class="uk-tile-default w-auto"
 | 
			
		||||
                >
 | 
			
		||||
                    <VideoItem :video="related" height="94" width="168" />
 | 
			
		||||
                </div>
 | 
			
		||||
                    :video="related"
 | 
			
		||||
                    height="94"
 | 
			
		||||
                    width="168"
 | 
			
		||||
                />
 | 
			
		||||
                <hr class="sm:hidden" />
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user