Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
HTML
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<div class="top">
    <div class="header">
      <center> <img class="img" src="https://tdn.totvs.com/download/attachments/732664978/log.png?version=1&modificationDate=1673393212156&api=v2" alt=""> </center>

    </div>
  </div>
  <div class="content">
    <div class="date"> <br>
      <div>JAN<<div>ENE</div>
      <div class="day">6</div>
    </div>
    <div class="article"> <br>
      <h1> ✒️ RegrasReglas comcon multiníveismultiniveles de ocultaçãoocultación y eedición ediçãocondicionales condicionaisen nala telapantalla de Atividades<Actividades</h1>
      <br>
      <span class="badge badge-melhoria">MELHORIA<>MEJORA</span>
      <br> <br>

      <table>
        <colgroup>
          <col span="2" class="day">
          <col>
          <col>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead>


          <tr>

            <th scope="row">Produto<>Producto</th>
            <td>TOTVS CRM GestãoGestión de Clientes<clientes</td>

          </tr>
          <tr>

            <th scope="row">Módulo</th>
            <td>Personalização<td>Personalización </td>

          </tr>
          <tr>

            <th scope="row">Ambiente<>Entorno</th>
            <td>Funcionalidades </td>
          </tr>
          <tr>

            <th scope="row">Identificador</th>
            <td>ME260520220839b </td>
          </tr>
          <tr>
            <th scope="row">Ticket/Issue</th>
            <td>DTCRMSD-1104 </td>
          </tr>
          <tr>

      </table>
      <br>
      <p> AsLos equipesequipos de vendasventas estãosiempre sempreestán sobrecarregadassobrecargados comcon oel número de atividadesactividades que precisamnecesitan fazerhacer. OEl problema ées que, àsa vezesveces, acabamacaban preenchendocompletando campos que nãono sãoson relevantes para suassus atividadesactividades ouy esquecendose olvidan de preenchercompletar campos importantes. TudoTodo issoesto acaba causandoocasionando maismás trabalhotrabajo para ael equipeequipo de vendasventas, que ya temtiene muitomucho opara que fazerhacer. Pensando nissoen esto, agoraahora ées possívelposible condicionar ala exibiçãoexhibición ey ediçãoedición de atividadesactividades a partir de regrasreglas. Este documento olo guiará por peloel processoproceso de uso dade melhoriamejora.      </p>
      <div class="pause" id="i">📍 Onde>📍 ¿Dónde podepuede ser encontradoencontrarse?</div>
      <p>
      <ol>
        <li> Módulo PersonalizaçãoPersonalización </li>
        <li> Funcionalidades </li>
  <li> Activities </li> 
 <li> Card formulário </li>  
             </ol>
      </p>

      <div class="pause">🔍  O¿Qué que mudoucambió?</a></div>
      <p> Disponibilizamos uma seção no Hemos puesto a disposición una sección en el recurso de funcionalidades para que sejasea possívelposible cadastrarregistrar, editar ey removereliminar regrasreglas de exibiçãoexhibición ey/ouo ediçãoedición condicionadas a umauna expressãoexpresión de validaçãovalidación. As Las açõesacciones possíveisposibles para modificación de alteraçãolos dosestatus estadosde doslos elementos quandocuando ala regraregla condicional forsea atendida sãoson: <br> <br>

<strong> Ocultar - </strong>  Faz com que o Oculta el elemento sejaen ocultadoel no formulárioformulario <br><br>

<strong> VisívelVisible -  </strong>   OEl elemento selecionadoseleccionado será visible visívelen noel formulárioformulario <br><br>

<strong>Tornar<strong>Dejar editáveleditable -  </strong>  OEl elemento poderápodrá sereditarse editadoen empantalla tela <br><br>

<strong>Tornar<strong>Dejar somentesolamente leituralectura -  </strong>  Determina Faz com que oel elemento no nãopueda possaeditarse, seres editadodecir, ousolo seja,se permitirá la somentelectura leiturade dala informaçãoinformación presente noen el atributo. <br><br>

ExemploEjemplo de umauna ocultaçãoocultación àa partir de umauna regraregla condicional:<br> 

 

QuandoCuando oel tipo de atividadeactividad forsea "e-mail", queroquiero que oculte oel elemento de telapantalla "Local". Para todos oslos outrosotros tipos de atividadesactividades, estesestos campos devemdeben sermostrarse exibidos normalmente. </p>                            <div class="box info-box">
            <i class="fa fa-info-circle">             </i>
            <strong>Info</strong>
          <p>A<p>La regraregla condicional aplica mudançacambio de comportamentocomportamiento en noslos fomuláriosfomularios dade web ey mobile.
          </div><div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733191203/gif%20regras%20%281%29.gif?version=1&modificationDate=1673805185471&api=v2" alt="Image" height="80%" width="100%"> </div>        
<br>

<div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733191203/gif%20regras%202%20%282%29.gif?version=1&modificationDate=1673807513697&api=v2" alt="Image" height="80%" width="100%"> </div>  

<br>
 <p> ComCon ala regraregla aplicada, vocêusted podepuede editar, borrar excluiry esi casofuera necessárionecesario, atéincluso desabilitardeshabilitar. </p> <br>       <div> <img class="img3" src="https://tdn.totvs.com/download/attachments/733191203/gif%20regras%203.gif?version=1&modificationDate=1673808144650&api=v2" alt="Image" height="80%" width="100%">     
     

<p>Adicionamos<p>Agregamos novosnuevos íconesíconos de statusestatus de visualizaçãovisualización ey ediçãoedición, que mostrammuestran instantaneamenteinstantáneamente quaislos campos que sãoson objetosobjeto de regrasreglas condicionaiscondicionales. EstesEstos íconos íconesse sãomuestran exibidosen nala seçãosección de personalizaçãopersonalización dodel formulárioformulariopossibilitandopermitiendo tertener umun panorama de statusestatus ey açãoacción realizada atravéspor medio de regrasreglas.  

 <div> <center><img class="img3" src="https://tdn.totvs.com/download/attachments/733191203/Sem-t%C3%ADtulo-1.png?version=1&modificationDate=1673811615851&api=v2" alt="Image" height="60%" width="60%"> </center> </div>                 
<br>
 </div>   
HTML
<style>

 #title-text {
	display: none !important;}   @import "compass/css3";  @import "compass/css3";

* {
  box-sizing: border-box;
  font-family: lato;
}



blockquote {
  margin: 3%;
  border-left: 10px solid #363636;
  padding: 2%;
  color: #222;
  background: #fff;
  font-style: italic;
  line-height: 130%;
}



.top {
  width: 100%;
  background: #363636;
  
}

.img {
image-resolution: 5px 5px 9px;
image-rendering: auto;
image-orientation:0deg
}

.header {
  max-width: 1200px;
  width: 98%;
  height: 7em;
  margin: 0px auto;
  overflow: hidden;

  
  h1 {
    text-align: center;     
    font-weight: bold;     
    color: #fff;
    padding: 20px;
   font-size: 22px;

     div {
      margin: 0;
      font-weight: normal;
      font-size: 1.8em;
    }
  }
  .author {
    font-size: 0.8em;
    font-weight: normal;
    border-top: 1px dashed #555;
    border-bottom: 1px dashed #555;
    max-width: 160px;
    text-align: center;
    margin: -1em auto 0 auto;
    padding: 0.3em;
    text-transform: uppercase;
    color: #ccc;
  }
}

.content {
  max-width: 750px;
  margin:0px auto;
  padding: 0;
}

.date {
  float: left;
  width: 10%;
  color: #444;
  text-align: center;
  div {
    margin: 0;
    line-height: 50%;
  }}
  .day {
    float: left;
    margin-top: 0.1em;
    width: 100%;
    color: #FEAC0E;
    font-size: 200%;
  }
}

.date-line {
  display: none;
}

.article {
  width: 90%;
  margin: 0 0 6em 0;
  float: left;
  padding: 0 1.3em 0 1.3em;
  border-left: 5px solid #FEAC0E;
 background: rgb(247, 247, 252);
 
  }
  h2 {
    font-weight: normal;       
    font-size: 22px;
   font-weight: bold;
   color: #555555;
    margin: 0;
  }
  h3 {
    font-weight: normal;
    font-size: 16px;
    color: #888;
    font-style: italic;
    margin: 0 0 1em 0;
  }
  p {
    margin: 0;
    padding-top: 8px;
    color: #555;
    text-align: justify;
    font-size: 16px;
    line-height: 150%;
    
  }

li{

  font-size: 16px;
  color: #555555;
}    

div{
    font-style: 16px;
    color: #555;
  }
  .firstpara {
    text-indent: 0;
    font-size: 16px;
  }
  .pause {
    margin: 2em auto 2em auto;
    color: #555555;
    width: 60%;
    padding: 10px;
    text-align: center;
   font-size: 20px;
 

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .firstcharacter {
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    line-height: 0.6em;
    padding-top: 0.12em;
    padding-right: 0.1em;
    padding-left: 0;
  }
}

.footer {
  max-width: 1200px;
  width: 98%;
  height: 50px;
  margin: 0px auto;
  overflow: hidden;
  border-top: 1px solid #ccc;}
  .copy {
    float: right;
    font-style: italic;
    color: #888;
    padding: 1% 1% 0 0;
  }
}

.prev a,
.next a {
  position: fixed;
  top: 9.6em;
  padding: 1em;
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.prev a:hover,
.next a:hover {
  background: #fff;
}
.prev a {
  left: 0.7em;
}
.next a {
  right: 0.7em;
}

@media only screen and (max-width: 450px) {
  .content {
    margin-top: 2em;
  }
  .social {
    display: none;
  }
  .date {
    display: none;
  }
  .date-line {
    display: inline;
  }
  .article {
    width: 100%;
    margin: 0 auto 2em auto;
    border-left: none;
    padding-bottom: 2em;
    border-bottom: 1px solid #ccc;
    p {
      font-size: 1.2em;
    }
  }
  .header {
    height: auto;
    position: fixed;
    top: 0;
    padding: 0;
    margin: 0;
    background: rgb(34, 16, 171)
     
    h1 {
      text-align: center;
      width: 100%;
      margin: 0;
      color: #f1f1f1;
      span {
        font-size: 80%;
      }
    }
    .author {
      display: none;
    }
  }
  .footer {
    text-align: center;
    padding: 3%;
    height: 40px;
    .copy {
      float: none;
    }
  }
  .prev a,
  .next a {
    position: relative;
    margin-bottom: 2em;
    text-align: center;
    top: 0;
  }
  .prev a {
    float: left;
    width: 40%;
  }
  .next a {
    float: right;
    width: 40%;
  }s
.table {
font-family: lato;
background-color: #fff;

}
  
#wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  inset: 0;
  justify-content: center;
  align-items: center;
}}
.flexWrap {
  display: flex;
  gap: 2px;
  width: 110px;
}
#disclaimer {
  font-family: sans-serif;
  color: #333333;
  position: fixed;
  top: 5%;
  right: 5%;
  width: 5%;
} 

.badge-primary {
  color: #8686FF;
  background-color: #F3F3FF;
    border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold  }

.badge-secondary{
  color: #ebeef0;
  background-color: #2abe74;
    border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold 

}

.badge-novo {
  color: #fff;
  background-color: #20d691;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold  }

.badge-danger{
  color: #ebeef0;
  background-color: #e93e9c;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold }

.badge-manutencao {
  color: #FFF;
  background-color: #efc307;
  border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}

.badge-melhoria {
  color: #FFF;
  background-color: #6f60f6;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}
.badge-light {
  color: #8686FF;
  background-color: #F3F3FF
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold;
}
.badge-dark {
  color: #ebeef0;
  background-color: #064118;
   border-radius: 10px;
  padding: 6px 7px;
 font-size: 9px;
font-weight: bold } 


body {
  font-family: lato;
}
table {
  border-collapse: collapse;
}
th {
  text-align: left;
  background-color: #363636;
  color: #fff;
}
caption {
  font-size: 1.5rem;
  text-align: left;
  padding-bottom: 1rem;
}
td, th {
  padding: 0.5rem;
  border: 3px solid #fff;
}
tbody tr:nth-child(odd),
tfoot tr:nth-child(even) {
   background-color: #fff;
}
tfoot tr td:first-child {
  border: none;
  background-color: white;
}
tfoot {
border-top: 5px solid #fff;
}

.img2 {
   width:50%;
    height:auto;
    padding:2%;
    margin-bottom:4%;
    align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto }

 #f7f7fc;
  }  



}
container{
    width: 50%;
}
.borderbox{
  border: 1px dashed #ebebeb;
  width:45%;
  margin: 50px auto;
  border-radius: 8px;
  border-width:2px;
}
.box{
  position:relative;
  width:auto;
  height:auto;
  margin: 50px auto;
  padding: 20px;
  box-shadow: 0px 1px 8px 1px #ebebeb;
  border-radius: 8px;
}
.sucess-box{
    border-left: solid 5px #3FC43C;
    background-color: #fff;

} .info-box{
    border-left: solid 5px #585EC2;
    background-color: #fff;
}
.warning-box{
    border-left: solid 5px #EFA162;
    background-color: #fff;
}
.error-box{
    border-left: solid 5px #F32D70;
    background-color: #fff;
}
.fa{
    padding-right:10px;
}
.fa-check-circle{
  color: #3FC43C;
} 
.fas fa-info-circle
{
  color: #585EC2;
}
.warning-box .fa-exclamation-triangle{
  color: #EFA162;
}
.error-box .fa-exclamation-triangle{
  color: #E63470;
}
p{
  padding:0px 28px;
}
.time{
  color:#9b9b9b;
}
.fa-close{
    color:#BCC4CD;
}
.close{
  position:absolute;
  top: 20px;
  right:20px; 
}
.link1,
.link2,
.link3,
.link4{
  opacity:0;
  margin-left:20px;
  text-decoration:none;
}
.link1{
  color:#3FC43C;
}
.link2{
  color:#585EC2;
}
.link3{
  color:#EFA162;
}
.link4{
  color:#E63470;
}
.box:hover a{
  opacity:1;
}
 </style>
HTML
<div class="speech-row">
    <div class="speech-img"><a href="https://totvscst.zendesk.com/hc/pt-br/#home" target="_blank"><img src="https://tdn.totvs.com/download/attachments/731900022/01.png?version=1&modificationDate=1673107757259&api=v2" alt="AssistenteAsistente virtual"></a></div>
    <div class="speech-bubble"><b>Olá><b>¡Hola!👋</b> SouSoy a Carolina, assistenteasistente virtual dade TOTVS. Ainda¿Aún temtiene dúvidasdudas? Acesse¡Acceda a la central de ajudaayuda ey explore todos oslos conteúdoscontenidos oferecidosofrecidos pelapor TOTVS CRM - GestãoGestión de Clientesclientes!  </div>
  </div>
HTML
<style>  body {
  margin: 0; // 1
  font-family: lato;
  font-size: 16px;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: #555555
  text-align: left; // 3
  background-color: $body-bg; // 2
}

.speech-bubble {
  max-width: 300px;   
  font-family: lato;   
  color: #555555;
font-size: 16px;
   margin: 1rem;
  padding: 1rem;
  position: relative;
  border: 2px solid #FEAC0E;
  background: #fff;
  border-radius: 0.4em;
}
.speech-row {
  display: flex;
  justify-content: center;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}

.speech-img img {
  border-radius: 50%;
}
img {
  vertical-align: middle;
  border-style: none;
}
.speech-img {
  align-self: center;
  max-width: 100%;
  height: auto;
}
*,
::after,
::before {
  box-sizing: border-box;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
}
.speech-bubble:before,
.speech-bubble:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-right-color: #FEAC0E;
  border-left: 0;
  margin-top: -20px;
  margin-left: -20px;
}

.speech-bubble:after {
  border-right-color: #fff;
  margin-left: -18px;
  z-index: 1;
}
    </style>