From b35257565fa8b80cb082db7a78c9f206d61fe036 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sun, 21 Mar 2021 11:41:49 +0100
Subject: [PATCH] restyle header with icon
---
css/icons.scss | 2 +-
img/header.svg | 60 +++++++++++++++++++++++++++++++++++++++
img/recent.svg | 5 ----
src/components/Header.vue | 5 +++-
src/views/Library.vue | 1 -
5 files changed, 65 insertions(+), 8 deletions(-)
create mode 100644 img/header.svg
delete mode 100644 img/recent.svg
diff --git a/css/icons.scss b/css/icons.scss
index eff9743..4834aaa 100644
--- a/css/icons.scss
+++ b/css/icons.scss
@@ -19,6 +19,6 @@
*
*/
-@include icon-black-white('recent', 'podcast', 1);
+@include icon-black-white('header', 'podcast', 1);
@include icon-black-white('podcast', 'podcast', 1);
@include icon-black-white('podcast-trans', 'podcast', 1);
diff --git a/img/header.svg b/img/header.svg
new file mode 100644
index 0000000..6510d19
--- /dev/null
+++ b/img/header.svg
@@ -0,0 +1,60 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+ sodipodi:docname="header.svg"
+ id="svg44"
+ version="1.1"
+ viewBox="0 0 24 24"
+ height="24"
+ width="24">
+ <metadata
+ id="metadata50">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs48" />
+ <sodipodi:namedview
+ inkscape:current-layer="svg44"
+ inkscape:window-maximized="1"
+ inkscape:window-y="0"
+ inkscape:window-x="0"
+ inkscape:cy="3.1647928"
+ inkscape:cx="23.500195"
+ inkscape:zoom="5.6882691"
+ showgrid="false"
+ id="namedview46"
+ inkscape:window-height="872"
+ inkscape:window-width="1436"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0"
+ guidetolerance="10"
+ gridtolerance="10"
+ objecttolerance="10"
+ borderopacity="1"
+ bordercolor="#666666"
+ pagecolor="#ffffff" />
+ <g
+ style="fill:#000000"
+ id="g42"
+ fill-rule="evenodd"
+ fill="#ffffff">
+ <path
+ style="fill:#000000"
+ id="path40"
+ d="M13 2v20h-2V2zM6 6v12H4V6zM20 6v12h-2V6z" />
+ </g>
+</svg>
diff --git a/img/recent.svg b/img/recent.svg
deleted file mode 100644
index 7d95448..0000000
--- a/img/recent.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0">
- <rect style="color:#000000" fill-opacity="0" height="97.986" width="163.31" y="-32.993" x="-62.897"/>
- <path style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m8 0c-4.4064 0-8 3.5936-8 8 0 4.406 3.5936 8 8 8 4.406 0 8-3.594 8-8 0-4.4064-3.594-8-8-8zm0 2c3.326 0 6 2.6744 6 6 0 3.326-2.674 6-6 6-3.3256 0-6-2.674-6-6 0-3.3256 2.6744-6 6-6zm-0.4414 0.9316c-0.334 0.0075-0.6014 0.2793-0.6035 0.6133l-0.8516 4.4414v0.0117c-0.1821 0.7569 0.3361 1.002 0.916 1.3536l0.0059 0.0019 2.9976 1.5785c0.653 0.502 1.407-0.476 0.754-0.9789l-1.777-1.9453v-0.0078l-0.8086-4.4492c0.0011-0.3478-0.2851-0.6279-0.6328-0.6192z"/>
-</svg>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index f8241e5..4c14e02 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -41,9 +41,12 @@ export default {
<style lang="scss">
.podcastSectionHeader {
- padding: 20px 30px;
+ padding: 20px 20px 20px 65px;
display: flex;
align-items: center;
+ background-image: var(--icon-podcast-header-000);
+ background-repeat: no-repeat;
+ background-position: 30px 50%;
h1 {
flex-grow: 1;
diff --git a/src/views/Library.vue b/src/views/Library.vue
index 293acf7..0548176 100644
--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -37,7 +37,6 @@
</Actions>
</Header>
<ItemSlider :podcasts="shows" />
- <Header :title="t('podcast', 'New episodes')" />
<LoadMore :finished="finished"
@loadMore="queryEpisodes(page)">
<Table
--
GitLab