filhocf / ideax

A small innovation system made with Django
Other
2 stars 10 forks source link

Refatoração da lista de ideias #13

Closed arthurguima closed 6 years ago

arthurguima commented 6 years ago

Formato Atual: image

Formato sugerido:

image

arthurguima commented 6 years ago
<div class="idea ">
  <div class="idea-header">
    <h1 class="ideia-title">

        <a onclick="openModal('/idea/6/')">Avaliar soluções alternativas para Qualificação de Dados</a>

    </h1>

    <div class="idea-options">

      <input class="menu-input" type="checkbox" id="menu6">
      <label for="menu6">
      <svg class="svg-inline--fa fa-bars fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg><!-- <i class="fas fa-bars"></i> -->
      </label>

            <div class="options-content">
              <ul>
                <li><a href="/idea/6/changephase/1/">Discussão</a></li>
                <li><a href="/idea/6/changephase/2/">Avaliação</a></li>
                <li><a href="/idea/6/changephase/3/">Aprovação</a></li>
                <li><a href="/idea/6/changephase/4/">Desenvolvimento</a></li>
                <li><a href="/idea/6/changephase/5/">Feita</a></li>
                <li><a href="/idea/6/changephase/6/">Arquivada</a></li>
                <li><a href="/idea/6/changephase/7/">Pausada</a></li>
                <li class="actions">
                  <div class="action edit">
                    <button class="js-update-idea" data-url="/idea/6/edit/"><svg class="svg-inline--fa fa-edit fa-w-18" aria-hidden="true" data-prefix="far" data-icon="edit" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg><!-- <i class="far fa-edit"></i> --></button>
                  </div>
                  <div class="action delete">
                    <button class="js-remove-idea" data-url="/idea/6/remove/"><svg class="svg-inline--fa fa-trash-alt fa-w-14" aria-hidden="true" data-prefix="far" data-icon="trash-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M192 188v216c0 6.627-5.373 12-12 12h-24c-6.627 0-12-5.373-12-12V188c0-6.627 5.373-12 12-12h24c6.627 0 12 5.373 12 12zm100-12h-24c-6.627 0-12 5.373-12 12v216c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12V188c0-6.627-5.373-12-12-12zm132-96c13.255 0 24 10.745 24 24v12c0 6.627-5.373 12-12 12h-20v336c0 26.51-21.49 48-48 48H80c-26.51 0-48-21.49-48-48V128H12c-6.627 0-12-5.373-12-12v-12c0-13.255 10.745-24 24-24h74.411l34.018-56.696A48 48 0 0 1 173.589 0h100.823a48 48 0 0 1 41.16 23.304L349.589 80H424zm-269.611 0h139.223L276.16 50.913A6 6 0 0 0 271.015 48h-94.028a6 6 0 0 0-5.145 2.913L154.389 80zM368 128H80v330a6 6 0 0 0 6 6h276a6 6 0 0 0 6-6V128z"></path></svg><!-- <i class="far fa-trash-alt"></i> --></button>
                  </div>

                </li>

              </ul>
            </div>
          </div>
  </div>
  <div class="idea-desc">
    <p><span class="bold">Descrição: </span>Nos clientes da Dataprev tem tornado-se frequente a demanda por Qualificação de Dados das bases. Entretanto, temos percebido durante o cenário tecnológico de processamento/execuções que o desempenho está muito aquém do esperado e acaba por tornar-se moroso. Necessitamos de soluções robustas, mas que também possam entregar o resultado de forma rápida ou com desempenho considerável.</p>
  <p class="float-right idea-date">
      06/03/2018
    </p></div>
  <div class="container">
  <div class="row">
  <div class="idea-footer">

      <div class="phase pull-left col-sm">
          <div class="phase-symbol -phase">
            <svg class="svg-inline--fa  fa-w-16 fa-" aria-hidden="true" data-prefix="fas" data-icon="null" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><g><path fill="currentColor" d="M156.5,447.7l-12.6,29.5c-18.7-9.5-35.9-21.2-51.5-34.9l22.7-22.7C127.6,430.5,141.5,440,156.5,447.7z M40.6,272H8.5 c1.4,21.2,5.4,41.7,11.7,61.1L50,321.2C45.1,305.5,41.8,289,40.6,272z M40.6,240c1.4-18.8,5.2-37,11.1-54.1l-29.5-12.6 C14.7,194.3,10,216.7,8.5,240H40.6z M64.3,156.5c7.8-14.9,17.2-28.8,28.1-41.5L69.7,92.3c-13.7,15.6-25.5,32.8-34.9,51.5 L64.3,156.5z M397,419.6c-13.9,12-29.4,22.3-46.1,30.4l11.9,29.8c20.7-9.9,39.8-22.6,56.9-37.6L397,419.6z M115,92.4 c13.9-12,29.4-22.3,46.1-30.4l-11.9-29.8c-20.7,9.9-39.8,22.6-56.8,37.6L115,92.4z M447.7,355.5c-7.8,14.9-17.2,28.8-28.1,41.5 l22.7,22.7c13.7-15.6,25.5-32.9,34.9-51.5L447.7,355.5z M471.4,272c-1.4,18.8-5.2,37-11.1,54.1l29.5,12.6 c7.5-21.1,12.2-43.5,13.6-66.8H471.4z M321.2,462c-15.7,5-32.2,8.2-49.2,9.4v32.1c21.2-1.4,41.7-5.4,61.1-11.7L321.2,462z M240,471.4c-18.8-1.4-37-5.2-54.1-11.1l-12.6,29.5c21.1,7.5,43.5,12.2,66.8,13.6V471.4z M462,190.8c5,15.7,8.2,32.2,9.4,49.2h32.1 c-1.4-21.2-5.4-41.7-11.7-61.1L462,190.8z M92.4,397c-12-13.9-22.3-29.4-30.4-46.1l-29.8,11.9c9.9,20.7,22.6,39.8,37.6,56.9 L92.4,397z M272,40.6c18.8,1.4,36.9,5.2,54.1,11.1l12.6-29.5C317.7,14.7,295.3,10,272,8.5V40.6z M190.8,50 c15.7-5,32.2-8.2,49.2-9.4V8.5c-21.2,1.4-41.7,5.4-61.1,11.7L190.8,50z M442.3,92.3L419.6,115c12,13.9,22.3,29.4,30.5,46.1 l29.8-11.9C470,128.5,457.3,109.4,442.3,92.3z M397,92.4l22.7-22.7c-15.6-13.7-32.8-25.5-51.5-34.9l-12.6,29.5 C370.4,72.1,384.4,81.5,397,92.4z"></path><circle fill="currentColor" cx="256" cy="364" r="16.3333"><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="r" values="28;14;28;28;14;28;"></animate><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="1;0;1;1;0;1;"></animate></circle><path fill="currentColor" opacity="1" d="M263.7,312h-16c-6.6,0-12-5.4-12-12c0-71,77.4-63.9,77.4-107.8c0-20-17.8-40.2-57.4-40.2c-29.1,0-44.3,9.6-59.2,28.7 c-3.9,5-11.1,6-16.2,2.4l-13.1-9.2c-5.6-3.9-6.9-11.8-2.6-17.2c21.2-27.2,46.4-44.7,91.2-44.7c52.3,0,97.4,29.8,97.4,80.2 c0,67.6-77.4,63.5-77.4,107.8C275.7,306.6,270.3,312,263.7,312z"><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="1;0;0;0;0;1;"></animate></path><path fill="currentColor" opacity="0" d="M232.5,134.5l7,168c0.3,6.4,5.6,11.5,12,11.5h9c6.4,0,11.7-5.1,12-11.5l7-168c0.3-6.8-5.2-12.5-12-12.5h-23 C237.7,122,232.2,127.7,232.5,134.5z"><animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="0;0;1;1;0;0;"></animate></path></g></svg><!-- <i class="fas fa-"></i> -->
          </div>
          <p class="phase-name"></p>
      </div>

      <div class="col-sm">
    <div class="like-menu float-right">
        <div class="liked ">
          <a class="like" onclick="vote('/idea/6/like/', '.liked_idea_6', '.disliked_idea_6', '.like_6', '.dislike_6')" href="javascript:void(0)">
            <svg class="svg-inline--fa fa-thumbs-up fa-w-16 like_6" aria-hidden="true" data-prefix="far" data-icon="thumbs-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z"></path></svg><!-- <i class=" far  fa-thumbs-up like_6"></i> -->
            <p class="liked_idea_6 ">
              0
            </p>
          </a>
        </div>
        <div class="disliked ">
          <a class="dislike" onclick="vote('/idea/6/dislike/', '.liked_idea_6', '.disliked_idea_6', '.like_6', '.dislike_6')" href="javascript:void(0)">
            <svg class="svg-inline--fa fa-thumbs-down fa-w-16 dislike_6" aria-hidden="true" data-prefix="far" data-icon="thumbs-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M466.27 225.31c4.674-22.647.864-44.538-8.99-62.99 2.958-23.868-4.021-48.565-17.34-66.99C438.986 39.423 404.117 0 327 0c-7 0-15 .01-22.22.01C201.195.01 168.997 40 128 40h-10.845c-5.64-4.975-13.042-8-21.155-8H32C14.327 32 0 46.327 0 64v240c0 17.673 14.327 32 32 32h64c11.842 0 22.175-6.438 27.708-16h7.052c19.146 16.953 46.013 60.653 68.76 83.4 13.667 13.667 10.153 108.6 71.76 108.6 57.58 0 95.27-31.936 95.27-104.73 0-18.41-3.93-33.73-8.85-46.54h36.48c48.602 0 85.82-41.565 85.82-85.58 0-19.15-4.96-34.99-13.73-49.84zM64 296c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm330.18 16.73H290.19c0 37.82 28.36 55.37 28.36 94.54 0 23.75 0 56.73-47.27 56.73-18.91-18.91-9.46-66.18-37.82-94.54C206.9 342.89 167.28 272 138.92 272H128V85.83c53.611 0 100.001-37.82 171.64-37.82h37.82c35.512 0 60.82 17.12 53.12 65.9 15.2 8.16 26.5 36.44 13.94 57.57 21.581 20.384 18.699 51.065 5.21 65.62 9.45 0 22.36 18.91 22.27 37.81-.09 18.91-16.71 37.82-37.82 37.82z"></path></svg><!-- <i class=" far  fa-thumbs-down dislike_6"></i> -->
            <p class="disliked_idea_6">
              0
            </p>
          </a>
        </div>
      </div>
    </div>

      <!--  -->
    </div>
  </div>
</div>

</div>
arthurguima commented 6 years ago
div.idea {
    display: flex;
    flex-flow: column;
    justify-content: center;
    border-radius: 14px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin: 0 0 50px 0;
    padding: 10px 15px;
    background: #fbfbfb;
    width: 525px;
    min-height: 300px;
    position: relative;
    border: 1px solid #E1E1E1;
    box-shadow: 2px 2px 3px 0 rgba(117, 124, 129, 0.12);
    -webkit-box-shadow: 2px 2px 3px 0 rgba(117, 124, 129, 0.12);
    -moz-box-shadow: 2px 2px 3px 0 rgba(117, 124, 129, 0.12);
    justify-content: space-around;
}

.idea-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E1E1E1;
    padding-bottom: 15px;
    min-height: 50px;
}

h1.ideia-title {
    color: #000000;
    /* padding: 10px; */
    /* margin: 5px; */
}

.idea-options {
    font-size: 1.65em;
    font-weight: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-self: flex-start;
    padding-top: 17px;
}

.idea-desc {
    text-align: left;
    padding: 8px 10px 0px 10px;
    font-size: 0.9em;
    color: #524b4b;
}

.idea-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    width: 100%;
    border-top: 1px solid #E1E1E1;
    padding: 20px 0 5px 0;
    max-height: 40px;
}

.like-menu {
    display: flex;
    align-items: center;
    /* margin-left: 326px; */
    font-size: 1.3em;
    width: 100px;
    /* text-align: right; */
}
filhocf commented 6 years ago

You can open a issue or to do a PR to this.