Split navigation icons/header into more components, fixed svg transition
Split more out into `Hamburger` & `NavigationIcon` components.
This commit is contained in:
@@ -6,75 +6,15 @@
|
||||
|
||||
<SearchInput />
|
||||
|
||||
<div class="nav__hamburger" @click="toggleNav">
|
||||
<div v-for="_ in 3" class="bar"></div>
|
||||
</div>
|
||||
<Hamburger @click="toggleNav" />
|
||||
|
||||
<router-link class="profile desktop-only" to="/profile">
|
||||
<li class="navigation-link">
|
||||
<icon-profile class="navigation-icon" />
|
||||
<span>{{ !userLoggedIn ? "Signin" : "Profile" }}</span>
|
||||
</li>
|
||||
</router-link>
|
||||
<!-- <NavigationIcons class="desktop-only" /> -->
|
||||
<NavigationIcon class="desktop-only" :route="profileRoute" />
|
||||
|
||||
<div class="nav__list mobile-only">
|
||||
<div class="nav__list mobile-only" :class="{ open: hamburgerMenuOpen }">
|
||||
<NavigationIcons>
|
||||
<router-link
|
||||
v-if="userLoggedIn"
|
||||
class="settings"
|
||||
to="/profile?settings=true"
|
||||
>
|
||||
<li class="navigation-link">
|
||||
<icon-settings class="navigation-icon stroke" />
|
||||
<span>Settings</span>
|
||||
</li>
|
||||
</router-link>
|
||||
|
||||
<router-link v-if="userLoggedIn" class="profile" to="/activity">
|
||||
<li class="navigation-link">
|
||||
<icon-activity class="navigation-icon stroke" />
|
||||
<span>Activity</span>
|
||||
</li>
|
||||
</router-link>
|
||||
|
||||
<router-link class="profile" to="/profile">
|
||||
<li class="navigation-link">
|
||||
<icon-profile class="navigation-icon" />
|
||||
<span>{{ !userLoggedIn ? "Signin" : "Profile" }}</span>
|
||||
</li>
|
||||
</router-link>
|
||||
<NavigationIcon :route="profileRoute" />
|
||||
</NavigationIcons>
|
||||
|
||||
<!-- <li class="nav__item nav__item--profile">
|
||||
<router-link
|
||||
class="nav__link nav__link--profile"
|
||||
:to="{ name: 'signin' }"
|
||||
v-if="!userLoggedIn"
|
||||
>
|
||||
<div class="nav__link-wrap">
|
||||
<svg class="nav__link-icon">
|
||||
<use xlink:href="#iconLogin"></use>
|
||||
</svg>
|
||||
<span class="nav__link-title">Sign in</span>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
class="nav__link nav__link--profile"
|
||||
:to="{ name: 'profile' }"
|
||||
v-if="userLoggedIn"
|
||||
>
|
||||
<div class="nav__link-wrap">
|
||||
<svg class="nav__link-icon">
|
||||
<use xlink:href="#iconLogin"></use>
|
||||
</svg>
|
||||
<span class="nav__link-title">Profile</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</li> -->
|
||||
</div>
|
||||
<div style="z-index: -1"></div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
@@ -86,110 +26,45 @@ import IconSettings from "../icons/IconSettings";
|
||||
import IconActivity from "../icons/IconActivity";
|
||||
import SearchInput from "@/components/SearchInput";
|
||||
import NavigationIcons from "src/components/NavigationIcons";
|
||||
import NavigationIcon from "src/components/ui/NavigationIcon";
|
||||
import Hamburger from "@/components/ui/Hamburger";
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NavigationIcons,
|
||||
NavigationIcon,
|
||||
SearchInput,
|
||||
TmdbLogo,
|
||||
IconProfile,
|
||||
IconSettings,
|
||||
IconActivity
|
||||
IconActivity,
|
||||
Hamburger
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
listTypes: storage.homepageLists,
|
||||
userLoggedIn: localStorage.getItem("token") ? true : false
|
||||
hamburgerMenuOpen: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setUserStatus() {
|
||||
this.userLoggedIn = localStorage.getItem("token") ? true : false;
|
||||
},
|
||||
toggleNav() {
|
||||
document
|
||||
.querySelector(".nav__hamburger")
|
||||
.classList.toggle("nav__hamburger--active");
|
||||
document
|
||||
.querySelector(".nav__list")
|
||||
.classList.toggle("nav__list--active");
|
||||
this.hamburgerMenuOpen = !this.hamburgerMenuOpen;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// TODO move this to state manager
|
||||
eventHub.$on("setUserStatus", this.setUserStatus);
|
||||
computed: {
|
||||
...mapGetters("user", ["loggedIn"]),
|
||||
profileRoute() {
|
||||
return {
|
||||
title: !this.loggedIn ? "Signin" : "Profile",
|
||||
route: !this.loggedIn ? "/signin" : "/profile",
|
||||
icon: IconProfile
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./src/scss/media-queries";
|
||||
|
||||
.profile.desktop-only .navigation-link,
|
||||
.navigation-link {
|
||||
border-bottom: none;
|
||||
border-left: 1px solid var(--text-color-5);
|
||||
}
|
||||
|
||||
.navigation-link {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
list-style: none;
|
||||
padding: 1rem 0.15rem;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
background-color: var(--background-color-secondary);
|
||||
transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
|
||||
fill 0.3s ease, background-color 0.5s ease;
|
||||
|
||||
@include mobile {
|
||||
padding: 1rem;
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--background-color);
|
||||
|
||||
span,
|
||||
.navigation-icon {
|
||||
color: var(--text-color);
|
||||
fill: var(--text-color);
|
||||
|
||||
&.stroke {
|
||||
fill: none;
|
||||
stroke: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
text-transform: uppercase;
|
||||
margin-top: 0.75rem;
|
||||
font-size: 11px;
|
||||
color: var(--text-color-70);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navigation-icon {
|
||||
width: 28px;
|
||||
fill: var(--text-color-70);
|
||||
transition: inherit;
|
||||
|
||||
&.stroke {
|
||||
fill: none;
|
||||
stroke: var(--text-color-70);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@import "./src/scss/variables";
|
||||
@import "./src/scss/media-queries";
|
||||
@@ -213,6 +88,12 @@ nav {
|
||||
.logo {
|
||||
padding: 1rem;
|
||||
fill: var(--color-green);
|
||||
width: var(--header-size);
|
||||
height: var(--header-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $background-nav-logo;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
@@ -224,123 +105,21 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
// transition: background 0.5s ease;
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: 50px;
|
||||
// z-index: 10;
|
||||
// display: block;
|
||||
// color: $text-color;
|
||||
// background-color: $background-color-secondary;
|
||||
.nav__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: fixed;
|
||||
top: var(--header-size);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: $background-95;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
|
||||
&__logo {
|
||||
width: var(--header-size);
|
||||
height: var(--header-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $background-nav-logo;
|
||||
|
||||
// &-image {
|
||||
// width: 35px;
|
||||
// height: 31px;
|
||||
// fill: $green;
|
||||
// transition: transform 0.5s ease;
|
||||
// @include tablet-min {
|
||||
// width: 45px;
|
||||
// height: 40px;
|
||||
// }
|
||||
// }
|
||||
// &:hover &-image {
|
||||
// transform: scale(1.04);
|
||||
// }
|
||||
}
|
||||
&__hamburger {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: var(--header-size);
|
||||
height: var(--header-size);
|
||||
cursor: pointer;
|
||||
border-left: 1px solid $background-color;
|
||||
background-color: var(--background-color-secondary);
|
||||
|
||||
@include tablet-min {
|
||||
display: none;
|
||||
}
|
||||
.bar {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 1px;
|
||||
background-color: $text-color-70;
|
||||
transition: all 300ms ease;
|
||||
&:nth-child(1) {
|
||||
left: 16px;
|
||||
top: 17px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
left: 16px;
|
||||
top: 25px;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 23px;
|
||||
height: 1px;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
right: 15px;
|
||||
top: 33px;
|
||||
}
|
||||
}
|
||||
&--active {
|
||||
.bar {
|
||||
&:nth-child(1),
|
||||
&:nth-child(3) {
|
||||
width: 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:nth-child(2):after {
|
||||
transform: rotate(-90deg);
|
||||
// background: rgba($c-dark, 0.5);
|
||||
background-color: $text-color-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__list {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: var(--header-size);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
visibility: hidden;
|
||||
|
||||
@include mobile-only {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: $background-95;
|
||||
&--active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@include tablet-min {
|
||||
display: flex;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-top: 0;
|
||||
top: 0;
|
||||
}
|
||||
&.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,32 +1,34 @@
|
||||
<template>
|
||||
<ul class="navigation-icons">
|
||||
<router-link
|
||||
:to="{ path: route.route }"
|
||||
<NavigationIcon
|
||||
v-for="route in routes"
|
||||
:key="route.title"
|
||||
>
|
||||
<li
|
||||
class="navigation-link"
|
||||
:class="{ active: route.route == activeRoute }"
|
||||
>
|
||||
<component class="navigation-icon" :is="route.icon"></component>
|
||||
<span>{{ route.title }}</span>
|
||||
</li>
|
||||
</router-link>
|
||||
|
||||
:route="route"
|
||||
:active="activeRoute"
|
||||
/>
|
||||
<slot></slot>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavigationIcon from "./ui/NavigationIcon";
|
||||
import IconRequest from "../icons/IconRequest";
|
||||
import IconNowPlaying from "../icons/IconNowPlaying";
|
||||
import IconPopular from "../icons/IconPopular";
|
||||
import IconUpcoming from "../icons/IconUpcoming";
|
||||
import IconSettings from "../icons/IconSettings";
|
||||
import IconActivity from "../icons/IconActivity";
|
||||
|
||||
export default {
|
||||
name: "NavigationIcons",
|
||||
components: { IconRequest, IconPopular, IconNowPlaying, IconUpcoming },
|
||||
components: {
|
||||
NavigationIcon,
|
||||
IconRequest,
|
||||
IconPopular,
|
||||
IconNowPlaying,
|
||||
IconUpcoming,
|
||||
IconSettings,
|
||||
IconActivity
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
routes: [],
|
||||
@@ -68,6 +70,18 @@ export default {
|
||||
route: "/list/upcoming",
|
||||
apiPath: "/v2/movie/upcoming",
|
||||
icon: IconUpcoming
|
||||
},
|
||||
{
|
||||
title: "Activity",
|
||||
route: "/activity",
|
||||
requiresAuth: true,
|
||||
icon: IconActivity
|
||||
},
|
||||
{
|
||||
title: "Settings",
|
||||
route: "/profile?settings=true",
|
||||
requiresAuth: true,
|
||||
icon: IconSettings
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
90
src/components/ui/Hamburger.vue
Normal file
90
src/components/ui/Hamburger.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div
|
||||
class="nav__hamburger"
|
||||
:class="{ open }"
|
||||
@click="toggleNav"
|
||||
@keydown.enter="toggleNav"
|
||||
tabindex="0"
|
||||
>
|
||||
<div v-for="_ in 3" class="bar"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
open: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleNav() {
|
||||
this.open = !this.open;
|
||||
this.$emit("click", this.open);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./src/scss/media-queries";
|
||||
|
||||
.nav__hamburger {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: var(--header-size);
|
||||
height: var(--header-size);
|
||||
cursor: pointer;
|
||||
border-left: 1px solid var(--background-color);
|
||||
background-color: var(--background-color-secondary);
|
||||
|
||||
@include tablet-min {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 1px;
|
||||
background-color: var(--text-color-70);
|
||||
transition: all 300ms ease;
|
||||
&:nth-child(1) {
|
||||
left: 16px;
|
||||
top: 17px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
left: 16px;
|
||||
top: 25px;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 23px;
|
||||
height: 1px;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
right: 15px;
|
||||
top: 33px;
|
||||
}
|
||||
}
|
||||
&.open {
|
||||
.bar {
|
||||
&:nth-child(1),
|
||||
&:nth-child(3) {
|
||||
width: 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:nth-child(2):after {
|
||||
transform: rotate(-90deg);
|
||||
// background: rgba($c-dark, 0.5);
|
||||
background-color: var(--text-color-70);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
src/components/ui/NavigationIcon.vue
Normal file
90
src/components/ui/NavigationIcon.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<router-link
|
||||
:to="{ path: route.route }"
|
||||
:key="route.title"
|
||||
v-if="
|
||||
route.requiresAuth == undefined || (route.requiresAuth && userLoggedIn)
|
||||
"
|
||||
>
|
||||
<li class="navigation-link" :class="{ active: route.route == active }">
|
||||
<component class="navigation-icon" :is="route.icon"></component>
|
||||
<span>{{ route.title }}</span>
|
||||
</li>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NavigationIcons",
|
||||
props: {
|
||||
active: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
route: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userLoggedIn() {
|
||||
return localStorage.getItem("token") ? true : false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./src/scss/media-queries";
|
||||
|
||||
.navigation-link {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: var(--header-size);
|
||||
list-style: none;
|
||||
padding: 1rem 0.15rem;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
background-color: var(--background-color-secondary);
|
||||
transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
|
||||
fill 0.3s ease, background-color 0.5s ease;
|
||||
|
||||
@include mobile {
|
||||
height: 90px;
|
||||
padding: 1rem;
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: var(--background-color);
|
||||
|
||||
span,
|
||||
.navigation-icon {
|
||||
color: var(--text-color);
|
||||
stroke: var(--text-color);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
color: var(--text-color-70);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navigation-icon {
|
||||
width: 28px;
|
||||
stroke: var(--text-color-70);
|
||||
transition: inherit;
|
||||
}
|
||||
</style>
|
||||
@@ -4,9 +4,12 @@
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
style="transition: stroke-width 0.5s ease"
|
||||
>
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
|
||||
</svg>
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 30 30"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
style="transition: stroke-width 0.5s ease"
|
||||
>
|
||||
<title>Now Playing</title>
|
||||
<path
|
||||
d="M27.9847266,7.50322266 C25.9822852,4.03494141 22.749082,1.55390625 18.8806055,0.517382812 C15.0121875,-0.519257812 10.9716797,0.0127148437 7.50322266,2.01527344 C4.03482422,4.01777344 1.55390625,7.25097656 0.517382812,11.1194531 C-0.519140625,14.9878711 0.0128320312,19.0284961 2.01527344,22.4967773 C4.01765625,25.9650586 7.25097656,28.4460937 11.1193945,29.4826172 C12.4111523,29.8287891 13.7219531,30 15.0244336,30 C17.6224219,30 20.1866016,29.3186133 22.4968359,27.9847852 C25.9651172,25.9823437 28.4461523,22.7491406 29.4826758,18.8806641 C30.5192578,15.0121289 29.987168,10.9716211 27.9847266,7.50322266 Z M27.9743555,18.476543 C27.0457617,21.9421289 24.8231836,24.8387109 21.715957,26.6326172 C18.6088477,28.426582 14.989043,28.9030664 11.523457,27.9745898 C8.0578125,27.0459961 5.16128906,24.823418 3.36732422,21.7161914 C1.57341797,18.609082 1.096875,14.9892188 2.02552734,11.5235742 C2.95417969,8.05798828 5.17675781,5.16152344 8.28392578,3.3675 C10.35375,2.17248047 12.6505664,1.56210937 14.9782031,1.56210937 C16.1448047,1.56210937 17.3195508,1.71550781 18.4763672,2.02552734 C21.9419531,2.95412109 24.8385352,5.17669922 26.6324414,8.28392578 C28.4264063,11.3910937 28.9030078,15.0108984 27.9743555,18.476543 Z M22.1940234,13.5850781 L12.5538281,8.01925781 C12.0422461,7.72388672 11.4314648,7.72400391 10.9198828,8.01919922 C10.4083008,8.31451172 10.1028516,8.84355469 10.1028516,9.43423828 L10.1028516,20.5658789 C10.1028516,21.1565625 10.4082422,21.6855469 10.9198828,21.980918 C11.1756445,22.1286328 11.4561328,22.2024023 11.7367383,22.2024023 C12.0174023,22.2024023 12.2980078,22.128457 12.5537695,21.9808594 L22.194082,16.4150977 C22.7056055,16.119668 23.0109375,15.5906836 23.0109375,15 C23.0109375,14.409375 22.7055469,13.8803906 22.1940234,13.5850781 Z M21.4132031,15.0629297 L11.7729492,20.6286914 C11.7611719,20.6355469 11.7366211,20.649668 11.7005273,20.6286914 C11.6643164,20.6077734 11.6643164,20.5795312 11.6643164,20.5659375 L11.6643164,9.43429687 C11.6643164,9.42070312 11.6643164,9.39246094 11.7005273,9.37154297 C11.714707,9.36333984 11.7270703,9.36052734 11.7376172,9.36052734 C11.7540234,9.36052734 11.7658594,9.36738281 11.7730664,9.37154297 L21.4132617,14.9373633 C21.4250391,14.9441602 21.4494727,14.9582812 21.4494727,15.0001172 C21.4494727,15.0419531 21.4249219,15.0561328 21.4132031,15.0629297 Z M24.2169727,7.87734375 C22.3601953,5.47863281 19.5689648,3.86707031 16.5588867,3.45580078 C16.1321484,3.39738281 15.7380469,3.69638672 15.6796289,4.12371094 C15.6213281,4.55091797 15.920332,4.94455078 16.3475391,5.00296875 C18.9556641,5.35927734 21.3738867,6.75544922 22.9822266,8.83318359 C23.1360937,9.03193359 23.3668945,9.13599609 23.6001562,9.13599609 C23.7670898,9.13599609 23.9353125,9.08273437 24.0774609,8.97257813 C24.418418,8.70867187 24.4808789,8.21830078 24.2169727,7.87734375 Z"
|
||||
fill-rule="nonzero"
|
||||
></path>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polygon points="10 8 16 12 10 16 10 8"></polygon>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 30 30"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
style="transition: stroke-width 0.5s ease"
|
||||
>
|
||||
<title>Popular</title>
|
||||
<path
|
||||
d="M27.6684375,11.6432813 C28.2116602,11.1137695 28.4034375,10.3366406 28.1690625,9.61517578 C27.9346289,8.89371094 27.3226758,8.37779297 26.5719727,8.26875 L20.0077148,7.31490234 C19.8788672,7.29621094 19.7674805,7.21529297 19.7098242,7.09845703 L16.7742187,1.1503125 C16.4385352,0.470039062 15.7587305,0.0474609375 15.0001172,0.0474609375 C14.2415039,0.0474609375 13.5616992,0.470039062 13.2260156,1.1503125 L10.2904102,7.09851563 C10.2326953,7.21529297 10.1213672,7.29621094 9.99246094,7.31496094 L3.42832031,8.26875 C2.67761719,8.37779297 2.06572266,8.89371094 1.83123047,9.61517578 C1.59673828,10.3366406 1.78857422,11.1137695 2.33185547,11.6432813 L7.08175781,16.2733008 C7.17498047,16.3642383 7.21757812,16.4951953 7.19554687,16.6235742 L6.07423828,23.1612305 C5.94603516,23.9089453 6.24755859,24.650332 6.86126953,25.0962305 C7.47498047,25.5422461 8.27349609,25.5998438 8.94486328,25.2469336 L14.8160156,22.1602734 C14.9313281,22.0996289 15.0689648,22.0996289 15.1843359,22.1602734 L21.0555469,25.2469336 C21.3475781,25.4004492 21.6635742,25.4763281 21.9780469,25.4762695 C22.3864453,25.4762695 22.7922656,25.3483008 23.1389648,25.0961719 C23.7526758,24.6502148 24.0542578,23.9087695 23.9259961,23.1611719 L22.8046875,16.6235156 C22.7827148,16.4951367 22.8252539,16.3641797 22.9184766,16.2732422 L27.6684375,11.6432813 Z M21.2448633,16.8911719 L22.3661719,23.4289453 C22.4036719,23.6477344 22.2686133,23.7724805 22.2087891,23.8158984 C22.1489062,23.8592578 21.9884766,23.9493164 21.7920703,23.845957 L15.9208594,20.7592969 C15.6326367,20.607832 15.3164648,20.5320117 15.0002344,20.5320117 C14.6840039,20.5320117 14.3677734,20.607832 14.0796094,20.7592383 L8.20845703,23.8458398 C8.01193359,23.9491406 7.8515625,23.8591992 7.79173828,23.8157813 C7.73191406,23.7723633 7.59679688,23.6476172 7.63435547,23.4288281 L8.75566406,16.8911719 C8.86576172,16.2492773 8.653125,15.594668 8.18666016,15.1400391 L3.43675781,10.5100195 C3.27779297,10.3549805 3.31376953,10.1746875 3.33667969,10.104375 C3.35947266,10.0340039 3.43640625,9.86695313 3.65607422,9.83507813 L10.2201563,8.88123047 C10.8646289,8.78759766 11.4215625,8.38306641 11.7098437,7.79894531 L14.6454492,1.85074219 C14.7437109,1.65169922 14.9262891,1.63019531 15.000293,1.63019531 C15.0741797,1.63019531 15.2567578,1.65164063 15.3550781,1.85074219 L15.3550781,1.85080078 L18.2906836,7.79900391 C18.5789062,8.383125 19.1357813,8.78765625 19.7802539,8.88128906 L26.3444531,9.83513672 C26.5641211,9.86701172 26.6409961,10.0340625 26.6638477,10.1044336 C26.6866992,10.1748047 26.7227344,10.3551563 26.5637109,10.5100781 L21.8138086,15.1400977 C21.3474023,15.594668 21.1347656,16.2492773 21.2448633,16.8911719 Z M24.2450977,1.14990234 C24.5987109,1.40677734 24.6770508,1.90171875 24.4201758,2.25533203 L23.5801172,3.41150391 C23.4253125,3.62455078 23.1840234,3.73769531 22.9392773,3.73769531 C22.7780273,3.73769531 22.6153125,3.68853516 22.4747461,3.58652344 C22.1211328,3.32964844 22.042793,2.83470703 22.299668,2.48115234 L23.1397266,1.32498047 C23.3966016,0.971425781 23.8914258,0.893027344 24.2450977,1.14990234 Z M7.696875,2.47646484 C7.95380859,2.83007812 7.87541016,3.32501953 7.52185547,3.58183594 C7.38146484,3.68390625 7.21869141,3.73306641 7.05738281,3.73306641 C6.81257813,3.73306641 6.57128906,3.61998047 6.41642578,3.40675781 L5.57636719,2.25058594 C5.31949219,1.89703125 5.39789063,1.40208984 5.75144531,1.14521484 C6.10511719,0.888457031 6.6,0.966855469 6.85681641,1.32029297 L7.696875,2.47646484 Z M2.9034375,17.8024805 C3.03849609,18.2182031 2.81103516,18.6646289 2.39537109,18.7996875 L1.03617188,19.2413672 C0.954902344,19.267793 0.872460937,19.2803906 0.791425781,19.2803906 C0.457851563,19.2803906 0.147597656,19.0678125 0.0389648437,18.7333008 C-0.09609375,18.3176953 0.131308594,17.8711523 0.54703125,17.7360938 L1.90623047,17.2944141 C2.32195313,17.1593555 2.76837891,17.386875 2.9034375,17.8024805 Z M15.000293,26.5890234 C15.4374023,26.5890234 15.7916602,26.9432813 15.7916602,27.3803906 L15.7916602,28.8096094 C15.7916602,29.2466602 15.4373437,29.6009766 15.000293,29.6009766 C14.5632422,29.6009766 14.2089258,29.2466602 14.2089258,28.8096094 L14.2089258,27.3803906 C14.2089258,26.9433398 14.5632422,26.5890234 15.000293,26.5890234 Z M29.4529688,17.737207 C29.8686328,17.8722656 30.0960938,18.3186914 29.9610352,18.7343555 C29.8524023,19.0688086 29.5421484,19.2814453 29.2085156,19.2814453 C29.1274805,19.2814453 29.0450977,19.2689063 28.9638281,19.2425391 L27.6046289,18.8008594 C27.1889063,18.6658008 26.9615039,18.219375 27.0965625,17.8036523 C27.2316211,17.3879297 27.6782227,17.1605859 28.0937695,17.2955273 L29.4529688,17.737207 Z"
|
||||
fill-rule="nonzero"
|
||||
></path>
|
||||
<polygon
|
||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||||
></polygon>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,14 +1,19 @@
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 30 30"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
style="transition: stroke-width 0.5s ease"
|
||||
>
|
||||
<title>icon_requests</title>
|
||||
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
|
||||
<path
|
||||
d="M17.5 6h-16c-0.827 0-1.5 0.673-1.5 1.5v9c0 0.827 0.673 1.5 1.5 1.5h16c0.827 0 1.5-0.673 1.5-1.5v-9c0-0.827-0.673-1.5-1.5-1.5zM17.5 7c0.030 0 0.058 0.003 0.087 0.008l-7.532 5.021c-0.29 0.193-0.819 0.193-1.109 0l-7.532-5.021c0.028-0.005 0.057-0.008 0.087-0.008h16zM17.5 17h-16c-0.276 0-0.5-0.224-0.5-0.5v-8.566l7.391 4.927c0.311 0.207 0.71 0.311 1.109 0.311s0.798-0.104 1.109-0.311l7.391-4.927v8.566c0 0.276-0.224 0.5-0.5 0.5z"
|
||||
fill-rule="nonzero"
|
||||
transform="scale(1.5)"
|
||||
d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@@ -4,9 +4,12 @@
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
style="transition: stroke-width 0.5s ease"
|
||||
>
|
||||
<line x1="4" y1="21" x2="4" y2="14"></line>
|
||||
<line x1="4" y1="10" x2="4" y2="3"></line>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<svg
|
||||
version="1.1"
|
||||
width="300"
|
||||
height="200"
|
||||
width="100%"
|
||||
height="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 50 45"
|
||||
style="outline-offset: -5px"
|
||||
>
|
||||
<title>TMDB Logo</title>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user