From 12eae76b548b12aa1493310d88f2c6e09629c029 Mon Sep 17 00:00:00 2001 From: itsrubberduck Date: Sun, 21 Sep 2025 22:48:22 +0200 Subject: [PATCH] better card click actions --- app/assets/css/opensquawk-glass.css | 6 +++++- app/pages/learn.vue | 8 +++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/app/assets/css/opensquawk-glass.css b/app/assets/css/opensquawk-glass.css index 1255593..c2bbf2b 100644 --- a/app/assets/css/opensquawk-glass.css +++ b/app/assets/css/opensquawk-glass.css @@ -60,7 +60,7 @@ } /* crazy hover effect should be like glas ui 3d transformation with bounced curve without moving */ -.btn:not([disabled]):hover { +.btn:not([disabled]):hover{ transform: scaleX(1.03) scaleY(0.98); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 26px rgba(0, 0, 0, .36); @@ -68,6 +68,10 @@ color-mix(in srgb, var(--text) 12%, transparent), color-mix(in srgb, var(--text) 6%, transparent)); } +.squash:hover { + cursor: pointer; + transform: scale(1.01); +} .btn[disabled] { opacity: .4; diff --git a/app/pages/learn.vue b/app/pages/learn.vue index 0ff1be8..a76cee1 100644 --- a/app/pages/learn.vue +++ b/app/pages/learn.vue @@ -44,8 +44,10 @@ :key="m.id" class="tile" :class="tileClass(m.id)" + @click="isModuleUnlocked(m.id) && handleModulePrimary(m.id)" > -
+
mdi-star New briefing @@ -3017,8 +3019,8 @@ function tileClass(modId: string) { return { 'is-locked': !isModuleUnlocked(modId), 'is-complete': moduleCompleted(modId), - 'is-active': moduleHasProgress(modId) && !moduleCompleted(modId), - 'is-fresh': isFreshModule(modId), + 'is-active squash': moduleHasProgress(modId) && !moduleCompleted(modId), + 'is-fresh squash': isFreshModule(modId), } }