design update
This commit is contained in:
parent
096752e3dd
commit
65ed6c932c
@ -1,9 +1,16 @@
|
||||
var id;
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
M.AutoInit();
|
||||
//initialize all modals
|
||||
$('.modal').modal();
|
||||
$('.modal').modal({
|
||||
dismissible: false
|
||||
});
|
||||
|
||||
$('.materialboxed').materialbox();
|
||||
$('.fixed-action-btn').floatingActionButton();
|
||||
|
||||
|
||||
if ($(window).width() > 600) {
|
||||
//large
|
||||
@ -116,6 +123,18 @@ $(document).on("click", ".collection-item", function() {
|
||||
$(this).addClass("active");
|
||||
});
|
||||
|
||||
$(".btncont").click(function() {
|
||||
$('.r1').animate({'margin-top': '0'}, 1000);
|
||||
});
|
||||
|
||||
$(".opt1").click(function() {
|
||||
$('.r1').animate({'margin-top': '-100%'}, 1000);
|
||||
$(".r2").css("display", "block");
|
||||
});
|
||||
|
||||
$(".opt2").click(function() {
|
||||
// $('.row').animate({'margin-top': '-100%'}, 1000);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
@ -1,18 +1,37 @@
|
||||
.opt1 {
|
||||
background-color: #ff5722 ;
|
||||
background-color: #f4511e;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.opt1:hover {
|
||||
background-color: #ff8a65;
|
||||
}
|
||||
|
||||
.opt2 {
|
||||
background-color: #03a9f4;
|
||||
background-color: #039be5 ;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.row {
|
||||
.opt2:hover {
|
||||
background-color: #4fc3f7;
|
||||
}
|
||||
|
||||
.r1 {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
margin-top: 100%;
|
||||
}
|
||||
|
||||
.r2 {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
background-color: forestgreen;
|
||||
display: none;
|
||||
margin-top: 50%;
|
||||
}
|
||||
|
||||
html, body {
|
||||
@ -20,6 +39,7 @@ html, body {
|
||||
margin: 0;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #161616;
|
||||
}
|
||||
|
||||
.ico {
|
||||
|
@ -34,17 +34,25 @@
|
||||
|
||||
<body>
|
||||
|
||||
<div class="row">
|
||||
<div class="row r1">
|
||||
<div class="col s12 m6 l6 opt1 waves-effect waves-dark" >
|
||||
<center><i class="material-icons ico" >file_upload</i></center>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m6 l6 opt2 waves-effect waves-dark">
|
||||
<div class="col s12 m6 l6 opt2 waves-effect waves-dark" onclick="M.toast({html: 'Not yet available'})">
|
||||
|
||||
<center><i class="material-icons ico">camera</i></center>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed-action-btn">
|
||||
<a class="btn-floating btn-large red">
|
||||
<i class="large material-icons blue-grey darken-4">arrow_back</i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Modal Structure -->
|
||||
<div id="modal1" class="modal">
|
||||
<div class="modal-content">
|
||||
@ -55,7 +63,7 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="/dash" class="modal-close waves-effect waves-red btn-flat">Return to Dashboard</a>
|
||||
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Continue</a>
|
||||
<a href="#!" class="modal-close waves-effect waves-green btn-flat btncont">Continue</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user