Skip to content

Commit

Permalink
#17 Chnages to styling of status modal elements
Browse files Browse the repository at this point in the history
  • Loading branch information
ujali committed May 11, 2015
1 parent 3321fd2 commit 270ecf0
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 97 deletions.
44 changes: 17 additions & 27 deletions app/views/users/contents/checkIMEIStatus.scala.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@* checkIMEIModal Template File *@
@(title:String)


<section id="imeiStatus">
<div class="headline">
<h3>Check IMEI status</h3>
Expand All @@ -21,50 +20,41 @@ <h5>Ensure that you are not buying a lemon!</h5>
<h5 style="color: rgba(32, 75, 54, 1);">Coming Soon - Check IMEI by sending an <img src="@routes.Assets.at("user/img/msg.png")" alt="...">&nbsp;(premium service)</h5>
<hr>

<!-- Button to trigger modal -->
<a href="#imeiStatusModal" class="portfolio-link" role="button"><button type="button" id ="checkIMEI" class="btn md-trigger" data-modal="modal-11">
<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;Click here to check IMEI status</button></a>
<a href="#imeiStatusModal" class="portfolio-link" role="button" data-toggle="modal"><button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;Click here to check IMEI status</button></a> <!-- Button to trigger modal -->

<!-- Modal -->
<div class="md-modal md-effect-11" id="modal-11" tabindex="-1" role="dialog" aria-hidden="true">
<div class="md-content">
<div class="portfolio-modal modal fade" id="imeiStatusModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="statusModal modal-dialog">
<h3 style="text-align:center;">Check Status Of IMEI number</h3>
<div class="modal-content">
<div class="row">
<div class="col-md-12 modalStyle">
<div class="col-md-12">
<div class="modal-body" style="text-align: left;">
<h3 style="color: rgba(228, 137, 0, 1);">Check Status Of IMEI number</h3>
<hr>
<p>Please Enter Mobile IMEI To Check Status:</p>
<p style="font-size: 14px;">Enter numbers only, no dashes (e.g. 1234567890123457)</p>
<p class="statusText">Please Enter Mobile IMEI To Check Status:</p>
<p style="font-size: 14px;" class="statusText">Enter numbers only, no dashes (e.g. 1234567890123457)</p>
<div class= "row">
<div class= "col-md-4">
<input type="text" class="form-control" id="imeiNum" name="imeiNum" placeholder="Enter IMEI..."/>
</div>
<div class="col-md-4">
<button class="btn btn-warning" onClick="showMobileRecord()" id="showrecord">Search</button>
<div class="col-md-4 successButton">
<button class="btn btn-success" onClick="showMobileRecord()" id="showrecord">Search</button>
</div>
<div class="col-md-12" id="msg">
</div>
<div id="mobileRecords" class="col-md-12">
</div>
</div>
<hr>
<button class="btn btn-success md-close" onClick="clearFields();">Close</button>
<div class="closeButton">
<button class="btn btn-warning" onClick="clearFields();">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</section>

<script>
// this is important for IEs
var polyfilter_scriptpath = '/user/js/modalStyling/';
</script>

<script src="@routes.Assets.at("user/js/myscript/checkIMEIStatus.js")"></script>
<script src="@routes.Assets.at("user/js/modalStyling/modernizr.custom.js")"></script>
<script src="@routes.Assets.at("user/js/modalStyling/modalEffects.js")"></script>
<script src="@routes.Assets.at("user/js/modalStyling/cssParser.js")"></script>
<script src="@routes.Assets.at("user/js/modalStyling/css-filters-polyfill.js")"></script>

<script src="@routes.Assets.at("user/js/myscript/checkIMEIStatus.js")"></script>
154 changes: 84 additions & 70 deletions public/user/css/custom.css
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,29 @@
/*Home page*/
/* home page slider*/

.carousel-inner .item {
width: 100%;
height: 400px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.carousel-inner .item {
width: 100%;
height: 400px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.purchase {
padding: 25px 0px 30px;
border-bottom: 2px solid #EEE;
border-top: 2px solid #EEE;
background-color: #f7f7f7;
margin-top: 10px;
padding: 25px 0px 30px;
border-bottom: 2px solid #EEE;
border-top: 2px solid #EEE;
background-color: #f7f7f7;
margin-top: 10px;
}


.con{
margin-bottom: 50px;
.con {
margin-bottom: 50px;
color: #e6e6fa;
}

.formContainer{
padding:20px 20px 20px !important;
.formContainer {
padding: 20px 20px 20px !important;
}

.headline {
Expand All @@ -35,7 +32,7 @@
border-bottom: 2px dotted #c8d2e0;
}

.inputField{
.inputField {
width: 300px;
}

Expand All @@ -46,23 +43,22 @@
border-bottom: 3px solid #72C02C;
}

.modalStyle{
.modalStyle {
-webkit-box-sizing: border-box !important;
}

.thumbnails-style{
.thumbnails-style {
padding: 10px;
margin-bottom: 15px;
}


.thumbnails-style:hover {
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}

.title{
.title {
color: rgba(218, 174, 22, 1);
}

Expand All @@ -76,65 +72,83 @@ a {
font-weight: initial;
}

.registrationHeader{
margin-bottom: 10px;
font-size: 18px;
padding: 20px;
background-color: #2c3e50;
color: #fff;
font-weight: 600;
.registrationHeader {
margin-bottom: 10px;
font-size: 18px;
padding: 20px;
background-color: #2c3e50;
color: #fff;
font-weight: 600;
}

#mobileRegistrationForm{
color:#2c3e50;
#mobileRegistrationForm {
color: #2c3e50;
}


.textField{
padding-top:6px;
.textField {
padding-top: 6px;
}
.sidebar{

.sidebar {
margin-top: 106px;
}

.sidebar li i {
color: #72C02C;
font-size: 13px;
min-width: 15px;
margin-right: 8px;
text-align: center;
position: relative;
color: #72C02C;
font-size: 13px;
min-width: 15px;
margin-right: 8px;
text-align: center;
position: relative;
}

.sidebar li a {
color: #000000;
}

.statusModal {
margin-bottom: 10px;
font-size: 18px;
padding: 20px;
background-color: #2c3e50;
color: #fff;
font-weight: 600;
}

.statusText {
color: #2c3e50;
}

.sidebar li a{
color:#000000;
.successButton{
padding-left:100px;
}

#imeiStatusModal{
padding: 235px 222px 0 !important;
.closeButton {
padding-top: 10px;
}

#topcontrol {
color: #FFF;
z-index: 99;
width: 30px;
height: 30px;
font-size: 20px;
background: none repeat scroll 0% 0% #222;
position: relative;
right: 14px !important;
bottom: 11px !important;
border-radius: 3px !important;
color: #FFF;
z-index: 99;
width: 30px;
height: 30px;
font-size: 20px;
background: none repeat scroll 0% 0% #222;
position: relative;
right: 14px !important;
bottom: 11px !important;
border-radius: 3px !important;
}

#topcontrol:after {
top: -2px;
left: 8.5px;
content: "";
position: absolute;
text-align: center;
font-family: FontAwesome;
}
#topcontrol:hover{
background-color: #01ad1b;
top: -2px;
left: 8.5px;
content: "";
position: absolute;
text-align: center;
font-family: FontAwesome;
}

#topcontrol:hover {
background-color: #01ad1b;
}

0 comments on commit 270ecf0

Please sign in to comment.