Move a bunch of status-related styles from App to status component, alter status header layout for better user experience hopefully, make status actions placing more consistent, adjust margins.

This commit is contained in:
Shpuld Shpuldson 2017-06-01 01:02:04 +03:00
parent 9723d7285d
commit ea8a700796
2 changed files with 115 additions and 93 deletions

View file

@ -134,11 +134,6 @@ main-router {
background-color: rgba(0,0,0,0.1);
}
.media-body {
flex: 1;
padding-left: 0.5em;
}
.container > * {
min-width: 0px;
}
@ -147,60 +142,6 @@ main-router {
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 {
z-index: 1000;
}

View file

@ -43,8 +43,11 @@
<user-card-content :user="status.user"></user-card-content>
</div>
<div class="user-content">
<h4 class="media-heading">
{{status.user.name}}
<div class="media-heading">
<div class="name-and-links">
<h4>{{status.user.name}}</h4>
<div class="links">
<h4>
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
<small v-if="status.in_reply_to_screen_name"> &gt;
<router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
@ -59,22 +62,22 @@
-
<small>
<router-link :to="{ name: 'conversation', params: { id: status.id } }">
<timeago :since="status.created_at" :auto-update="60"></timeago>
<timeago :since="status.created_at" :auto-update="60" style="opacity:0.8;"></timeago>
</router-link>
</small>
<template v-if="expandable">
-
<small>
<a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a>
</small>
</template>
</h4>
</div>
</div>
<div class="heading-icons">
<small v-if="unmuted">
<a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
</small>
<small v-if="!status.is_local" class="source_url">
<a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a>
</small>
</h4>
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="fa icon-binoculars"></i></a>
<template v-if="expandable">
<a href="#" @click.prevent="toggleExpanded" class="expand"><i class="fa icon-plus-squared"></i></a>
</template>
</div>
</div>
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
@ -110,20 +113,66 @@
<style lang="scss">
@import '../../_variables.scss';
status-text-container {
display: block;
}
.status-el {
hyphens: auto;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
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 {
min-height: 52px;
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;
.links {
}
}
}
.source_url {
float: right;
margin-right: -0.25em;
}
.expand {
margin-left: 0.5em;
margin-right: -0.25em;
}
.greentext {
@ -144,6 +193,30 @@
margin-top: 0.2em;
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 {
@ -151,7 +224,14 @@
}
.status-actions {
padding-top: 5px;
padding-top: 0.15em;
width: 100%;
display: flex;
div, favorite-button {
max-width: 5.5em;
flex: 1;
}
}
.icon-reply:hover {
@ -187,12 +267,13 @@
}
.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-color: inherit;
border-left: 4px rgba(255, 48, 16, 0.65);
border-left-style: inherit;
}
.muted {
padding: 0.1em 0.7em 0.1em 0.8em;
button {