From 7ec592ce3d03ffcd60de95d16f69d4b5e82e4ab3 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Sun, 16 May 2021 15:59:21 +0200
Subject: [PATCH] replace up and down arrows with svgs

---
 htdocs/css/openwebrx-header.css               | 42 +++++-----
 htdocs/gfx/svg-defs.svg                       |  2 +
 htdocs/include/header.include.html            |  5 +-
 .../openwebrx-rx-details-arrow-down.svg       | 84 +++++++++++++++++++
 .../openwebrx-rx-details-arrow-up.svg         | 82 ++++++++++++++++++
 5 files changed, 195 insertions(+), 20 deletions(-)
 create mode 100644 inkscape files/openwebrx-rx-details-arrow-down.svg
 create mode 100644 inkscape files/openwebrx-rx-details-arrow-up.svg

diff --git a/htdocs/css/openwebrx-header.css b/htdocs/css/openwebrx-header.css
index 40856ea..5857342 100644
--- a/htdocs/css/openwebrx-header.css
+++ b/htdocs/css/openwebrx-header.css
@@ -102,18 +102,6 @@
     font-size: 10pt;
 }
 
-.openwebrx-rx-details-arrow {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 0);
-
-    margin: 0;
-    padding: 0;
-    line-height: 0;
-    display: block;
-}
-
 .openwebrx-main-buttons .button {
     display: block;
     width: 55px;
@@ -240,14 +228,30 @@
     height: 38px;
 }
 
-.openwebrx-rx-details-arrow--down .sprite-rx-details-arrow {
-    background-position: 0 -65px;
-    width: 43px;
+.openwebrx-rx-details-arrow {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    display: block;
+}
+
+.openwebrx-rx-details-arrow svg {
     height: 12px;
 }
 
-.openwebrx-rx-details-arrow--up .sprite-rx-details-arrow {
-    background-position: -43px -65px;
-    width: 43px;
-    height: 12px;
+.openwebrx-rx-details-arrow .up {
+    display: none;
+}
+
+.openwebrx-rx-details-arrow--up .down {
+    display: none;
+}
+
+.openwebrx-rx-details-arrow--up .up {
+    display: initial;
 }
\ No newline at end of file
diff --git a/htdocs/gfx/svg-defs.svg b/htdocs/gfx/svg-defs.svg
index 8c9c7b8..9a6b083 100644
--- a/htdocs/gfx/svg-defs.svg
+++ b/htdocs/gfx/svg-defs.svg
@@ -18,5 +18,7 @@
         <g id="trashcan"><path d="M56.667 13.333V6.666A6.67 6.67 0 0 0 50 0H30a6.67 6.67 0 0 0-6.666 6.666v6.667H6.667V20h6.666v53.333A6.67 6.67 0 0 0 20 79.999h40a6.67 6.67 0 0 0 6.667-6.666V20h6.666v-6.667zM30 6.666h20v6.667H30zm30 66.667H20V20h40zM36.667 26.666H30v40h6.667zm13.333 0h-6.667v40H50z" fill="#fff"/></g>
         <g id="edit"><path d="m52.5 7.5-45 45v20h20l45-45zm12.93 20-4.697 4.697-12.93-12.93L52.5 14.57zM15.302 51.768l4.06-4.06c1.533 1.125 3.575 2.002 5.81 2.002 2.148 0 4.453-.8 6.595-2.942l10-10c2.52-2.52 4.622-7.728.968-12.43l1.535-1.535 12.93 12.93L28.23 64.698zm22.93-18.535-10 10c-2.062 2.058-4.007 1.595-5.27.875L39.14 27.93c1.465 2.485-.27 4.643-.907 5.303zM12.5 56.035 23.965 67.5H12.5z" fill="#fff"/></g>
         <g id="bookmark"><path d="M62.5 0h-45A7.5 7.5 0 0 0 10 7.5V80l30-17.5L70 80V7.5A7.5 7.5 0 0 0 62.5 0zm0 66.942L40 53.817 17.5 66.942V8.437a.938.938 0 0 1 .938-.938h43.124c.518 0 .938.42.938.937z" fill="#fff"/></g>
+        <g id="rx-details-arrow-down"><path d="M5 0C2.5 0 0 2.5 0 5v7h43V5c0-2.5-2.5-5-5-5zm8 4h17l-8.5 6.5z" fill="#999" fill-opacity=".196"/><path d="M13 4h17l-8.5 6.5z" fill="#848484" fill-opacity=".592"/></g>
+        <g id="rx-details-arrow-up"><path d="M5 0C2.5 0 0 2.5 0 5v7h43V5c0-2.5-2.5-5-5-5zm16.5 3L30 9.5H13z" fill="#999" fill-opacity=".196"/><path d="M30 9.5H13L21.5 3z" fill="#848484" fill-opacity=".592"/></g>
     </defs>
 </svg>
\ No newline at end of file
diff --git a/htdocs/include/header.include.html b/htdocs/include/header.include.html
index 0f0062f..8ae0811 100644
--- a/htdocs/include/header.include.html
+++ b/htdocs/include/header.include.html
@@ -18,5 +18,8 @@
         <div class="webrx-rx-photo-title">${photo_title}</div>
         <div class="webrx-rx-photo-desc">${photo_desc}</div>
     </div>
-    <a class="openwebrx-rx-details-arrow openwebrx-rx-details-arrow--down openwebrx-photo-trigger"><span class="sprite sprite-rx-details-arrow"></span></a>
+    <a class="openwebrx-rx-details-arrow openwebrx-rx-details-arrow--down openwebrx-photo-trigger">
+        <svg class="down" viewBox="0 0 43 12"><use xlink:href="static/gfx/svg-defs.svg#rx-details-arrow-down"></use></svg>
+        <svg class="up" viewBox="0 0 43 12"><use xlink:href="static/gfx/svg-defs.svg#rx-details-arrow-up"></use></svg>
+    </a>
 </div>
diff --git a/inkscape files/openwebrx-rx-details-arrow-down.svg b/inkscape files/openwebrx-rx-details-arrow-down.svg
new file mode 100644
index 0000000..4b0755d
--- /dev/null
+++ b/inkscape files/openwebrx-rx-details-arrow-down.svg	
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="43"
+   height="12"
+   viewBox="0 0 43 12"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="openwebrx-rx-details-arrow-down.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.4"
+     inkscape:cx="21.520949"
+     inkscape:cy="7.2959182"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="2560"
+     inkscape:window-height="1381"
+     inkscape:window-x="0"
+     inkscape:window-y="348"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="original image"
+     style="display:none">
+    <image
+       width="43"
+       height="12"
+       preserveAspectRatio="none"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAMCAYAAAD79EROAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz AAAk6QAAJOkBUCTn+AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAF2SURB VEiJzZLNSgMxFIXPvclMM+pM2oLiz8p1H8GF4LOUPlIpXfQRREVwJehOt+JO6EKwIjpCBTPUKTcu ZEBEaadV6gfZJDk5H+GS9x4FvV4v9t7Xx+PxMhEZLAhmzkTkFcBTq9VyxT4Vst1udwPAxoL8vkVE vNZ60Gw2HwCAAaDdbq/jn4kCADOTiGx1Op01AFCNRiPM83wbAC3Y7UeYeaXf7z/rNE1XmZnLhLMs 23TO7YrI0gzdb8aY8ziOb6cNeO85TdNVJqLShVEUDay1h0qpAT5Gadr1EsfxURnRAiJaYqVUVDYI AFprV6/XT8IwvAQgk+4rpfrVavXAGDOcpU8pFWkR0bOEC6y1V1mW3Tvn9kQk+XpORD4Iggtr7fU8 PSKiS83qT0RR9Jgkyb7W+ubzPjM7Y8zxvKIFc/3qZ4IgyGu12tlwOLzL83yHmdMkSU611m5yejp+ TbbAWnszGo0GYRhmRDRxlsvw67IAUKlUXv/i3XfrPXuPJHennQAAAABJRU5ErkJggg== "
+       id="image1061"
+       x="-8.8817842e-16"
+       y="0"
+       style="display:inline" />
+  </g>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       id="path1068"
+       style="display:inline;fill:#999999;fill-opacity:0.196078;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 5,0 C 2.5,0 0,2.5 0,5 v 7 H 43 V 5 C 43,2.5 40.5,0 38,0 Z m 8,4 h 17 l -8.5,6.5 z"
+       sodipodi:nodetypes="ssccssscccc" />
+    <path
+       style="display:inline;fill:#848484;fill-opacity:0.592157;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 13,4 h 17 l -8.5,6.5 z"
+       id="path852"
+       sodipodi:nodetypes="cccc" />
+  </g>
+</svg>
diff --git a/inkscape files/openwebrx-rx-details-arrow-up.svg b/inkscape files/openwebrx-rx-details-arrow-up.svg
new file mode 100644
index 0000000..56a6a9c
--- /dev/null
+++ b/inkscape files/openwebrx-rx-details-arrow-up.svg	
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="43"
+   height="12"
+   viewBox="0 0 43 12"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="openwebrx-rx-details-arrow-up.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.4"
+     inkscape:cx="21.520949"
+     inkscape:cy="7.2959182"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="2560"
+     inkscape:window-height="1381"
+     inkscape:window-x="0"
+     inkscape:window-y="348"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="original image"
+     style="display:none">
+    <image
+       width="43"
+       height="12"
+       preserveAspectRatio="none"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAMCAYAAAD79EROAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz AAAk6QAAJOkBUCTn+AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGDSURB VEiJzZS9ahtBFIXvvTParO2NBoTlH1yZNAmqYkiRJgF3ATd5B6FHEkKFnsSFK1cu8gQqQ2Q0FlpW GbFz915XCi6MsXdF7K8c5pzzwcCgqsKGyWTyXlU7zLyHiCm8EkQURGQFAPPBYPB3c44b2fF4fAwA x6/k9ygiotba3/1+fwYAQAAAw+HwCN6YKAAAEaGInIxGowMAANPr9ZIY4ykA4DYGYozv8jz/XlWV TZLkbhudRJRNp9M7673vEhFto3S9Xh8VRXGuqnvM/IGZD51z14goTXpVlbz3XYuIu00liQi992dV VX1W1X8vFGP85L3fd85dtlqtoskGIu6SMWanSUmMMZvP5xfMfPZQdIOqdvM8/7larU6a7BhjdqyI 2LoFRVGchhC+AUDy1D0RSUMIP5j5xjn3q86WiNhaoiJil8vlV2b++NyMqmJZll8Wi8VBu92+MsaU L92tJVuWZccYMzPGzOrkQwidLMv+vDRXSzZN09s0TW/rZJuwlS/rf3EP4Pat/LLe6KcAAAAASUVO RK5CYII= "
+       id="image1168"
+       x="0"
+       y="0" />
+  </g>
+  <g
+     inkscape:label="Layer 1"
+     id="layer1"
+     style="display:inline">
+    <path
+       id="path1068"
+       style="display:inline;fill:#999999;fill-opacity:0.196078;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 5,0 C 2.5,0 0,2.5 0,5 v 7 H 43 V 5 C 43,2.5 40.5,0 38,0 Z M 21.5,3 30,9.5 H 13 Z" />
+    <path
+       style="display:inline;fill:#848484;fill-opacity:0.592157;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 30,9.5 H 13 L 21.5,3 Z"
+       id="path852-3"
+       sodipodi:nodetypes="cccc"
+       inkscape:label="path852" />
+  </g>
+</svg>