Skip to content

CIRCLE / cloud

Go to a project
Commit 4a508111 by Danyi Bence
Options

progressbar fix, radio buttons added

parent 50a458ef
Showing with 59 additions and 18 deletions
one/static/style.css
...@@ -88,16 +88,26 @@ a:link,a:visited{ ...@@ -88,16 +88,26 @@ a:link,a:visited{
padding: 5px; padding: 5px;
margin: 10px 5px; margin: 10px 5px;
} }
.wizard .progress .bar{ .wizard h2{
background-color: green; margin: 10px 0;
height: 15px; }
.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; position: absolute;
z-index: -1; z-index: -1;
width: 500px;
}
.wizard .progress .bar{
height: 20px;
background-color: rgb(102, 196, 0);
} }
.wizard .progress{ .wizard .progress{
text-align: center; text-align: center;
} }
#modal-container .wizard input, #modal-container .wizard select { .wizard input[type=text] {
display: block; display: block;
float: right; float: right;
padding: 5px; padding: 5px;
...@@ -108,11 +118,13 @@ a:link,a:visited{ ...@@ -108,11 +118,13 @@ a:link,a:visited{
border: none; border: none;
border-radius: 4px; border-radius: 4px;
} }
#modal-container .wizard input:focus{
.wizard input:focus{
box-shadow: 0 0 12px rgb(128,128,255); box-shadow: 0 0 12px rgb(128,128,255);
outline: none; outline: none;
} }
#modal-container .wizard textarea{
.wizard textarea{
float: right; float: right;
padding: 5px; padding: 5px;
margin: 10px 5px; margin: 10px 5px;
...@@ -124,6 +136,18 @@ a:link,a:visited{ ...@@ -124,6 +136,18 @@ a:link,a:visited{
box-shadow: 0 0 10px rgba(0,0,0,0.3); box-shadow: 0 0 10px rgba(0,0,0,0.3);
border: none; 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{ .wizard nav a{
display: block; display: block;
} }
......
one/templates/new-template-flow.html
<form action="/" method="post"> <form action="/" method="post">
<div id="new-template-step-1" class="wizard"> <div id="new-template-step-1" class="wizard">
<div class="progress"> <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> <h3>1/3</h3>
</div> </div>
<h2>1. lépés</h2> <h2>1. lépés</h2>
...@@ -9,29 +11,44 @@ ...@@ -9,29 +11,44 @@
<ul> <ul>
<li> <li>
<label for="new-template-name">Név</label> <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> <div class="clear"></div>
</li> </li>
<li> <li>
<label for="new-template-type">Típus</label> <label for="new-template-type">Típus</label>
<select name="type" id="new-template-type"> <ul class="radio">
<option value="labor">Labor</option> <li>
<option value="project">Project</option> <input type="radio" name="type" value="labor" id="new-template-type-labor" />
</select> <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> <div class="clear"></div>
</li> </li>
<li> <li>
<label for="new-template-size">Méret</label> <label for="new-template-size">Méret</label>
<select name="size" id="new-template-size"> <ul class="radio">
<option value="small">small</option> <li>
<option value="medium">medium</option> <input type="radio" name="size" value="small" id="new-template-size-small" />
<option value="large">large</option> <label for="new-template-size-small">Kicsi</label>
</select> </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> <div class="clear"></div>
</li> </li>
<li style="border: none"> <li style="border: none">
<label for="new-template-description">Leírás</label> <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> <div class="clear"></div>
</li> </li>
</ul> </ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment