diff --git a/gitignore.gitignore b/gitignore.gitignore
index a6cc44a..a9610db 100644
--- a/gitignore.gitignore
+++ b/gitignore.gitignore
@@ -1,3 +1,2 @@
$ cat .gitignore
-.sass-cache
-*.scss
\ No newline at end of file
+static/.sass-cache
\ No newline at end of file
diff --git a/static/.sass-cache/f57f47686369a8e6a3f14a5566618015fa7ada82/style.scssc b/static/.sass-cache/f57f47686369a8e6a3f14a5566618015fa7ada82/style.scssc
index 9db0da7..d8dc0ec 100644
Binary files a/static/.sass-cache/f57f47686369a8e6a3f14a5566618015fa7ada82/style.scssc and b/static/.sass-cache/f57f47686369a8e6a3f14a5566618015fa7ada82/style.scssc differ
diff --git a/static/index.html b/static/index.html
index 26da3a9..f068eae 100644
--- a/static/index.html
+++ b/static/index.html
@@ -2,7 +2,7 @@
DaveChat
-
+
@@ -24,7 +24,7 @@ {{conversation_name}}
-
{{message.sender}}:
{{message.timeString()}}
+
{{message.sender}}{{message.timeString()}}
{{message.text}}
diff --git a/static/style.css b/static/style.css
index 6cf0bd9..8d7122f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -33,12 +33,15 @@ a img {
.right-column, .title-bar, .chat-box {
width: 530px; }
+ @media screen and (min-width: 980px) {
+ .right-column, .title-bar, .chat-box {
+ width: 742px; } }
@media screen and (max-width: 767px) {
.right-column, .title-bar, .chat-box {
width: 353.33333px; } }
- @media screen and (min-width: 980px) {
+ @media screen and (max-width: 365px) {
.right-column, .title-bar, .chat-box {
- width: 742px; } }
+ width: 265px; } }
.right-column {
position: absolute;
@@ -68,6 +71,13 @@ a img {
overflow: hidden; }
.messages-box .message .sender small {
opacity: 0.75; }
+ .messages-box .message .sender small:before {
+ content: " ";
+ display: block; }
+ @media screen and (max-width: 767px) {
+ .messages-box .message .sender small {
+ float: right;
+ display: inline; } }
.messages-box .message .message-text {
margin-left: 0px; }
@@ -83,14 +93,18 @@ a img {
max-width: 380px;
min-width: 380px;
padding: 5px; }
+ @media screen and (min-width: 980px) {
+ .chat-box textarea {
+ max-width: 592px;
+ min-width: 592px; } }
@media screen and (max-width: 767px) {
.chat-box textarea {
max-width: 253.33333px;
min-width: 253.33333px; } }
- @media screen and (min-width: 980px) {
+ @media screen and (max-width: 365px) {
.chat-box textarea {
- max-width: 592px;
- min-width: 592px; } }
+ max-width: 185px;
+ min-width: 185px; } }
.chat-box input[type='submit'] {
width: 130px;
float: right;
@@ -98,6 +112,9 @@ a img {
@media screen and (max-width: 767px) {
.chat-box input[type='submit'] {
width: 80px; } }
+ @media screen and (max-width: 365px) {
+ .chat-box input[type='submit'] {
+ width: 60px; } }
.color-0 {
color: maroon; }
diff --git a/static/style.scss b/static/style.scss
index 7eda661..12ed468 100644
--- a/static/style.scss
+++ b/static/style.scss
@@ -1,7 +1,8 @@
$right-column-width: 530px;
$gray: rgb(230,230,230);
$color-value: 128;
-$phone: 600px;
+$phone: 365px;
+$hide-sidebar: 600px;
$narrow: 767px;
$wide: 980px;
html {
@@ -36,17 +37,20 @@ a img {
margin-top: 30px;
font-weight: bold;
}
- @media screen and (max-width: $phone) {
+ @media screen and (max-width: $hide-sidebar) {
display: none;
}
}
.right-column, .title-bar, .chat-box {
width: $right-column-width;
+ @media screen and (min-width: $wide) {
+ width: 1.4*$right-column-width;
+ }
@media screen and (max-width: $narrow) {
width: 2*$right-column-width/3;
}
- @media screen and (min-width: $wide) {
- width: 1.4*$right-column-width;
+ @media screen and (max-width: $phone) {
+ width: $right-column-width/2;
}
}
.right-column {
@@ -54,9 +58,8 @@ a img {
top: 0px;
left: 225px;
height: 100%;
- @media screen and (max-width: $phone) {
+ @media screen and (max-width: $hide-sidebar) {
left: 5px;
- //width: 95%;
}
}
.title-bar {
@@ -79,6 +82,14 @@ a img {
overflow: hidden;
small {
opacity: 0.75;
+ &:before {
+ content: " ";
+ display: block;
+ }
+ @media screen and (max-width: $narrow) {
+ float: right;
+ display: inline;
+ }
}
}
.message-text {
@@ -98,13 +109,17 @@ a img {
max-width: $right-column-width - 150px;
min-width: $right-column-width - 150px;
padding: 5px;
+ @media screen and (min-width: $wide) {
+ max-width: (1.4*$right-column-width) - 150px;
+ min-width: (1.4*$right-column-width) - 150px;
+ }
@media screen and (max-width: $narrow) {
max-width: (2*$right-column-width/3) - 100px;
min-width: (2*$right-column-width/3) - 100px;
}
- @media screen and (min-width: $wide) {
- max-width: (1.4*$right-column-width) - 150px;
- min-width: (1.4*$right-column-width) - 150px;
+ @media screen and (max-width: $phone) {
+ max-width: ($right-column-width/2) - 80px;
+ min-width: ($right-column-width/2) - 80px;
}
}
input[type='submit'] {
@@ -114,6 +129,9 @@ a img {
@media screen and (max-width: $narrow) {
width: 80px;
}
+ @media screen and (max-width: $phone) {
+ width: 60px;
+ }
}
}
.color-0 {