Document List View

by dshilkret

HTML

<link rel="stylesheet" href="styles.css">

    <div class="view-controls">
        <button onclick="changeView('details')">Details</button>
        <button onclick="changeView('tiles')">Tiles</button>
        <button onclick="changeView('large-icons')">Large Icons</button>
        <button onclick="changeView('medium-icons')">Medium Icons</button>
        <button onclick="changeView('small-icons')">Small Icons</button>
    </div>

    <div id="document-list" class="view-details">
        <div class="document-item">
            <span class="document-icon">📄</span>
            <span class="document-name">Document 1</span>
            <span class="document-size">100 KB</span>
            <span class="document-date">2024-08-29</span>
        </div>
        <div class="document-item">
            <span class="document-icon">📄</span>
            <span class="document-name">Document 2</span>
            <span class="document-size">200 KB</span>
            <span class="document-date">2024-08-28</span>
        </div>
        <!-- Add more document items as needed -->
    </div>

    <script src="script.js"></script>

CSS

body {
    font-family: Arial, sans-serif;
}

.view-controls {
    margin-bottom: 20px;
}

.view-controls button {
    margin-right: 10px;
    padding: 5px 10px;
    cursor: pointer;
}

#document-list {
    display: flex;
    flex-wrap: wrap;
}

.document-item {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.document-icon {
    margin-right: 10px;
    font-size: 24px;
}

.document-name {
    flex-grow: 1;
}

/* Details View */
.view-details .document-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Tiles View */
.view-tiles .document-item {
    width: 150px;
    flex-direction: column;
    text-align: center;
}

/* Large Icons View */
.view-large-icons .document-item .document-icon {
    font-size: 48px;
}

/* Medium Icons View */
.view-medium-icons .document-item .document-icon {
    font-size: 32px;
}

/* Small Icons View */
.view-small-icons .document-item .document-icon {
    font-size: 16px;
}

JavaScript

function changeView(view) {
    const documentList = document.getElementById('document-list');
    documentList.className = 'view-' + view;
}