fred.boniface/fjla-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust colors of app cards and make the entire card clickable

Browse Source
This commit is contained in:
Fred Boniface 2025-02-08 22:45:33 +00:00
parent 0948772ce3
commit e9c7ddb8e0
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/app-cards/AppCardArray.svelte
View File

@ -4,13 +4,14 @@
<div id="card-container">
<MasterAppCard appName={"My Account"} appDesc={"Manage your account"} iconName={"myaccount"} sso={true} appUrl={"https://sso.fjla.uk/realms/FJLA.net/account"} />
<MasterAppCard appName={"Nextcloud"} appDesc={"Files, Email, Calendar"} iconName={"nextcloud"} sso={false} appUrl={"https://cloud.fjla.uk"} bgColor={"#0082c9"} />
<MasterAppCard appName={"Portainer"} appDesc={"Manage containeris"} iconName={"portainer"} sso={true} appUrl={"https://swarm_nodes.fjla.net:9443"} nointernet={true} bgColor={"#3BBCED"} />
<MasterAppCard appName={"Nextcloud"} appDesc={"Files, Email, Calendar"} iconName={"nextcloud"} sso={false} appUrl={"https://cloud.fjla.uk"} bgColor={"linear-gradient(45deg, #0082c9, #1cafff)"} />
<MasterAppCard appName={"Portainer"} appDesc={"Manage containers"} iconName={"portainer"} sso={true} appUrl={"https://swarm_nodes.fjla.net:9443"} nointernet={true} bgColor={"#3BBCED"} />
<MasterAppCard appName={"SpeedyF"} appDesc={"Minify PDF Files"} iconName={"speedyf"} sso={false} appUrl={"https://speedyf.fjla.uk"} bgColor={"#00001a"} />
<MasterAppCard appName={"Jellyfin"} appDesc={"Films, TV & Music"} iconName={"jellyfin"} sso={false} appUrl={"http://jf.fjla.net:8096"} nointernet={true} bgColor={"#AA5CC3"} />
<MasterAppCard appName={"Proxmox"} appDesc={"Virtual machines"} iconName={"proxmoxve"} sso={true} appUrl={"https://pve0124.fjla.net:8006"} nointernet={true} bgColor={"#e57000"} />
<MasterAppCard appName={"Home Assistant"} appDesc={"Smart Home"} iconName={"homeassistant"} sso={false} appUrl={"https://ha.fjla.uk"} bgColor={"#18BCF2"} />
<MasterAppCard appName={"Gitea"} appDesc={"Code & Package Repo"} iconName={"gitea"} sso={true} appUrl={"https://git.fjla.uk"} bgColor={"#609926"} />
<MasterAppCard appName={"Jellyfin"} appDesc={"Films, TV & Music"} iconName={"jellyfin"} sso={false} appUrl={"http://jf.fjla.net:8096"} nointernet={true} bgColor={"linear-gradient(220deg, rgb(62, 34, 71), rgb(0, 60, 80))"} />
<MasterAppCard appName={"Proxmox"} appDesc={"Virtual machines"} iconName={"proxmoxve"} sso={true} appUrl={"https://pve0124.fjla.net:8006"} nointernet={true} bgColor={"linear-gradient(45deg, #e57000, darkorange)"} />
<MasterAppCard appName={"Home Assistant"} appDesc={"Smart Home"} iconName={"homeassistant"} sso={false} appUrl={"https://ha.fjla.uk"} bgColor={"linear-gradient(340deg, #0af 0%, #00bfff 50%, #00eaff 100%)"} />
<MasterAppCard appName={"Gitea"} appDesc={"Code & Package Repo"} iconName={"gitea"} sso={true} appUrl={"https://git.fjla.uk"} bgColor={"linear-gradient(45deg, green, #609926)"} />
<MasterAppCard appName={"Traccar"} appDesc={"Device Tracking History"} iconName={"traccar"} sso={false} appUrl={"https://traccar.fjla.uk"} bgColor={"linear-gradient(45deg, #007bff, #7E57C2)"} />
</div>
<style>

6
src/lib/app-cards/MasterAppCard.svelte
View File

@ -8,8 +8,8 @@
export let bgColor: string = "rgb(134, 134, 134)"
</script>
<div id="app-card" style="background-color:{bgColor}">
<a class="app-link" href={appUrl}>
<a id="app-card" style="background:{bgColor}" href={appUrl}>
<div id="app-content" style="background:{bgColor}">
<img src="/icons/{iconName}.svg" alt="{iconName}">
<div id="card-text">
<header id="app-name">{appName}</header>
@ -25,8 +25,8 @@
<img src="/icons/nointernet.svg" alt="Not available when not connected to FJLA WiFi" width=25 height=25>
{/if}
</div>
</a>
</div>
</a>
<style>