joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace up and down arrows with svgs

Browse Source
This commit is contained in:
Jakob Ketterl
2021-05-16 15:59:21 +02:00
parent 6e0e271294
commit 7ec592ce3d
5 changed files with 195 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
htdocs/css/openwebrx-header.css
View File

@@ -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;
}

2
htdocs/gfx/svg-defs.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

5
htdocs/include/header.include.html
View File

@@ -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>

84
inkscape files/openwebrx-rx-details-arrow-down.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

82
inkscape files/openwebrx-rx-details-arrow-up.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB