From df58caff426f5d445d7d8d60d520ee25755637b5 Mon Sep 17 00:00:00 2001 From: Kiran Surendran Pankan Date: Wed, 2 Apr 2025 13:47:31 +0530 Subject: [PATCH] fixes --- src/App.vue | 97 ++-- src/assets/scss/main.scss | 17 + src/assets/scss/variables.scss | 2 +- src/components/JobDetail.vue | 1 - src/components/Profile.vue | 82 ++- src/components/SavedJobs.vue | 46 +- src/components/Settings.vue | 891 +++++++++++++++++++++++++++++++++ src/components/SideNav.vue | 294 +++++++++-- 8 files changed, 1297 insertions(+), 133 deletions(-) create mode 100644 src/components/Settings.vue diff --git a/src/App.vue b/src/App.vue index 3576c90..28e5fc7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,6 +7,7 @@ import SavedJobs from './components/SavedJobs.vue' import JobDetail from './components/JobDetail.vue' import JobFilters from './components/JobFilters.vue' import Profile from './components/Profile.vue' +import Settings from './components/Settings.vue' import { ref, provide, onMounted, computed } from 'vue' // Current active section @@ -190,15 +191,19 @@ const closeJobDetails = () => {
-
-

{{ activeSection === 'dashboard' ? 'Dashboard' : activeSection === 'jobs' ? 'Job Board' : activeSection.charAt(0).toUpperCase() + activeSection.slice(1) }}

-
+
-

Available Positions

- {
-

Settings

-

Adjust your account settings.

+
- -
-

Job Board Application

-
@@ -289,22 +289,48 @@ const closeJobDetails = () => { } } -header { +.breadcrumb { padding: 1.5rem 2rem; margin-bottom: 1rem; - border-bottom: 1px solid #eee; + border-bottom: 1px solid var(--card-border, #eee); - h1 { + ul { + display: flex; + list-style: none; + padding: 0; margin: 0; - font-size: 1.8rem; + flex-wrap: wrap; + } + + li { + display: flex; + align-items: center; + font-size: 0.95rem; + + &:not(:last-child)::after { + content: '/'; + margin: 0 0.75rem; + color: var(--text-color-tertiary, #aaa); + } + + a { + color: var(--primary-color, #3498db); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + &.active { + color: var(--text-color, #333); + font-weight: 500; + } } } main { flex: 1; - width: 100%; - max-width: 1100px; - margin: 0 auto; padding: 0 2rem; section { @@ -318,17 +344,9 @@ main { } .jobs-container { - padding: 1.5rem; background-color: var(--bg-color, #f8f9fa); border-radius: 16px; - .section-heading { - font-size: 1.8rem; - font-weight: 600; - margin-bottom: 2rem; - color: var(--text-color, #333); - } - .filter-results { margin: 1.5rem 0; @@ -384,27 +402,26 @@ main { } } -footer { - text-align: center; - padding: 1rem 0; - margin-top: 2rem; - border-top: 1px solid #eee; - font-size: 0.9rem; - color: #888; -} + @media (prefers-color-scheme: dark) { - header { + .breadcrumb { border-bottom-color: #333; + + li { + &:not(:last-child)::after { + color: #666; + } + + &.active { + color: #eee; + } + } } main section h2 { color: #eee; } - - footer { - border-top-color: #333; - } } @media (max-width: 768px) { @@ -412,7 +429,7 @@ footer { margin-left: 60px; } - header { + .breadcrumb { padding: 1rem; } diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 831269e..1b5293c 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -2,6 +2,9 @@ // Reset and base styles :root { + // Global transition for theme switching + --theme-transition-duration: 0.3s; + --theme-transition-timing: ease; font-family: $font-family; line-height: $line-height; font-weight: $font-weight-normal; @@ -22,11 +25,15 @@ --primary-color: #{$primary-color}; --primary-hover-color: #{$primary-hover-color}; --text-color: #{$text-color-dark}; + --text-color-secondary: #bbb; + --text-color-tertiary: #999; --bg-color: #{$bg-color-dark}; --sidebar-bg: #1e1e1e; --sidebar-border: #333; --card-bg: #2a2a2a; + --card-bg-secondary: #222; --card-border: #444; + --primary-color-light: rgba(52, 152, 219, 0.2); } a { @@ -43,6 +50,8 @@ body { margin: 0; min-width: 320px; min-height: 100vh; + transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), + color var(--theme-transition-duration) var(--theme-transition-timing); } h1 { @@ -82,11 +91,15 @@ button { --primary-color: #{$primary-color}; --primary-hover-color: #{$primary-hover-color}; --text-color: #{$text-color-light}; + --text-color-secondary: #555; + --text-color-tertiary: #777; --bg-color: #{$bg-color-light}; --sidebar-bg: #fff; --sidebar-border: #eee; --card-bg: #fff; + --card-bg-secondary: #f9f9f9; --card-border: #ddd; + --primary-color-light: rgba(52, 152, 219, 0.1); button { background-color: $button-bg-light; @@ -103,11 +116,15 @@ button { --primary-color: #{$primary-color}; --primary-hover-color: #{$primary-hover-color}; --text-color: #{$text-color-light}; + --text-color-secondary: #555; + --text-color-tertiary: #777; --bg-color: #{$bg-color-light}; --sidebar-bg: #fff; --sidebar-border: #eee; --card-bg: #fff; + --card-bg-secondary: #f9f9f9; --card-border: #ddd; + --primary-color-light: rgba(52, 152, 219, 0.1); } :root:not(.dark-mode):not(.light-mode) button { diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index c18a86f..3ff062e 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -15,4 +15,4 @@ $font-weight-medium: 500; $line-height: 1.5; // Layout -$max-content-width: 1000px; +$max-content-width: 100vw; diff --git a/src/components/JobDetail.vue b/src/components/JobDetail.vue index 7b20ef4..dcb26d5 100644 --- a/src/components/JobDetail.vue +++ b/src/components/JobDetail.vue @@ -934,7 +934,6 @@ onMounted(() => { diff --git a/src/components/SavedJobs.vue b/src/components/SavedJobs.vue index fe4f12f..ddb6d56 100644 --- a/src/components/SavedJobs.vue +++ b/src/components/SavedJobs.vue @@ -109,32 +109,31 @@ const applyForJob = (jobId) => {