Skip to content

Commit

Permalink
mods to make webpage respomsive, removed scaling animation and reduce…
Browse files Browse the repository at this point in the history 
…d animation time
  • Loading branch information
Sushant Nadkar committed May 14, 2018
1 parent edabae0 commit d442023
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 90 deletions.
75 changes: 56 additions & 19 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,23 +27,22 @@ img {
h1 {
text-align: center;
}

/* logo {
display: block;
margin-left: auto;
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
margin-right: auto } */

/*form styles*/

.header {
width: 60%;
margin: 0 auto;
}
img.logo {
width: 60%;
}
.tagline {
font-size: 0.9em;
}
#msform {
width: 400px;
margin: 50px auto;
width: 100%;
margin: 1em auto;
text-align: center;
position: relative;
}
Expand All @@ -70,6 +69,7 @@ h1 {
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
margin-top: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
Expand All @@ -84,8 +84,8 @@ h1 {
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
padding: 10px 15px;
margin: 10px 0px;
}

#msform .selection-button {
Expand All @@ -95,8 +95,8 @@ h1 {
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
padding: 10px 15px;
margin: 10px 0px;
}


Expand All @@ -114,7 +114,7 @@ h1 {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
margin-bottom: 1em;
}
/*progressbar*/
#progressbar {
Expand Down Expand Up @@ -165,3 +165,40 @@ h1 {
background: #27AE60;
color: white;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
#msform {
width: 70%;
}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
#msform {
width: 60%;
}
img.logo {
width: 50%;
}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
#msform {
width: 50%;
}
img.logo {
width: 40%;
}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#msform {
width: 40%;
}
img.logo {
width: 30%;
}
}
120 changes: 58 additions & 62 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,75 @@
<!DOCTYPE html>
<html lang="en" >
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Cannabis Tax Calculator | DigiGrowIt Cannabusiness Tools</title>
<meta charset="UTF-8">
<title>Cannabis Tax Calculator | DigiGrowIt Cannabusiness Tools</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">

</head>

<body>
<div style="width: 50%; margin: 0 auto;" class="header" text-align: center;>
<img src="digigrowit-temp.png">
<h1> Free and Open Source Cannabusiness Tools</h1>
</div>
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">State</li>
<li>Tax</li>
<li>Calculate</li>
<li>More</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Where are you?</h2>
<h3 class="fs-subtitle">Pick your state, or let us locate you</h3>
<label>State: </label>
<select id="state">
<option>California</option>
<option>Colorado</option>
<option>Washington</option>
</select>
</br>
<label>OR</label>
</br>
<input type="text" name="zip-code" placeholder="Zip Code" />
</br>
<label>OR</label>
</br>
<input type="button" name="locate-me" class="temp selection-button" value="Locate Me" /> </br>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">PICK ONE</h2>
<h3 class="fs-subtitle">What would you like to calculate?</h3>
<input type="button" name="locate-me" class="temp selection-button" value="Cultivation Tax" /> <br>
<input type="button" name="locate-me" class="temp selection-button" value="Excise Tax" /> <br>
<input type="button" name="locate-me" class="temp selection-button" value="Sales Tax" /> <br>
<input type="button" name="locate-me" class="temp selection-button" value="Use Tax" /> <br>
<input type="button" name="previous" class="previous action-button" value="Not in California?" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<div class="header">
<img class="logo" src="digigrowit-temp.png">
<h1 class="tagline"> Free and Open Source Cannabusiness Tools</h1>
</div>
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">State</li>
<li>Tax</li>
<li>Calculate</li>
<li>More</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Where are you?</h2>
<h3 class="fs-subtitle">Pick your state, or let us locate you</h3>
<label>State: </label>
<select id="state">
<option>California</option>
<option>Colorado</option>
<option>Washington</option>
</select>
<label>OR</label>
<input type="text" name="zip-code" placeholder="Zip Code" />
<label>OR</label>
<input type="button" name="locate-me" class="temp selection-button" value="Locate Me" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">PICK ONE</h2>
<h3 class="fs-subtitle">What would you like to calculate?</h3>
<input type="button" name="locate-me" class="temp selection-button" value="Cultivation Tax" />
<input type="button" name="locate-me" class="temp selection-button" value="Excise Tax" />
<input type="button" name="locate-me" class="temp selection-button" value="Sales Tax" />
<input type="button" name="locate-me" class="temp selection-button" value="Use Tax" />
<input type="button" name="previous" class="previous action-button" value="Not in California?" />
</fieldset>
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>



<script src="js/index.js"></script>
<script src="js/index.js"></script>




</body>

</html>
</html>
26 changes: 17 additions & 9 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,14 @@ $(".next").click(function(){
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
'position': 'absolute'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
duration: 500,
complete: function(){
current_fs.hide();
animating = false;
Expand All @@ -55,7 +57,9 @@ $(".previous").click(function(){
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
Expand All @@ -64,10 +68,14 @@ $(".previous").click(function(){
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
current_fs.css({
'left': left
});
previous_fs.css({
'opacity': opacity
});
},
duration: 800,
duration: 500,
complete: function(){
current_fs.hide();
animating = false;
Expand Down

0 comments on commit d442023

Please sign in to comment.