MinPluto/MinPluto-Frontend
MinPluto/MinPluto-Frontend
Archived
1
Fork 0
Code Issues Pull requests Activity

Update how channels are listed in Discover page

Browse source
This commit is contained in:
Korbs 2024-07-12 19:22:59 -04:00
parent ff6bd0824d
commit 393838e9ad
2 changed files with 53 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/DiscoverChannel.astro Normal file
View file

@ -0,0 +1,42 @@
---
// Properties
const {
ChannelId
} = Astro.props
// Configuration
import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY} from '@utils/GetConfig'
// Fetch
const channel = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/channels/" + ChannelId).then((response) => response.json());
---
<a href={'/channel/' + channel.authorId} style={"background: url('" + DEFAULT_IMAGE_PROXY + '/' + channel.authorThumbnails[0].url} class="discovery-channel">
<div class="dc-c">
<img src={DEFAULT_IMAGE_PROXY + '/' + channel.authorThumbnails[5].url}/>
<p>{channel.author}</p>
</div>
</a>
<style lang="scss">
.discovery-channel {
text-decoration: none;
border-radius: 10px;
font-weight: bold;
background-position: center !important;
background-size: cover !important;
.dc-c {
border-radius: 10px;
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
img {
width: 24%;
align-self: center;
border-radius: 10rem;
padding: 30px;
}
}
}
</style>

47
src/pages/discover/tech.astro
View file

@ -1,28 +1,26 @@
---
import { changeLanguage } from "i18next";
// Layout
import Base from "@layouts/Default.astro";
import Discover from "@layouts/Discover.astro";
// Properties
const { FetchData, CategoryName, CategoryDescription } = Astro.props;
// Use on top of Default Layout
import Base from "@layouts/Default.astro";
// Components
import DiscoverChannel from '@components/DiscoverChannel.astro'
// Configuration
import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY } from '@utils/GetConfig'
// Discover Data
import Discover from "../../data/discover.json";
import DiscoverData from "../../data/discover.json";
---
<Base>
<div class="video-grid">
{Discover.Tech.map((channel) =>
<a href={'/channel/' + channel.Link} style={"background: url('" + DEFAULT_MEDIA_DATA_PROXY + channel.Banner} class="discovery-channel">
<div class="dc-c">
<img src={DEFAULT_MEDIA_DATA_PROXY + channel.Logo}/>
<p>{channel.Name}</p>
</div>
</a>
{DiscoverData.Tech.map((channel) =>
<DiscoverChannel ChannelId={channel.Id}/>
)}
</div>
<hr/>
@ -32,27 +30,4 @@ import Discover from "../../data/discover.json";
</div>
</Base>
<style is:inline>a[href="/discover/tech"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
<style lang="scss">
.discovery-channel {
text-decoration: none;
border-radius: 10px;
font-weight: bold;
background-position: center !important;
background-size: cover !important;
.dc-c {
border-radius: 10px;
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
img {
width: 24%;
align-self: center;
border-radius: 10rem;
padding: 30px;
}
}
}
</style>
<style is:inline>a[href="/discover/tech"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>