narrower mobile view

mikestottuk · Jun 17, 2013 · 78b2097 · 78b2097
1 parent 2b8d37d
commit 78b2097
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 18 deletions.
diff --git a/gitignore.gitignore b/gitignore.gitignore
@@ -1,3 +1,2 @@
 $ cat .gitignore
-.sass-cache
-*.scss
+static/.sass-cache
diff --git a/static/.sass-cache/f57f47686369a8e6a3f14a5566618015fa7ada82/style.scssc b/static/.sass-cache/f57f47686369a8e6a3f14a5566618015fa7ada82/style.scssc
diff --git a/static/index.html b/static/index.html
@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" ng-app>
 	<head>
 		<title>DaveChat</title>
-		<meta name="viewport" content="width=370, user-scalable=no" />
+		<meta name="viewport" content="width=280, user-scalable=no" />
 		<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
 		<link rel="stylesheet" type="text/css" href="style.css" />
 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
@@ -24,7 +24,7 @@ <h1>{{conversation_name}}</h1>
 				</div>
 				<div class="messages-box" id="messages-box">
 					<div class="message row-fluid color-{{getChatter(message.sender).id}}" ng-repeat="message in messages | orderBy: 'time'">
-			        	<strong class="sender span3" ng-hide="message.sender == undefined">{{message.sender}}: <br /><small>{{message.timeString()}}</small></strong>
+			        	<strong class="sender span3" ng-hide="message.sender == undefined">{{message.sender}}<small>{{message.timeString()}}</small></strong>
 			        	<div class="message-text span9">{{message.text}}</div>
 			    	</div>
 				</div>

diff --git 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,21 +93,28 @@ 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;
     height: 62px; }
     @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
@@ -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,27 +37,29 @@ 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 {
 	position: absolute;
 	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 {