forked from AkkomaGang/akkoma-fe
Merge branch 'feature/status-improvement-cleanup' into 'develop'
Status improvements and cleanup See merge request !83
This commit is contained in:
lambadalambda
commit
b92be6a7ef
2 changed files with 141 additions and 94 deletions
59
src/App.scss
59
src/App.scss
|
|
@ -134,11 +134,6 @@ main-router {
|
||||||
background-color: rgba(0,0,0,0.1);
|
background-color: rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-body {
|
|
||||||
flex: 1;
|
|
||||||
padding-left: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container > * {
|
.container > * {
|
||||||
min-width: 0px;
|
min-width: 0px;
|
||||||
}
|
}
|
||||||
|
|
@ -147,60 +142,6 @@ main-router {
|
||||||
color: grey;
|
color: grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-actions {
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
div, favorite-button {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
status-text-container {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-el {
|
|
||||||
line-height: 18px;
|
|
||||||
|
|
||||||
.notify {
|
|
||||||
.avatar {
|
|
||||||
border-width: 3px;
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-left {
|
|
||||||
img {
|
|
||||||
margin-top: 0.2em;
|
|
||||||
float: right;
|
|
||||||
margin-right: 0.3em;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.retweet-info {
|
|
||||||
padding: 0.7em 0 0 0.6em;
|
|
||||||
|
|
||||||
.media-left {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
i {
|
|
||||||
align-self: center;
|
|
||||||
text-align: right;
|
|
||||||
flex: 1;
|
|
||||||
padding-right: 0.3em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-heading {
|
|
||||||
small {
|
|
||||||
font-weight: lighter;
|
|
||||||
}
|
|
||||||
margin-bottom: 0.3em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
nav {
|
nav {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -43,38 +43,39 @@
|
||||||
<user-card-content :user="status.user"></user-card-content>
|
<user-card-content :user="status.user"></user-card-content>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-content">
|
<div class="user-content">
|
||||||
<h4 class="media-heading">
|
<div class="media-heading">
|
||||||
{{status.user.name}}
|
<div class="name-and-links">
|
||||||
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
|
<h4 class="user-name">{{status.user.name}}</h4>
|
||||||
<small v-if="status.in_reply_to_screen_name"> >
|
<div class="links">
|
||||||
<router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
|
<h4>
|
||||||
{{status.in_reply_to_screen_name}}
|
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
|
||||||
</router-link>
|
<small v-if="status.in_reply_to_screen_name"> >
|
||||||
</small>
|
<router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
|
||||||
<template v-if="isReply && !expandable">
|
{{status.in_reply_to_screen_name}}
|
||||||
<small>
|
</router-link>
|
||||||
<a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
|
</small>
|
||||||
</small>
|
<template v-if="isReply && !expandable">
|
||||||
</template>
|
<small>
|
||||||
-
|
<a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
|
||||||
<small>
|
</small>
|
||||||
<router-link :to="{ name: 'conversation', params: { id: status.id } }">
|
</template>
|
||||||
<timeago :since="status.created_at" :auto-update="60"></timeago>
|
-
|
||||||
</router-link>
|
<small>
|
||||||
</small>
|
<router-link :to="{ name: 'conversation', params: { id: status.id } }">
|
||||||
<template v-if="expandable">
|
<timeago :since="status.created_at" :auto-update="60"></timeago>
|
||||||
-
|
</router-link>
|
||||||
<small>
|
</small>
|
||||||
<a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a>
|
</h4>
|
||||||
</small>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<small v-if="unmuted">
|
<div class="heading-icons">
|
||||||
<a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
|
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a>
|
||||||
</small>
|
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="fa icon-binoculars"></i></a>
|
||||||
<small v-if="!status.is_local" class="source_url">
|
<template v-if="expandable">
|
||||||
<a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a>
|
<a href="#" @click.prevent="toggleExpanded" class="expand"><i class="fa icon-plus-squared"></i></a>
|
||||||
</small>
|
</template>
|
||||||
</h4>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
|
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
|
||||||
|
|
||||||
|
|
@ -110,20 +111,62 @@
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
|
status-text-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.status-el {
|
.status-el {
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
border-left-width: 0px;
|
border-left-width: 0px;
|
||||||
|
line-height: 18px;
|
||||||
|
|
||||||
|
.notify {
|
||||||
|
.avatar {
|
||||||
|
border-width: 3px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-body {
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.user-content {
|
.user-content {
|
||||||
|
|
||||||
min-height: 52px;
|
min-height: 52px;
|
||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-heading {
|
||||||
|
display: flex;
|
||||||
|
min-height: 1.4em;
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
margin-right: 0.4em;
|
||||||
|
}
|
||||||
|
.name-and-links {
|
||||||
|
flex: 1 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.source_url {
|
.source_url {
|
||||||
float: right;
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand {
|
||||||
|
margin-right: -0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.greentext {
|
.greentext {
|
||||||
|
|
@ -144,6 +187,30 @@
|
||||||
margin-top: 0.2em;
|
margin-top: 0.2em;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-left {
|
||||||
|
img {
|
||||||
|
margin-top: 0.2em;
|
||||||
|
float: right;
|
||||||
|
margin-right: 0.3em;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.retweet-info {
|
||||||
|
padding: 0.7em 0 0 0.6em;
|
||||||
|
|
||||||
|
.media-left {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
i {
|
||||||
|
align-self: center;
|
||||||
|
text-align: right;
|
||||||
|
flex: 1;
|
||||||
|
padding-right: 0.3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-conversation {
|
.status-conversation {
|
||||||
|
|
@ -151,7 +218,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-actions {
|
.status-actions {
|
||||||
padding-top: 5px;
|
padding-top: 0.15em;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
div, favorite-button {
|
||||||
|
max-width: 6em;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-reply:hover {
|
.icon-reply:hover {
|
||||||
|
|
@ -187,12 +261,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
padding: 0.65em 0.7em 0.8em 0.8em;
|
padding: 0.4em 0.7em 0.45em 0.7em;
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
border-bottom-color: inherit;
|
border-bottom-color: inherit;
|
||||||
border-left: 4px rgba(255, 48, 16, 0.65);
|
border-left: 4px rgba(255, 48, 16, 0.65);
|
||||||
border-left-style: inherit;
|
border-left-style: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.muted {
|
.muted {
|
||||||
padding: 0.1em 0.7em 0.1em 0.8em;
|
padding: 0.1em 0.7em 0.1em 0.8em;
|
||||||
button {
|
button {
|
||||||
|
|
@ -226,4 +301,35 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 960px) {
|
||||||
|
.status-el {
|
||||||
|
.name-and-links {
|
||||||
|
margin-left: -0.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status .avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
&.retweeted {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status img.avatar-retweeter {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 18px;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue