Skip to content

Instantly share code, notes, and snippets.

@khanimdad

khanimdad/workflow

Created August 29, 2021 14:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save khanimdad/17e9580bc3b42c3ff9332f04c4d1a037 to your computer and use it in GitHub Desktop.
Save khanimdad/17e9580bc3b42c3ff9332f04c4d1a037 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
workflow
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src ='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/materialize-stepper@3.1.0/dist/css/mstepper.min.css">
<script src="https://unpkg.com/materialize-stepper@3.1.0/dist/js/mstepper.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
<ul class="stepper parallel horizontal">
<li class="step active">
<div class="step-title waves-effect waves-dark">Campaign</div>
<div class="step-content">
<div class="section">
<div class="row">
</div>
<div class="divider"></div>
<div class="section">
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Interviews</div>
<div class="step-content">
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Contract</div>
<div class="step-content">
<div class="row">
<div class='form-field'>
<p>Step with feedback and custom validation</p>
<p>
<input name='checkbox3' type="checkbox" class="filled-in"
id="checkbox3" value='checkbox3'/>
<label for="checkbox3">Checkbox 3</label>
</p>
<p>
<input name='checkbox4' type="checkbox" class="filled-in"
id="checkbox4" value='checkbox4'/>
<label for="checkbox4">Checkbox 4</label>
</p>
</div>
<div class="input-field col s12">
<input type="text" id="textfield2" name="textfield2" class="required validate"/>
<label for="textfield2">This field should contain the word materialize</label>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn next-step" data-feedback="nextStepThreeHandler" data-validator="validateStepThree">SUBMIT</button>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Reviews</div>
<div class="step-content">
<div class="row">
<div class='form-field'>
<p>Submit phase</p>
</div>
</div>
<div class="step-actions">
<input type="submit" class="waves-effect waves-dark btn next-step" value="SUBMIT"/>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Finalize</div>
<div class="step-content">
<div class="row">
<div class='form-field'>
<p>Submit phase</p>
</div>
</div>
<div class="step-actions">
<input type="submit" class="waves-effect waves-dark btn next-step" value="SUBMIT"/>
<button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('.collapsible').collapsible();
var stepper = document.querySelector('.stepper');
var stepperInstace = new MStepper(stepper, {
// options
firstActive: 0 // this is the default
});
//resizeStepper();
$('.stepper').on('stepchange', function() {
//resizeStepper();
});
$('.select').on('click', function() {
var invitee_id = $(this).attr('data-invitee')
var user_id = invitee_id.split('_')[1];
$("#" + invitee_id).toggleClass('selected');
if($(this).hasClass( "select")){
$(this).removeClass('select');
$(this).addClass('selected');
$("#"+user_id).prop("value",user_id);
} else{
$(this).removeClass('selected');
$(this).addClass('select');
$("#"+user_id).prop("value",'');
}
return false;
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment