Merge branch 'feature/status-improvement-cleanup' into 'develop'

Status improvements and cleanup

See merge request !83
This commit is contained in:
lambadalambda 2017-06-01 11:50:00 -04:00
commit b92be6a7ef
2 changed files with 141 additions and 94 deletions

View File

@ -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;
} }

View File

@ -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"> &gt; <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"> &gt;
</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>