diff --git a/elohim-app/src/app/lamad/components/lamad-layout/lamad-layout.component.css b/elohim-app/src/app/lamad/components/lamad-layout/lamad-layout.component.css index 47d448268..d44331f2c 100644 --- a/elohim-app/src/app/lamad/components/lamad-layout/lamad-layout.component.css +++ b/elohim-app/src/app/lamad/components/lamad-layout/lamad-layout.component.css @@ -76,6 +76,37 @@ opacity: 0.7; } +/* Learning Path Widget */ +.learning-path-widget { + display: flex; + flex-direction: column; + gap: 0.25rem; + background: var(--lamad-bg-secondary); + border: 1px solid var(--lamad-border); + border-radius: 0.25rem; + padding: 0.25rem 0.5rem; + backdrop-filter: blur(10px); + min-width: 180px; +} + +.path-name { + font-size: 0.75rem; + font-weight: 600; + color: var(--lamad-text-secondary); + background: var(--lamad-accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + line-height: 1; +} + +.progress-text { + font-size: 0.7rem; + color: var(--lamad-text-muted); + font-weight: 500; + line-height: 1; +} + /* Theme Toggle in Toolbar */ .toolbar-theme-toggle { flex: 0 0 auto; @@ -267,4 +298,9 @@ .lamad-main { padding: 1rem; } + + .learning-path-widget { + width: 100%; + min-width: unset; + } } diff --git a/elohim-app/src/app/lamad/components/lamad-layout/lamad-layout.component.html b/elohim-app/src/app/lamad/components/lamad-layout/lamad-layout.component.html index e1aecbfb0..644505d51 100644 --- a/elohim-app/src/app/lamad/components/lamad-layout/lamad-layout.component.html +++ b/elohim-app/src/app/lamad/components/lamad-layout/lamad-layout.component.html @@ -8,6 +8,12 @@

📚 Lamad

+ +
+
{{ learningPathName }}
+
{{ masteryPercentage }}% to mastery
+
+