From 65eab801e8c0f11b00c68ea7f987fbb0deebb1da Mon Sep 17 00:00:00 2001
From: JonnyWong16 <Jonny.Wong.16@gmail.com>
Date: Wed, 18 May 2016 19:31:21 -0700
Subject: [PATCH] Format Join device ids

---
 data/interfaces/default/css/plexpy.css | 10 ++++++++++
 plexpy/notifiers.py                    |  3 ++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index e40415e7..ffc79a39 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -2954,4 +2954,14 @@ a.no-highlight:hover {
 .datatable-wrap {
     min-width: 150px;
     max-width: 250px;
+}
+.inline-pre {
+    font-family: monospace;
+    margin: 0 2px;
+    padding: 2px 5px;
+    font-size: 13px;
+    color: #fff;
+    background-color: #555;
+    border: 0px solid #444;
+    border-radius: 3px;
 }
\ No newline at end of file
diff --git a/plexpy/notifiers.py b/plexpy/notifiers.py
index 85212e33..ac3b2989 100644
--- a/plexpy/notifiers.py
+++ b/plexpy/notifiers.py
@@ -2634,7 +2634,8 @@ class JOIN(object):
             return {'': ''}
 
     def return_config_options(self):
-        devices = '<br>'.join(['%s: %s' % (v, k) for k, v in self.get_devices().iteritems() if k])
+        devices = '<br>'.join(['%s: <span class="inline-pre">%s</span>'
+                               % (v, k) for k, v in self.get_devices().iteritems() if k])
         if not devices:
             devices = 'Enter your Join API key to load your device list.'