progressbar fix, radio buttons added

one/static/style.css

@@ -88,16 +88,26 @@ a:link,a:visited{
   padding: 5px;
   margin: 10px 5px;
 }
-.wizard .progress .bar{
-  background-color: green;
-  height: 15px;
+.wizard h2{
+  margin: 10px 0;
+}
+.wizard .progress .bar-container{
+  border: 1px solid #666;
+  box-shadow: 0 0 20px rgba(0,0,0,0.2);
+  border-radius: 4px;
+  height: 20px;
   position: absolute;
   z-index: -1;
+  width: 500px;
+}
+.wizard .progress .bar{
+  height: 20px;
+  background-color: rgb(102, 196, 0);
 }
 .wizard .progress{
   text-align: center;
 }
-#modal-container .wizard input, #modal-container .wizard select {
+.wizard input[type=text] {
   display: block;
   float: right;
   padding: 5px;
@@ -108,11 +118,13 @@ a:link,a:visited{
   border: none;
   border-radius: 4px;
 }
-#modal-container .wizard input:focus{
+
+.wizard input:focus{
   box-shadow: 0 0 12px rgb(128,128,255);
   outline: none;
 }
-#modal-container .wizard textarea{
+
+.wizard textarea{
   float: right;
   padding: 5px;
   margin: 10px 5px;
@@ -124,6 +136,18 @@ a:link,a:visited{
     box-shadow: 0 0 10px rgba(0,0,0,0.3);
   border: none;
 }
+.wizard ul.radio{
+  float: right;
+}
+.wizard .radio li{
+  float: left;
+  padding: 5px;
+  margin: 10px 5px;
+  border-bottom: none !important;
+}
+.wizard .radio label{
+  float: none !important;
+}
 .wizard nav a{
   display: block;
 }

one/templates/new-template-flow.html

 <form action="/" method="post">
 	<div id="new-template-step-1" class="wizard">
 		<div class="progress">
-			<div class="bar" style="width: 33%"></div>
+			<div class="bar-container">
+				<div class="bar" style="width: 33%"></div>
+			</div>
 			<h3>1/3</h3>
 		</div>
 		<h2>1. lépés</h2>
@@ -9,29 +11,44 @@
 		<ul>
 			<li>
 				<label for="new-template-name">Név</label>
-				<input placeholder="A sablon rövid neve" name="name" id="new-template-name" />
+				<input type="text" placeholder="A sablon rövid neve" name="name" id="new-template-name" />
 				<div class="clear"></div>
 			</li>
 			<li>
 				<label for="new-template-type">Típus</label>
-				<select name="type" id="new-template-type">
-					<option value="labor">Labor</option>
-					<option value="project">Project</option>
-				</select>
+				<ul class="radio">
+					<li>
+						<input type="radio" name="type" value="labor" id="new-template-type-labor" />
+						<label for="new-template-type-labor">Labor</label>
+					</li>
+					<li>
+						<input type="radio" name="type" value="project" id="new-template-type-project" />
+						<label for="new-template-type-project">Project</label>
+					</li>
+				</ul>
 				<div class="clear"></div>
 			</li>
 			<li>
 				<label for="new-template-size">Méret</label>
-				<select name="size" id="new-template-size">
-					<option value="small">small</option>
-					<option value="medium">medium</option>
-					<option value="large">large</option>
-				</select>
+				<ul class="radio">
+					<li>
+						<input type="radio" name="size" value="small" id="new-template-size-small" />
+						<label for="new-template-size-small">Kicsi</label>
+					</li>
+					<li>
+						<input type="radio" name="size" value="medium" id="new-template-size-medium" />
+						<label for="new-template-size-medium">Közepes</label>
+					</li>
+					<li>
+						<input type="radio" name="size" value="large" id="new-template-size-large" />
+						<label for="new-template-size-large">Nagy</label>
+					</li>
+				</ul>
 				<div class="clear"></div>
 			</li>
 			<li style="border: none">
 				<label for="new-template-description">Leírás</label>
-				<textarea name="description" id="new-template-description">A sablonhoz fűzött megjegyzések.</textarea>
+				<textarea name="description" id="new-template-description" placeholder="A sablonhoz fűzött megjegyzések"></textarea>
 				<div class="clear"></div>
 			</li>
 		</ul>