From 78b209798aa66c4d53ae1d89b03b4f79486358d8 Mon Sep 17 00:00:00 2001 From: David Timms Date: Mon, 17 Jun 2013 01:07:06 +0100 Subject: [PATCH] narrower mobile view --- gitignore.gitignore | 3 +- .../style.scssc | Bin 15370 -> 17712 bytes static/index.html | 4 +- static/style.css | 27 ++++++++++--- static/style.scss | 36 +++++++++++++----- 5 files changed, 52 insertions(+), 18 deletions(-) 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 9db0da75d39789dcfea2ffa7d4a47d3d00428dc8..d8dc0ecc4ab738932e331f1bf33edee32f1a5074 100644 GIT binary patch delta 3865 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 delta 2857 zcmaKuT}+$j6~}u_F!+lX0>&5{jBUO#_yb-Wzb{b7P6FhEkL6=xXb^*6ii7d%Vkbc) zAweOb%BD^2Y44({)i!nNML!fxxu~kO7nRnVRaJMhP2Db{X6j9LHEEhUbtLbI$W&e{dh}Z_C3&k)e1;?^z|2O?RA4Z*BCMGixKt=$ev=MWU-pIJ^>H ziN#mLQDt;>M2y5U%5XR)#^NjDt8x#teYo0Xz{iGWeA8gW?+p(8$Y4W%)c}}rw#vXb>48xnOi zi!S35G~ky}r>%iSY_c)_iEkN`aFqKt>b?yateFKn`5Nua7xwYZnvO0_%D#~7SLIHl z+;#m02GK{$0w32Lhi2@pO_>}z&W@$p3^)lVI0^R-3)2LGDQRle{hWBlG!Jg>=O(|8 znV%+@pAS7Duc=MmU<0(i*R;UV9zn6EC3iUV>rDT@#=}l$YSD9wO z06q=(;74`Qra_$)kOSv+>BVZ{DugJ9nh@nM379au@R3m8u7CgG{#4vr@q3{@@c-Rd z0%Zr|Vl6(kwBWgV8NxX4Xk>P;c?KewKRU$h)9?t+H}tee%<`}*TP(6QTO-?8@9Po{ zh8dRYr+vl{UL^ z)-~~P_AP>YeG>kq-T@-M+|$qO)3Df6S%0lIJT!7Bg(#&!V+6+K{**1M;pHf!MX9DH zZA8e5l_rPqNz*dK`9{a7$?wocYYJ8SDUizN24wt?JqcrUdtjV*X97P72VjC_=EnAZ z3qMsS9G*)r(#opjK9?>QCF%T@qDWFo-P~02r5QD&m}TptaoT4O_Fv0pO6yWbT*9)lUY<2ntq_=W37Fvk~~qo7#|(iEO{FTgzh z#y!aFS8lI+o)(paL{TZE^^;UAq*oOdG0%_aJPuhqajMOae{>1B)0RZ9+he&x$a4h0 zf=}9};5-J~=imZQ^a2h4j2z0!xM;-p+7nF|^$IUkDm=$3Y{g%DPrw3Cc!7f7reIBB zqi@Rd6FqLB5;s?oXK=^&V_2f_h9wGrMB%!^?|eyE#uxo3;S%2SCn3!?Y6e!YrE?Ni z@lxkS$ndN)6!{HBmX&eQir;jmK*7GQNm#>|yVCFy{=D1I><8UVXz4aHMH~DQh6cKE zu3Lt6KEKZ9?bRv9TIciY__yv9WchKv%rE<8{WvFJgI}W!UZKdZ(FWaM#|FRchiO`ZPI8$ z_VTl*BhR0Xyk1dXlZ9QqgyD5K^lqp;5%o|aDsPnftWhd&l*$?zcpjj@0fj?=0tXbH z0SW|Y(maH0zH&S=_=lktC}JR(4issV?^gZrMK2Ev*|K6+i#^pI{A;iSO8DPk3a;?0 zz83PpRlbkc_^RgcjF;MwN63E69vm5UX*grT?-_akF)gP+qIl*p%5Y{ztkZ;PVs zg+nd7iQ(ZsxQY2#fZ0T}m09ZlO?{mkocQ(d7~JB-TSR<9L|qXPZ;aUBI^G`{U^X8c zWHu3XG0RA1xUQpaaa2qkXG?q;ZEd(oD9aIs0!`vu;&Ici_V&j@`07X}>~h>L$L$i% z0=qhnQK(pqj>B!vyG^_h=V_AhVs(EyR4nY_F;?duhwgFco(A13LvM5FKV#!?hePiW z^a6)!l0l>Ri%}cDNg zFZh7-4mj_Ccs@8N^X};z&3=$e%4Q*#F0ub0hL3CUSJK==ll(5=pT{lu+1MuD8lT0_ zkJ)i@+>g~0DvdjH%34Y45DVL~*<=a^D?e8ce>rgx9_}Vi1B-K@n%rTrJGhj(|FHYG G8U6=5M(I2N 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 {