Skip to content

M
mymusiclist
Commit 5e8c18eb authored by Deion Menor's avatar Deion Menor
Browse files
Options

Add fade-in animation for searches

parent af870c8f
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 47 deletions
templates/base.html
View file @ 5e8c18eb
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<div class="w3-bar w3-black w3-large"> <div class="w3-bar w3-black w3-large">
<a href="/" id="logo-nav" class="w3-bar-item w3-button w3-blue-gray" style="font-size:1.2em;">MyMusicList</a> <a href="/" id="logo-nav" class="w3-bar-item w3-button w3-blue-gray">MyMusicList</a>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<!-- <a class="w3-bar-item w3-button" href="/profile/{{request.user.username}}" style="float:right" ><i class="fa fa-user-circle-o" aria-hidden="true"></i></a> --> <!-- <a class="w3-bar-item w3-button" href="/profile/{{request.user.username}}" style="float:right" ><i class="fa fa-user-circle-o" aria-hidden="true"></i></a> -->
<!-- <a class="w3-bar-item w3-button" href="{% url 'logout' %}" style="float:right">Logout</a> --> <!-- <a class="w3-bar-item w3-button" href="{% url 'logout' %}" style="float:right">Logout</a> -->
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<form action="{% url 'search' %}" method="get"> <form action="{% url 'search' %}" method="get">
<div class="wrap"> <div class="wrap">
<div class="search"> <div class="search">
<input type="text" class="w3-bar-item w3-input w3-black" name="search" style="width:30vw; color:pink;" placeholder="Search.."> <input type="text" class="w3-bar-item w3-input w3-black" name="search" style="width:30vw;" placeholder="Search..">
<input id="searchbytype" type="hidden" name="searchtype" value="album"> <input id="searchbytype" type="hidden" name="searchtype" value="album">
<button class="w3-bar-item w3-button w3-green"> <i class="fa fa-search" aria-hidden="true"></i></button> <button class="w3-bar-item w3-button w3-green"> <i class="fa fa-search" aria-hidden="true"></i></button>
</div> </div>
......
templates/search.html
View file @ 5e8c18eb
...@@ -13,17 +13,18 @@ ...@@ -13,17 +13,18 @@
{% block content %} {% block content %}
{% for i in results %} {% for i in results %}
<div class = " main w3-margin w3-card w3-hover-shadow"> <div class = " main w3-margin w3-card w3-hover-shadow w3-animate-opacity ">
{% if type == "album" %} {% if type == "album" %}
<header class="w3-row w3-green"> <header class="w3-row w3-green">
<div class="w3-col w3-container w3-blue" style="width:90%"> <div class="w3-col w3-container w3-green" style="width:95%">
<h3><a href="/album/{{i.id}}">{{i.album_name}}</a></h3> <h3><a href="/album/{{i.id}}" style="text-decoration:none">{{i.album_name}}</a></h3>
</div> </div>
<div class="w3-col w3-container w3-green" style="width:10%" > {% if request.user.is_authenticated %}
<div class="w3-col w3-container w3-green " style="width:5%" >
<div class="w3-dropdown-hover w3-right w3-green"> <div class="w3-dropdown-hover w3-right w3-green">
<button id="search_type" class="w3-button" style="width:20px; text-align: left;"><i class="fa fa-plus" aria-hidden="true"></i> </button> <button id="search_type" class="w3-button" "><i class="fa fa-plus fa-2x" aria-hidden="true"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0"> <div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0">
<button class=" w3-bar-item w3-button">Update existing playlist</button> <button class=" w3-bar-item w3-button">Update existing playlist</button>
<button class=" w3-bar-item w3-button" onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button> <button class=" w3-bar-item w3-button" onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button>
...@@ -31,6 +32,8 @@ ...@@ -31,6 +32,8 @@
</div> </div>
</div> </div>
</div> </div>
{% endif %}
</header> </header>
<div class="w3-container w3-opacity w3-black"> <div class="w3-container w3-opacity w3-black">
<p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br> <p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br>
...@@ -38,21 +41,29 @@ ...@@ -38,21 +41,29 @@
</div> </div>
<!-- ... --> {% endif %}
{% if request.user.is_authenticated %}
<!-- ... -->
<!-- ... -->
{% endif %}
<!-- ... -->
{% if type == "artist" %}
{% endif %} <header class="w3-row w3-green">
<div class="w3-col w3-container w3-green" style="width:95%">
<h3><a href="/artist/{{i.id}}" style="text-decoration:none">{{i.name}}</a></h3>
</div>
{% if request.user.is_authenticated %}
<div class="w3-col w3-container w3-green " style="width:5%" >
<div class="w3-dropdown-hover w3-right w3-green">
<button id="search_type" class="w3-button" style="width:20px;"><i class="fa fa-plus fa-2x" aria-hidden="true"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0">
<button class=" w3-bar-item w3-button">Update existing playlist</button>
<button class=" w3-bar-item w3-button" onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button>
<button class=" w3-bar-item w3-button">Create new playlist</button>
</div>
</div>
</div>
{% endif %}
{% if type == "artist" %}
<header class="w3-container w3-blue">
<h3><a href="/artist/{{i.id}}">{{i.name}}</a></h3>
</header> </header>
<div class="w3-container w3-opacity w3-black"> <div class="w3-container w3-opacity w3-black">
...@@ -64,28 +75,30 @@ ...@@ -64,28 +75,30 @@
{% endfor %} {% endfor %}
</div> </div>
<!-- ... -->
{% if request.user.is_authenticated %}
<!-- ... -->
<div class="w3-dropdown-hover">
<button id="search_type" class="w3-button" style="width:200px; text-align: left;"><i class="fa fa-caret-down"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<button class=" w3-bar-item w3-button">Update existing playlist</button>
<button onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button>
<button class=" w3-bar-item w3-button">Create new playlist</button>
</div>
</div>
<!-- ... -->
{% endif %}
<!-- ... -->
{% endif %} {% endif %}
{% if type == "song" %} {% if type == "song" %}
<header class="w3-container w3-yellow"> <header class="w3-row w3-green">
<h3>{{i.song_name}}</h3> <div class="w3-col w3-container w3-green" style="width:95%">
<h3>{{i.song_name}}</h3>
</div>
{% if request.user.is_authenticated %}
<div class="w3-col w3-container w3-green " style="width:5%" >
<div class="w3-dropdown-hover w3-right w3-indigo">
<button id="search_type" class="w3-button" style="width:20px;"><i class="fa fa-plus fa-2x" aria-hidden="true"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0">
<button class=" w3-bar-item w3-button">Update existing playlist</button>
<button class=" w3-bar-item w3-button" onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button>
<button class=" w3-bar-item w3-button">Create new playlist</button>
</div>
</div>
</div>
{% endif %}
</header> </header>
<div class="w3-container w3-opacity w3-black"> <div class="w3-container w3-opacity w3-black">
...@@ -94,20 +107,7 @@ ...@@ -94,20 +107,7 @@
Year: {{i.album.year}} </p> Year: {{i.album.year}} </p>
</div> </div>
<!-- ... -->
{% if request.user.is_authenticated %}
<!-- ... -->
<div class="w3-dropdown-hover">
<button id="search_type" class="w3-button" style="width:200px; text-align: left;"><i class="fa fa-caret-down"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<button class=" w3-bar-item w3-button">Update existing playlist</button>
<button onclick="alert('{{type}} id is {{i.id}}')">Show {{type}}</button>
<button class=" w3-bar-item w3-button">Create new playlist</button>
</div>
</div>
<!-- ... -->
{% endif %}
<!-- ... -->
{% endif %} {% endif %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment