frsr merge edit and cam screens

frsr merge edit and cam screens

by pj_js15

HTML

<html>
<head>

</head>
<body>
  <div class="main-container">
    
    <div class="open-gallery">
      Image Gallery
    </div>
    
    <div class="gallery-container"></div>
    
    <div class="edit-screen-container">
      <div class="responsive-fieldset">
        <label>Type</label>
        <input type="text" />
      </div>
      <div class="responsive-fieldset">
        <label>Category</label>
        <select>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
      </div>
      
      <div class="fieldset">
        <label>Description</label>
        <textarea></textarea>
      </div>
      
      <div class="responsive-fieldset">
        <label>Type</label>
        <input type="text" />
      </div>
      <div class="responsive-fieldset">
        <label>Category</label>
        <select>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
      </div>
      
    </div>  
    
  </div>
</body>
</html>

CSS

*{
  font-family: Arial;
}
.open-gallery{
  border: 1px solid #CCC;
  background: #CCC;
  color: #666;
  text-align: center;
  padding: 10px;
}
.gallery-container{
  display: none;
  height: 200px;
}
.edit-screen-container{
  height: 500px;
}
.inline-fieldset{
  display: inline-block;
  padding: 10px 5px;
  width: 48%;
}
.fieldset,
.responsive-fieldset{
  display: block;
  padding: 10px 5px;
}
.inline-fieldset label,
.fieldset label,
.responsive-fieldset label{
  display: block;
  font-size: 13px;
  text-transform: uppercase;
}
select, input, textarea{
  border: none;
  border-bottom: 1px solid #666;
  margin-top: 10px;
  min-width: 150px;
  width: 97%;
  width: 99%;
  outline: none;
  padding: 5px;
}
textarea {
  resize: vertical;
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) {
  
  .responsive-fieldset{
    display: inline-block;
    padding: 10px 5px;
    width: 48%;
  }
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
  
  .responsive-fieldset{
    display: block;
  }

  
}

JavaScript

$('.open-gallery').click(function(){
	$('.gallery-container').slideToggle();
  //$(this).hide();
});