From 93f2b8ad39a36e1cadb12a07e788e7912b0b68b4 Mon Sep 17 00:00:00 2001 From: siryuri Date: Sun, 29 Jun 2014 14:20:56 -0700 Subject: [PATCH] fixed chat view and added message --- www/css/main.css | 142 ++++++++++++++++++++++++++++++++++++++ www/css/style.css | 137 ------------------------------------ www/pennsu.html | 111 +++++++++++++++-------------- www/templates/pennsu.html | 129 ++++++++++++++++++++-------------- 4 files changed, 280 insertions(+), 239 deletions(-) diff --git a/www/css/main.css b/www/css/main.css index f8ed5e4..56bf295 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -8,6 +8,11 @@ input.MessageBox { overflow: scroll; white-space: nowrap; } +.chat-as-needed { + overflow-y: scroll; + white-space: nowrap; +} + .side-margin { margin-left: 10px !important; @@ -82,3 +87,140 @@ input.MessageBox { float: left; padding-left: 5px; } +/* Empty. Add your own CSS if you like */ +.background { + background-color: #42b4e6; +} +.chatWrapper { + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + width: 550px; +} +.scroll-view{ + height:90% !important; + position: absolute !important; + width: 550px !important; +} +div.list.list-inset.ChatMessageBox { + position: fixed; + bottom: 4px; + width: 95%; +} + + +/* chat CSS*/ +body { padding-top:30px; } +.widget .panel-body { padding:0px; } +.widget .list-group { margin-bottom: 0; } +.widget .panel-title { display:inline } +.widget .label-info { float: right; } +.widget li.list-group-item {border-radius: 0;border: 0;border-top: 1px solid #ddd;} +.widget li.list-group-item:hover { background-color: rgba(86,61,124,.1); } +.widget .mic-info { color: #666666;font-size: 11px; } +.widget .action { margin-top:5px; } +.widget .comment-text { font-size: 12px; } +.widget .btn-block { border-top-left-radius:0px;border-top-right-radius:0px; } +.header { padding: 10px;} +.col-xs-2 .col-md-1 img { padding-right: 20px; color:#FFFFFF;} +.row img { float:left; padding-right: 4px; padding-left: 4px;} + +.time { + position: relative; + top: 5px; + font-size: 8px; + color: #F00; + left: -50px; +} + +.time2 { + font-size: 8px; + padding-left: 0px; + color: #FF0A0A; + position: relative; + right: 50px; + top: 6px; +} + +.personName { padding-left:0px; color:#5586e5; font-weight:100;} +.personSay { padding-left:0px; color:#000; font-weight:500;} + +.personName2 { float: right; padding-left:0px; color:#5586e5; font-weight:100;} +.personSay2 { float: right; padding-left:0px; color:#000; font-weight:500;} + +ul { list-style-type:none; padding:0px; margin:0px; } +ul li { padding-left: 0px; } + + + +.bubble::before { + display:block; + background-color: #F2F2F2; + content: "\00a0"; + display: block; + height: 16px; + position: absolute; + top: 11px; + transform: rotate( 29deg ) skew( -35deg ); + -moz-transform: rotate( 29deg ) skew( -35deg ); + -ms-transform: rotate( 29deg ) skew( -35deg ); + -o-transform: rotate( 29deg ) skew( -35deg ); + -webkit-transform: rotate( 29deg ) skew( -35deg ); + width: 20px; + box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); + left: -9px; + + } + +.bubble{ + display:block; + background-color: #F2F2F2; + border-radius: 5px; + box-shadow: 0 0 6px #B2B2B2; + display: inline-block; + padding: 10px 18px; + position: relative; + vertical-align: top; + margin: 10px 10px; + border-color: #cdecb0; + width: 60%; + + } + +.bubble2::before { + display:block; + float:right; + background-color: rgba(190, 218, 160, 1); + content: "\00a0"; + display: block; + height: 19px; + /*position: absolute;*/ + position:relative; + left: 26px; + top: 11px; + transform: rotate( 205deg ) skew( -35deg ); + -moz-transform: rotate( 205deg ) skew( -35deg ); + -ms-transform: rotate( 205deg ) skew( -35deg ); + -o-transform: rotate( 205deg ) skew( -35deg ); + -webkit-transform: rotate( 205deg ) skew( -35deg ); + width: 20px; + box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); + + } + +.bubble2{ + display:block; + width: 60%; + background-color: rgba(190, 218, 160, 1); + border-radius: 5px; + box-shadow: 0 0 6px #B2B2B2; + display: inline-block; + padding: 10px 18px; + position: relative; + vertical-align: top; + margin: 10px 10px; + border-color: #cdecb0; + + } + +/*END CHAT CSS */ diff --git a/www/css/style.css b/www/css/style.css index 976a0b6..e69de29 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -1,137 +0,0 @@ -/* Empty. Add your own CSS if you like */ -.background { - background-color: #42b4e6; -} -.chatWrapper { - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - width: 550px; - margin-top: -10px; -} - -/* chat CSS*/ -body { padding-top:30px; } -.widget .panel-body { padding:0px; } -.widget .list-group { margin-bottom: 0; } -.widget .panel-title { display:inline } -.widget .label-info { float: right; } -.widget li.list-group-item {border-radius: 0;border: 0;border-top: 1px solid #ddd;} -.widget li.list-group-item:hover { background-color: rgba(86,61,124,.1); } -.widget .mic-info { color: #666666;font-size: 11px; } -.widget .action { margin-top:5px; } -.widget .comment-text { font-size: 12px; } -.widget .btn-block { border-top-left-radius:0px;border-top-right-radius:0px; } -.header { padding: 10px;} -.col-xs-2 .col-md-1 img { padding-right: 20px; color:#FFFFFF;} -.row img { float:left; padding-right: 4px; padding-left: 4px;} - -.time { - position: relative; - top: 5px; - font-size: 8px; - color: #F00; - left: -50px; -} - -.time2 { - font-size: 8px; - padding-left: 0px; - color: #FF0A0A; - position: relative; - right: 50px; - top: 6px; -} - -.personName { padding-left:0px; color:#5586e5; font-weight:100;} -.personSay { padding-left:0px; color:#000; font-weight:500;} - -.personName2 { float: right; padding-left:0px; color:#5586e5; font-weight:100;} -.personSay2 { float: right; padding-left:0px; color:#000; font-weight:500;} - -ul { list-style-type:none; padding:0px; margin:0px; } -ul li { padding-left: 0px; } - - -.bubble{ - background-color: #F2F2F2; - border-radius: 5px; - box-shadow: 0 0 6px #B2B2B2; - display: inline-block; - padding: 10px 18px; - position: relative; - vertical-align: top; - float: left; - margin: 5px 45px 5px 20px; - border-color: #cdecb0; - -} - -.bubble::before { - background-color: #F2F2F2; - content: "\00a0"; - display: block; - height: 16px; - position: absolute; - top: 11px; - transform: rotate( 29deg ) skew( -35deg ); - -moz-transform: rotate( 29deg ) skew( -35deg ); - -ms-transform: rotate( 29deg ) skew( -35deg ); - -o-transform: rotate( 29deg ) skew( -35deg ); - -webkit-transform: rotate( 29deg ) skew( -35deg ); - width: 20px; - box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); - left: -9px; - - } - -.bubble{ - background-color: #F2F2F2; - border-radius: 5px; - box-shadow: 0 0 6px #B2B2B2; - display: inline-block; - padding: 10px 18px; - position: relative; - vertical-align: top; - margin: 10px 10px; - border-color: #cdecb0; - width: 60%; - - } - -.bubble2::before { - -float:right; - background-color: rgba(190, 218, 160, 1); - content: "\00a0"; - display: block; - height: 19px; - /*position: absolute;*/ - position:relative; - left: 26px; - top: 11px; - transform: rotate( 205deg ) skew( -35deg ); - -moz-transform: rotate( 205deg ) skew( -35deg ); - -ms-transform: rotate( 205deg ) skew( -35deg ); - -o-transform: rotate( 205deg ) skew( -35deg ); - -webkit-transform: rotate( 205deg ) skew( -35deg ); - width: 20px; - box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); - - } - -.bubble2{ - width: 60%; - background-color: rgba(190, 218, 160, 1); - border-radius: 5px; - box-shadow: 0 0 6px #B2B2B2; - display: inline-block; - padding: 10px 18px; - position: relative; - vertical-align: top; - margin: 10px 10px; - border-color: #cdecb0; - - } - -/*END CHAT CSS */ \ No newline at end of file diff --git a/www/pennsu.html b/www/pennsu.html index f88f6cb..4aa90ad 100644 --- a/www/pennsu.html +++ b/www/pennsu.html @@ -1,53 +1,62 @@ - - - Spice Words- Main Screen - - - - -
-
-
    -
  • -

    - the name of my village is Rathanpur -
    -
    • -
  • -

    - say hellooo yes the name of my village is rathanpur -
    -
    • -
  • -

    - wtf bro i dont get this at all. i love burgers and such and this is a long text so lets see what happens when its super long and you have a lot ot say, should we limit the character? - -
    -
    • -
  • -

    - the name of my village is Rathanpur -
    -
    • -
  • -

    - the name of my village is Rathanpur -
    -
    • - -
  • -

    - listen bro -
    -
    • -
  • -

    - All the words in this vocabulary test are from the Academic Word List These are the 570 most frequently used words in academic texts. You need to learn these words if you wish to pass an academic exam such as IELTS, TOEFL or PTE Academic or if you wish to study in an English speaking university. -
    -
    • -
-
+ + + + + +
+
+ + +
+
+
    +
  • +

    + the name of my village is Rathanpur +
    +
    • +
  • +

    + say hellooo yes the name of my village is rathanpur +
    +
    • +
  • +

    + wtf bro i dont get this at all. i love burgers and such and this is a long text so lets see what happens when its super long and you have a lot ot say, should we limit the character? + +
    +
    • +
  • +

    + the name of my village is Rathanpur +
    +
    • +
  • +

    + the name of my village is Rathanpur +
    +
    • + +
  • +

    + listen bro +
    +
    • +
  • +

    + All the words in this vocabulary test are from the Academic Word List These are the 570 most frequently used words in academic texts. You need to learn these words if you wish to pass an academic exam such as IELTS, TOEFL or PTE Academic or if you wish to study in an English speaking university. +
    +
    • +
+
+
+ + + - - + + \ No newline at end of file diff --git a/www/templates/pennsu.html b/www/templates/pennsu.html index f88f6cb..666d372 100644 --- a/www/templates/pennsu.html +++ b/www/templates/pennsu.html @@ -1,53 +1,80 @@ - - - Spice Words- Main Screen - - - - -
-
-
    -
  • -

    - the name of my village is Rathanpur -
    -
    • -
  • -

    - say hellooo yes the name of my village is rathanpur -
    -
    • -
  • -

    - wtf bro i dont get this at all. i love burgers and such and this is a long text so lets see what happens when its super long and you have a lot ot say, should we limit the character? - -
    -
    • -
  • -

    - the name of my village is Rathanpur -
    -
    • -
  • -

    - the name of my village is Rathanpur -
    -
    • - -
  • -

    - listen bro -
    -
    • -
  • -

    - All the words in this vocabulary test are from the Academic Word List These are the 570 most frequently used words in academic texts. You need to learn these words if you wish to pass an academic exam such as IELTS, TOEFL or PTE Academic or if you wish to study in an English speaking university. -
    -
    • -
-
+ + + + + + + +
+
    +
  • +

    + the name of my village is Rathanpur +
    +
    • +
  • +

    + the name of my village is Rathanpur +
    +
    • +
  • +

    + the name of my village is Rathanpur +
    +
    • +
  • +

    + say hellooo yes the name of my village is rathanpur +
    +
    • +
  • +

    + wtf bro i dont get this at all. i love burgers and such and this is a long text so lets see what happens when its super long and you have a lot ot say, should we limit the character? + +
    +
    • +
  • +

    + the name of my village is Rathanpur +
    +
    • +
  • +

    + the name of my village is Rathanpur +
    +
    • + +
  • +

    + listen bro +
    +
    • +
  • +

    + All the words in this vocabulary test are from the Academic Word List These are the 570 most frequently used words in academic texts. You need to learn these words if you wish to pass an academic exam such as IELTS, TOEFL or PTE Academic or if you wish to study in an English speaking university. +
    +
    • +
  • +

    + All the words in this vocabulary test are from the Academic Word List These are the 570 most frequently used words in academic texts. You need to learn these words if you wish to pass an academic exam such as IELTS, TOEFL or PTE Academic or if you wish to study in an English speaking university. +
    +
    • +
  • +

    + the name of my village is Rathanpur +
    +
    • +
+
+ +
+
+ + + - - + \ No newline at end of file