From 4c9b6f2fa02d1d8cc8fcb6b3d2acc94e89fe8836 Mon Sep 17 00:00:00 2001
From: mariusbaumann <baumann.marius@gmail.com>
Date: Sat, 3 Jan 2015 20:42:17 +0100
Subject: Some style and bug fixes

+ Drag and drop sort fetature on queue fixed
+ Capcha overlay redesigned
+ Add premium account window restyled
+ Alert messages restyled
+ Some other details changed
---
 module/web/media/js/package_ui.js          |  8 +++---
 module/web/media/js/purr_static.js         | 11 ++++---
 module/web/templates/default/base.html     |  2 +-
 module/web/templates/default/captcha.html  | 32 ++++++++++-----------
 module/web/templates/default/queue.html    | 46 ++++++++++++++++--------------
 module/web/templates/default/settings.html | 39 +++++++++++++------------
 module/web/templates/default/window.html   |  6 ++--
 7 files changed, 76 insertions(+), 68 deletions(-)

(limited to 'module/web')

diff --git a/module/web/media/js/package_ui.js b/module/web/media/js/package_ui.js
index 87694e909..384207882 100644
--- a/module/web/media/js/package_ui.js
+++ b/module/web/media/js/package_ui.js
@@ -49,7 +49,7 @@ var PackageUI = new Class({
             clone: true,
             revert: true,
             opacity: 0.4,
-            handle: "#package_drag",
+            handle: ".package_drag",
             onComplete: this.saveSort.bind(this)
         });
 
@@ -218,7 +218,7 @@ var Package = new Class({
             }
             
 
-            var html = "<span style='' class='child_status sorthandle'><span style='margin-right: 2px;' class='{icon}'></span></span>\n".substitute({"icon": link.icon});
+            var html = "<span style='' class='child_status'><span style='margin-right: 2px;' class='{icon} sorthandle'></span></span>\n".substitute({"icon": link.icon});
             html += "<span style='font-size: 18px; text-weight:bold'>{name}</span><br /><div class='child_secrow' style='margin-left: 21px; margin-bottom: 7px;'>".substitute({"name": link.name});
             html += "<span class='child_status' style='font-size: 12px; color:#555'>{statusmsg}</span>{error}&nbsp;".substitute({"statusmsg": link.statusmsg, "error":link.error});
             html += "<span class='child_status' style='font-size: 12px; color:#555'>{format_size}</span>".substitute({"format_size": link.format_size});
@@ -273,8 +273,8 @@ var Package = new Class({
                     url: '/api/restartFile/' + this,
                     onSuccess: function() {
                         var ele = $('file_' + this);
-                        var imgs = ele.getElements("img");
-                        imgs[0].set("src", "/media/default/img/status_queue.png");
+                        var imgs = ele.getElements(".glyphicon");
+                        imgs[0].set("class", "glyphicon glyphicon-time");
                         var spans = ele.getElements(".child_status");
                         spans[1].set("html", "queued");
                         indicateSuccess();
diff --git a/module/web/media/js/purr_static.js b/module/web/media/js/purr_static.js
index 7e0aee949..c011ad505 100644
--- a/module/web/media/js/purr_static.js
+++ b/module/web/media/js/purr_static.js
@@ -32,14 +32,17 @@ var Purr = new Class({
 			'wrapper': {
 				'styles': {
 					'position': 'fixed',
-					'z-index': '9999'
+					'z-index': '9999',
+                                        'width': '40%',
+                                        'margin-top': '60px',
 				},
-				'class': 'purr-wrapper'
+				'class': '',
 			},
 			'alert': {
-				'class': 'purr-alert',
+				'class': 'alert alert-info',
 				'styles': {
-					'opacity': '.85'
+					'opacity': '.70',
+                                        'width': '',
 				}
 			},
 			'buttonWrapper': {
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 5933e108f..f7871eb6f 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -130,7 +130,7 @@
 
 {% if perms.STATUS %}
 <div class="btn-group btn-group-sm" role="group" aria-label="..." style="margin-left:10px;">
-  <button id="action_play" class="btn btn-default"><span class="glyphicon glyphicon-play"></span>&nbsp;</button>
+  <button id="action_play" class="btn btn-default" href="#"><span class="glyphicon glyphicon-play"></span>&nbsp;</button>
   <button id="action_stop" type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span>&nbsp;</button>
   <button id="action_cancel" type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>&nbsp;</button>
   <button id="action_add" type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>&nbsp;</button>
diff --git a/module/web/templates/default/captcha.html b/module/web/templates/default/captcha.html
index 288375b76..b3bfb282b 100644
--- a/module/web/templates/default/captcha.html
+++ b/module/web/templates/default/captcha.html
@@ -1,27 +1,25 @@
 <!-- Captcha box -->
-<div id="cap_box" class="window_box">
+<div id="cap_box" >
 
-	<form id="cap_form" action="/json/set_captcha" method="POST" enctype="multipart/form-data" onsubmit="return false;">
+	<form id="cap_form" class="form-group" action="/json/set_captcha" method="POST" enctype="multipart/form-data" onsubmit="return false;">
 	
-		<h1>{{_("Captcha reading")}}</h1>
+		<h3>{{_("Captcha reading")}}</h3>
 		<p id="cap_title">{{_("Please read the text on the captcha.")}}</p>
 		
 		<div id="cap_textual">
 		
 			<input id="cap_id" name="cap_id" type="hidden" value="" />
-		
-			<label>{{_("Captcha")}}
-			<span class="small">{{_("The captcha.")}}</span>
-			</label>
-			<span class="cont">
-			    <img id="cap_textual_img" src="">
+		        
+                        <div class="form-group">
+			<label>{{_("Captcha")}}</label>
+			<span ></br>
+			    <img id="cap_textual_img" style="border: 1px solid #bbb; padding: 3px 3px 3px 3px;" src="">
 			</span>
-			
-			<label>{{_("Text")}}
-			<span class="small">{{_("Input the text on the captcha.")}}</span>
-			</label>
-			<input id="cap_result" name="cap_result" type="text" size="20" />
-					
+                </div>
+                <div class="form-group">
+			<label>{{_("Text")}}</label>
+			<input class="form-control" id="cap_result" name="cap_result" type="text" size="20" />
+                        <p class="small">{{_("Input the text on the captcha.")}}</p>		
 		</div>
 		
 		<div id="cap_positional" style="text-align: center">
@@ -30,8 +28,8 @@
 
 		<div id="button_bar" style="text-align: center">
 			<span>
-				<button id="cap_submit" type="submit" style="margin-left: 0">{{_("Submit")}}</button>
-				<button id="cap_reset" type="reset" style="margin-left: 0">{{_("Close")}}</button>
+				<button class="btn btn-primary" id="cap_submit" type="submit" style="float: right; margin-left: 5px;">{{_("Submit")}}</button>
+				<button class="btn btn-default" id="cap_reset" type="reset" style="float: right">{{_("Close")}}</button>
 			</span>
 		</div>
 		
diff --git a/module/web/templates/default/queue.html b/module/web/templates/default/queue.html
index a77086a9e..29e1a2927 100644
--- a/module/web/templates/default/queue.html
+++ b/module/web/templates/default/queue.html
@@ -47,7 +47,7 @@ document.addEvent("domready", function(){
         &nbsp;&nbsp;
          <span class="glyphicon glyphicon-pencil" title="{{_("Edit Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/media/default/img/pencil.png" /></span>
         &nbsp;&nbsp;
-         <span class="glyphicon glyphicon-transfer" title="{{_("Move Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/media/default/img/package_go.png" /></span>
+         <span class="glyphicon glyphicon-transfer package_drag" title="{{_("Move Package")}}" style="margin-left: -10px; cursor: pointer" height="12px" src="/media/default/img/package_go.png" /></span>
         </span>
     </div>
     {% set progress = (package.linksdone * 100) / package.linkstotal %}
@@ -75,28 +75,32 @@ document.addEvent("domready", function(){
 {% endblock %}
 
 {% block hidden %}
-<div id="pack_box" class="window_box" style="z-index: 2">
-    <form id="pack_form" action="/json/edit_package" method="POST" enctype="multipart/form-data">
-    <h1>{{_("Edit Package")}}</h1>
+<div id="pack_box" style="z-index: 2">
+    <form id="pack_form" class="from-group" action="/json/edit_package" method="POST" enctype="multipart/form-data">
+    <h3>{{_("Edit Package")}}</h3>
     <p>{{_("Edit the package detais below.")}}</p>
+    
     <input name="pack_id" id="pack_id" type="hidden" value=""/>
-    <label for="pack_name">{{_("Name")}}
-    <span class="small">{{_("The name of the package.")}}</span>
-    </label>
-    <input id="pack_name" name="pack_name" type="text" size="20" />
-
-    <label for="pack_folder">{{_("Folder")}}
-    <span class="small">{{_("Name of subfolder for these downloads.")}}</span>
-    </label>
-    <input id="pack_folder" name="pack_folder" type="text" size="20" />
-
-    <label for="pack_pws">{{_("Password")}}
-    <span class="small">{{_("List of passwords used for unrar.")}}</span>
-    </label>
-    <textarea rows="3" name="pack_pws" id="pack_pws"></textarea>
-
-    <button type="submit">{{_("Submit")}}</button>
-    <button id="pack_reset" style="margin-left: 0" type="reset" >{{_("Reset")}}</button>
+    
+    <div class="form-group">
+        <label for="pack_name">{{_("Name")}}</label>
+        <input class="form-control" id="pack_name" name="pack_name" type="text" />
+        <p class="help-block">{{_("The name of the package.")}}</p>
+    </div>
+    <div class="form-group">
+        <label for="pack_folder">{{_("Folder")}}</label>
+        <input class="form-control" id="pack_folder" name="pack_folder" type="text" />
+        <p class="help-block">{{_("Name of subfolder for these downloads.")}}</p>
+    </div>
+    <div class="form-group">
+        <label for="pack_pws">{{_("Password")}}</label>
+        <textarea class="form-control" style=" width: 100%;" rows="3" name="pack_pws" id="pack_pws"></textarea>
+        <p class="help-block">{{_("List of passwords used for unrar.")}}</p>
+    </div>
+    <button class="btn btn-primary" style="float: right; margin-left: 5px;" type="submit">{{_("Submit")}}</button>
+    <button  class="btn btn-default" id="pack_reset" style="float: right;" type="reset" >{{_("Reset")}}</button>
+    
+   
     <div class="spacer"></div>
 
     </form>
diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index cd9b835da..7b06caa97 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -181,31 +181,34 @@
         </span>
 {% endblock %}
 {% block hidden %}
-<div id="account_box" class="window_box" style="z-index: 2">
+<div id="account_box" style="z-index: 2">
 <form id="add_account_form" action="/json/add_account" method="POST" enctype="multipart/form-data">
-<h1>{{_("Add Account")}}</h1>
+<h3>{{_("Add Account")}}</h3>
 <p>{{_("Enter your account data to use premium features.")}}</p>
-<label for="account_login">{{_("Login")}}
-<span class="small">{{_("Your username.")}}</span>
-</label>
-<input id="account_login" name="account_login" type="text" size="20" />
-
-<label for="account_password">{{_("Password")}}
-<span class="small">{{_("The password for this account.")}}</span>
-</label>
-<input id="account_password" name="account_password" type="password" size="20" />
-
-<label for="account_type">{{_("Type")}}
-<span class="small">{{_("Choose the hoster for your account.")}}</span>
-</label>
+
+<div class="form-group">
+<label for="account_login">{{_("Login")}}</label>
+<input class="form-control" id="account_login" name="account_login" type="text" />
+<p >{{_("Your username.")}}</p>
+</div>
+<div class="form-group">
+<label for="account_password">{{_("Password")}}</label>
+<input class="form-control" id="account_password" name="account_password" type="password" size="20" />
+<p >{{_("The password for this account.")}}</p>
+</div>
+<div class="form-group">
+<label for="account_type">{{_("Type")}}</label>
+<p>{{_("Choose the hoster for your account.")}}</p>
+</div>
+<div class="form-group">
     <select name=account_type id="account_type">
         {% for type in types|sort %}
             <option value="{{ type }}">{{ type }}</option>
         {% endfor %}
     </select>
-
-<button id="account_add_button" type="submit">{{_("Add")}}</button>
-<button id="account_reset" style="margin-left: 0" type="reset">{{_("Reset")}}</button>
+</div>
+<button class="btn btn-primary" style="float: right; margin-left: 5px;" id="account_add_button" type="submit">{{_("Add")}}</button>
+<button class="btn btn-default" style="float: right;" id="account_reset" style="margin-left: 0" type="reset">{{_("Reset")}}</button>
 <div class="spacer"></div>
 
 </form>
diff --git a/module/web/templates/default/window.html b/module/web/templates/default/window.html
index ff8a307bc..290d40be6 100644
--- a/module/web/templates/default/window.html
+++ b/module/web/templates/default/window.html
@@ -6,21 +6,21 @@
 <p>{{_("Paste your links or upload a container.")}}</p>
 <div class="form-group">
     <label for="add_name">{{_("Name")}}</label>
-    <input id="add_name" class="form-control" name="add_name" type="text" size="20" />
+    <input id="add_name" class="form-control" name="add_name" type="text" />
     <p class="help-block">{{_("The name of the new package.")}}</p>
   </div>
   <div class="form-group">
     <label for="add_links">{{_("Links")}}</label>
  </div>
  <div>
- <textarea rows="5" style="width: 100%" name="add_links" id="add_links"></textarea>
+ <textarea class="form-control" rows="5" style="width: 100%" name="add_links" id="add_links"></textarea>
 </div>
 <div class="form-group">
     <p class="help-block">{{_("The name of the new package.")}} {{ _("Filter urls") }} <span class=" glyphicon glyphicon-filter" onclick="parseUri()"></span></p>
   </div>
   <div class="form-group">
     <label for="add_password">{{_("Password")}}</label>
-    <input id="add_password" class="form-control" name="add_password" type="text" size="20">
+    <input id="add_password" class="form-control" name="add_password" type="text">
     <p class="help-block">{{_("Password for RAR-Archive")}}</p>
   </div>
   <div class="form-group">
-- 
cgit v1.2.3