diff --git a/src/App.vue b/src/App.vue index 6b1a5b45..3b1090ce 100644 --- a/src/App.vue +++ b/src/App.vue @@ -23,7 +23,7 @@
@@ -372,7 +372,7 @@ export default defineComponent({ \ No newline at end of file diff --git a/src/assets/images/dr_kalender-sprite2.png b/src/assets/images/dr_kalender-sprite2.png deleted file mode 100644 index 150c06c9..00000000 Binary files a/src/assets/images/dr_kalender-sprite2.png and /dev/null differ diff --git a/src/assets/images/hero_image_1.jpg b/src/assets/images/hero_image_1.jpg new file mode 100644 index 00000000..18e7e6f0 Binary files /dev/null and b/src/assets/images/hero_image_1.jpg differ diff --git a/src/assets/images/hero_image_2.jpg b/src/assets/images/hero_image_2.jpg new file mode 100644 index 00000000..eb0dd06f Binary files /dev/null and b/src/assets/images/hero_image_2.jpg differ diff --git a/src/assets/images/hero_image_3.jpg b/src/assets/images/hero_image_3.jpg new file mode 100644 index 00000000..d2b62c50 Binary files /dev/null and b/src/assets/images/hero_image_3.jpg differ diff --git a/src/assets/images/noise.jpg b/src/assets/images/noise.jpg deleted file mode 100644 index 712acc66..00000000 Binary files a/src/assets/images/noise.jpg and /dev/null differ diff --git a/src/assets/images/timegoes.svg b/src/assets/images/timegoes.svg deleted file mode 100644 index 668a55f6..00000000 --- a/src/assets/images/timegoes.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/styles/elements.css b/src/assets/styles/elements.css index 6e6290da..cfcb9d15 100644 --- a/src/assets/styles/elements.css +++ b/src/assets/styles/elements.css @@ -2,7 +2,7 @@ /*background-colors*/ --bg-main:#ea9fbc; --bg-cta:#ea9fbc; - --bg-light:#013277; + --bg-light:#17294F; --bg-remove:#f7ae3b; --bg-main-hover:#c4f1ed; --bg-disabled:#757575; @@ -10,7 +10,7 @@ --bg-transparent: transparent; --bg-golden:#e0b500; --bg-default-gray: #ccc; - --bg-secondary-light: #caf0fe; + --bg-secondary-light: #324666; --bg-secondary-light-20: #F0FBFF; --bg-header: #002e70; --bg-footer: #002e70; diff --git a/src/components/common/MainCategories.vue b/src/components/common/MainCategories.vue index c8243cdf..2cd501c9 100644 --- a/src/components/common/MainCategories.vue +++ b/src/components/common/MainCategories.vue @@ -31,7 +31,9 @@ > {{ t(`categories.${santizeAndSimplify(entity.name)}`) }} {{ entity.number.toLocaleString('de-DE') }} - + + {{ returnCategoryIcon(entity.name) }} + @@ -72,6 +74,7 @@ import { useSearchResultStore } from '@/store/searchResultStore'; import NoFacetContent from '@/components/global/content-elements/NoFacetContent.vue'; import { Priority, Severity } from '@/types/NotificationType'; import { ErrorManagerType } from '@/types/ErrorManagerType'; +import { returnCategoryIcon, returnFilledIconStatus } from '@/utils/icon-utils'; export default defineComponent({ name: 'MainCategories', @@ -140,7 +143,17 @@ export default defineComponent({ }); }; - return { t, categories, addTestDataEnrichment, categoriesLoaded, quotation, santizeAndSimplify, scrollToTop }; + return { + t, + categories, + addTestDataEnrichment, + categoriesLoaded, + quotation, + santizeAndSimplify, + scrollToTop, + returnCategoryIcon, + returnFilledIconStatus, + }; }, }); @@ -239,7 +252,6 @@ export default defineComponent({ z-index: 20; top: -25px; left: -1px; - background-image: url('@/assets/icons/blue/diverse-blue.svg'); filter: hue-rotate(5deg); } @@ -261,40 +273,6 @@ export default defineComponent({ border-radius: 4px; } -.diverse { - background-image: url('@/assets/icons/blue/diverse-blue.svg'); -} -.dokumentar { - background-image: url('@/assets/icons/blue/dokumentar-blue.svg'); -} -.film-og-serier { - background-image: url('@/assets/icons/blue/fiktion-blue.svg'); -} -.kultur-og-oplysning { - background-image: url('@/assets/icons/blue/kultur-blue.svg'); -} -.livsstil { - background-image: url('@/assets/icons/blue/livsstil-blue.svg'); -} -.musik { - background-image: url('@/assets/icons/blue/musik-blue.svg'); -} -.nyheder-politik-og-samfund { - background-image: url('@/assets/icons/blue/nyheder-blue.svg'); -} -.sport { - background-image: url('@/assets/icons/blue/sport-blue.svg'); -} -.humor-quiz-og-underholdning { - background-image: url('@/assets/icons/blue/underholdning-blue.svg'); -} -.natur-og-videnskab { - background-image: url('@/assets/icons/blue/videnskab-blue.svg'); -} -.brn-og-unge { - background-image: url('@/assets/icons/blue/born-blue.svg'); -} - .container { width: 100%; } diff --git a/src/components/common/ProgramGuide.vue b/src/components/common/ProgramGuide.vue index b89144f2..8f153a51 100644 --- a/src/components/common/ProgramGuide.vue +++ b/src/components/common/ProgramGuide.vue @@ -83,7 +83,7 @@ >
- {{ item.origin.split('.')[1] === 'tv' ? 'play_circle_filled' : 'volume_up' }} + {{ item.origin.split('.')[1] === 'tv' ? 'play_circle' : 'volume_up' }} {{ item.title[0] }}
diff --git a/src/components/common/SimpleCheckbox.vue b/src/components/common/SimpleCheckbox.vue index 5ebe2752..5d72cfb3 100644 --- a/src/components/common/SimpleCheckbox.vue +++ b/src/components/common/SimpleCheckbox.vue @@ -24,13 +24,14 @@ @change="updateSelection(!checked, title, fqkey)" /> + > + {{ icon }} + .autocomplete { - position: absolute; z-index: 5; - background-color: white; - width: 50%; + background-color: var(--bg-light); + width: 100%; padding: 0px 0px; - margin-top: -1px; - margin-left: 0px; - width: calc(80% - 2px); - border: 1px solid #757575; - border-top: 0px solid #757575; + height: 100%; + border-left: 1px solid var(--color-border-success); + border-right: 1px solid var(--color-border-success); + border-bottom: 1px solid var(--color-border-success); } .autocomplete.active { @@ -209,10 +207,11 @@ export default defineComponent({ overflow: hidden; text-overflow: ellipsis; display: inline-block; + color: var(--color-main); } .autocomplete button .number { - color: #757575; + color: var(--color-main); margin-left: 5px; font-size: 12px; } @@ -223,8 +222,8 @@ export default defineComponent({ } .autocomplete li:has(> button:focus) { - background: #fff6c4; - color: #002e70; + background: var(--bg-secondary-light); + color: var(--color-main); } .autocomplete button:focus { @@ -236,7 +235,6 @@ export default defineComponent({ list-style-type: none; padding: 0px 0px; margin: 0; - background-color: white; } .autocomplete ul li { @@ -244,17 +242,17 @@ export default defineComponent({ transition: all 0.2s linear 0s; text-wrap: nowrap; text-overflow: ellipsis; - background-color: white; + background-color: var(--bg-light); } .autocomplete ul li:hover, .autocomplete .hl { - background: #fff6c4; + background: var(--bg-secondary-light); } .autocomplete ul li:hover button, .autocomplete .hl button { - color: #002e70; + color: var(--color-main); cursor: pointer; } @@ -273,7 +271,7 @@ export default defineComponent({ content: ''; display: block; padding: 0px 10px; - border-top: 1px solid rgb(229, 228, 226); + /* border-top: 1px solid rgb(229, 228, 226); */ height: 1px; position: relative; transition: all 0.2s linear 0s; @@ -284,9 +282,9 @@ export default defineComponent({ /* MEDIA QUERY 480 */ @media (min-width: 480px) { .autocomplete { - border: 1px solid #757575; + /* border: 1px solid #757575; */ border-top: 0px; - width: calc(80% - 2px); + /* width: calc(80% - 2px); */ } } /* MEDIA QUERY 640 */ @@ -295,11 +293,11 @@ export default defineComponent({ @media (min-width: 800px) { .autocomplete { - border: 1px solid #f5f5f5; - border-top: 0px solid #f5f5f5; + /* border: 1px solid #f5f5f5; */ + /* border-top: 0px solid #f5f5f5; */ margin-top: -1px; margin-left: -1px; - width: calc(50%); + width: 50%; } } /* MEDIA QUERY 990 */ @@ -310,5 +308,8 @@ export default defineComponent({ } /* MEDIA QUERY 1280 */ @media (min-width: 1280px) { + .autocomplete { + width: 490px; + } } diff --git a/src/components/search/Facets.vue b/src/components/search/Facets.vue index f907fbdb..eca4389f 100644 --- a/src/components/search/Facets.vue +++ b/src/components/search/Facets.vue @@ -66,7 +66,8 @@ :key="`genreCheckbox-${index}`" :fqkey="'genre_facet'" :title="singleFacet.title" - :svg="singleFacet.title" + :icon="returnCategoryIcon(singleFacet.title)" + :icon-filled="returnFilledIconStatus(singleFacet.title)" :amount="categoryFacets.find((item) => item.title === singleFacet.title)?.number.toString() || '0'" :time-search-active="timeSearchStore.timeFacetsOpen" :number="index" @@ -85,7 +86,7 @@
- {{ resultdata.origin.split('.')[1] === 'tv' ? 'play_circle_filled' : 'volume_up' }} + {{ resultdata.origin.split('.')[1] === 'tv' ? 'play_circle' : 'volume_up' }}
-
play_circle_filled
+
play_circle
+
+ +

+ + {{ t('hero.title') }} + +

+ + +
+
+
diff --git a/src/components/search/Hero.vue b/src/components/search/Hero.vue index b80fce9a..27499391 100644 --- a/src/components/search/Hero.vue +++ b/src/components/search/Hero.vue @@ -8,113 +8,42 @@ fetchpriority="high" />
-
-
-
-

- - {{ t('hero.subtitle') }} - - - {{ t('hero.title') }} - -

- -
-
-
-

{{ t('hero.progress', { index: Math.round(currentProgress) }) }}

-

- {{ t('hero.explanation') }} -

-

- - link - {{ t('hero.linkText') }} - -

-
-
-
- {{ Math.round(currentProgress) }}% -
-
-
-
-
- -