From 8135a97d62c27a3e792a5f6cf19e685960639649 Mon Sep 17 00:00:00 2001
From: Anthirian <anthirian@users.noreply.github.com>
Date: Tue, 24 Jun 2014 22:54:51 +0200
Subject: [PATCH] Fixed broken layout for anime black and whitelist

---
 gui/slick/css/default.css                     | 48 +++++++++++++++++
 gui/slick/interfaces/default/editShow.tmpl    | 44 +--------------
 .../default/inc_blackwhitelist.tmpl           | 53 +++++++++++++++++++
 3 files changed, 102 insertions(+), 43 deletions(-)
 create mode 100644 gui/slick/interfaces/default/inc_blackwhitelist.tmpl

diff --git a/gui/slick/css/default.css b/gui/slick/css/default.css
index 4b8a5b66..360c672e 100644
--- a/gui/slick/css/default.css
+++ b/gui/slick/css/default.css
@@ -888,6 +888,54 @@ td.tvShow a {
   -o-opacity: 1 !important;
   opacity: 1 !important;
 }
+
+/* Anime section for editShow */
+#Anime {
+    clear: both;
+    display: block ;
+    overflow-x: hidden; 
+    overflow-y: hidden;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    padding-right: 0px;
+    padding-top: 10px;
+    font-size: 14px;
+}
+
+#Anime div.component-group-desc {
+    float: left;
+    width: 165px;
+}
+#Anime div.component-group-desc p {
+    color: #666666;
+    margin-bottom: 0.4em;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0.4em;
+    width: 95%;
+}
+
+div.blackwhitelist{
+  float: left;
+  text-align: center;
+}
+div.blackwhitelist input {
+  margin: 5px 0px;
+}
+div.blackwhitelist.pool select {
+  min-width: 230px;
+}
+div.blackwhitelist.white select, div.blackwhitelist.black select {
+  min-width: 150px;
+}
+div.blackwhitelist span {
+  display: block;
+  text-align: center;
+}
+div.blackwhitelist.anidb, div.blackwhitelist.manual {
+  margin: 7px 0px;
+}
+
 /* for manage_massEdit */
 .optionWrapper {
   width: 450px;
diff --git a/gui/slick/interfaces/default/editShow.tmpl b/gui/slick/interfaces/default/editShow.tmpl
index 95cebd0c..63c8eb1f 100644
--- a/gui/slick/interfaces/default/editShow.tmpl
+++ b/gui/slick/interfaces/default/editShow.tmpl
@@ -146,49 +146,7 @@ Separate words with a comma, e.g. "word1,word2,word3"
 <br /><br />
 
 #if $show.is_anime
-<p>
-Release Groups:
-</p>
-<input type="text" id="addToPoolText"/>
-<input type="button" value="Add to White" id="addToWhite">
-<input type="button" value="Add to Black" id="addToBlack"><br/>
-<div class="blackwhiteliste white">
-	<span>White:</span>
-	<select multiple id="white">
-			#for $keyword in $whitelist:
-				<option value="$keyword">$keyword</option>
-			#end for
-	</select>
-	<br/>
-	<input id="removeW" value="Remove &gt;&gt;" type="button"/>
-</div>
-
-<div class="blackwhiteliste pool">
-	<span>Pool (Name|Rating|Subed Ep):</span>
-	<select multiple id="pool">
-	#for $group in $groups
-		#if $group not in $whitelist and $group['name'] not in $blacklist:
-			<option value="$group['name']">$group['name'] | $group['rating'] | $group['range']</option>
-		#end if
-	#end for
-	</select>
-	<br/>
-	<input id="addW" value="&lt;&lt; Add" type="button"/>
-	<input id="addB" value="Add &gt;&gt;" type="button"/>
-	<input id="removeP" value="Remove" type="button"/>
-</div>
-
-<div class="blackwhiteliste black">
-	<span>Black:</span>
-	<select multiple id="black">
-		#for $keyword in $blacklist:
-			<option value="$keyword">$keyword</option>
-		#end for
-	</select>
-	<br/>
-	<input id="removeB" value="&lt;&lt; Remove" type="button"/>
-</div>
-<br style="clear:both;"/>
+#include $os.path.join($sickbeard.PROG_DIR, "gui/slick/interfaces/default/inc_blackwhitelist.tmpl")
 #end if
 <input type="hidden" name="whitelist" id="whitelist"/>
 <input type="hidden" name="blacklist" id="blacklist"/>
diff --git a/gui/slick/interfaces/default/inc_blackwhitelist.tmpl b/gui/slick/interfaces/default/inc_blackwhitelist.tmpl
new file mode 100644
index 00000000..83129d0a
--- /dev/null
+++ b/gui/slick/interfaces/default/inc_blackwhitelist.tmpl
@@ -0,0 +1,53 @@
+<b>Fansub Groups:</b>
+<div class="bwlWrapper" id="Anime">
+	<div class="component-group-desc">
+		<p>Select your preferred fansub groups from the <b>Available Groups</b> and add them to the <b>Whitelist</b>. Add groups to the <b>Blacklist</b> to ignore them.</p>
+		<p>The <b>Whitelist</b> is checked <i>before</i> the <b>Blacklist</b>.</p>
+		<p>Groups are shown as <b>Name</b> | <b>Rating</b> | <b>Number of subbed episodes</b>.</p>
+		<p>You may also add any fansub group not listed to either list manually.</p>
+	</div>
+	<div class="blackwhitelist all">
+		<div class="blackwhitelist anidb">
+			<div class="blackwhitelist white">
+				<span><h4>Whitelist</h4></span>
+				<select id="white" multiple="multiple" size="12">
+					#for $keyword in $whitelist:
+						<option value="$keyword">$keyword</option>
+					#end for
+				</select>
+				<br/>
+				<input class="btn" style="float: left;" id="removeW" value="Remove" type="button"/>
+			</div>
+			<div class="blackwhitelist pool">
+				<span><h4>Available Groups</h4></span>
+				<select id="pool" multiple="multiple" size="12">
+				#for $group in $groups
+					#if $group not in $whitelist and $group['name'] not in $blacklist:
+						<option value="$group['name']">$group['name'] | $group['rating'] | $group['range']</option>
+					#end if
+				#end for
+				</select>
+				<br/>
+				<input class="btn" style="float: left;" id="addW" value="Add to Whitelist" type="button"/>
+				<input class="btn" style="float: right;" id="addB" value="Add to Blacklist" type="button"/>
+			</div>
+			<div class="blackwhitelist black">
+				<span><h4>Blacklist</h4></span>
+				<select id="black" multiple="multiple" size="12">
+					#for $keyword in $blacklist:
+						<option value="$keyword">$keyword</option>
+					#end for
+				</select>
+				<br/>
+				<input class="btn" style="float: right;" id="removeB" value="Remove" type="button"/>
+			</div>
+		</div>
+		<br style="clear:both" />
+		<div class="blackwhitelist manual">
+			<input type="text" id="addToPoolText" size="30" />
+			<input class="btn" type="button" value="Add to Whitelist" id="addToWhite">
+			<input class="btn" type="button" value="Add to Blacklist" id="addToBlack">
+		</div>
+	</div>
+	<br style="clear:both" />
+</div>
\ No newline at end of file