Master develop icons (#1601)

Co-authored-by: Rob Beeston <[email protected]>

libraries/templatetags/branch_url_tag.py

@@ -0,0 +1,10 @@
+from django import template
+from django.urls import reverse
+
+register = template.Library()
+
+
+@register.simple_tag()
+def branch_url_tag(view: str, branch: str, kwargs: dict):
+    kwargs["version_slug"] = branch
+    return reverse(view, kwargs=kwargs)

templates/libraries/detail.html

@@ -21,7 +21,8 @@
           <span class="mx-3 text-xl md:text-3xl text-orange">{{ object.display_name }}</span>
         </div>
       </div>
-      <div class="flex-shrink mr-3 md:mr-0">
+      <div class="flex flex-row mr-3 md:mr-0">
+        {% include "libraries/includes/dev_master_links.html"  %}
         {% version_select %}
       </div>
     </div>

templates/libraries/includes/dev_master_links.html

@@ -0,0 +1,58 @@
+{% load branch_url_tag %}
+<div class="devmast_container">
+  <div class="mast_container" title="Master Branch">
+    <div class="minicircle mastercolor">M</div>
+    <a href="{% branch_url_tag request.resolver_match.view_name branch='master' kwargs=request.resolver_match.kwargs %}" class="giticon"><i class="fa-brands fa-git-alt fa-2xl"></i></a>
+  </div>
+  <div class="dev_container" title="Develop Branch">
+    <div class="minicircle developcolor">D</div>
+    <a href="{% branch_url_tag request.resolver_match.view_name branch='develop' kwargs=request.resolver_match.kwargs %}" class="giticon"><i class="fa-brands fa-git-alt fa-2xl"></i></a>
+  </div>
+</div>
+<style>
+  .devmast_container {
+    display: inline-flex;
+    width: 5rem;
+    justify-content: space-around;
+  }
+  .mast_container {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+  .dev_container {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+  .lib_pref .mast_container,
+  .lib_pref .dev_container {
+    align-items: flex-start;
+    margin-top: 6px;
+  }
+  .minicircle {
+    color: #fff;
+    font-weight: 700;
+    font-size: 0.6rem;
+    border-radius: 30px;
+    width: 0.8rem;
+    height: 0.8rem;
+    position: absolute;
+    left: -0.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .mastercolor {
+    background-color: rgb(255 159 0);
+  }
+  .developcolor {
+    background-color: rgb(14 174 96);
+  }
+  .mast_container .fa-git-alt:hover {
+    color: rgb(255 159 0) !important;
+  }
+  .dev_container .fa-git-alt:hover {
+    color: rgb(14 174 96) !important;
+  }
+</style>

templates/libraries/includes/library_preferences.html

@@ -41,7 +41,8 @@
           </select>
         </div>
         {# Select a version #}
-        <div class="flex grow justify-end">
+        <div class="flex flex-row lib_pref grow justify-end">
+          {% include "libraries/includes/dev_master_links.html"  %}
             {% version_select %}
         </div>
       </div>