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
Show whitespace changes
Inline Side-by-side
Showing with 47 additions and 47 deletions
templates/base.html
View file @ 5e8c18eb
......@@ -15,7 +15,7 @@
<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 %}
<!-- <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> -->
......@@ -41,7 +41,7 @@
<form action="{% url 'search' %}" method="get">
<div class="wrap">
<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">
<button class="w3-bar-item w3-button w3-green"> <i class="fa fa-search" aria-hidden="true"></i></button>
</div>
......
templates/search.html
View file @ 5e8c18eb
......@@ -13,17 +13,18 @@
{% block content %}
{% 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" %}
<header class="w3-row w3-green">
<div class="w3-col w3-container w3-blue" style="width:90%">
<h3><a href="/album/{{i.id}}">{{i.album_name}}</a></h3>
<div class="w3-col w3-container w3-green" style="width:95%">
<h3><a href="/album/{{i.id}}" style="text-decoration:none">{{i.album_name}}</a></h3>
</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">
<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">
<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>
......@@ -31,6 +32,8 @@
</div>
</div>
</div>
{% endif %}
</header>
<div class="w3-container w3-opacity w3-black">
<p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br>
......@@ -38,21 +41,29 @@
</div>
<!-- ... -->
{% if request.user.is_authenticated %}
<!-- ... -->
<!-- ... -->
{% endif %}
<!-- ... -->
{% endif %}
{% if type == "artist" %}
<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>
<div class="w3-container w3-opacity w3-black">
......@@ -64,50 +75,39 @@
{% endfor %}
</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 %}
{% if type == "song" %}
<header class="w3-container w3-yellow">
<header class="w3-row w3-green">
<div class="w3-col w3-container w3-green" style="width:95%">
<h3>{{i.song_name}}</h3>
</header>
<div class="w3-container w3-opacity w3-black">
<h3><a href="/album/{{i.album.id}}">{{i.album.album_name}}</a></h3>
<p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br>
Year: {{i.album.year}} </p>
</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">
<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 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>
<button class=" w3-bar-item w3-button">Create new playlist</button>
</div>
</div>
<!-- ... -->
</div>
{% endif %}
<!-- ... -->
</header>
<div class="w3-container w3-opacity w3-black">
<h3><a href="/album/{{i.album.id}}">{{i.album.album_name}}</a></h3>
<p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br>
Year: {{i.album.year}} </p>
</div>
{% 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