diff --git a/one/static/style.css b/one/static/style.css index f400d39..4043acf 100644 --- a/one/static/style.css +++ b/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; } diff --git a/one/templates/new-template-flow.html b/one/templates/new-template-flow.html index ff0be3b..483d970 100644 --- a/one/templates/new-template-flow.html +++ b/one/templates/new-template-flow.html @@ -1,7 +1,9 @@ <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>