Mercedes Sprint 2 - 15

WIP

HTML
View
Context
Info
Notes


        
        <header class="m-header">
    <a class="m-header__logo" href="#">
        <img src="/assets/images/m-logo.png" alt="">
    </a>

    <div class="m-header__nav">
        <div class="m-header__links">
            <a href="#" class="m-header__link  m-header__link--active">Proposte</a>
            <a href="#" class="m-header__link">Rifinanziamenti</a>
            <a href="#" class="m-header__link">myMobilityPass</a>
            <a href="#" class="m-header__link"><svg class="icon icon--user">
  <use xlink:href="../../assets/icons.svg#user" />
</svg>
</a>
        </div>
    </div>
</header>

<div class="m-sub-header">

    <div class="m-sub-header__img">
        <img src="/assets/images/sub-header-bg.jpeg" alt="">
    </div>

    <div class="m-sub-header__data-box">

        <div>
            <span>
					43
				</span> in lavorazione
        </div>

        <div>
            <span>
					43
				</span> in lavorazione
        </div>

        <div>
            <span>
					43
				</span> in lavorazione
        </div>

        <div>
            <span>
					43
				</span> in lavorazione
        </div>

    </div>

    <div class="m-sub-header__date">dicembre 2018</div>
    <a class="m-sub-header__cta" href="#">vedi statistiche</a>
</div>

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    <div class="row l-bottom">
        <div class="col-12 m-filter-controlls">

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--label">Tutte</span>
    <span class="a-filter-button--extra">
         
            (20)  
        
        

            <svg class="icon icon--filter">
  <use xlink:href="../../assets/icons.svg#filter" />
</svg>

            
            

        
    </span>
</a>

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--label">Urgenti</span>
    <span class="a-filter-button--extra">
         
            (20)  
        
        

            <svg class="icon icon--chat">
  <use xlink:href="../../assets/icons.svg#chat" />
</svg>

            
            
                <span class="a-filter-button__notification">
                    
    <div class="a-notification bg-azure ">
        3
    </div>

                </span>
            

        
    </span>
</a>

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--label">Assegnate a me</span>
    <span class="a-filter-button--extra">
         
            (20)  
        
        
    </span>
</a>

            <a href="#" class="a-filter-button">
    <span class="a-filter-button--icon">        
        <svg class="icon icon--pen">
  <use xlink:href="../../assets/icons.svg#pen" />
</svg>

    </span>
</a>

        </div>
    </div>
</div>

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    <div class="m-filter-container ">

        <div class="m-filter-container__wrapper">

        </div>

        <div class="m-filter-container__controls">
            <div class="m-footer-controls">

                <div class="m-footer-controls__child">

                    <div class="a-button">
                        Azzera
                    </div>

                    <div class="a-button  a-button--azure">
                        Conferma
                    </div>

                </div>

            </div>

        </div>

    </div>
</div>

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    <table class="m-table-list  m-table-list--row-hover">

        <thead class="m-table-list__header">
            <tr class="m-table-list__row">

                <td class="m-table-list__col  m-table-list__col--label">

                    proposta

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    arrivo

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    richiedente

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    prodotto finanziario

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    prodotto

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    esposizione

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                </td>

            </tr>
        </thead>

        <tbody class="m-table-list__data">

            <tr class="m-table-list__row">

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="1002007462">
                        1002007462
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="16-01-2019 12:21">
                        16-01-2019 12:21
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="Marta Andretti">
                        Marta Andretti
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="Leasing">
                        Leasing
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="Vettura">
                        Vettura
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="55.345,12 €">
                        55.345,12 €
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--actions">

                    <div class="m-action-controls">

                        <div class="m-action-controls__child">

                            <svg class="icon icon--loked">
  <use xlink:href="../../assets/icons.svg#loked" />
</svg>

                            <div class="m-action-controls__child__notification">

                                <div class="a-notification">
                                    2
                                </div>

                            </div>

                        </div>

                        <div class="m-action-controls__child">

                            <svg class="icon icon--arrow-up f-azure">
  <use xlink:href="../../assets/icons.svg#arrow-up" />
</svg>

                        </div>

                    </div>

                </td>

            </tr>

            <tr class="m-table-list__row">
                <td colspan="7" class="m-table-list__col  m-table-list__col-- bg-white">
                    <div class="m-accordion-row__wrapper">
                        <div class="m-accordion-row__col">
                            <div class="m-accordion-row__child">
                                <div class="m-action-controls">

                                    <div class="m-action-controls__child">

                                        <svg class="icon icon--loked">
  <use xlink:href="../../assets/icons.svg#loked" />
</svg>

                                        <div class="m-action-controls__child__notification">

                                            <div class="a-notification">
                                                3
                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>
                            <div class="m-accordion-row__child m-accordion-row__child-title">
                                Blocchi
                            </div>
                            <div class="m-accordion-row__child c-darkGray">
                                <p>Deroghe</p>
                            </div>
                        </div>
                        <div class="m-accordion-row__col">
                            <div class="m-accordion-row__child">
                                <div class="m-action-controls">

                                    <div class="m-action-controls__child">

                                        <svg class="icon icon--note">
  <use xlink:href="../../assets/icons.svg#note" />
</svg>

                                    </div>

                                </div>

                            </div>
                            <div class="m-accordion-row__child m-accordion-row__child-title">
                                Note
                            </div>
                            <div class="m-accordion-row__child">
                                <p>Bonino Marco</p>
                                <p class="c-darkGray">problema documenti</p>
                            </div>
                        </div>
                        <div class="m-accordion-row__col">
                        </div>
                        <div class="m-accordion-row__col">
                        </div>
                        <div class="m-accordion-row__col">
                            <div class="m-accordion-row__child">
                                <a class="c-azure" href="#">Riesegui</a>
                            </div>
                            <div class="m-accordion-row__child">
                                <a class="c-azure" href="#">Annulla</a>
                            </div>
                            <div class="m-accordion-row__child">
                                <a class="c-azure" href="#">Confronta</a>
                            </div>
                        </div>
                    </div>

                    <div class="m-accordion-row__controls">
                        <div class="m-footer-controls">

                            <div class="m-footer-controls__child">

                                <div class="a-button  a-button--azure">
                                    Consulta proposta
                                </div>

                            </div>

                        </div>

                    </div>

                </td>
            </tr>

            <tr class="m-table-list__row">

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="1002034341">
                        1002034341
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="16-02-2019 12:21">
                        16-02-2019 12:21
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="Rigoni Fausto">
                        Rigoni Fausto
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="Leasing">
                        Leasing
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="Vettura">
                        Vettura
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--label">

                    <div class="h-ellipsis" title="55.345,12 €">
                        55.345,12 €
                    </div>

                </td>

                <td class="m-table-list__col  m-table-list__col--actions">

                    <div class="m-action-controls">

                        <div class="m-action-controls__child">

                        </div>

                        <div class="m-action-controls__child">

                            <svg class="icon icon--arrow-down">
  <use xlink:href="../../assets/icons.svg#arrow-down" />
</svg>

                        </div>

                    </div>

                </td>

            </tr>

        </tbody>

    </table>

</div>


        {% render '@header' %}

{% render '@sub-header' %}

{% render '@filter-controls' %}

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    {% render '@filter-container', {
        "state": "closed"
    } %}
</div>

<div class="l-main-wrapper  l-spacing--v-margin-small-auto">
    {% render '@table-list--hover', tableList %}
</div>


        
            
            {
  "tableList": {
    "header": [
      {
        "label": "proposta",
        "type": "label"
      },
      {
        "label": "arrivo",
        "type": "label"
      },
      {
        "label": "richiedente",
        "type": "label"
      },
      {
        "label": "prodotto finanziario",
        "type": "label"
      },
      {
        "label": "prodotto",
        "type": "label"
      },
      {
        "label": "esposizione",
        "type": "label"
      },
      {
        "label": null,
        "type": "label"
      }
    ],
    "data": [
      [
        {
          "label": 1002007462,
          "type": "label"
        },
        {
          "label": "16-01-2019 12:21",
          "type": "label"
        },
        {
          "label": "Marta Andretti",
          "type": "label"
        },
        {
          "label": "Leasing",
          "type": "label"
        },
        {
          "label": "Vettura",
          "type": "label"
        },
        {
          "label": "55.345,12 €",
          "type": "label"
        },
        {
          "label": null,
          "type": "actions",
          "actions": [
            {
              "icon": "loked",
              "count": 2
            },
            {
              "icon": "arrow-up",
              "class": "f-azure"
            }
          ],
          "accordion": "accordion-row--sprint2-15"
        }
      ],
      [
        {
          "label": 1002034341,
          "type": "label"
        },
        {
          "label": "16-02-2019 12:21",
          "type": "label"
        },
        {
          "label": "Rigoni Fausto",
          "type": "label"
        },
        {
          "label": "Leasing",
          "type": "label"
        },
        {
          "label": "Vettura",
          "type": "label"
        },
        {
          "label": "55.345,12 €",
          "type": "label"
        },
        {
          "label": null,
          "type": "actions",
          "actions": [
            {},
            {
              "icon": "arrow-down"
            }
          ]
        }
      ]
    ]
  }
}

Handle: @mercedes-sprint2-15-accordion-aperto
Preview:
- With layout
- Component only
Filesystem Path: components/pages/45-2_15/Mercedes-Sprint2-15-Accordion-Aperto.nunj
References (5): @header, @sub-header, @filter-controls, @filter-container, @table-list--hover

There are no notes for this item.

Mercedes Sprint 2 - 15

Mercedes Sprint 2 6