Pestañas diferenciadas para canciones y albumes

1 year ago · bbe323d906
--- a/LyricsPy/static/style.css
+++ b/LyricsPy/static/style.css
@ -83,3 +83,37 @@ pre {
    border: 1px solid #ced4da;
    border-radius: 4px;
 }

 /* Styles for tabs */
 .tab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
 }

 .tab button {
    background-color: lightblue;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
 }

 .tab button:hover {
    background-color: #0509e7;
 }

 .tab button.active {
    background-color: #0509e7;
 }

 .tabcontent {
    display: none;
    padding: 20px 0;
    border-top: none;
 }

 .tabcontent.active {
    display: block;
 }
--- a/LyricsPy/templates/base.html
+++ b/LyricsPy/templates/base.html
@ -2,19 +2,39 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Mis Letras de Canciones</title>
    <title>My Song Lyrics</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
    <div class="container">
        <h1>Mis Letras de Canciones</h1>
        <h1>My Song Lyrics</h1>
        <nav>
            <a href="{{ url_for('index') }}">Inicio</a>
            <a href="{{ url_for('add_song') }}">Añadir canción</a>
            <a href="{{ url_for('add_album') }}">Añadir Álbum</a>
            <a href="{{ url_for('index') }}">Home</a>
            <a href="{{ url_for('add_song') }}">Add Song</a>
            <a href="{{ url_for('add_album') }}">Add Album</a>
        </nav>
        <hr>
        {% block content %}{% endblock %}
    </div>
    <script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }

        // Default open tab
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementsByClassName('tablinks')[0].click();
        });
    </script>
 </body>
 </html>
--- a/LyricsPy/templates/index.html
+++ b/LyricsPy/templates/index.html
@ -1,21 +1,30 @@
 {% extends 'base.html' %}

 {% block content %}
 <h2>Lista de canciones</h2>
 <ul>
    {% for song in songs %}
    <li>
        <a href="{{ url_for('song', song_id=song.id) }}">{{ song.title }} by {{ song.author }}</a>
    </li>
    {% endfor %}
 </ul>
 <hr>
 <h2>Álbumes</h2>
 <ul>
    {% for album in albums %}
    <li>{{ album.name }} by {{ album.artist }} ({{ album.year }})</li>
    {% endfor %}
 </ul>
 <hr>
 <a href="{{ url_for('add_album') }}" class="button">Añadir nuevo álbum</a>
 <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'Songs')">Songs</button>
    <button class="tablinks" onclick="openTab(event, 'Albums')">Albums</button>
 </div>

 <div id="Songs" class="tabcontent">
    <h2>Song List</h2>
    <ul>
        {% for song in songs %}
        <li>
            <a href="{{ url_for('song', song_id=song.id) }}">{{ song.title }} by {{ song.author }}</a>
        </li>
        {% endfor %}
    </ul>
 </div>

 <div id="Albums" class="tabcontent">
    <h2>Albums</h2>
    <ul>
        {% for album in albums %}
        <li>{{ album.name }} by {{ album.artist }} ({{ album.year }})</li>
        {% endfor %}
    </ul>
    <hr>
    <a href="{{ url_for('add_album') }}" class="button">Add New Album</a>
 </div>
 {% endblock %}