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

Adjust app-card breakpoints

Browse Source
This commit is contained in:
Fred Boniface 2025-01-24 16:18:34 +00:00
parent eccc7e5a07
commit 0948772ce3
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,19 +3,19 @@
</script>
<div id="card-container">
<MasterAppCard appName={"My Account"} appDesc={"Manage your password and passkeys"} iconName={"myaccount"} sso={true} appUrl={"https://sso.fjla.uk/realms/FJLA.net/account"} />
<MasterAppCard appName={"Nextcloud"} appDesc={"Files, Email, Calendar, Chat"} iconName={"nextcloud"} sso={false} appUrl={"https://cloud.fjla.uk"} bgColor={"#0082c9"} />
<MasterAppCard appName={"Portainer"} appDesc={"Manage containerised workloads in Docker"} iconName={"portainer"} sso={true} appUrl={"https://swarm_nodes.fjla.net:9443"} nointernet={true} bgColor={"#3BBCED"} />
<MasterAppCard appName={"SpeedyF"} appDesc={"Online Compressor for PDF Files"} iconName={"speedyf"} sso={false} appUrl={"https://speedyf.fjla.uk"} bgColor={"#00001a"} />
<MasterAppCard appName={"Jellyfin"} appDesc={"Stream films and TV, watch Live TV"} iconName={"jellyfin"} sso={false} appUrl={"http://jf.fjla.net:8096"} nointernet={true} bgColor={"#AA5CC3"} />
<MasterAppCard appName={"Proxmox"} appDesc={"Manage virtual machines"} iconName={"proxmoxve"} sso={true} appUrl={"https://pve0124.fjla.net:8006"} nointernet={true} bgColor={"#e57000"} />
<MasterAppCard appName={"Home Assistant"} appDesc={"Smart Home Management"} iconName={"homeassistant"} sso={false} appUrl={"https://ha.fjla.uk"} bgColor={"#18BCF2"} />
<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={"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"} />
</div>
<style>
#card-container {
width: 90%;
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;

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

@ -46,13 +46,19 @@
}
/* Responsive styles for smaller screens */
@media (max-width: 875px) {
@media (max-width: 776px) {
#app-card {
width: calc(33.333% - 2px);
}
}
@media (max-width: 582px) {
#app-card {
width: calc(50% - 2px); /* 2 cards per row on smaller screens */
}
}
@media (max-width: 676px) {
@media (max-width: 388px) {
#app-card {
width: calc(100% - 2px); /* 1 card per row on very small screens */
}