#255 creating the box in the UI which would include reporting recitation errors button

GanjooRazor/Pages/_AudioPlayerPartial.cshtml

@@ -16,6 +16,9 @@
             <div class="recitaion-info">
                 <a role="button" onclick="document.getElementById('audio-@(nRecitationIndex + 1)').play()" class="actionlink">@recitaion.AudioTitle</a> @Html.Raw(Model.getAudioDesc(recitaion, nRecitationIndex == 0))
             </div>
+            <div class="audio-partial-action-box">
+                <a role="button" class="w3tooltip cursor-pointer recitation-button" href="@($"/AudioClip/?a={recitaion.Id}")" onclick="wpopen(this.href); return false">دریافت <i class="material-icons recitation-download"></i><span class="w3tooltiptext">دریافت خوانش</span></a>
+            </div>
             <script>
                 document.getElementById('audio-@(nRecitationIndex + 1)').addEventListener('play', () => {
                     currentAudio = document.getElementById('audio-@(nRecitationIndex + 1)');

GanjooRazor/Pages/_AudioPlayerPartial.cshtml.cs

@@ -31,8 +31,6 @@ namespace GanjooRazor.Pages
                 }
             }
 
-            audiodesc += $" <small><a href='/AudioClip/?a={recitation.Id}' onclick='wpopen(this.href); return false' class='comments-link' title='دریافت'>(دریافت)</a></small>";
-
             if (contributionLink)
             {
                 audiodesc += "<br /> <small>می‌خواهید شما بخوانید؟ <a href='http://ava.ganjoor.net/about/'>اینجا</a> را ببینید.</small>";

GanjooRazor/wwwroot/css/p8.css

@@ -939,7 +939,7 @@ ol {
 }
 
 
-.textualbutton, .pagebutton {
+.textualbutton, .pagebutton, .recitation-button {
     cursor: pointer;
     color: white !important;
     background-color: #300;
@@ -1223,6 +1223,7 @@ ol {
     background-color: #300;
 }
 
+
 .cursor-pointer {
     cursor: pointer;
 }
@@ -1234,3 +1235,16 @@ ol {
 .clear-both {
     clear: both;
 }
+
+.audio-partial-action-box {
+}
+
+.recitation-button{
+    display:inline-flex;
+    padding:5px;
+    border-radius:10px;
+}
+
+.recitation-download::after {
+    content: 'download';
+}