Show View on UG link on the top for mobile devices

SenneMalfliet · Jun 25, 2024 · 4bd477b · 4bd477b
1 parent 6ff8849
commit 4bd477b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 33 deletions.
diff --git a/freetar/templates/base.html b/freetar/templates/base.html
@@ -73,8 +73,10 @@
 
 
   <div class="container">
-    {% block content %}
-    {% endblock %}
+      <div class="row">
+          {% block content %}
+          {% endblock %}
+      </div>
   </div>
 
   <script src="/static/custom.js"></script>

diff --git a/freetar/templates/tab.html b/freetar/templates/tab.html
@@ -2,44 +2,57 @@
 
 
 {% block content %}
+
+  <div class="col-sm col-md-8 col-lg-9 col-12">
+      <h5>
+          <a href="/search?search_term={{ tab.artist_name }}">{{ tab.artist_name }}</a> - {{ tab.song_name }} (ver {{tab.version }})
+          <span title="add/remove song to/from favs" class="favorite m-2 d-print-none" data-artist="{{tab.artist_name}}" data-song="{{tab.song_name}}" data-type="{{tab._type}}" data-rating="{{tab.rating}}" data-url="{{ request.path }}">★</span>
+      </h5>
+  </div>
+
+  <div class="col-sm col-md-4 col-lg-3">
+     View on <a class="d-print-none" href="{{ tab.tab_url }}?no_redirect">Ultimate Guitar</a>
+  </div>
 
+  <div class="col-sm col-md-9 col-lg-9">
+    Difficulty: {{ tab.difficulty }}<br>
+  </div>
 
-  <div class="float-end text-end">
-  <span title="add/remove song to/from favs" class="favorite m-2 d-print-none" data-artist="{{tab.artist_name}}" data-song="{{tab.song_name}}" data-type="{{tab._type}}" data-rating="{{tab.rating}}" data-url="{{ request.path }}">★</span><br/>
-    {% if tab.tuning %}
-        Tuning: {{ tab.tuning }}<br>
-    {% endif %}
-  <a class="d-print-none d-none d-md-inline" href="{{ tab.tab_url }}?no_redirect">View on Ultimate Guitar</a>
+  <div class="col-sm col-md-3 col-lg-3">
+      Capo: 
+      {% if tab.capo %}
+          {{ tab.capo -}} th fret
+      {% else %}
+          no capo
+      {% endif %}
+  </div>
+
+  <div class="col-sm col-lg-12">
+     {% if tab.tuning %}
+         Tuning: {{ tab.tuning }}<br>
+     {% endif %}
   </div>
-<h5><a href="/search?search_term={{ tab.artist_name }}">{{ tab.artist_name }}</a> - {{ tab.song_name }} (ver {{tab.version }})</h5>
-        Difficulty: {{ tab.difficulty }}<br>
-    Capo: 
-    {% if tab.capo %}
-        {{ tab.capo -}} th fret
-    {% else %}
-        no capo
-    {% endif %}
-    </br>
 
 
-    <div class="d-flex align-items-center d-print-none flex-wrap">
-        <div class="form-check form-switch autoscroll me-4">
+  <div class="d-flex align-items-center d-print-none flex-wrap">
+      <div class="form-check form-switch autoscroll me-4">
           <input class="form-check-input" type="checkbox" role="switch" id="checkbox_autoscroll" />
           <label class="form-check-label" for="checkbox_autoscroll">Autoscroll</label>
-        <span role="button" id="scroll_speed_down" title="decrease scroll speed" class="m-2" >❮❮</span>
-        <span role="button" id="scroll_speed_up" title="increase scroll speed" class="m-2" >❯❯</span>
-        </div>
-        <div class="form-check form-switch me-4">
-            <input class="form-check-input" type="checkbox" role="switch" id="checkbox_view_chords"/>
-            <label class="form-check-label" for="checkbox_view_chords">Show chords</label>
-        </div>
+          <span role="button" id="scroll_speed_down" title="decrease scroll speed" class="m-2" >❮❮</span>
+          <span role="button" id="scroll_speed_up" title="increase scroll speed" class="m-2" >❯❯</span>
+      </div>
+
+      <div class="form-check form-switch me-4">
+          <input class="form-check-input" type="checkbox" role="switch" id="checkbox_view_chords"/>
+          <label class="form-check-label" for="checkbox_view_chords">Show chords</label>
+      </div>
 
-  <div>
-        <span class="">Transpose </span>
-        <span role="button" id="transpose_down" title="transpose down" class="m-2">↓</span>
-        <span role="button" id="transpose_up" title="transpose up" class="m-2">↑</span>
-    </div>
-    </div>
+      <div>
+          <span class="">Transpose </span>
+          <span role="button" id="transpose_down" title="transpose down" class="m-2">↓</span>
+          <span role="button" id="transpose_up" title="transpose up" class="m-2">↑</span>
+      </div>
+  </div>
 
     <hr class="border border-primary"/>
     <div id="chordVisuals" style="display: none;">
@@ -81,7 +94,6 @@ <h5><a href="/search?search_term={{ tab.artist_name }}">{{ tab.artist_name }}</a
         {{ tab.tab | safe }} 
     </div>
 
-    <a class="d-print-none d-block d-md-none mt-4" href="{{ tab.tab_url }}">View on Ultimate Guitar</a>
     {% if tab.alternatives %}
     <div class="d-print-none mt-4">
         <h2>Alternative versions</h2>