call-history.html

<div class="col-lg-12 control-section">
    <div class="layoutWrapper">
        <div class="speaker">
            <div class="camera"></div>
        </div>
        <div class="layout">
            <div id="list-container">
                <div class="tabContainer">
                    <!-- Tab element -->
                    <div id="tab" tabindex="1"></div>
                </div>
                <!-- ListView elements -->
                <div id="all" style="display: none"></div>
                <div id="received" style="display: none"></div>
                <div id="missed" style="display: none"></div>
            </div>
        </div>
        <div class="outerButton"> </div>
    </div>
</div>
<div id="action-description">
    <p>This sample demonstrates the call history application using listview. Click on the checklist to filter the data in contacts
        list.
    </p>
</div>

<div id="description">
    <p>This sample filters out the data from listview based on the data selected from the checklist. Here, listview utilizes
        the
        <code>template</code>
        <code>showIcon</code> properties to repesent the call history application. The Tab component is used in this sample for navigation purposes.
    </p>
</div>
<style>
    .e-list-item {
        cursor: pointer;
    }

    .layoutWrapper.e-device-layout {
        visibility: visible;
    }

    .e-visbile-layer {
        visibility: visible;
    }

    .layoutWrapper {
        border: 1px solid black;
        width: 285px;
        height: 505px;
        margin: auto;
        margin-bottom: 15px;
        border-radius: 28px;
        position: relative;
        visibility: hidden;
    }

    .speaker {
        border: 1px solid black;
        border-radius: 5px;
        width: 33.33333333%;
        height: 5px;
        margin: 15px auto 0px auto;
        position: relative;
    }

    .outerButton {
        width: 30px;
        height: 30px;
        border: 1px solid black;
        border-radius: 50%;
        position: absolute;
        bottom: calc(0% + 10px);
        left: calc(50% - 15px);
    }

    .camera {
        position: absolute;
        left: calc(-15% - 10px);
        top: -100%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid black;
    }

    .layoutWrapper .layout {
        border: 1px solid black;
        margin: 20px 13px 0px 13px;

    }

    .highcontrast .layoutWrapper .layout,
    .highcontrast .layoutWrapper .camera,
    .highcontrast .layoutWrapper .outerButton,
    .highcontrast .layoutWrapper .speaker,
    .highcontrast .layoutWrapper {
        border-color: white;
    }

    @font-face {
        font-family: 'Phone Icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Call-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRoAAAEoAAAAVmNtYXDOHM5nAAABjAAAAEBnbHlmtaNmiAAAAdQAAAEkaGVhZBAo7yMAAADQAAAANmhoZWEHegNsAAAArAAAACRobXR4C9H/wgAAAYAAAAAMbG9jYQBIAJIAAAHMAAAACG1heHABDwA6AAABCAAAACBuYW1ltZtoBgAAAvgAAAJJcG9zdNgJzA8AAAVEAAAAWAABAAADUv9qAFoEAP/h//4D6gABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAvvVLOF8PPPUACwPoAAAAANafVTkAAAAA1p9VOf/h/+ED6gPrAAAACAACAAAAAAAAAAEAAAADAC4AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAgNS/2oAWgPrAJYAAAABAAAAAAAABAAAAAPo/+ED6P/hAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAucA5wL//wAA5wDnAv//AAAAAAABAAYABgAAAAEAAgAAAAAASACSAAL/4f/hA+oD6wAGACgAAAEnAyUnNyclDwEGEgAEPwE2NC8BJgciBg8BBiYnLgE/ATY0LwEmByIGAoldLAFSa5Zd/V8DUUp9AT4BU5JUFRVUGR0QHAxXXKZNUE4hSxUVVRgdDhoC913+rytrll5LBFGS/q7+wH9KVRg8FlUWAQwJTyBNUFClXVUYPBZXFwEJAAL/4f/hA+oD6wALAC0AAAEjFTMVMzUzNSM1IyUPAQYSAAQ/ATY0LwEmByIGDwEGJicuAT8BNjQvASYHIgYCmXp6S3p6S/3mA1FKfQE+AVOSVBUVVBkdEBwMV1ymTVBOIUsVFVUYHQ4aAsRLenpLepoEUZL+rv7Af0pVGDwWVRYBDAlPIE1QUKVdVRg8FlcXAQkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAoAAQABAAAAAAACAAcACwABAAAAAAADAAoAEgABAAAAAAAEAAoAHAABAAAAAAAFAAsAJgABAAAAAAAGAAoAMQABAAAAAAAKACwAOwABAAAAAAALABIAZwADAAEECQAAAAIAeQADAAEECQABABQAewADAAEECQACAA4AjwADAAEECQADABQAnQADAAEECQAEABQAsQADAAEECQAFABYAxQADAAEECQAGABQA2wADAAEECQAKAFgA7wADAAEECQALACQBRyBDYWxsLWljb25zUmVndWxhckNhbGwtaWNvbnNDYWxsLWljb25zVmVyc2lvbiAxLjBDYWxsLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABDAGEAbABsAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAQwBhAGwAbAAtAGkAYwBvAG4AcwBDAGEAbABsAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABDAGEAbABsAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFHRlbGVwaG9uZS0tLWluY29taW5nF3RlbGVwaG9uZS0tLWFkZGNhbGwtLTAyAAA=) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    #all {
        max-height: 360px;
    }

    #received {
        max-height: 360px;
    }

    #missed {
        max-height: 360px;
    }

    #list-container {
        height: 405px;
    }

    #list-container .wrapper {
        position: relative;
    }

    #list-container .content {
        position: absolute;
        top: -10px;
        left: 30px;
        font-size: 14px;
    }

    #list-container .subContent {
        position: absolute;
        top: 6px;
        left: 30px;
        font-size: 11px;
        font-style: italic;

    }

    #list-container .subContent .received {
        font-family: Call-icons;
    }

    #list-container .subContent .received:before {
        content: '\e700';
        font-size: 8px;
    }

    #list-container .subContent .missed {
        font-family: Call-icons;
    }

    #list-container .subContent .missed:before {
        content: '\e702';
        font-size: 8px;
    }

    #list-container .subContent .subicons+span {
        margin-left: 6px;
    }

    .e-custom {
        font-family: 'e-icons';
    }

    .e-custom:before {
        content: '\e902';
    }

    #toDoList {
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

    .control-section {
        overflow: auto;
    }

    #list-container h4 {
        padding-left: 16px;
    }

    .logs {
        font-size: 15px;
        padding: 25px;
        /* border: 1px solid darkgray; */
        margin-top: 15px;
        font-weight: 500;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        user-select: none;
    }

    .logs * {
        padding-bottom: 10px;
    }

    #list-container {
        height: 410px;
    }

    @media only screen and (max-width: 600px) {
        .layoutWrapper.e-device-layout {
            visibility: hidden;
        }
        #list-container {
            visibility: visible;
        }
</style>