Moved the buttons into icons !wip

src/Ombi/ClientApp/src/app/media-details/movie-details.component.html

@@ -3,7 +3,7 @@
 
     <section id="summary-wrapper">
         <div class="full-screenshot enabled" [style.background-image]="movie.background"></div>
-        <div class="shadow-base"></div>
+        <div class="shadow-base" [ngClass]="movie.available ? 'available-bottom-border' : ''"></div>
 
         <div class="container summary">
             <div class="container">
@@ -36,20 +36,34 @@
 
                 <!--Next to poster-->
                 <div class="col-6 media-row">
+
+                    <a *ngIf="movie.homepage" class="media-icons" h href="{{movie.homepage}}" target="_blank">
+                        <i matTooltip="Homepage" class="fa fa-home fa-2x grow"></i>
+                    </a>
+
+                    <a *ngIf="movie.id" href="https://www.themoviedb.org/movie/{{movie.id}}" class="media-icons" target="_blank">
+                        <i matTooltip="The Movie DB" class="fa fa-film fa-2x grow"></i>
+                    </a>
+
+                    <a *ngIf="movie.videos.results.length > 0" class="media-icons" (click)="openDialog()"><i matTooltip="Trailer"
+                            class="fa fa-youtube-play fa-2x grow"></i></a>
+
                     <a *ngIf="movie.imdbId" class="media-icons" href="https://imdb.com/title/{{movie.imdbId}}" target="_blank">
-                        <i class="fa fa-imdb fa-2x grow"></i>
+                        <i matTooltip="Imdb" class="fa fa-imdb fa-2x grow"></i>
                     </a>
                     <a *ngIf="movie.externalIds.twitterId" class="media-icons" href="https://twitter.com/{{movie.externalIds.twitterId}}"
                         target="_blank">
-                        <i class="fa fa-twitter fa-2x grow"></i>
+                        <i matTooltip="Twitter" class="fa fa-twitter fa-2x grow"></i>
                     </a>
                     <a *ngIf="movie.externalIds.facebookId" class="media-icons" href="https://facebook.com/{{movie.externalIds.facebookId}}"
                         target="_blank">
-                        <i class="fa fa-facebook fa-2x grow"></i>
+                        <i matTooltip="Facebook" class="fa fa-facebook fa-2x grow"></i>
                     </a> <a *ngIf="movie.externalIds.instagramId" class="media-icons" href="https://instagram.com/{{movie.externalIds.instagramId}}"
                         target="_blank">
-                        <i class="fa fa-istagram fa-2x grow"></i>
+                        <i matTooltip="Instagram" class="fa fa-instagram fa-2x grow"></i>
                     </a>
+
+
                 </div>
             </div>
 
@@ -100,16 +114,17 @@
                     </mat-card>
                 </div>
                 <div class="col-md-2 card-full">
-                    <div><button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available">  {{ 'Common.Available' | translate }}</button></div>
+
+                    <div><button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
+                            'Common.Available' | translate }}</button></div>
                     <div *ngIf="!movie.available">
                         <div *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></div>
                         <ng-template #requestedBtn>
-                                <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i
+                            <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i class="fa fa-check"></i>
-                                        class="fa fa-check"></i> {{ 'Common.Requested' | translate }}</button>
+                                {{ 'Common.Requested' | translate }}</button>
                         </ng-template>
                         <ng-template #notRequestedBtn>
-                                <button mat-raised-button class="btn-spacing"
+                            <button mat-raised-button class="btn-spacing" (click)="request()">
-                                    (click)="request()">
                                 <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
                                     *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
                                 <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
@@ -117,11 +132,12 @@
                         </ng-template>
                     </div>
                     <div><button mat-raised-button class="btn-spacing" color="warn">Deny</button></div>
-                    <div *ngIf="result.available">
+                    <div *ngIf="movie.available">
-                            <a *ngIf="result.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem" href="{{result.plexUrl}}"
+                        <a *ngIf="movie.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
-                                target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' | translate}}</a>
+                            href="{{movie.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
-                            <a *ngIf="result.embyUrl" mat-raised-button class="btn-green btn-spacing"
+                            translate}}</a>
-                                href="{{result.embyUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
+                        <a *ngIf="movie.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{movie.embyUrl}}"
+                            target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
                             translate}}</a>
                     </div>
                 </div>
@@ -129,20 +145,7 @@
             </div>
             <div class="row card-spacer">
                 <div class="col-md-2">
-                    <div>
+
-                        <div>
-                            <a *ngIf="movie.homepage" class="btn-spacing" href="{{movie.homepage}}" target="_blank"
-                                mat-raised-button color="accent">Home Page</a></div>
-                        <div>
-                            <a *ngIf="movie.id" href="https://www.themoviedb.org/movie/{{movie.id}}" target="_blank"
-                                mat-raised-button class="btn-blue btn-spacing">The Movie DB</a></div>
-                        <div>
-                            <a *ngIf="movie.imdbId" href="https://www.imdb.com/title/tt1727824/{{movie.imdbId}}" target="_blank"
-                                mat-raised-button class="imdb-color btn-spacing">IMDb</a></div>
-                        <div>
-                            <a *ngIf="movie.videos.results.length > 0" mat-raised-button class="btn-blue btn-spacing"
-                                (click)="openDialog()">Trailer</a></div>
-                    </div>
 
                 </div>
             </div>

src/Ombi/ClientApp/src/app/media-details/movie-details.component.scss

@@ -69,6 +69,10 @@ $ombi-primary:#3f3f3f;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4D000000', GradientType=0);
 }
 
+.available-bottom-border {
+    border-bottom: solid 8px #1DE9B6;
+}
+
 #summary-wrapper .summary .container,
 .summary-wrapper .summary .container {
     position: absolute;