* Links: Make them better show song name instead of title

4 files changed, 33 insertions, 6 deletions

diff --git a/laravel/app/Song.php b/laravel/app/Song.php
index 0565ff6..ceaae21 100644
--- a/laravel/app/Song.php
+++ b/laravel/app/Song.php
@@ -11,4 +11,8 @@ class Song extends Model
     {
         return $this->belongsToMany('App\Playlist');
     }
+    public function getNameAttribute()
+    {
+        return $this->title . ( $this->author ? " ($this->author)" : "" );
+    }
 }
diff --git a/laravel/public/css/song.css b/laravel/public/css/song.css
new file mode 100644
index 0000000..8465822
--- /dev/null
+++ b/laravel/public/css/song.css
@@ -0,0 +1,15 @@
+div.controlArea{
+    display: flex;
+    justify-content: space-between;
+}
+a.back, a.home, a.next{
+    border: 2px solid var(--gray);
+    color: var(--dark);
+    padding: 3px;
+    margin: 3px;
+    text-decoration: none;
+}
+a.back:hover, a.home:hover, a.next:hover{
+    color: var(--light);
+    background-color: var(--secondary);
+}
diff --git a/laravel/resources/views/song.blade.php b/laravel/resources/views/song.blade.php
index 412e53d..6c34871 100644
--- a/laravel/resources/views/song.blade.php
+++ b/laravel/resources/views/song.blade.php
@@ -3,19 +3,28 @@
 
 @section('content')
 
+    <link type='text/css' rel='stylesheet' href='/css/song.css'/>
+    <div class='controlArea'>
     @if( isset( $back ) )
-        <a href='{{route('song.show', ['song' => $back])}}'>{{$back->title}}</a>
+        <a class='back' href='{{route('song.show', ['song' => $back, 'playlist' => $playlist ?? ''])}}'>
+        {{$back->name}}
+        </a>
     @endif
     @if( $playlist ?? FALSE)
-        <a href='{{route('playlist.show',['playlist' => $playlist->name])}}'>
+        <a class='home' href='{{route('playlist.show',['playlist' => $playlist->name])}}'>
             Back to {{$playlist->name}}
         </a>
     @else
-        <a href='{{route('song.list')}}'>Go home</a>
+        <a class='home' href='{{route('song.list')}}'>
+        Go home
+        </a>
     @endif
     @if( isset( $next ) )
-        <a href='{{route('song.show', ['song' => $next])}}'>{{$next->title}}</a>
+        <a class='next' href='{{route('song.show', ['song' => $next, 'playlist' => $playlist ?? ''])}}'>
+        {{$next->name}}
+        </a>
     @endif
+    </div>
 
     <h2>{{$song['title']}}</h2>
     <h3>{{$song->author}}</h3>
@@ -37,7 +46,6 @@
             for ($i=-6; $i < 12; $i++) {
                 if (($transp + 24)%12 == $i) $selected = 'selected';
                 else $selected = '';
-                //$dir = ($i >= 0 ? "up" : "down" );
                 $dir = "transpose";
                 echo "<option value='$i' $selected>$dir $i semitones</option>";
             }
diff --git a/laravel/resources/views/welcome.blade.php b/laravel/resources/views/welcome.blade.php
index 3f95380..b8b2627 100644
--- a/laravel/resources/views/welcome.blade.php
+++ b/laravel/resources/views/welcome.blade.php
@@ -10,7 +10,7 @@
                     @foreach( App\Song::all() as $song )
                         <li>
                             <a href='{{ route('song.show', ['song' => $song]) }}'>
-                                {{ $song['title'] }}
+                                {{ $song->name }}
                             </a>
                     @endforeach
                 </ul>