Merge branch 'w3_styling' into 'master'

Fix navbar issue and add w3.css styling

See merge request brian/mymusiclist!13

core/exthook.py

@@ -9,11 +9,11 @@ def init():
 	musicbrainzngs.set_useragent("mymusiclist","0.1", contact="none")
 	musicbrainzngs.set_rate_limit(limit_or_interval=False, new_requests=1)
 	print("[Exthook] Initialized")
-	
+
 def verifyAlbumArt(album, artist):
 	if(album.art == None):
 		album.art = fetchAlbumArt(album.album_name, artist)
-    	album.save()
+		album.save()
     #may or may not add checks to see if valid http link
 
 def fetchAlbumArt(name, artist):
@@ -34,4 +34,4 @@ def fetchAlbumArt(name, artist):
 	return imagelist['images'][0]['thumbnails']['large']
 
 def debug(string):
-	print("[Exthook] " + string)
\ No newline at end of file
+	print("[Exthook] " + string)

files/css/font-awesome-4.7.0/HELP-US-OUT.txt

+I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
+Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
+comprehensive icon sets or copy and paste your own.
+
+Please. Check it out.
+
+-Dave Gandy

files/css/font-awesome-4.7.0/less/animated.less

+// Animated Icons
+// --------------------------
+
+.@{fa-css-prefix}-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+          animation: fa-spin 2s infinite linear;
+}
+
+.@{fa-css-prefix}-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+          animation: fa-spin 1s infinite steps(8);
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}

files/css/font-awesome-4.7.0/less/bordered-pulled.less

+// Bordered & Pulled
+// -------------------------
+
+.@{fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid .08em @fa-border-color;
+  border-radius: .1em;
+}
+
+.@{fa-css-prefix}-pull-left { float: left; }
+.@{fa-css-prefix}-pull-right { float: right; }
+
+.@{fa-css-prefix} {
+  &.@{fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.@{fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.4.0 */
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.@{fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}

files/css/font-awesome-4.7.0/less/core.less

+// Base Class Definition
+// -------------------------
+
+.@{fa-css-prefix} {
+  display: inline-block;
+  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}

files/css/font-awesome-4.7.0/less/fixed-width.less

+// Fixed Width Icons
+// -------------------------
+.@{fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}

files/css/font-awesome-4.7.0/less/font-awesome.less

+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables.less";
+@import "mixins.less";
+@import "path.less";
+@import "core.less";
+@import "larger.less";
+@import "fixed-width.less";
+@import "list.less";
+@import "bordered-pulled.less";
+@import "animated.less";
+@import "rotated-flipped.less";
+@import "stacked.less";
+@import "icons.less";
+@import "screen-reader.less";

files/css/font-awesome-4.7.0/less/larger.less

+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.@{fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.@{fa-css-prefix}-2x { font-size: 2em; }
+.@{fa-css-prefix}-3x { font-size: 3em; }
+.@{fa-css-prefix}-4x { font-size: 4em; }
+.@{fa-css-prefix}-5x { font-size: 5em; }

files/css/font-awesome-4.7.0/less/list.less

+// List Icons
+// -------------------------
+
+.@{fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: @fa-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.@{fa-css-prefix}-li {
+  position: absolute;
+  left: -@fa-li-width;
+  width: @fa-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.@{fa-css-prefix}-lg {
+    left: (-@fa-li-width + (4em / 14));
+  }
+}

files/css/font-awesome-4.7.0/less/mixins.less

+// Mixins
+// --------------------------
+
+.fa-icon() {
+  display: inline-block;
+  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}
+
+.fa-icon-rotate(@degrees, @rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
+  -webkit-transform: rotate(@degrees);
+      -ms-transform: rotate(@degrees);
+          transform: rotate(@degrees);
+}
+
+.fa-icon-flip(@horiz, @vert, @rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
+  -webkit-transform: scale(@horiz, @vert);
+      -ms-transform: scale(@horiz, @vert);
+          transform: scale(@horiz, @vert);
+}
+
+
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+.sr-only() {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable() {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}

files/css/font-awesome-4.7.0/less/path.less

+/* FONT PATH
+ * -------------------------- */
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
+  src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
+    url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
+    url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
+    url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
+    url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
+  // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
+  font-weight: normal;
+  font-style: normal;
+}

files/css/font-awesome-4.7.0/less/rotated-flipped.less

+// Rotated & Flipped Icons
+// -------------------------
+
+.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
+.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
+.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
+
+.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
+.@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1, 2); }
+
+// Hook for IE8-9
+// -------------------------
+
+:root .@{fa-css-prefix}-rotate-90,
+:root .@{fa-css-prefix}-rotate-180,
+:root .@{fa-css-prefix}-rotate-270,
+:root .@{fa-css-prefix}-flip-horizontal,
+:root .@{fa-css-prefix}-flip-vertical {
+  filter: none;
+}

files/css/font-awesome-4.7.0/less/screen-reader.less

+// Screen Readers
+// -------------------------
+
+.sr-only { .sr-only(); }
+.sr-only-focusable { .sr-only-focusable(); }

files/css/font-awesome-4.7.0/less/stacked.less

+// Stacked Icons
+// -------------------------
+
+.@{fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.@{fa-css-prefix}-stack-1x { line-height: inherit; }
+.@{fa-css-prefix}-stack-2x { font-size: 2em; }
+.@{fa-css-prefix}-inverse { color: @fa-inverse; }

files/css/font-awesome-4.7.0/scss/_animated.scss

+// Spinning Icons
+// --------------------------
+
+.#{$fa-css-prefix}-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+          animation: fa-spin 2s infinite linear;
+}
+
+.#{$fa-css-prefix}-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+          animation: fa-spin 1s infinite steps(8);
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}

files/css/font-awesome-4.7.0/scss/_bordered-pulled.scss

+// Bordered & Pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid .08em $fa-border-color;
+  border-radius: .1em;
+}
+
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix} {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}
+
+/* Deprecated as of 4.4.0 */
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.#{$fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}

files/css/font-awesome-4.7.0/scss/_core.scss

+// Base Class Definition
+// -------------------------
+
+.#{$fa-css-prefix} {
+  display: inline-block;
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}

files/css/font-awesome-4.7.0/scss/_fixed-width.scss

+// Fixed Width Icons
+// -------------------------
+.#{$fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}

files/css/font-awesome-4.7.0/scss/_larger.scss

+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.#{$fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.#{$fa-css-prefix}-2x { font-size: 2em; }
+.#{$fa-css-prefix}-3x { font-size: 3em; }
+.#{$fa-css-prefix}-4x { font-size: 4em; }
+.#{$fa-css-prefix}-5x { font-size: 5em; }

files/css/font-awesome-4.7.0/scss/_list.scss

+// List Icons
+// -------------------------
+
+.#{$fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: $fa-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.#{$fa-css-prefix}-li {
+  position: absolute;
+  left: -$fa-li-width;
+  width: $fa-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.#{$fa-css-prefix}-lg {
+    left: -$fa-li-width + (4em / 14);
+  }
+}

files/css/font-awesome-4.7.0/scss/_mixins.scss

+// Mixins
+// --------------------------
+
+@mixin fa-icon() {
+  display: inline-block;
+  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}
+
+@mixin fa-icon-rotate($degrees, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
+  -webkit-transform: rotate($degrees);
+      -ms-transform: rotate($degrees);
+          transform: rotate($degrees);
+}
+
+@mixin fa-icon-flip($horiz, $vert, $rotation) {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
+  -webkit-transform: scale($horiz, $vert);
+      -ms-transform: scale($horiz, $vert);
+          transform: scale($horiz, $vert);
+}
+
+
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}

files/css/font-awesome-4.7.0/scss/_path.scss

+/* FONT PATH
+ * -------------------------- */
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
+    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
+    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
+    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
+    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+//  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
+  font-weight: normal;
+  font-style: normal;
+}

files/css/font-awesome-4.7.0/scss/_rotated-flipped.scss

+// Rotated & Flipped Icons
+// -------------------------
+
+.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
+.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
+.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
+
+.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
+.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
+
+// Hook for IE8-9
+// -------------------------
+
+:root .#{$fa-css-prefix}-rotate-90,
+:root .#{$fa-css-prefix}-rotate-180,
+:root .#{$fa-css-prefix}-rotate-270,
+:root .#{$fa-css-prefix}-flip-horizontal,
+:root .#{$fa-css-prefix}-flip-vertical {
+  filter: none;
+}

files/css/font-awesome-4.7.0/scss/_screen-reader.scss

+// Screen Readers
+// -------------------------
+
+.sr-only { @include sr-only(); }
+.sr-only-focusable { @include sr-only-focusable(); }

files/css/font-awesome-4.7.0/scss/_stacked.scss

+// Stacked Icons
+// -------------------------
+
+.#{$fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.#{$fa-css-prefix}-stack-1x { line-height: inherit; }
+.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
+.#{$fa-css-prefix}-inverse { color: $fa-inverse; }

files/css/font-awesome-4.7.0/scss/font-awesome.scss

+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "animated";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";
+@import "screen-reader";

files/css/mymusiclist.css

@@ -27,48 +27,6 @@ body {
      text-align: center;
 }
 
-
-/*for dropdown thing */
-
-li a, .dropbtn {
-    display: inline-block;
-    color: white;
-    text-align: center;
-
-    text-decoration: none;
-}
-
-li a:hover, .dropdown:hover .dropbtn {
-    background-color: red;
-}
-
-li.dropdown {
-    display: inline-block;
-}
-
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: blue;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-}
-
-.dropdown-content a {
-    color: black;
-
-    text-decoration: none;
-    display: block;
-    text-align: left;
-}
-
-.dropdown-content a:hover {background-color: #f1f1f1}
-
-.dropdown:hover .dropdown-content {
-    display: block;
-}
-
 /*searchbar*/
 
 /*form {
@@ -76,29 +34,6 @@ li.dropdown {
                 margin:50px auto;
 }*/
 
-.search_nav{
-	padding: 15px;
-}
-.searchbar {
-                padding:8px 15px;
-                background:rgba(50, 50, 50, 0.2);
-                border:0px solid #dbdbdb;
-			 color: white;
-}
-.button {
-                position:relative;
-                padding:6px 15px;
-                left:-8px;
-                border:2px solid #207cca;
-                background-color:#207cca;
-                color:#fafafa;
-}
-.button:hover  {
-                background-color:#fafafa;
-                color:#207cca;
-}
-
-
 /* Generic style for clickable shit*/
 
 .buttoned{
@@ -176,7 +111,7 @@ li.dropdown {
 .sidebar{
 	float:left;
 	margin-left: 0;
-	width: 14vw;
+	width: 18vw;
 	text-align: center;
 	padding: 1vw;
 }

templates/artist.html

@@ -15,7 +15,7 @@
 
 {% block content %}
 {% for i in albums %}
-<div class = "boxified main">
+<div class = "w3-card-4 main w3-margin">
 	<h3> <a class = "link" href= "/album/{{i.id}}"> {{i.album_name}} </a></h3>
 	<p> Year: {{i.year}} </p>
 </div>

templates/base.html

@@ -4,54 +4,56 @@
   <meta charset="utf-8">
   <title>{% block title %}MyMusicList{% endblock %}</title>
   <link rel="stylesheet" href="/files/css/mymusiclist.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="/files/css/w3.css">
+  <link rel="stylesheet" href="/files/css/font-awesome-4.7.0/css/font-awesome.min.css">
 </head>
 <body>
   <header>
-    {% if request.user.is_authenticated %}
-      <ul id='nav_bar'>
-        <li><a class="nav_bar_home" href="/">MyMusicList</a></li>
-        <li><a class="nav_bar_tab" href="/profile/{{request.user.username}}">Hi, {{request.user.username}}</a></li>
-        <li style="float:right"><a class="nav_bar_tab" href="{% url 'logout' %}">Logout</a></li>
-      </ul>
-    {% else %}
-      <ul id='nav_bar'>
-        <li><a class="nav_bar_home" href="/">MyMusicList</a></li>
-        <li><a class="nav_bar_tab" href="{% url 'login' %}">LOGIN</a></li>
-        <li><a class="nav_bar_tab" href="{% url 'signup' %}">SIGN UP</a></li>
-        <li>
-             <div class="search_nav">
-                  <form action="{% url 'search' %}" method="get">
-                            <div class="wrap">
-                 			<div class="search">
-                 			<input class="searchbar" type="text" name="search" placeholder="Search..">
-                 			<input id="searchbytype" type="hidden" name="searchtype" value="album">
-                 		     <button class="button"> <i class="fa fa-search" aria-hidden="true"></i></button>
-                 			</div>
-                 		</div>
-                  </form>
-             </div>
-        </li>
-        <li class="dropdown nav_bar_tab">
-             <a id=search_type href=# class="dropbtn">SEARCH  <i class="fa fa-caret-down"></i></a>
-                   <div class="dropdown-content">
-                        <a href="#" onclick="mainA()" >Album</a>
-                        <a href="#" onclick="mainB()">Artist</a>
-                        <a href="#" onclick="mainC()">Song</a>
-                   </div>
-       </li>
-        <li style="float:right"><button class="nav_bar_tab"type="button" onclick="toggleWallpaper()"></button></li>
-      </ul>
-    {% endif %}
-
-
-
-
-
-
-
-
-    <div class="boxified sidebar">
+
+       <div class = "w3-top">
+
+           <div class="w3-bar w3-black w3-large">
+
+
+             <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}}"><i class="fa fa-user-circle-o" aria-hidden="true"></i> Hi, {{request.user.username}}</a>
+                <a class="w3-bar-item w3-button" href="{% url 'logout' %}" style="float:right">>Logout</a>
+           {% else %}
+             <a href="{% url 'login' %}" class="w3-bar-item w3-button">Login</a>
+               <a href="{% url 'signup' %}" class="w3-bar-item w3-button">Sign Up</a>
+           {% endif %}
+
+               <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" 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>
+                      </div>
+               </form>
+               <div class="w3-dropdown-hover">
+                 <button id="search_type" class="w3-button" style="width:250px;">Search by..  <i class="fa fa-caret-down"></i> </button>
+                 <div class="w3-dropdown-content w3-bar-block w3-card-4">
+                   <a href="#" class=" w3-bar-item w3-button" onclick="mainA()" >Album</a>
+                   <a href="#" class=" w3-bar-item w3-button" onclick="mainB()">Artist</a>
+                   <a href="#" class=" w3-bar-item w3-button" onclick="mainC()">Song</a>
+                 </div>
+
+               </div>
+
+           </div>
+
+      </div>
+
+
+
+
+
+
+
+    <div class="w3-card-4 w3-green sidebar">
       {% block sidebar %}
         <h2>Featured Songs</h2>
         <img src="/files/images/divide_edsheeran.jpeg" alt="Divide - Ed Sheeran">
@@ -88,17 +90,12 @@
 
 
 
+     <div style="margin: 3em 0 0 0">
+          {% block content %}
+          {% endblock %}
 
+     </div>
 
-
-
-
-
-
-
-
-    {% block content %}
-    {% endblock %}
   <script>
     function toggleWallpaper() {
       document.getElementByID("nav_bar").style.background-color = "white";

templates/search.html

@@ -13,30 +13,50 @@
 {% block content %}
 
 	{% for i in results %}
-	<div class = "boxified main">
+	<div class = " main w3-margin w3-card-4">
 		{% if type == "album" %}
-			<h3><a href="/album/{{i.id}}">{{i.album_name}}</a></h3>
+
+		<header class="w3-container w3-green">
+		  <h3><a href="/album/{{i.id}}">{{i.album_name}}</a></h3>
+		</header>
+		<div class="w3-container w3-black">
 			<p>Artist: <a href="/artist/{{i.artist.id}}">{{i.artist.name}}</a><br>
 				Year: {{i.year}} </p>
+
+		</div>
+
 		{% endif %}
 
 
 		{% if type == "artist" %}
-			<h3><a href="/artist/{{i.id}}">{{i.name}}</a></h3>
+		<header class="w3-container w3-blue">
+		<h3><a href="/artist/{{i.id}}">{{i.name}}</a></h3>
+		</header>
+
+		<div class="w3-container">
 			{% for j in albums %}
 			<p> <tab>
 			{% if j.artist.name == i.name %}
 			<h3><a href="/album/{{j.id}}">{{ j.album_name }}</a> - {{ j.year }} </h3>
 			{% endif %} </p>
 			{% endfor %}
+		</div>
+
+
 		{% endif %}
 
 
 		{% if type == "song" %}
+		<header class="w3-container w3-green">
 			<h3>{{i.song_name}}</h3>
+		</header>
+
+		<div class="w3-container">
 			<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 %}
 
 	</div>