Update toot layout

This commit is contained in:
L. E. Segovia 2018-11-16 17:09:13 +00:00
parent b50b545ef6
commit dff1c2f8c4
No known key found for this signature in database
GPG Key ID: D5D1DC48B52B7AD5
4 changed files with 113 additions and 17 deletions

View File

@ -10,8 +10,8 @@
<div class="header"> <div class="header">
<div class="follow-follower" v-if="relationship !== null && relationship !== '' && account.username!==user.username"> <div class="follow-follower" v-if="relationship !== null && relationship !== '' && account.username!==user.username">
<div class="follower-status"> <div class="follower-status">
<span class="status" v-if="relationship.followed_by">{{ $t('side_bar.account_profile.follows_you') }}</span> <el-tag class="status" size="small" v-if="relationship.followed_by">{{ $t('side_bar.account_profile.follows_you') }}</el-tag>
<span class="status" v-else>{{ $t('side_bar.account_profile.doesnt_follow_you') }}</span> <el-tag class="status" size="medium" v-else>{{ $t('side_bar.account_profile.doesnt_follow_you') }}</el-tag>
</div> </div>
</div> </div>
<div class="user-info"> <div class="user-info">
@ -254,9 +254,9 @@ export default {
.follower-status { .follower-status {
.status { .status {
border-radius: 4px; color: #fff;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
padding: 4px 8px; font-size: 1rem;
} }
} }
} }

View File

@ -42,10 +42,10 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="spoiler" v-show="spoilered(message.status)"> <div class="spoiler" v-show="spoilered(message.status)">
<span v-html="spoilerText(message.status)"></span> <span v-html="spoilerText(message.status)"></span>
<el-button v-show="!isShowContent(message.status)" type="text" @click="showContent = true"> <el-button v-if="!isShowContent(message.status)" plain type="primary" size="medium" class="spoil-button" @click="showContent = true">
{{ $t('cards.toot.show_more') }} {{ $t('cards.toot.show_more') }}
</el-button> </el-button>
<el-button v-show="isShowContent(message.status)" type="text" @click="showContent = false"> <el-button v-else plain type="primary" size="medium" class="spoil-button" @click="showContent = false">
{{ $t('cards.toot.hide')}} {{ $t('cards.toot.hide')}}
</el-button> </el-button>
</div> </div>
@ -61,6 +61,8 @@
</el-button> </el-button>
<div class="media" v-for="media in mediaAttachments(message.status)"> <div class="media" v-for="media in mediaAttachments(message.status)">
<FailoverImg :src="media.preview_url" alt="attached media" /> <FailoverImg :src="media.preview_url" alt="attached media" />
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -248,6 +250,14 @@ export default {
.favourite { .favourite {
padding: 8px 0 0 16px; padding: 8px 0 0 16px;
.fa-icon {
font-size: 0.9em;
width: auto;
height: 1em;
max-width: 100%;
max-height: 100%;
}
.action { .action {
margin-right: 8px; margin-right: 8px;
@ -341,8 +351,19 @@ export default {
} }
} }
.spoiler {
margin: 8px 0;
.spoil-button {
background-color: var(--theme-selected-background-color);
border-color: var(--theme-border-color);
padding: 2px 4px;
}
}
.attachments { .attachments {
position: relative; position: relative;
margin: 4px 0 8px;
.show-sensitive { .show-sensitive {
padding: 20px 32px; padding: 20px 32px;
@ -364,12 +385,26 @@ export default {
.media { .media {
float: left; float: left;
margin-right: 8px; margin-right: 8px;
width: 200px;
height: 200px;
img { img {
cursor: zoom-in;
object-fit: cover;
max-width: 200px; max-width: 200px;
max-height: 200px; max-height: 200px;
width: 100%;
height: 100%;
border-radius: 8px; border-radius: 8px;
} }
.media-label {
position: absolute;
bottom: 6px;
left: 4px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
} }
} }
} }

View File

@ -42,10 +42,10 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="spoiler" v-show="spoilered(message.status)"> <div class="spoiler" v-show="spoilered(message.status)">
<span v-html="spoilerText(message.status)"></span> <span v-html="spoilerText(message.status)"></span>
<el-button v-show="!isShowContent(message.status)" type="text" @click="showContent = true"> <el-button v-if="!isShowContent(message.status)" plain type="primary" size="medium" class="spoil-button" @click="showContent = true">
{{ $t('cards.toot.show_more') }} {{ $t('cards.toot.show_more') }}
</el-button> </el-button>
<el-button v-show="isShowContent(message.status)" type="text" @click="showContent = false"> <el-button v-else plain type="primary" size="medium" class="spoil-button" @click="showContent = false">
{{ $t('cards.toot.hide')}} {{ $t('cards.toot.hide')}}
</el-button> </el-button>
</div> </div>
@ -61,6 +61,8 @@
</el-button> </el-button>
<div class="media" v-for="media in mediaAttachments(message.status)"> <div class="media" v-for="media in mediaAttachments(message.status)">
<FailoverImg :src="media.preview_url" alt="attached media" /> <FailoverImg :src="media.preview_url" alt="attached media" />
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -246,6 +248,14 @@ export default {
.reblog { .reblog {
padding: 8px 0 0 16px; padding: 8px 0 0 16px;
.fa-icon {
font-size: 0.9em;
width: auto;
height: 1em;
max-width: 100%;
max-height: 100%;
}
.action { .action {
margin-right: 8px; margin-right: 8px;
@ -338,8 +348,19 @@ export default {
} }
} }
.spoiler {
margin: 8px 0;
.spoil-button {
background-color: var(--theme-selected-background-color);
border-color: var(--theme-border-color);
padding: 2px 4px;
}
}
.attachments { .attachments {
position: relative; position: relative;
margin: 4px 0 8px;
.show-sensitive { .show-sensitive {
padding: 20px 32px; padding: 20px 32px;
@ -361,12 +382,26 @@ export default {
.media { .media {
float: left; float: left;
margin-right: 8px; margin-right: 8px;
width: 200px;
height: 200px;
img { img {
cursor: zoom-in;
object-fit: cover;
max-width: 200px; max-width: 200px;
max-height: 200px; max-height: 200px;
width: 100%;
height: 100%;
border-radius: 8px; border-radius: 8px;
} }
.media-label {
position: absolute;
bottom: 6px;
left: 4px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
} }
} }
} }

View File

@ -34,10 +34,10 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="spoiler" v-show="spoilered(message)"> <div class="spoiler" v-show="spoilered(message)">
<span v-html="spoilerText(message)"></span> <span v-html="spoilerText(message)"></span>
<el-button v-show="!isShowContent(message)" type="text" @click="showContent = true"> <el-button v-if="!isShowContent(message)" plain type="primary" size="medium" class="spoil-button" @click="showContent = true">
{{ $t('cards.toot.show_more') }} {{ $t('cards.toot.show_more') }}
</el-button> </el-button>
<el-button v-show="isShowContent(message)" type="text" @click="showContent = false"> <el-button v-else type="primary" size="medium" class="spoil-button" @click="showContent = false">
{{ $t('cards.toot.hide')}} {{ $t('cards.toot.hide')}}
</el-button> </el-button>
</div> </div>
@ -53,8 +53,8 @@
</el-button> </el-button>
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message)"> <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message)">
<FailoverImg :src="media.preview_url" @click="openImage(media.url, mediaAttachments(message))"/> <FailoverImg :src="media.preview_url" @click="openImage(media.url, mediaAttachments(message))"/>
<span class="media-label" v-if="media.type == 'gifv'">GIF</span> <el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
<span class="media-label" v-else-if="media.type == 'video'">VIDEO</span> <el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -482,6 +482,14 @@ export default {
.toot { .toot {
padding: 8px 0 0 16px; padding: 8px 0 0 16px;
.fa-icon {
font-size: 0.9em;
width: auto;
height: 1em;
max-width: 100%;
max-height: 100%;
}
.icon { .icon {
float: left; float: left;
@ -547,8 +555,19 @@ export default {
} }
} }
.spoiler {
margin: 8px 0;
.spoil-button {
background-color: var(--theme-selected-background-color);
border-color: var(--theme-border-color);
padding: 2px 4px;
}
}
.attachments { .attachments {
position: relative; position: relative;
margin: 4px 0 8px;
.show-sensitive { .show-sensitive {
padding: 20px 32px; padding: 20px 32px;
@ -570,22 +589,25 @@ export default {
.media { .media {
float: left; float: left;
margin-right: 8px; margin-right: 8px;
width: 200px;
height: 200px;
img { img {
cursor: zoom-in; cursor: zoom-in;
object-fit: cover;
max-width: 200px; max-width: 200px;
max-height: 200px; max-height: 200px;
width: 100%;
height: 100%;
border-radius: 8px; border-radius: 8px;
} }
.media-label { .media-label {
position: absolute; position: absolute;
bottom: 8px; bottom: 6px;
left: 8px; left: 4px;
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.3);
font-size: 0.8rem;
border-radius: 2px;
} }
} }
} }
@ -616,6 +638,10 @@ export default {
.tool-box { .tool-box {
float: left; float: left;
.fa-icon {
vertical-align: bottom;
}
button { button {
margin: 0 8px; margin: 0 8px;
padding: 0; padding: 0;