smallsolar
/
libkiwix
mirror of https://github.com/kiwix/libkiwix.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use SVG files for feed logo & ui language selector 

Added new, better proportioned SVG files.
This commit is contained in:
Nikhil Tanwar 2023-03-18 18:19:34 +05:30
parent 68c6c93945
commit d7a3a417e1
8 changed files with 62 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/resources_list.txt
View File

@ -1,7 +1,8 @@
skin/caret.png skin/caret.png
skin/bittorrent.png skin/bittorrent.png
skin/magnet.png skin/magnet.png
skin/feed.png skin/feed.svg
skin/langSelector.svg
skin/download.png skin/download.png
skin/hash.png skin/hash.png
skin/search-icon.svg skin/search-icon.svg

22
static/skin/feed.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="uiLanguageSelectorButton" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#CCCCCC;}
.st2{fill:#F78422;}
</style>
<g>
<path class="st0" d="M2.9,29.6c-1.4,0-2.6-1.1-2.6-2.6V2.9c0-1.4,1.1-2.6,2.6-2.6h24.1c1.4,0,2.6,1.1,2.6,2.6v24.1
c0,1.4-1.1,2.6-2.6,2.6H2.9z"/>
<path class="st1" d="M27.1,0.6c1.3,0,2.3,1,2.3,2.3v24.1c0,1.3-1,2.3-2.3,2.3H2.9c-1.3,0-2.3-1-2.3-2.3V2.9c0-1.3,1-2.3,2.3-2.3
H27.1 M27.1,0.1H2.9c-1.6,0-2.8,1.3-2.8,2.8v24.1c0,1.6,1.3,2.8,2.8,2.8h24.1c1.6,0,2.8-1.3,2.8-2.8V2.9
C29.9,1.4,28.6,0.1,27.1,0.1L27.1,0.1z"/>
</g>
<g>
<path class="st2" d="M18,24h-3c0-5.2-4.2-9.4-9.4-9.4v-3C12.4,11.6,18,17.2,18,24z"/>
<path class="st2" d="M24.5,24h-3c-0.1-8.7-7.2-15.9-16-15.9v-3C16,5.1,24.5,13.6,24.5,24z"/>
<circle class="st2" cx="8.1" cy="21.6" r="2.6"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
static/skin/index.css
View File

@ -469,10 +469,9 @@ body {
width: auto; width: auto;
} }
.feedLogo { .feedLogo, #uiLanguageSelectorButton {
height: 30px; height: 30px;
float: right; float: right;
border-radius: 5px;
} }
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {

25
static/skin/langSelector.svg Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="uiLanguageSelectorButton" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#CCCCCC;}
.st2{fill:#3366CC;}
</style>
<g>
<path class="st0" d="M2.9,29.6c-1.4,0-2.6-1.1-2.6-2.6V2.9c0-1.4,1.1-2.6,2.6-2.6h24.1c1.4,0,2.6,1.1,2.6,2.6v24.1
c0,1.4-1.1,2.6-2.6,2.6H2.9z"/>
<path class="st1" d="M27.1,0.6c1.3,0,2.3,1,2.3,2.3v24.1c0,1.3-1,2.3-2.3,2.3H2.9c-1.3,0-2.3-1-2.3-2.3V2.9c0-1.3,1-2.3,2.3-2.3
H27.1 M27.1,0.1H2.9c-1.6,0-2.8,1.3-2.8,2.8v24.1c0,1.6,1.3,2.8,2.8,2.8h24.1c1.6,0,2.8-1.3,2.8-2.8V2.9
C29.9,1.4,28.6,0.1,27.1,0.1L27.1,0.1z"/>
</g>
<g>
<path class="st2" d="M26.4,24.1h-1.7c-0.2,0-0.3-0.1-0.5-0.2S24,23.7,24,23.6l-1.1-3h-5.7l-1.1,2.9c-0.1,0.2-0.2,0.2-0.2,0.3
c-0.2,0.2-0.3,0.3-0.5,0.3h-1.6L19,11.1h2.1L26.4,24.1z M22.4,19.2l-1.8-4.8c-0.2-0.5-0.3-0.9-0.5-1.4c-0.1,0.3-0.2,0.5-0.2,0.8
l-0.2,0.6l-1.8,4.8L22.4,19.2z M15.2,17.4c-1.1-0.4-2.3-0.9-3.3-1.6c1.6-1.7,2.7-3.8,3.2-6.2h2.2V8.2H12c-0.1-0.2-0.2-0.5-0.2-0.6
c-0.3-0.8-0.6-1.7-0.6-1.7L9.5,6.5c0,0,0.5,1,0.7,1.7H3.6v1.5H6c0.5,2.3,1.6,4.4,3.3,6.2c-1.7,1.1-3.6,1.9-5.7,2.4
c0.5,0.6,0.8,1.1,1,1.6c2.1-0.7,4.1-1.7,5.9-2.9c1.3,0.8,2.7,1.5,4,2.1L15.2,17.4z M7.7,9.7h5.6c-0.4,2-1.4,3.7-2.8,5.1
C9.2,13.3,8.2,11.6,7.7,9.7z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
static/skin/taskbar.css
View File

@ -201,6 +201,7 @@ a.suggest, a.suggest:visited, a.suggest:hover, a.suggest:active {
margin: 0px 12px 6px 12px; margin: 0px 12px 6px 12px;
float: right; float: right;
cursor: pointer; cursor: pointer;
height: 30px;
} }
@media(min-width:420px) { @media(min-width:420px) {

13
static/templates/index.html
View File

@ -46,7 +46,7 @@
<body> <body>
<div class='kiwixNav'> <div class='kiwixNav'>
<a href="{{root}}/catalog/v2/entries" id="feedLink"> <a href="{{root}}/catalog/v2/entries" id="feedLink">
<img src="{{root}}/skin/feed.png?KIWIXCACHEID" <img src="{{root}}/skin/feed.svg?KIWIXCACHEID"
class="feedLogo" class="feedLogo"
id="feedLogo" id="feedLogo"
alt="Library OPDS Feed" alt="Library OPDS Feed"
@ -57,15 +57,8 @@
alt="Select UI language" alt="Select UI language"
aria-label="Select UI language" aria-label="Select UI language"
title="Select UI language"> title="Select UI language">
<svg xmlns="http://www.w3.org/2000/svg" <img src="{{root}}/skin/langSelector.svg?KIWIXCACHEID"
id="uiLanguageSelectorButton" id="uiLanguageSelectorButton">
width="30"
height="30"
viewBox="0 0 20 20">
<g fill="#36c">
<path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/>
</g>
</svg>
</a> </a>
<div class="kiwixNav__filters"> <div class="kiwixNav__filters">
<div class="kiwixNav__select"> <div class="kiwixNav__select">

9
static/viewer.html
View File

@ -35,14 +35,7 @@
alt="Select UI language" alt="Select UI language"
aria-label="Select UI language" aria-label="Select UI language"
title="Select UI language"> title="Select UI language">
<svg xmlns="http://www.w3.org/2000/svg" <img src="./skin/langSelector.svg?KIWIXCACHEID">
width="30"
height="30"
viewBox="0 0 20 20">
<g fill="#36c">
<path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/>
</g>
</svg>
</a> </a>
<div class="kiwix_searchform"> <div class="kiwix_searchform">
<form class="kiwixsearch" method="GET" action="javascript:performSearch()" id="kiwixsearchform"> <form class="kiwixsearch" method="GET" action="javascript:performSearch()" id="kiwixsearchform">

12
test/server.cpp
View File

@ -61,7 +61,7 @@ const ResourceCollection resources200Compressible{
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/i18n.js?cacheid=2cf0f8c5" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/i18n.js?cacheid=2cf0f8c5" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=4974c58b" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=e4d76d16" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/index.js?cacheid=cafa3d61" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/index.js?cacheid=cafa3d61" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" },
@ -71,7 +71,7 @@ const ResourceCollection resources200Compressible{
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/mustache.min.js" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/mustache.min.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/mustache.min.js?cacheid=bd23c4fb" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/mustache.min.js?cacheid=bd23c4fb" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css?cacheid=fee406f3" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css?cacheid=bbdaf425" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/viewer.js" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/viewer.js" },
{ STATIC_CONTENT, "/ROOT%23%3F/skin/viewer.js?cacheid=b9a574d4" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/viewer.js?cacheid=b9a574d4" },
{ DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Poppins.ttf" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Poppins.ttf" },
@ -270,7 +270,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
const std::vector<UrlAndExpectedResult> testData{ const std::vector<UrlAndExpectedResult> testData{
{ {
/* url */ "/ROOT%23%3F/", /* url */ "/ROOT%23%3F/",
R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/index.css?cacheid=4974c58b" R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/index.css?cacheid=e4d76d16"
<link rel="apple-touch-icon" sizes="180x180" href="/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3"> <link rel="apple-touch-icon" sizes="180x180" href="/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3">
<link rel="icon" type="image/png" sizes="32x32" href="/ROOT%23%3F/skin/favicon/favicon-32x32.png?cacheid=79ded625"> <link rel="icon" type="image/png" sizes="32x32" href="/ROOT%23%3F/skin/favicon/favicon-32x32.png?cacheid=79ded625">
<link rel="icon" type="image/png" sizes="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc"> <link rel="icon" type="image/png" sizes="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc">
@ -285,7 +285,8 @@ R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/index.css?cacheid=4974c58b"
<script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script> <script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
<script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script> <script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
<script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=cafa3d61" defer></script> <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=cafa3d61" defer></script>
<img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1" <img src="/ROOT%23%3F/skin/feed.svg?cacheid=055b333f"
<img src="/ROOT%23%3F/skin/langSelector.svg?cacheid=00b59961"
)EXPECTEDRESULT" )EXPECTEDRESULT"
}, },
{ {
@ -303,13 +304,14 @@ R"EXPECTEDRESULT( <img src="${root}/skin/download
}, },
{ {
/* url */ "/ROOT%23%3F/viewer", /* url */ "/ROOT%23%3F/viewer",
R"EXPECTEDRESULT( <link type="text/css" href="./skin/taskbar.css?cacheid=fee406f3" rel="Stylesheet" /> R"EXPECTEDRESULT( <link type="text/css" href="./skin/taskbar.css?cacheid=bbdaf425" rel="Stylesheet" />
<link type="text/css" href="./skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" /> <link type="text/css" href="./skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
<script type="module" src="./skin/i18n.js?cacheid=2cf0f8c5" defer></script> <script type="module" src="./skin/i18n.js?cacheid=2cf0f8c5" defer></script>
<script type="text/javascript" src="./skin/languages.js?cacheid=b00b12db" defer></script> <script type="text/javascript" src="./skin/languages.js?cacheid=b00b12db" defer></script>
<script type="text/javascript" src="./skin/viewer.js?cacheid=b9a574d4" defer></script> <script type="text/javascript" src="./skin/viewer.js?cacheid=b9a574d4" defer></script>
<script type="text/javascript" src="./skin/autoComplete.min.js?cacheid=1191aaaf"></script> <script type="text/javascript" src="./skin/autoComplete.min.js?cacheid=1191aaaf"></script>
const blankPageUrl = root + "/skin/blank.html?cacheid=6b1fa032"; const blankPageUrl = root + "/skin/blank.html?cacheid=6b1fa032";
<img src="./skin/langSelector.svg?cacheid=00b59961">
<label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label> <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label>
src="./skin/blank.html?cacheid=6b1fa032" title="ZIM content" width="100%" src="./skin/blank.html?cacheid=6b1fa032" title="ZIM content" width="100%"
)EXPECTEDRESULT" )EXPECTEDRESULT"