aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authormarzavec <admin@marzavec.com>2018-10-08 23:27:47 +0200
committerGitHub <noreply@github.com>2018-10-08 23:27:47 +0200
commit523925fb3932c7892d9641e1992c3edf93823b72 (patch)
tree854d9953cc1853ac55fbd8e39e86426b20266570
parentMerge pull request #38 from MinusGix/master (diff)
parentUpdated style to handle messages that refer to the user. (diff)
downloadhackchat-523925fb3932c7892d9641e1992c3edf93823b72.tar.gz
hackchat-523925fb3932c7892d9641e1992c3edf93823b72.zip
Merge pull request #39 from rand0x0m/update-style
Style update to handle messages that refer to the user.
-rw-r--r--client/client.js7
-rw-r--r--client/index.html4
-rw-r--r--client/schemes/android.css7
-rw-r--r--client/schemes/atelier-dune.css7
-rw-r--r--client/schemes/atelier-forest.css7
-rw-r--r--client/schemes/atelier-heath.css7
-rw-r--r--client/schemes/atelier-lakeside.css7
-rw-r--r--client/schemes/atelier-seaside.css7
-rw-r--r--client/schemes/bright.css7
-rw-r--r--client/schemes/chalk.css7
-rw-r--r--client/schemes/default.css7
-rw-r--r--client/schemes/eighties.css7
-rw-r--r--client/schemes/greenscreen.css7
-rw-r--r--client/schemes/mocha.css7
-rw-r--r--client/schemes/monokai.css7
-rw-r--r--client/schemes/nese.css7
-rw-r--r--client/schemes/ocean.css7
-rw-r--r--client/schemes/pop.css7
-rw-r--r--client/schemes/railscasts.css7
-rw-r--r--client/schemes/solarized.css7
-rw-r--r--client/schemes/tomorrow.css7
-rw-r--r--client/style.css5
22 files changed, 104 insertions, 45 deletions
diff --git a/client/client.js b/client/client.js
index 1d72c9a..8a0d2e5 100644
--- a/client/client.js
+++ b/client/client.js
@@ -156,7 +156,12 @@ var COMMANDS = {
function pushMessage(args) {
// Message container
var messageEl = document.createElement('div');
- messageEl.classList.add('message');
+
+ if (args.text.includes('@' + myNick.split('#')[0] + ' ')) {
+ messageEl.classList.add('refmessage');
+ } else {
+ messageEl.classList.add('message');
+ }
if (verifyNickname(myNick) && args.nick == myNick) {
messageEl.classList.add('me');
diff --git a/client/index.html b/client/index.html
index 9abdebc..98b9428 100644
--- a/client/index.html
+++ b/client/index.html
@@ -20,7 +20,7 @@
</article>
<footer id="footer">
<div class="container">
- <form id="chatform" class="messages">
+ <form id="chatform" class="message">
<textarea id="chatinput" type="text" autocomplete="off" autofocus></textarea>
</form>
</div>
@@ -59,4 +59,4 @@
<script src="client.js"></script>
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/client/schemes/android.css b/client/schemes/android.css
index 35c2165..b575725 100644
--- a/client/schemes/android.css
+++ b/client/schemes/android.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #e0e0e0;
}
-.messages {
- border-color: #858585;
+.message {
+ border-left: 1px solid rgba(133, 133, 133, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(133, 133, 133, 1);
}
.nick {
color: #0099CC;
diff --git a/client/schemes/atelier-dune.css b/client/schemes/atelier-dune.css
index 56175f4..eb20519 100644
--- a/client/schemes/atelier-dune.css
+++ b/client/schemes/atelier-dune.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #a6a28c;
}
-.messages {
- border-color: #7d7a68;
+.message {
+ border-left: 1px solid rgba(125, 122, 104, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(125, 122, 104, 1);
}
.nick {
color: #6684e1;
diff --git a/client/schemes/atelier-forest.css b/client/schemes/atelier-forest.css
index c022005..a6a5ba4 100644
--- a/client/schemes/atelier-forest.css
+++ b/client/schemes/atelier-forest.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #a8a19f;
}
-.messages {
- border-color: #766e6b;
+.message {
+ border-left: 1px solid rgba(118, 110, 107, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(118, 110, 107, 1);
}
.nick {
color: #407ee7;
diff --git a/client/schemes/atelier-heath.css b/client/schemes/atelier-heath.css
index 5c6a77f..c580cd0 100644
--- a/client/schemes/atelier-heath.css
+++ b/client/schemes/atelier-heath.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #ab9bab;
}
-.messages {
- border-color: #776977;
+.message {
+ border-left: 1px solid rgba(119, 105, 119, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(119, 105, 119, 1);
}
.nick {
color: #516aec;
diff --git a/client/schemes/atelier-lakeside.css b/client/schemes/atelier-lakeside.css
index e0dbbbe..8cb9677 100644
--- a/client/schemes/atelier-lakeside.css
+++ b/client/schemes/atelier-lakeside.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #7ea2b4;
}
-.messages {
- border-color: #5a7b8c;
+.message {
+ border-left: 1px solid rgba(90, 123, 140, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(90, 123, 140, 1);
}
.nick {
color: #257fad;
diff --git a/client/schemes/atelier-seaside.css b/client/schemes/atelier-seaside.css
index b494c27..d6a4043 100644
--- a/client/schemes/atelier-seaside.css
+++ b/client/schemes/atelier-seaside.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #8ca68c;
}
-.messages {
- border-color: #687d68;
+.message {
+ border-left: 1px solid rgba(104, 125, 104, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(104, 125, 104, 1);
}
.nick {
color: #3d62f5;
diff --git a/client/schemes/bright.css b/client/schemes/bright.css
index abeb2da..648296b 100644
--- a/client/schemes/bright.css
+++ b/client/schemes/bright.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #e0e0e0;
}
-.messages {
- border-color: #b0b0b0;
+.message {
+ border-left: 1px solid rgba(176, 176, 176, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(176, 176, 176, 1);
}
.nick {
color: #6fb3d2;
diff --git a/client/schemes/chalk.css b/client/schemes/chalk.css
index c004c15..ac9f3e2 100644
--- a/client/schemes/chalk.css
+++ b/client/schemes/chalk.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #d0d0d0;
}
-.messages {
- border-color: #505050;
+.message {
+ border-left: 1px solid rgba(80, 80, 80, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(80, 80, 80, 1);
}
.nick {
color: #6fc2ef;
diff --git a/client/schemes/default.css b/client/schemes/default.css
index f8a6b4d..4e4d16c 100644
--- a/client/schemes/default.css
+++ b/client/schemes/default.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #d0d0d0;
}
-.messages {
- border-color: #505050;
+.message {
+ border-left: 1px solid rgba(80, 80, 80, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(80, 80, 80, 1);
}
.nick {
color: #6a9fb5;
diff --git a/client/schemes/eighties.css b/client/schemes/eighties.css
index e0ccebb..5f4f2c6 100644
--- a/client/schemes/eighties.css
+++ b/client/schemes/eighties.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #d3d0c8;
}
-.messages {
- border-color: #747369;
+.message {
+ border-left: 1px solid rgba(116, 115, 105, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(116, 115, 105, 1);
}
.nick {
color: #6699cc;
diff --git a/client/schemes/greenscreen.css b/client/schemes/greenscreen.css
index fd7c794..0505b64 100644
--- a/client/schemes/greenscreen.css
+++ b/client/schemes/greenscreen.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #00bb00;
}
-.messages {
- border-color: #007700;
+.message {
+ border-left: 1px solid rgba(0, 119, 0, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(0, 119, 0, 1);
}
.nick {
color: #009900;
diff --git a/client/schemes/mocha.css b/client/schemes/mocha.css
index 7b7a439..9b17feb 100644
--- a/client/schemes/mocha.css
+++ b/client/schemes/mocha.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #d0c8c6;
}
-.messages {
- border-color: #7e705a;
+.message {
+ border-left: 1px solid rgba(126, 112, 90, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(126, 112, 90, 1);
}
.nick {
color: #8ab3b5;
diff --git a/client/schemes/monokai.css b/client/schemes/monokai.css
index adef41d..e5969e6 100644
--- a/client/schemes/monokai.css
+++ b/client/schemes/monokai.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #f8f8f2;
}
-.messages {
- border-color: #75715e;
+.message {
+ border-left: 1px solid rgba(117, 113, 94, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(117, 113, 94, 1);
}
.nick {
color: #66d9ef;
diff --git a/client/schemes/nese.css b/client/schemes/nese.css
index 8fe5844..c777cbf 100644
--- a/client/schemes/nese.css
+++ b/client/schemes/nese.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #cccccc;
}
-.messages {
- border-color: #737373;
+.message {
+ border-left: 1px solid rgba(115, 115, 115, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(115, 115, 115, 1);
}
.nick {
color: #388bb8;
diff --git a/client/schemes/ocean.css b/client/schemes/ocean.css
index c4ba031..f9eca74 100644
--- a/client/schemes/ocean.css
+++ b/client/schemes/ocean.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #c0c5ce;
}
-.messages {
- border-color: #65737e;
+.message {
+ border-left: 1px solid rgba(101, 115, 126, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(101, 115, 126, 1);
}
.nick {
color: #8fa1b3;
diff --git a/client/schemes/pop.css b/client/schemes/pop.css
index 697170b..2460652 100644
--- a/client/schemes/pop.css
+++ b/client/schemes/pop.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #d0d0d0;
}
-.messages {
- border-color: #505050;
+.message {
+ border-left: 1px solid rgba(80, 80, 80, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(80, 80, 80, 1);
}
.nick {
color: #0e5a94;
diff --git a/client/schemes/railscasts.css b/client/schemes/railscasts.css
index 886240a..94dc9f6 100644
--- a/client/schemes/railscasts.css
+++ b/client/schemes/railscasts.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #e6e1dc;
}
-.messages {
- border-color: #5a647e;
+.message {
+ border-left: 1px solid rgba(90, 100, 126, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(90, 100, 126, 1);
}
.nick {
color: #6d9cbe;
diff --git a/client/schemes/solarized.css b/client/schemes/solarized.css
index 3435491..493fc16 100644
--- a/client/schemes/solarized.css
+++ b/client/schemes/solarized.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #93a1a1;
}
-.messages {
- border-color: #657b83;
+.message {
+ border-left: 1px solid rgba(101, 123, 131, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(101, 123, 131, 1);
}
.nick {
color: #268bd2;
diff --git a/client/schemes/tomorrow.css b/client/schemes/tomorrow.css
index 80a8db1..f1784e7 100644
--- a/client/schemes/tomorrow.css
+++ b/client/schemes/tomorrow.css
@@ -6,8 +6,11 @@ input,
textarea {
color: #c5c8c6;
}
-.messages {
- border-color: #969896;
+.message {
+ border-left: 1px solid rgba(150, 152, 150, 0.5);
+}
+.refmessage {
+ border-left: 1px solid rgba(150, 152, 150, 1);
}
.nick {
color: #81a2be;
diff --git a/client/style.css b/client/style.css
index 8fcbab8..ca8abcf 100644
--- a/client/style.css
+++ b/client/style.css
@@ -59,13 +59,10 @@ ul li {
max-width: 600px;
margin: 0 auto;
}
-.messages {
- border-left: 1px solid;
-}
#messages {
padding-top: 2em;
}
-.message {
+.message, .refmessage {
padding-bottom: 1em;
}
.nick {