Skip to content

CIRCLE / cloud

Go to a project
Commit bc97b546 by Őry Máté
Options

one: retab new-template-flow.html

parent 671c982f
Showing with 124 additions and 124 deletions
one/templates/new-template-flow.html
<form action="/" method="post" id="template-wizard"> <form action="/" method="post" id="template-wizard">
<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-container"> <div class="bar-container">
<div class="bar" style="width: 33%"></div> <div class="bar" style="width: 33%"></div>
</div> </div>
<h3>1/3</h3> <h3>1/3</h3>
</div> </div>
<h2>1. lépés</h2> <h2>1. lépés</h2>
<p>Leírás, mit is kéne itt ezen az ablakon csinálni, és miért jó, ha azt csinálja, amit.</p> <p>Leírás, mit is kéne itt ezen az ablakon csinálni, és miért jó, ha azt csinálja, amit.</p>
<ul> <ul>
<li> <li>
<label for="new-template-name">Név</label> <label for="new-template-name">Név</label>
<input type="text" 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>
<ul class="radio"> <ul class="radio">
<li> <li>
<input type="radio" name="type" value="labor" id="new-template-type-labor" /> <input type="radio" name="type" value="labor" id="new-template-type-labor" />
<label for="new-template-type-labor">Labor</label> <label for="new-template-type-labor">Labor</label>
</li> </li>
<li> <li>
<input type="radio" name="type" value="project" id="new-template-type-project" /> <input type="radio" name="type" value="project" id="new-template-type-project" />
<label for="new-template-type-project">Project</label> <label for="new-template-type-project">Project</label>
</li> </li>
</ul> </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>
<ul class="radio"> <ul class="radio">
<li> <li>
<input type="radio" name="size" value="small" id="new-template-size-small" /> <input type="radio" name="size" value="small" id="new-template-size-small" />
<label for="new-template-size-small">Kicsi</label> <label for="new-template-size-small">Kicsi</label>
</li> </li>
<li> <li>
<input type="radio" name="size" value="medium" id="new-template-size-medium" /> <input type="radio" name="size" value="medium" id="new-template-size-medium" />
<label for="new-template-size-medium">Közepes</label> <label for="new-template-size-medium">Közepes</label>
</li> </li>
<li> <li>
<input type="radio" name="size" value="large" id="new-template-size-large" /> <input type="radio" name="size" value="large" id="new-template-size-large" />
<label for="new-template-size-large">Nagy</label> <label for="new-template-size-large">Nagy</label>
</li> </li>
</ul> </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" placeholder="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>
<nav> <nav>
<a href="#" class="prev">&laquo; Mégse</a> <a href="#" class="prev">&laquo; Mégse</a>
<a href="#" class="next">Tovább &raquo;</a> <a href="#" class="next">Tovább &raquo;</a>
<div class="clear"></div> <div class="clear"></div>
</nav> </nav>
<script type="text/javascript"> <script type="text/javascript">
$(function(){ $(function(){
$('#new-template-step-1 nav .next').click(function(){ $('#new-template-step-1 nav .next').click(function(){
$('#new-template-step-1').hide(); $('#new-template-step-1').hide();
$('#new-template-step-2').show(); $('#new-template-step-2').show();
}) })
$('#new-template-step-1 nav .prev').click(function(){ $('#new-template-step-1 nav .prev').click(function(){
$('#modal').hide(); $('#modal').hide();
}) })
}) })
</script> </script>
</div> </div>
<div id="new-template-step-2" class="wizard" style="display: none"> <div id="new-template-step-2" class="wizard" style="display: none">
<div class="progress"> <div class="progress">
<div class="bar-container"> <div class="bar-container">
<div class="bar" style="width: 66%"></div> <div class="bar" style="width: 66%"></div>
</div> </div>
<h3>2/3</h3> <h3>2/3</h3>
</div> </div>
<h2>2. lépés</h2> <h2>2. lépés</h2>
<p>Leírás, mit is kéne itt ezen az ablakon csinálni, és miért jó, ha azt csinálja, amit.</p> <p>Leírás, mit is kéne itt ezen az ablakon csinálni, és miért jó, ha azt csinálja, amit.</p>
<div class="container"> <div class="container">
<ul class="wm-list modal"> <ul class="wm-list modal">
{% for m in templates %} {% for m in templates %}
<li class="wm"> <li class="wm">
...@@ -106,51 +106,51 @@ ...@@ -106,51 +106,51 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
<nav> <nav>
<a href="#" class="prev">&laquo; Mégse</a> <a href="#" class="prev">&laquo; Mégse</a>
<a href="#" class="next">Tovább &raquo;</a> <a href="#" class="next">Tovább &raquo;</a>
<div class="clear"></div> <div class="clear"></div>
</nav> </nav>
<script type="text/javascript"> <script type="text/javascript">
$(function(){ $(function(){
console.log('foo'); console.log('foo');
$('#modal .wm .summary').each(function(){ $('#modal .wm .summary').each(function(){
$(this).next('.details').show(); $(this).next('.details').show();
console.log($(this).next('.details').css('display'), $(this).next('.details').css('height')); console.log($(this).next('.details').css('display'), $(this).next('.details').css('height'));
//this.originalHeight=parseInt($(this).next('.details').css('height')); //this.originalHeight=parseInt($(this).next('.details').css('height'));
}) })
$('#modal .wm .summary').click(function(){ $('#modal .wm .summary').click(function(){
if($(this).next('.details').is(':hidden')){ if($(this).next('.details').is(':hidden')){
$(this).next('.details') $(this).next('.details')
.slideDown(700); .slideDown(700);
$(this).parent('.wm').addClass('opened'); $(this).parent('.wm').addClass('opened');
} else { } else {
var that=this; var that=this;
$(this).next('.details') $(this).next('.details')
.removeClass('opened') .removeClass('opened')
.slideUp(700); .slideUp(700);
} }
}); });
$('#new-template-step-2 nav .prev').click(function(){ $('#new-template-step-2 nav .prev').click(function(){
$('#new-template-step-2').hide(); $('#new-template-step-2').hide();
$('#new-template-step-1').show(); $('#new-template-step-1').show();
}) })
$('#new-template-step-2 nav .next').click(function(){ $('#new-template-step-2 nav .next').click(function(){
$('#new-template-step-2').hide(); $('#new-template-step-2').hide();
$('#new-template-step-3').show(); $('#new-template-step-3').show();
$.ajax({ $.ajax({
'type': 'POST', 'type': 'POST',
'url': '/ajax/templateWizard', 'url': '/ajax/templateWizard',
'data': $('#template-wizard').serialize() 'data': $('#template-wizard').serialize()
}) })
.done(function(){ console.log('ok')}); .done(function(){ console.log('ok')});
}) })
}) })
</script> </script>
</div> </div>
<div id="new-template-step-3" class="wizard" style="display: none"> <div id="new-template-step-3" class="wizard" style="display: none">
</div> </div>
</form> </form>
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