From 81e4d0e8bd7cad26879f7003735269c2bc2d54ba Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Sun, 14 Oct 2012 21:48:39 +0200
Subject: cleaned some code on settings page

---
 module/web/static/css/default/settings.less |  40 ++---
 module/web/templates/default/base.html      |   7 +-
 module/web/templates/default/settings.html  | 233 ++++++++++++++--------------
 3 files changed, 129 insertions(+), 151 deletions(-)

(limited to 'module/web')

diff --git a/module/web/static/css/default/settings.less b/module/web/static/css/default/settings.less
index 5d0181485..0b80569fe 100644
--- a/module/web/static/css/default/settings.less
+++ b/module/web/static/css/default/settings.less
@@ -1,34 +1,16 @@
-/*
+@import "style.less";
+
+/*
 	Settings
 */
-.setmenu{
-	 background-color: #F5F5F5;
-    border: 1px solid #E3E3E3;
-    border-radius: 4px 4px 4px 4px;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
-    margin-bottom: 20px;
-    min-height: 20px;
-    padding: 19px;
-}
-.heroless{
-background-color: #eeeeee;
-padding: 10px;
-margin-bottom: 10px;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-}
-.heroless h1 {
-  margin-bottom: 0;
-  font-size: 40px;
-  line-height: 1;
-  letter-spacing: -1px;
-  color: inherit;
+.settings-menu {
 }
 
-.heroless p {
-  font-size: 18px;
-  font-weight: 200;
-  line-height: 30px;
-  color: inherit;
+.setting-box {
+
+  border-color: @lighterblue;
+
+  .page-header {
+    margin: 0;
+  }
 }
\ No newline at end of file
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 5fc47259d..bda72a00c 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -12,12 +12,13 @@
     <link href="static/css/bootstrap.css" rel="stylesheet" type="text/css"/>
     <link href="static/css/font.css" rel="stylesheet" type="text/css"/>
     <link href="static/css/default/style.less" rel="stylesheet/less" type="text/css" media="screen"/>
-		<link href="static/css/default/settings.less" rel="stylesheet/less" type="text/css" media="all"/>
+    {% block css %}
+    {% endblock %}
 
     <script src="static/js/libs/less-1.3.0.min.js" type="text/javascript"></script>
     <script type="text/javascript" data-main="static/js/default" src="static/js/libs/require-2.0.6.js"></script>
     <script>
-        require(['default'], function (App) {
+        require(['default'], function(App) {
             App.init();
             {% block require %}
             {% endblock %}
@@ -88,7 +89,7 @@
 
         <div class="block">
             <h2 class="block-title">pyLoad</h2>
-            <a href="/toggle_mobile">{{_("Mobile Version")}}</a> <br>
+            <a href="/toggle_mobile">{{ _("Mobile Version") }}</a> <br>
             dsfdsf <br>
             sdf dsg <br>
         </div>
diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index a200d7d51..8d3bb4972 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -4,142 +4,137 @@
 {% block subtitle %}{{ _("Config") }}
 {% endblock %}
 
-{% block head %}
-
-	
-
+{% block css %}
+    <link href="static/css/default/settings.less" rel="stylesheet/less" type="text/css" media="screen"/>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-	<div class="row-fluid">
-		<div class="span2">
-			<div class="setmenu" style="max-width: 340px; padding: 8px 0;">
-				<ul class="nav nav-list" >
-					<li class="nav-header">{{ _("General")}}</li>
-						<li class="active"><a href="#">Example Settings</a></li>
-						<li><a href="#">General blabla</a></li>
-						<li><a href="#">General blabla</a></li>
-						<li><a href="#">General blabla</a></li>
-						<li><a href="#">General blabla</a></li>
-					<li class="nav-header">{{ _("User")}}</li>
-						<li><a href="#">User blaba</a></li>
-						<li><a href="#">User blab la</a></li>
-						<li><a href="#">User blabal</a></li>
-					<li class="nav-header">{{ _("Addons")}}</li>
-						<li><a href="#">Addons balba</a></li>
-						<li><a href="#">Addons balbal</a></li>
-					<li class="nav-header">{{ _("Accounts")}}</li>
-						<li><a href="#">Accounts blabal </a></li>
-						<li><a href="#">Accounts bala</a></li>
-						<li><a href="#">Accounts blabla</a></li>
-						<li><a href="#">Accounts nalai</a></li>
-					<li class="divider"></li>
-					<li class="nav-header">{{ _("Admin")}}</li>
-						<li><a href="#">User Übersicht</a></li>
-						<li><a href="#">User hinzufügen</a></li>
-				</ul>
-			</div>
-		</div>
-		<!-- Info Popup -->
-<div class="modal hide fade in" id="info" >
+    <div class="container-fluid">
+        <div class="row-fluid">
+            <div class="span2">
+                <ul class="nav nav-list well settings-menu">
+                    <li class="nav-header">{{ _("General") }}</li>
+                    <li class="active"><a href="#">Example Settings</a></li>
+                    <li><a href="#">General blabla</a></li>
+                    <li><a href="#">General blabla</a></li>
+                    <li><a href="#">General blabla</a></li>
+                    <li><a href="#">General blabla</a></li>
+                    <li class="nav-header">{{ _("User") }}</li>
+                    <li><a href="#">User blaba</a></li>
+                    <li><a href="#">User blab la</a></li>
+                    <li><a href="#">User blabal</a></li>
+                    <li class="nav-header">{{ _("Addons") }}</li>
+                    <li><a href="#">Addons balba</a></li>
+                    <li><a href="#">Addons balbal</a></li>
+                    <li class="nav-header">{{ _("Accounts") }}</li>
+                    <li><a href="#">Accounts blabal </a></li>
+                    <li><a href="#">Accounts bala</a></li>
+                    <li><a href="#">Accounts blabla</a></li>
+                    <li><a href="#">Accounts nalai</a></li>
+                    <li class="divider"></li>
+                    <li class="nav-header">{{ _("Admin") }}</li>
+                    <li><a href="#">User Übersicht</a></li>
+                    <li><a href="#">User hinzufügen</a></li>
+                </ul>
+            </div>
+            <!-- Info Popup -->
+            <div class="modal hide fade in" id="info">
                 <div class="modal-header">
-                    <button type="button" class="close" >×</button>
+                    <button type="button" class="close">×</button>
                     <h3>Info Popup</h3>
                 </div>
                 <div class="modal-body">
                     <h4>General</h4>
-          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
-                    
+
+                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
+
                     <h4>And...</h4>
-                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+                        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
 
                 </div>
                 <div class="modal-footer">
-                    <button  class="btn" >Close</button>
+                    <button class="btn">Close</button>
                 </div>
             </div>
-		<!-- End Info Popup -->
-			<div class="span10" style="margin-top: 10px ">
-<div class="heroless">
-              <h1>Example Settings</h1>
-              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
-              <p>
-                <a class="btn btn-primary btn-large" data-keyboard="true" data-backdrop="true" data-controls-modal="leave_modal">Learn more</a>
-              </p>
+            <!-- End Info Popup -->
+            <div class="span10" style="margin-top: 10px ">
+                <div class="well setting-box" style="margin-top: 10px ">
+                    <form class="form-horizontal">
+                        <legend>
+                            <div class="page-header">
+                                <h1>Example Settings
+                                    <small>Subtext for header</small>
+                                </h1>
+                            </div>
+                        </legend>
+                        <div class="control-group">
+                            <label class="control-label">Max Parallel Downloads</label>
+
+                            <div class="controls">
+                                <input id="in_mpd" type="text" placeholder="3">
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label">Limit Download Speed</label>
+
+                            <div class="controls">
+                                <div class="btn-group" data-toggle="buttons-radio">
+                                    <button type="button" class="btn bnmaxspeed" id="onmaxspeed">On</button>
+                                    <button type="button" class="btn bnmaxspeed active" id="offmaxspeed">Off</button>
+                                </div>
+                                <div id="downloadspeed" style="display:none">
+                                    <label>Max Download Speed in kb/s</label>
+                                    <input type="text" placeholder="Tipp etwas ...">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <label class="control-label">Allow IPv6</label>
+
+                            <div class="controls">
+                                <div class="btn-group" data-toggle="buttons-radio">
+                                    <button type="button" class="btn bnip6" id="onip6">On</button>
+                                    <button type="button" class="btn bnip6 active" id="offip6">Off</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-actions">
+                            <button type="submit" class="btn btn-primary">Änderungen Speichern</button>
+                            <button type="button" class="btn">Abbrechen</button>
+                        </div>
+                    </form>
+                </div>
             </div>
+        </div>
+    </div>
+    <script src="static/js/libs/jquery-1.8.0.js"></script>
+    {#    <script src="static/js/libs/bootstrap-2.1.1.js"></script>#}
+    <script type="text/javascript">
+
+        $(".bnmaxspeed").click(function() {
+            $(".bnmaxspeed").removeClass("active");
+            $(this).toggleClass("active");
+            if ($("#onmaxspeed").hasClass("active")) {
+                $("#downloadspeed").show();
+            }
+            else {
+                $("#downloadspeed").hide();
+            }
 
-			
-	
-			
-			<div class="well" style="margin-top: 10px "> 
-				<form class="form-horizontal">
-					<div class="control-group">
-						<label class="control-label">Max Parallel Downloads</label>
-						<div class="controls">
-							<input id="in_mpd" type="text" placeholder="3">
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label">Limit Download Speed</label>
-						<div class="controls">
-		          <div class="btn-group" data-toggle="buttons-radio">
-		            <button type="button" class="btn bnmaxspeed" id="onmaxspeed">On</button>
-		            <button type="button" class="btn bnmaxspeed active" id="offmaxspeed">Off</button>
-		          </div>
-							<div id="downloadspeed" style="display:none">
-								<label>Max Download Speed in kb/s</label>
-								<input type="text" placeholder="Tipp etwas ...">
-							</div>
-						</div>
-					</div>
-					<div class="control-group">
-						<label class="control-label">Allow IPv6</label>
-						<div class="controls">
-							<div class="btn-group" data-toggle="buttons-radio">
-		            <button type="button" class="btn bnip6" id="onip6">On</button>
-		            <button type="button" class="btn bnip6 active" id="offip6">Off</button>
-		          </div>
-	        	</div>
-	        </div>
-				</form>
-				    <div class="form-actions">
-    					<button type="submit" class="btn btn-primary">Änderungen Speichern</button>
-   						<button type="button" class="btn">Abbrechen</button>
-  				  </div>
-			</div>
-		</div>
-	</div>
-</div>
-<script src="static/js/libs/jquery-1.8.0.js"></script>
-<!--<script src="static/js/libs/bootstrap-2.1.1.js"></script>-->
-	<script type="text/javascript">
-		
-   $(".bnmaxspeed").click(function () {    
-			$(".bnmaxspeed").removeClass("active");
-   		 $(this).toggleClass("active");
-   	 if($("#onmaxspeed").hasClass("active"))
-   	 {
-        $("#downloadspeed").show();
-   	 }
-   	 else
-   	 {
-        $("#downloadspeed").hide();
-   	 }
-   
-   });
-    $(".bnip6").click(function () {
-    	$(".bnip6").removeClass("active");
-    	$(this).toggleClass("active");
-    });
-    	$('#info').modal('toggle');
-    	
-   		$('#in_mpd').tooltip({
-   		placement:'right',
-   		title:'Gib an wie viele Downloads gleichzeitg laufen dürfen.'
-   		});
+        });
+        $(".bnip6").click(function() {
+            $(".bnip6").removeClass("active");
+            $(this).toggleClass("active");
+        });
+        $('#info').modal('toggle');
 
+        $('#in_mpd').tooltip({
+            placement: 'right',
+            title: 'Gib an wie viele Downloads gleichzeitg laufen dürfen.'
+        });
 
 
-	</script>
+    </script>
 {% endblock %} 
\ No newline at end of file
-- 
cgit v1.2.3