Dashboard Question

testing

by Kiran Duggal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="mainPageDiv">
    <div class="dashBoardContainer">
        <div class="dbContainer1 column">
            <div class="flip">
                <div class=" card">
                    <div class="face front">
                        <div class=" portlet   ">
                            <div class="portlet-header"> <span class="red text-uppercase"> Drag me </span>

                                <div class="dropdown pull-right "> <span class="pull-right ">
                            <span class=""  id="edit-changes"><a href="#" > Edit <span class="glyphicon glyphicon-pencil pull-right flipLink" > </span> 
                                    </a>
                                    </span>
                                    </span>
                                    <hr class="hrflipForm">
                                </div>
                                <!-- portlet-content -->
                            </div>
                            <div class="portlet-content lastViewedArticle ">
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text</div>
                            <!-- portlet-header -->
                        </div>
                        <!-- portlet- -->
                    </div>
                    <!-- moveOnchange-->
                    <div class="face back">
                        <div class="inner">
              ...

CSS

.mainPageDiv{
    min-height:100%,
    width:auto;
    margin:0  auto;
    
}

.dashBoardContainer {
    /*background lightcyan;*/
    width: 100%;
    overflow: hidden;
    padding: 15px 0px 10px 0px;
    position:absolute;
    border: dashed 2px red;
    overflow-y: scroll;
    background: #efefef;
}
.dbContainer1, .dbContainer2, .dbContainer3 {
    position:relative;
    margin: 10px;
    height: 100%;
    padding:10px;
}
.column {
    /* height: 100%; */
    margin:10px;
    width: 100%;
    border: solid green 2px;
}
.dbContainer1 {
    width: 40%;
    float: left;
    border: dotted 1px red;
}
.dbContainer2 {
    width: 40%;
    float: left;
    border: dotted 1px green;
}
.portlet:hover {
    /* cursor: pointer;
        cursor: hand;*/
    -webkit-box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.3);
    box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.3);
}
/************* Flip and show Form. ************/
 .flip {
    -webkit-perspective: 800;
    perspective: 800;
    position: relative;
}
.flip .card.flipped {
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}
.flip .card {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
    /* min-height: 206px; */
}
.flip .card .face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    height: 100%;
}
.flip .card .front {
    position: absolute;
    width: 100%;
    z-index: 1;
    height: auto;
    /*border: solid red 1px;*/
}
.flip .card .back {
    height: auto;
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
    /*border: solid lightseagreen 1px;*/
}

JavaScript

$('#edit-changes').on('click', function () {
          $('.back').css('transform', 'rotateY(0deg)');
          $('.front').css('transform', 'rotateY(180deg)');
      });

      $('#save-changes').on('click', function () {
          $('.front').css('transform', 'rotateY(0deg)');
          $('.back').css('transform', 'rotateY(180deg)');
      });




$(function () {





      $(".column").sortable({
          connectWith: ".column",
          handle: ".portlet-header",
          cancel: ".portlet-toggle",
          placeholder: "portlet-placeholder ui-corner-all"
      });


      $(".portlet")
          .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
          .find(".portlet-header")
          .addClass("ui-widget-header ui-corner-all")
      /* .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"); */

      $(".portlet-toggle").click(function () {
          var icon = $(this);
          icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
          icon.closest(".portlet").find(".portlet-content").toggle();
      });
  });



  /*************  layout styling ***********/