Interface

by toubia95

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">TIXEM</a>
      
    </nav>

    <div class="container-fluid">
      <div class="row">
       <div class="col-8">
  <div class="form-group">
    <textarea class="form-control" id="editeur" rows="3"></textarea>
  </div>
      </div>
      <div class="col-4">
 <div id="accordion" role="tablist">
  <div class="card">
    <div class="card-header" role="tab" id="fichier">
      <h6 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Fichier
        </a>
      </h6>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="fichier" data-parent="#accordion">
      <div class="card-body">

      

        <label class="btn btn-primary btn-block">
    Importer<input type="file" style="display: none;">
</label>
<div class="form-group row">
    <label for="idno" class="col-sm-3 col-form-label col-form-label-sm">N°</label>
    <div class="col-sm-9"><input type="text" class="form-control form-control-sm" id="idno" placeholder="IDNO"></div>
    <label for="titre" class="col-sm-3 col-form-label col-form-label-sm">Titre</label>
    <div class="col-sm-9"><input type="text" class="form-control form-control-sm" id="titre" placeholder="TITRE"></div>
    </div>
  </div>


    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="outils">
      <h6 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Outils
        </a>
      </h6>
    </div>
    <div...

CSS

/* https://getbootstrap.com/docs/4.0/getting-started/introduction/ */
/* https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3 */
body {margin-top: 70px;}
textarea {width:100%; height: 100%; min-height: 300px;}
input[type="text"] {margin-bottom: 8px;}

JavaScript

// We can attach the `fileselect` event to all file inputs on the page
  $(document).on('change', ':file', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
  });

  // We can watch for our custom `fileselect` event like this
  $(document).ready( function() {
      $(':file').on('fileselect', function(event, numFiles, label) {

          var input = $(this).parents('.input-group').find(':text'),
              log = numFiles > 1 ? numFiles + ' files selected' : label;

          if( input.length ) {
              input.val(log);
          } else {
              if( log ) alert(log);
          }

      });
  });