GithubHelp home page GithubHelp logo

tokitouq / coreproject-v3-ui Goto Github PK

View Code? Open in Web Editor NEW
42.0 3.0 6.0 118.49 MB

v3 CoreProject UI - a modern anime streaming platform frontend powered with svelte and sveltekit

Home Page: https://core-project-v3-ui.vercel.app/

License: GNU Affero General Public License v3.0

JavaScript 0.79% TypeScript 31.02% HTML 0.08% SCSS 0.35% Svelte 67.56% CSS 0.20%
svelte sveltekit tailwind tailwindcss skeleton typescript anime anime-streaming anime-streaming-for-free

coreproject-v3-ui's People

Contributors

baseplate-admin avatar dependabot[bot] avatar girish-07 avatar imgbot[bot] avatar imgbotapp avatar tokitouq avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

coreproject-v3-ui's Issues

Rating star icon size issue

Screenshot from 2023-04-17 20-25-41

@baseplate-admin
See this star icon size doesnt support string values only integer values
So we cant use vw values here

Screenshot from 2023-04-17 20-28-49

<StarRating
	rating={4.5}
	config={{ size: 20,  fullColor: '#DCD9F7', emptyColor: 'rgb(220, 217, 247, 0.4)' }}
	style={'margin: 0; gap: 5px'}
/>

This will be an issue in responsivness

Move to the backend compatiable api

{
  "id": 1,
  "mal_id": 23273,
  "anilist_id": null,
  "kitsu_id": null,
  "name": "Your Lie in April",
  "name_japanese": "四月は君の嘘",
  "source": null,
  "aired_from": null,
  "aired_to": null,
  "banner": "/media/banner/0116f50b-627b-46e9-99dd-2c63df73e381.jpg",
  "cover": "/media/cover/447aa864-ebd1-403f-a604-d7df6603ae89.jpg",
  "banner_background_color": "#2A1710",
  "cover_background_color": "#D8E4D8",
  "synopsis": "Kousei Arima is a child prodigy known as the \"Human Metronome\" for playing the piano with precision and perfection. Guided by a strict mother and rigorous training, Kousei dominates every competition he enters, earning the admiration of his musical peers and praise from audiences. When his mother suddenly passes away, the subsequent trauma makes him unable to hear the sound of a piano, and he never takes the stage thereafter.\r\n\r\nNowadays, Kousei lives a quiet and unassuming life as a junior high school student alongside his friends Tsubaki Sawabe and Ryouta Watari. While struggling to get over his mother's death, he continues to cling to music. His monochrome life turns upside down the day he encounters the eccentric violinist Kaori Miyazono, who thrusts him back into the spotlight as her accompanist. Through a little lie, these two young musicians grow closer together as Kaori tries to fill Kousei's world with color.\r\n\r\n[Written by MAL Rewrite]",
  "background": "Winner in the anime division of the 2016 Sugoi Japan® Awards.",
  "rating": "",
  "updated": "2023-03-11T02:37:40.790Z",
  "name_synonyms": [],
  "genres": "/api/v1/anime/1/genres",
  "themes": "/api/v1/anime/1/themes",
  "characters": "/api/v1/anime/1/character",
  "studios": "/api/v1/anime/1/studios",
  "producers": "/api/v1/anime/1/producers",
  "staffs": "/api/v1/anime/1/staffs",
  "recommendations": [],
  "episodes": "/api/v1/anime/1/episodes",
  "openings": [],
  "endings": [],
  "episodes_count": 9,
  "average_episode_length": 1611
}

This is the Data exposed by backend. Please move to this API in
https://github.com/baseplate-admin/CoreProject-V3-UI/blob/126efedf5034d5d9f5dc2c01bbe70ac412a941de/src/lib/data/mock/anime_list.ts#L2-L31

Convert SearchBar to `modal`

Popup is not working fine on live as in dev env.

Current Behavior

Popup is working fine on dev env but when it comes in live, that popup disappears when I hover and move around on trigger div.
And I'm using popup inside a loop, here is the main code

<script lang="ts">
	// skeleton and floating-ui
	import { popup } from '@skeletonlabs/skeleton';
	import type { PopupSettings } from '@skeletonlabs/skeleton';
	import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
	import { storePopup } from '@skeletonlabs/skeleton';

	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });

	let popupSettings: PopupSettings = {
		event: 'hover', // event
		target: 'my_list_popup' // data-popup value
	};
</script>

<div>
	<div>
		{#each my_list as anime}
			<div
				use:popup={popupSettings}
			>
				<div>
                                        <!-- trigger code -->
                                </div>
			</div>
                        <div
				data-popup="my_list_popup"
			>
				<!-- popup code -->
				<div class="arrow bg-surface-50" />
			</div>
		{/each}
	</div>
</div>

and here is the full code https://pastebin.mozilla.org/nR4kuXHR

Screencast.from.2023-04-26.20-34-04.webm

1st one is the live site and 2nd one is the dev env ( localhost )
The problem is with the 1st one ( live )

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.