summaryrefslogtreecommitdiffstats
path: root/web/sass-files
diff options
context:
space:
mode:
authorAsaad Mahmood <asaad@spinpunch.com>2015-11-19 01:11:06 +0500
committerAsaad Mahmood <asaad@spinpunch.com>2015-11-19 01:11:06 +0500
commitade5802ed1ecabdc388c9838d23eec2a9c46e096 (patch)
treef1c16839eef340ee0cf4a37f9df612b39d57154f /web/sass-files
parente408d615c02ae3c863df3c7dc13d1b813c22fd28 (diff)
downloadchat-ade5802ed1ecabdc388c9838d23eec2a9c46e096.tar.gz
chat-ade5802ed1ecabdc388c9838d23eec2a9c46e096.tar.bz2
chat-ade5802ed1ecabdc388c9838d23eec2a9c46e096.zip
Posts structure improvement
Diffstat (limited to 'web/sass-files')
-rw-r--r--web/sass-files/sass/partials/_base.scss1
-rw-r--r--web/sass-files/sass/partials/_headers.scss32
-rw-r--r--web/sass-files/sass/partials/_markdown.scss2
-rw-r--r--web/sass-files/sass/partials/_post.scss499
-rw-r--r--web/sass-files/sass/partials/_post_right.scss33
-rw-r--r--web/sass-files/sass/partials/_responsive.scss329
-rw-r--r--web/sass-files/sass/partials/_search.scss2
-rw-r--r--web/sass-files/sass/partials/_sidebar--right.scss14
8 files changed, 339 insertions, 573 deletions
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index ad4a65c00..c5b1a7425 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -85,6 +85,7 @@ img {
a {
word-break: break-word;
color: $primary-color;
+ cursor: pointer;
}
a:focus, a:hover {
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index 69bc56841..51625afe0 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -54,9 +54,9 @@
}
.channel-intro {
- padding-bottom:5px;
- margin: 0 1em 35px;
- max-width: 850px;
+ margin: 0 auto 35px;
+ padding: 0 1em 5px;
+ max-width: 1000px;
border-bottom: 1px solid lightgrey;
.intro-links {
margin: 0 1.5em 10px 0;
@@ -216,7 +216,6 @@
font-size: 14px;
line-height: 56px;
#member_popover {
- margin-right: 5px;
width: 45px;
color: #999;
cursor: pointer;
@@ -292,20 +291,21 @@
}
.channel-header__links {
- height: 32px;
- width: 32px;
- @include border-radius(50px);
- border: 1px solid #ccc;
+ height: 30px;
+ width: 24px;
+ line-height: 26px;
margin-right: 10px;
+ font-size: 22px;
> a {
- @include border-radius(50px);
- height: 100%;
- display: block;
+ color: inherit;
+ text-decoration: none;
+ @include opacity(0.6);
@include single-transition(all, 0.1s, ease-in);
- }
- svg {
- vertical-align: top;
- margin: 7px 0 0 0px;
- fill: inherit;
+ &:hover {
+ @include opacity(1);
+ }
+ &:focus {
+ color: inherit;
+ }
}
}
diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss
index 8b0a32704..ea5ccd2d2 100644
--- a/web/sass-files/sass/partials/_markdown.scss
+++ b/web/sass-files/sass/partials/_markdown.scss
@@ -16,7 +16,7 @@
}
}
-.post-body {
+.post__body {
hr {
height: 4px;
padding: 0;
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index fad6f5074..743a76693 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -47,23 +47,23 @@ body.ios {
.textarea-wrapper {
position:relative;
- .textbox-preview-area {
- position: absolute;
- z-index: 2;
- top: 0;
- left: 0;
- box-shadow: none;
- }
+ .textbox-preview-area {
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ left: 0;
+ box-shadow: none;
+ }
.textbox-preview-link, .textbox-help-link {
- position: absolute;
- z-index: 3;
- bottom: -23px;
+ position: absolute;
+ z-index: 3;
+ bottom: -23px;
font-size: 13px;
- cursor: pointer;
- }
- .textbox-preview-link {
- right: 45px;
- }
+ cursor: pointer;
+ }
+ .textbox-preview-link {
+ right: 45px;
+ }
.textbox-help-link {
right: 0;
}
@@ -206,6 +206,7 @@ body.ios {
@include flex(1 1 auto);
position: relative;
overflow-y: hidden;
+
.post-list-holder-by-time {
background: #fff;
overflow-y: scroll;
@@ -224,31 +225,7 @@ body.ios {
display: inline;
}
}
- .post-list__table {
- display: table;
- table-layout: fixed;
- width: 100%;
- min-height: 100%;
- height: 100%;
- .post-list__content {
- display: table-cell;
- vertical-align: bottom;
- div {
- &:last-child {
- .post {
- .post-header {
- .post-header-col.post-header__reply {
- .dropdown-menu {
- top: auto;
- bottom: 25px;
- }
- }
- }
- }
- }
- }
- }
- }
+
.more-messages-text {
margin-top: 2px;
margin-bottom: 5px;
@@ -269,13 +246,13 @@ body.ios {
.post-create__container {
form {
width: 100%;
- padding: 0 1em;
- margin: 0;
+ padding: 0.5em 14px 0;
+ margin: 0 auto;
+ max-width: 1028px;
}
.post-create-body {
- max-width: 850px;
- padding: 0 0 2px;
position: relative;
+ padding: 0 0 2px;
.post-body__cell {
vertical-align: top;
position: relative;
@@ -355,95 +332,271 @@ body.ios {
}
}
+.post-list__table {
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ min-height: 100%;
+ height: 100%;
+ .post-list__content {
+ display: table-cell;
+ vertical-align: bottom;
+ > div:last-child {
+ .dropdown-menu {
+ top: auto;
+ bottom: 25px;
+ }
+ }
+ }
+}
+
.post {
word-wrap: break-word;
- padding: 8px 1em;
+ padding: 8px 1em 0;
position: relative;
max-width: 100%;
@include legacy-pie-clearfix;
+
&:hover {
- .post-header .post-header-col.post-header__reply {
- .dropdown, .comment-icon__container {
- @include opacity(1);
- }
+ .dropdown, .comment-icon__container {
+ visibility: visible;
+ }
+ }
+
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ p {
+ margin: 0 0 1em;
+ line-height: 1.6em;
+ font-size: 0.97em;
+ white-space: pre-wrap;
+
+ &:last-child {
+ margin-bottom: 0.5em;
}
- background: #f5f5f5;
+
}
- &.current--user {
- .post-body {
- @include border-radius(4px);
- background: rgba(#000, 0.05);
+
+ span {
+ p:last-child {
+ margin-bottom: 0.5em;
}
}
- &.post--comment {
- &.other--root {
- .post-comment {
- border-left: 4px solid #EEE;
- padding: 4px 0 6px 10px;
- margin: 0 0 0 30px;
- @include border-radius(0 4px 4px 0);
+
+ &.post--root {
+
+ .comment-icon__container {
+ visibility: visible;
+ }
+
+ }
+
+ &.same--root {
+
+ &.same--user {
+ padding: 0 1em;
+
+ &:hover {
+
+ .post__time {
+
+ &:before {
+ @include opacity(0.5);
+ }
+
+ }
+
}
- .post-body {
- background: transparent;
+
+ .post__header {
margin: 0;
- padding: 1px 0px;
+ height: 0;
+
+ .col__name {
+ display: none;
+ }
+
+ .col__reply {
+ top: 6px;
+ }
+
+ }
+
+ .post__time {
+ top: 24px;
}
- &.current--user {
- .post-comment {
- background: #f5f5f5;
+
+ .post__time {
+ display: inline-block;
+ font: normal normal normal 14px/1 FontAwesome;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: 0;
+ position: absolute;
+ top: -3px;
+ left: 17px;
+ width: 30px;
+ height: 30px;
+ line-height: 37px;
+
+ &:before {
+ @include opacity(0);
+ content: "\f017";
+ content: "\f017";
+ font-size: 19px;
}
+
}
+
}
- &.same--root {
- .post-body {
- @include border-radius(0 4px 4px 0);
+
+ &.post--comment {
+
+ .post__link {
+ display: none;
}
- .post-body {
- border-left: 4px solid #EEE;
- width: 570px;
- margin-left: 30px;
- padding-left: 10px;
- .post-link {
+
+ .post__img {
+ img {
display: none;
}
}
+
+ }
+
+ &.post--comment {
+ .post__body {
+ border-left: 4px solid #ddd;
+ }
}
+
}
- &.same--root {
+
+ &.other--root {
+
.comment-icon__container {
- @include opacity(0);
+
+ &.icon--show {
+ visibility: visible;
+ }
+
}
- div.post-profile-img__container {
- height: 1px;
- .post-profile-img {
- visibility: hidden;
+
+ &.post--comment {
+
+ .post__header {
+
+ .col__reply {
+ top: 53px;
+ }
+
}
+
+ }
+
+ }
+
+ .post__content {
+ margin: 0 auto;
+ position: relative;
+ max-width: 1000px;
+ display: table;
+ width: 100%;
+
+ > div {
+ display: table-cell;
+ vertical-align: top;
}
- .post__content {
- padding: 0;
+
+ }
+
+ .post__header {
+ margin-bottom: 2px;
+
+ li {
+ display: inline-block;
}
- &.same--user {
- .post__content {
- padding-left: 46px;
+
+ .col__name {
+ margin-right: 7px;
+ font-weight: 600;
+ }
+
+ .col__reply {
+ position: absolute;
+ right: 0;
+ top: 30px;
+ width: 70px;
+ }
+
+ }
+
+ .post__img {
+ width: 46px;
+ img {
+ width: 36px;
+ height: 36px;
+ vertical-align: inherit;
+ @include border-radius(50px);
+ }
+ }
+
+ .dropdown {
+ display: inline-block;
+ visibility: hidden;
+ top: -1px;
+ float: right;
+
+ .dropdown-menu {
+ right: 0;
+ left: auto;
+ min-width: 130px;
+ padding: 2px 0;
+
+ li {
+ display: block;
+
}
- .post-header-post {
- visibility: hidden;
+
+ a {
+ padding: 5px 15px;
}
+
}
- }
- p {
- margin: 0 0 1em;
- line-height: 1.6em;
- font-size: 0.97em;
- white-space: pre-wrap;
+
}
- span {
- p:last-child {
- margin-bottom: 0.5em;
+ .post__dropdown {
+ &:after {
+ content: '[...]';
+ top: -1px;
+ position: relative;
}
}
+ .post__body {
+ word-wrap: break-word;
+ padding: 0.2em 0.5em 0em;
+ @include legacy-pie-clearfix;
+ width: calc(100% - 80px);
+ }
+
+ .post__link {
+ margin: 2px 0 5px;
+ font-size: 13px;
+ }
+
+ .post__time {
+ font-size: 13px;
+ @include opacity(0.6);
+ }
+
.post-loading-gif {
height:10px;
width:10px;
@@ -459,8 +612,15 @@ body.ios {
}
.comment-icon__container {
- margin-left: 7px;
+ margin-right: 7px;
fill: $primary-color;
+ display: inline-block;
+ visibility: hidden;
+
+ &.icon--visible {
+ visibility: visible;
+ }
+
.comment-icon {
display: inline-block;
top: 3px;
@@ -468,132 +628,13 @@ body.ios {
margin-right: 3px;
fill: inherit;
}
+
path {
fill: inherit;
}
+
}
- > div {
- &.post-profile-img__container {
- float: left;
- .post-profile-img {
- width: 36px;
- height: 36px;
- margin-right: 10px;
- vertical-align: inherit;
- @include border-radius(50px);
- }
- }
- &.post__content {
- padding-left: 46px;
- max-width: 100%;
- @include legacy-pie-clearfix;
- }
- }
- .post-image__columns {
- @include legacy-pie-clearfix;
- padding-bottom: 5px;
- }
- .post-info--hidden {
- display: none;
- }
- .post-body {
- position: relative;
- z-index: 1;
- max-width: 100%;
- width: 600px;
- float: left;
- word-wrap: break-word;
- padding: 0.3em 0.5em 0.1em;
- margin: -0.3em 0 0;
- .post-link {
- @include clearfix;
- text-overflow: ellipsis;
- white-space: nowrap;
- cursor: pointer;
- }
- .post-body--code {
- font-size: .97em;
- position:relative;
- .post-body--code__language {
- position: absolute;
- right: 0;
- background: #fff;
- cursor: default;
- padding: 0.3em 0.5em 0.1em;
- border-bottom-left-radius: 4px;
- @include opacity(.3);
- }
- &.tex .katex-display {
- text-align: left;
- }
- code {
- white-space: pre;
- }
- }
- }
- .create-reply-form-wrap {
- width: 100%;
- margin-top: 5px;
- form {
- padding: 0;
- }
- .comment-btn {
- display: none;
- }
- }
- .post-header {
- position: relative;
- list-style-type: none;
- margin: 0 0 1px;
- padding-left: 0px;
- &.post-header-post {
- position: relative;
- z-index: 1;
- width: 200px;
- text-align: right;
- float: left;
- padding-right: 15px;
- }
- &.post-info {
- .post-profile-time {
- vertical-align: top;
- width: 150px;
- max-width: 220px;
- overflow: hidden;
- display: block;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin: 0 0 0 50px;
- }
- }
- .post-header-col {
- vertical-align: top;
- display: inline-block;
- margin-right: 10px;
- &.post-header__reply {
- position: relative;
- top: -1px;
- min-width: 70px;
- .dropdown-menu {
- right: 0;
- left: auto;
- }
- .dropdown {
- min-width: 18px;
- display: inline-block;
- @include opacity(0);
- }
- .dropdown-toggle:after {
- content: '[...]';
- }
- }
- }
- .post-profile-time {
- @include opacity(0.5);
- }
- }
- .post-comment {
- }
+
.web-embed-data {
padding: 2px 0 0 10px;
background: #f9f9f9;
@@ -621,22 +662,6 @@ body.ios {
display: none;
}
}
- .msg-typing {
- margin-top: 2px;
- margin-left: 5px;
- color: #a8adb7;
- }
- .post-grey {
- color:lightgrey;
- }
- .post-reply {
- clear: both;
- width: 100%;
- word-break: break-word;
- .btn-file {
- width: 40px;
- }
- }
}
.bot-indicator {
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index 54c3bcdf8..582b72c90 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -9,28 +9,31 @@
.post-right-comments-container {
position: relative;
- padding: 0;
+ padding: 0.7em 0 0;
}
.post {
+
&.post--root {
- padding: 1em 1em 0;
- margin: 0 0 1em;
- width: 100%;
- hr {
- border-color: #DDD;
- margin: 1em 0 0 0;
- }
+ padding-bottom: 0;
}
- .post-header {
- .post-profile-time {
- width: 200px;
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+
+ .post__header {
+
+ .col__reply {
+ top: 0;
}
+
}
+
+ .post__body {
+ width: 100%;
+ }
+
+ }
+
+ hr {
+ margin-bottom: 0;
}
.post-create__container {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index aad991035..197e89185 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -8,96 +8,10 @@
}
}
}
- .post {
- &.post--comment {
- &.same--root {
- margin-left: 104px;
- padding-left: 10px;
- border-left: 4px solid #EEE;
- div.post-profile-img__container {
- .post-profile-img {
- display: none;
- }
- }
- .post__content {
- width: 825px;
- margin-left: 0;
- }
- .post-body {
- width: 736px;
- border: none;
- margin: 3px 0 0;
- }
- }
- &.other--root {
- .post-comment {
- margin-left: 0;
- }
- }
- &.same--root {
- margin-top: 10px;
- margin-bottom: 10px;
- }
- }
- .post-body {
- float: none;
- width: 750px;
- margin: 3px 0 0;
- }
- .post__content {
- width: 920px;
- }
- .post-header {
- &.post-header-post {
- z-index: inherit;
- width: auto;
- float: none;
- text-align: left;
- padding-right: 0;
- }
- &.post-info {
- display: none;
- float: none;
- }
- .post-header-col {
- &.post-header__reply {
- float: right;
- text-align: right;
- .reply-link {
- margin-right: 0;
- }
- .dropdown {
- margin-left: 10px;
- }
- }
- }
- .post-info--hidden {
- display: inline;
- .post-info {
- display: inline;
- .tooltip {
- margin-top: -25px;
- margin-left: 40px;
- }
- .post-profile-time {
- margin: 0;
- }
- }
- }
- }
- }
}
}
}
@media screen and (max-width: 1440px) {
- .post-create__container {
- .post-create-body {
- max-width: 810px;
- }
- }
- .channel-intro {
- max-width: 810px;
- }
.date-separator, .new-separator {
&.hovered--comment {
&:before, &:after {
@@ -105,105 +19,6 @@
}
}
}
- .post {
- &.same--root.same--user {
- .post-header-post {
- visibility: hidden;
- width: 100%;
- position: relative;
- top: -5px;
- .post-header-col.post-header__name {
- display: none;
- }
- }
- .post-body {
- top: -15px;
- margin-bottom: -10px;
- }
- &:hover .post-header-post {
- visibility: visible;
- }
- }
-
- &.post--comment {
- &.other--root {
- .post-comment {
- margin-left: 0;
- }
- }
- &.same--root {
- margin-top: 5px;
- margin-bottom: 5px;
- margin-left: 104px;
- padding-left: 10px;
- border-left: 4px solid #EEE;
- div.post-profile-img__container {
- .post-profile-img {
- display: none;
- }
- }
- .post-body {
- margin-left: 0;
- border-left: 0;
- }
- &.same--user {
- .post__content {
- margin-left: 0;
- padding-left: 0;
- }
- }
- }
- .post__content {
- width: 810px;
- }
- .post-body {
- width: 736px;
- border: none;
- margin: 3px 0 0;
- }
- }
- .post__content {
- width: 880px;
- }
- .post-header {
- &.post-header-post {
- z-index: inherit;
- width: auto;
- float: none;
- text-align: left;
- padding-right: 0;
- }
- &.post-info {
- display: none;
- float: none;
- }
- .post-header-col {
- &.post-header__reply {
- float: right;
- margin: 0;
- }
- }
- .post-info--hidden {
- display: inline;
- .post-info {
- display: inline;
- .tooltip {
- margin-top: -25px;
- margin-left: 40px;
- }
- .post-profile-time {
- width: auto;
- margin: 0;
- }
- }
- }
- }
- .post-body {
- margin: 3px 0 0;
- float: none;
- width: 750px;
- }
- }
}
@media screen and (max-width: 1140px) {
@@ -232,77 +47,36 @@
}
}
}
- .post {
- .post__content {
- width: 100%;
- }
- .post-header {
- .post-header-col {
- &.post-header__reply {
- .reply-link {
- margin-right: 0;
- }
- .dropdown {
- margin-left: 10px;
- }
- }
- }
- }
- }
}
@media screen and (max-width: 960px) {
- .post {
- .post-header .post-header-col.post-header__reply {
- .comment-icon__container__hide {
- display: none;
- }
- .dropdown {
- @include opacity(1);
- }
- .comment-icon__container__show {
- @include opacity(1);
- }
- }
- }
+
.signup-team__container {
font-size: 1em;
}
+
.post {
- .post-header {
- .post-header-col {
- &.post-header__reply {
- text-align: right;
- display: inline-block;
- }
+
+ .dropdown, .comment-icon__container {
+ visibility: visible;
+ }
+
+ .post__img {
+ width: 40px;
+
+ img {
+ width: 32px;
+ height: 32px;
}
}
- }
-}
-@media (min-width: 992px){
- .modal-lg {
- width: 700px;
}
-}
-@media screen and (min-width: 768px) {
- .second-bar {
- display: none;
+ .post-image__column {
+ width: 200px;
+ height: 95px;
}
-}
-@media screen and (max-height: 640px) {
- .signup-team__container {
- padding: 30px 0;
- margin-bottom: 30px;
- font-size: 0.9em;
- .signup-team__name {
- font-size: 2em;
- }
- }
-}
-@media screen and (max-width: 768px) {
.textarea-wrapper {
.textbox-preview-link {
display: none;
@@ -385,35 +159,6 @@
}
}
}
- .post {
- &:hover {
- background: none;
- .post-header .post-header-col.post-header__reply {
- .dropdown-toggle:after {
- content: '...';
- }
- }
- }
- &.post--comment {
- &.same--root {
- margin-left: 25px;
- }
- &.other--root {
- margin-left: 0;
- &:hover {
- background: none;
- }
- }
- }
- .post-header .post-header-col.post-header__reply {
- .dropdown-toggle:after {
- content: '...';
- }
- }
- &.same--root.same--user .post__content{
- padding-left: 0;
- }
- }
.signup-team__container {
padding: 30px 0;
margin-bottom: 30px;
@@ -860,24 +605,6 @@
}
}
- .post {
- .post-profile-img__container {
- display: none;
- }
- &.post--comment {
- &.other--root {
- .post-comment {
- margin-left: 11px;
- }
- }
- }
- > div {
- &.post__content {
- padding: 0;
- }
- }
- }
-
.post-comments {
padding: 9px 21px 10px 10px !important;
}
@@ -958,3 +685,27 @@
}
}
}
+
+
+@media (min-width: 992px){
+ .modal-lg {
+ width: 700px;
+ }
+}
+
+@media screen and (min-width: 768px) {
+ .second-bar {
+ display: none;
+ }
+}
+
+@media screen and (max-height: 640px) {
+ .signup-team__container {
+ padding: 30px 0;
+ margin-bottom: 30px;
+ font-size: 0.9em;
+ .signup-team__name {
+ font-size: 2em;
+ }
+ }
+} \ No newline at end of file
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index bedf35376..27b55f214 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -1,5 +1,5 @@
#channel-header .search-bar__container {
- padding: 0 8px 0 0;
+ padding: 0 8px 0 3px;
}
.search-bar__container {
padding: 12px 8px 0 0;
diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss
index 2527eef28..43162831d 100644
--- a/web/sass-files/sass/partials/_sidebar--right.scss
+++ b/web/sass-files/sass/partials/_sidebar--right.scss
@@ -36,20 +36,6 @@
height: calc(100% - 56px);
@include border-radius(2px 0 0 0);
}
- .post {
- .post-header {
- .post-header-col {
- &.post-header__reply {
- min-width: 30px;
- text-align: right;
- float: right;
- }
- }
- }
- .post-body {
- margin: 3px 0 0;
- }
- }
.sidebar__overlay {
width: 100%;
height: 100%;