-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* FaceMenu: Add about modal added modal with about info to FaceMenu bottom. added 4 new SVG icons. * FaceMenu: npm format * FaceMenu: refactor about modal - moved about modal into its own file - minor fixes * AboutModal: Add text to gh/site links, use Modal title prop, add attribution file link , added a hover effect to all links in the modal and removed the margin on h5. Also updated the top paragraph. * AboutModal: Remove unused style * Menu: Use color variables --------- Co-authored-by: IRHM <[email protected]>
- Loading branch information
Showing
5 changed files
with
204 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| <script lang="ts"> | ||
| import Icon from "../Icon.svelte"; | ||
| import Modal from "../Modal.svelte"; | ||
| interface Props { | ||
| onClose: () => void; | ||
| } | ||
| let { onClose }: Props = $props(); | ||
| </script> | ||
|
|
||
| <Modal title="About" {onClose} maxWidth="400px"> | ||
| <div class="content"> | ||
| <div class="inner"> | ||
| <p> | ||
| An open source project that helps you keep the content you are watching | ||
| or playing organized and places you in control. | ||
| </p> | ||
| <div class="horizontal-icon-list"> | ||
| <a | ||
| href="https://github.com/sbondCo/Watcharr" | ||
| target="_blank" | ||
| title="Github" | ||
| > | ||
| <Icon i="github" wh={60} /> | ||
| Source<br /> | ||
| Code | ||
| </a> | ||
| <a | ||
| href="https://watcharr.app/" | ||
| target="_blank" | ||
| title="Watcharr Website & Documentation" | ||
| > | ||
| <Icon i="website" wh={60} /> | ||
| Website<br /> | ||
| & Docs | ||
| </a> | ||
| </div> | ||
| <h5 class="norm">Watcharr uses the following media databases:</h5> | ||
| <div class="horizontal-icon-list"> | ||
| <a href="https://www.themoviedb.org/" target="_blank" title="TMDB"> | ||
| <Icon i="tmdb" wh={60} /> | ||
| </a> | ||
| <a href="https://www.igdb.com/" target="_blank" title="IGDB"> | ||
| <Icon i="igdb" wh={60} /> | ||
| </a> | ||
| </div> | ||
| <h5 class="norm"> | ||
| <!-- Linking to the file in `dev` branch would break every old version of | ||
| Watcharr if the file were ever moved in the future. Using the current version | ||
| as the branch should ensure this file is always accessible (but only as up to | ||
| date as the current version) --> | ||
| <a | ||
| href="https://github.com/sbondCo/Watcharr/blob/v{__WATCHARR_VERSION__}/ATTRIBUTION.md" | ||
| target="_blank" | ||
| > | ||
| See our attribution file. | ||
| </a> | ||
| </h5> | ||
| </div> | ||
| </div> | ||
| </Modal> | ||
|
|
||
| <style lang="scss"> | ||
| p { | ||
| margin: 8px 0px; | ||
| } | ||
| h5.norm { | ||
| margin: 8px 0px; | ||
| > a { | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
| div.horizontal-icon-list { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding-bottom: 20px; | ||
| padding-top: 5px; | ||
| > a { | ||
| display: flex; | ||
| flex-flow: column; | ||
| align-items: center; | ||
| gap: 5px; | ||
| margin: 0 10px; | ||
| text-align: center; | ||
| } | ||
| } | ||
| a { | ||
| transition: opacity 150ms ease-in; | ||
| &:hover { | ||
| opacity: 0.5; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters