new addbox design

4 files changed, 104 insertions, 26 deletions

diff --git a/module/web/media/default/css/window.css b/module/web/media/default/css/window.css
index aaccae082..130486d48 100644
--- a/module/web/media/default/css/window.css
+++ b/module/web/media/default/css/window.css
@@ -1,17 +1,74 @@
-.SWclearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
-.SWclearfix {display: inline-table;}
-* html .SWclearfix {height: 1%;}
-.SWclearfix {display: block;}
+/* ----------- My Form ----------- */
+.myform{
+margin:0 auto;
+width:600px;
+padding:14px;
 
-div.DefaultStickyWin div.body{font-family:verdana; font-size:11px; line-height: 13px;}
-div.DefaultStickyWin div.top_ul{background:url(/static/window/full.png) top left no-repeat; height:30px; width:15px; float:left}
-div.DefaultStickyWin div.top_ur{position:relative; left:0px !important; left:-4px; background:url(/static/window/full.png) top right !important; height:30px; margin:0px 0px 0px 15px !important; margin-right:-4px; padding:0px}
-div.DefaultStickyWin h1.caption{clear: none !important; margin:0px !important; overflow: hidden; padding:0 !important; font-weight:bold; color:#555; font-size:14px !important; position:relative; top:8px !important; left:5px !important; float: left; height: 22px !important;}
-div.DefaultStickyWin div.middle, div.DefaultStickyWin div.closeBody {background:url(/static/window/body.png) top left repeat-y; margin:0px 20px 0px 0px !important;	margin-bottom: -3px; position: relative;	top: 0px !important; top: -3px;}
-div.DefaultStickyWin div.body{background:url(/static/window/body.png) top right repeat-y; padding:8px 30px 8px 0px !important; margin-left:5px !important; position:relative; right:-20px !important;}
-div.DefaultStickyWin div.bottom{clear:both}div.DefaultStickyWin div.bottom_ll{background:url(/static/window/full.png) bottom left no-repeat; width:15px; height:15px; float:left}
-div.DefaultStickyWin div.bottom_lr{background:url(/static/window/full.png) bottom right; position:relative; left:0px !important; left:-4px; margin:0px 0px 0px 15px !important; margin-right:-4px; height:15px}
-div.DefaultStickyWin div.closeButtons{text-align: center; background:url(/static/window/body.png) top right repeat-y; padding: 0px 30px 8px 0px; margin-left:5px; position:relative; right:-20px}
-div.DefaultStickyWin a.button:hover{background:url(/static/window/big_button_over.gif) repeat-x}div.DefaultStickyWin a.button {background:url(/static/window/big_button.gif) repeat-x; margin: 2px 8px 2px 8px; padding: 2px 12px; cursor:pointer; border: 1px solid #999 !important; text-decoration:none; color: #000 !important;}
-div.DefaultStickyWin div.closeButton{width:13px; height:13px; background:url(/static/window/closebtn.gif) no-repeat; position: absolute; right: 0px; margin:10px 15px 0px 0px !important; cursor:pointer;top:0px}
-div.DefaultStickyWin div.dragHandle {	width: 11px;	height: 25px;	position: relative;	top: 5px;	left: -3px;	cursor: move;	background: url(/static/window/drag_corner.gif); float: left;}
\ No newline at end of file
+left:50%;
+top:150px;
+margin-left: -350px;
+position: absolute;
+background: #FFF;
+display:none;
+}
+
+/* ----------- stylized ----------- */
+#add_box{
+border:solid 2px #b7ddf2;
+background:#ebf4fb;
+}
+#add_box h1 {
+font-size:14px;
+font-weight:bold;
+margin-bottom:8px;
+}
+#add_box p{
+font-size:11px;
+color:#666666;
+margin-bottom:20px;
+border-bottom:solid 1px #b7ddf2;
+padding-bottom:10px;
+}
+#add_box label{
+display:block;
+font-weight:bold;
+text-align:right;
+width:240px;
+float:left;
+}
+#add_box .small{
+color:#666666;
+display:block;
+font-size:11px;
+font-weight:normal;
+text-align:right;
+width:240px;
+}
+#add_box input{
+float:left;
+font-size:12px;
+padding:4px 2px;
+border:solid 1px #aacfe4;
+width:300px;
+margin:2px 0 20px 10px;
+}
+#add_box textarea{
+float:left;
+font-size:12px;
+padding:4px 2px;
+border:solid 1px #aacfe4;
+width:300px;
+margin:2px 0 20px 10px;
+}
+#add_box button{
+clear:both;
+margin-left:150px;
+width:125px;
+height:31px;
+background:#666666 url(../img/button.png) no-repeat;
+text-align:center;
+line-height:31px;
+color:#FFFFFF;
+font-size:11px;
+font-weight:bold;
+}
\ No newline at end of file
diff --git a/module/web/media/default/img/button.png b/module/web/media/default/img/button.png
new file mode 100644
index 000000000..890160614
--- /dev/null
+++ b/module/web/media/default/img/button.png
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 7171a1f1c..6f9d5ff46 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -7,6 +7,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/default.css">

 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/jquery-ui-1.7.2.custom.css">

+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/window.css">

 <script src="{{ MEDIA_URL }}js/jquery-1.3.2.min.js"></script>

 <!--<script src="{{ MEDIA_URL }}js/jquery-ui-1.7.2.custom.min.js"></script>-->

 <script src="{{ MEDIA_URL }}js/sprintf.js"></script>

diff --git a/module/web/templates/default/window.html b/module/web/templates/default/window.html
index fa49565d3..7ef02e04a 100644
--- a/module/web/templates/default/window.html
+++ b/module/web/templates/default/window.html
@@ -1,12 +1,32 @@
 <div id="add_bg" style="filter:alpha(opacity:80);KHTMLOpacity:0.80;MozOpacity:0.80;opacity:0.80; background:#000; width:100%; height: 100%; position:absolute; top:0px; left:0px; display:none;">&nbsp;</div>

-<div id="add_box" style="left:50%; top:200px; margin-left: -450px; width: 900px; position: absolute; background: #FFF; padding: 10px 10px 10px 10px; display:none;">

-  <div style="width: 900px; text-align: right;"><b onclick="AddBox();">[Close]</b></div>

-  <h1>Add</h1>

-  <form id="add_form" action="json/add_package" method="post">

-    Packagename<input name="add_name" type="text" size="20" />

-    <textarea rows="5" style="width: 890px;" name="add_links" id="add_links"></textarea>

-    <br />

-    <input type="file" name="add_file" id="add_file"  />

-    <input id="add_submit" type="submit" value="Add Links"/>

-  </form>

+<!--<div id="add_box" style="left:50%; top:200px; margin-left: -450px; width: 900px; position: absolute; background: #FFF; padding: 10px 10px 10px 10px; display:none;">-->

+  

+  <!--<div style="width: 900px; text-align: right;"><b onclick="AddBox();">[Close]</b></div>-->

+<div id="add_box" class="myform">

+<form id="add_form" action="json/add_package" method="post">

+<h1>Add Package</h1>

+<p>Paste your links or upload a container.</p>

+<label>Name

+<span class="small">The name of the new package.</span>

+</label>

+<input name="add_name" type="text" size="20" />

+

+<label>Links

+<span class="small">Paste your links here</span>

+</label>

+<textarea rows="5" name="add_links" id="add_links"></textarea>

+

+<label>File

+<span class="small">Upload a container.</span>

+</label>

+<input type="file" name="add_file" id="add_file"  />

+

+<button type="submit">Add Package</button>

+<button style="margin-left:0px;" type="reset" onclick="AddBox();">Reset</button>

+<div class="spacer"></div>

+

+</form>

+

+</div>

+

 </div>