Skip to content

Commit f6ab463

Browse files
lssndrrrlssndrrr
committed
[refactor][az] reverts conflicts
1 parent 95df9c1 commit f6ab463

File tree

5 files changed

+246
-256
lines changed

5 files changed

+246
-256
lines changed

‎src/components/Global/BaseSelectInput.vue‎

Lines changed: 27 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,53 @@
11
<template>
2+
<label v-if="label" class="dropdown-label">{{ label }}</label>
23
<div class="dropdown-container">
3-
<select
4-
:value="props.modelValue"
5-
@change="emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
6-
class="dropdown"
7-
:style="dropdownStyle"
8-
>
9-
<option value="" disabled class="placeholder">{{ placeholder }}</option>
10-
<option
11-
v-for="option in options"
12-
:key="option.value"
13-
:value="option.value"
14-
class="dropdown-option"
15-
>
16-
{{ option.label }}
17-
</option>
4+
<select v-model="selectedValue" class="dropdown" :style="dropdownStyle" @change="handleChange">
5+
<slot></slot>
186
</select>
19-
<v-icon name="bi-caret-down-fill" class="dropdown-icon" :style="iconStyle" />
7+
<v-icon name="bi-caret-down-fill" class="dropdown-icon" />
208
</div>
219
</template>
2210

2311
<script setup lang="ts">
24-
import { ref, defineProps, defineEmits, computed } from 'vue'
12+
import { ref, defineProps, computed } from 'vue'
13+
14+
const emit = defineEmits(['update:modelValue'])
2515
2616
const props = defineProps<{
27-
options: { value: string; label: string }[]
2817
placeholder?: string
2918
width?: string | null
30-
textColor?: string
31-
borderColor?: string
32-
modelValue: string // Add this for two-way binding
19+
label?: string
3320
}>()
3421
35-
const emit = defineEmits(['update:modelValue'])
22+
const selectedValue = ref('')
23+
24+
function handleChange(event: Event) {
25+
const value = (event.target as HTMLSelectElement).value
26+
emit('update:modelValue', value)
27+
}
3628
3729
const dropdownStyle = computed(() => ({
3830
...(props.width ? { width: props.width } : {}),
39-
color: props.textColor || 'inherit',
40-
borderColor: props.borderColor || 'inherit',
41-
}))
42-
43-
const iconStyle = computed(() => ({
44-
fill: props.textColor || 'inherit',
4531
}))
4632
</script>
4733

4834
<style lang="scss" scoped>
4935
.dropdown-container {
5036
position: relative;
5137
display: inline-block;
38+
width: 100%;
39+
}
40+
41+
.dropdown-label {
42+
font-size: small;
43+
font-weight: bold;
44+
color: #6f6f6f;
45+
display: block;
46+
text-align: left;
47+
margin-bottom: 0.3rem;
5248
}
5349
5450
.dropdown {
55-
display: flex;
56-
background-color: transparent;
57-
text-overflow: ellipsis;
5851
font-family: 'Inter', serif;
5952
font-weight: bold;
6053
appearance: none;
@@ -66,21 +59,9 @@ const iconStyle = computed(() => ({
6659
cursor: pointer;
6760
color: $red;
6861
width: 100%;
69-
70-
@include sm {
71-
width: 10rem;
72-
font-size: 1em;
73-
}
74-
75-
@include md {
76-
width: 15rem;
77-
font-size: 1em;
78-
}
79-
80-
@include lg {
81-
width: 20rem;
82-
font-size: 1.3em;
83-
}
62+
height: 2.4rem;
63+
position: relative;
64+
background-color: transparent;
8465
8566
&:not([value='']) {
8667
color: $red;

‎src/components/Global/BaseTextInput.vue‎

Lines changed: 91 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<template>
2-
<input
3-
:id="id"
4-
:type="type"
5-
class="input-box"
6-
:style="boxStyle"
7-
:placeholder="placeholder"
8-
:value="modelValue"
9-
@input="$emit('update:modelValue', $event.target.value)"
10-
v-bind="$attrs"
11-
/>
2+
<div class="input-container">
3+
<input
4+
:id="id"
5+
:type="type"
6+
:class="['input-box', variantClass]"
7+
:style="boxStyle"
8+
:placeholder="placeholder"
9+
:value="modelValue"
10+
@input="$emit('update:modelValue', $event.target.value)"
11+
v-bind="$attrs"
12+
/>
13+
<label :for="id" class="input-label">{{ placeholder }}</label>
14+
</div>
1215
</template>
1316

14-
1517
<script>
1618
export default {
1719
props: {
@@ -27,39 +29,35 @@ export default {
2729
type: String,
2830
default: 'Placeholder',
2931
},
32+
variant: {
33+
type: String,
34+
default: 'red',
35+
},
3036
width: {
3137
type: String,
32-
default: null,
38+
default: 'null',
3339
},
3440
height: {
3541
type: String,
36-
default: null,
42+
default: 'null',
3743
},
3844
modelValue: {
3945
type: String,
4046
default: '',
4147
},
42-
textColor: {
43-
type: String,
44-
default: 'inherit',
45-
},
46-
borderColor: {
47-
type: String,
48-
default: 'inherit',
49-
},
5048
},
5149
computed: {
50+
variantClass() {
51+
return `input-box--${this.variant}`
52+
},
5253
boxStyle() {
53-
return {
54-
width: this.width || 'auto',
55-
height: this.height || 'auto',
56-
color: this.textColor,
57-
borderColor: this.borderColor,
58-
borderStyle: 'solid',
59-
'--placeholder-color': this.textColor,
60-
};
54+
const styles = { height: this.height }
55+
if (this.width) {
56+
styles.width = this.width
57+
}
58+
return styles
6159
},
62-
}
60+
},
6361
}
6462
</script>
6563

@@ -74,7 +72,6 @@ export default {
7472
font-family: 'Inter', serif;
7573
height: fit-content;
7674
border-radius: 0.6rem;
77-
7875
@include sm {
7976
width: 15rem;
8077
padding: 0.6rem 0.6rem;
@@ -92,8 +89,70 @@ export default {
9289
}
9390
9491
&::placeholder {
95-
color: var(--placeholder-color, #999); // Use the variable for dynamic color
92+
color: #999;
9693
opacity: 0.7;
9794
}
95+
96+
&--red {
97+
font-size: 0.9rem;
98+
border: 0.15px $red;
99+
border-style: solid;
100+
outline: none;
101+
font-weight: 850;
102+
color: $red;
103+
104+
&::placeholder {
105+
color: transparent;
106+
}
107+
}
108+
109+
&--green {
110+
border: 0.15px $green;
111+
border-style: solid;
112+
outline: none;
113+
font-weight: bold;
114+
color: $green;
115+
116+
&::placeholder {
117+
color: transparent;
118+
}
119+
}
120+
}
121+
122+
.input-label {
123+
position: absolute;
124+
top: 50%;
125+
left: 0.6rem;
126+
transform: translateY(-50%);
127+
font-size: 1em;
128+
color: #999;
129+
pointer-events: none;
130+
transition: all 0.2s ease;
131+
background-color: white;
132+
padding: 0 0.4rem;
133+
z-index: 1000;
134+
135+
&--red {
136+
color: $red;
137+
}
138+
139+
&--green {
140+
color: $green;
141+
}
142+
}
143+
input:-webkit-autofill {
144+
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
145+
-webkit-text-fill-color: $red !important;
146+
}
147+
148+
input:-webkit-autofill {
149+
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
150+
}
151+
152+
.input-box:focus + .input-label,
153+
.input-box:not(:placeholder-shown) + .input-label {
154+
top: 0;
155+
font-size: 0.8em;
156+
transform: translateY(-50%);
98157
}
99158
</style>

‎src/layouts/AuthenticatedPagesLayout.vue‎

Lines changed: 28 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,52 +4,43 @@
44
<!-- TODO: deal with nav links -->
55
<nav class="sidebar">
66
<div class="sidebar-top-group">
7-
<img src="@/assets/navbar/logo.png" alt="logo" class="logo" />
7+
<img src="@/assets/logo.png" alt="logo" class="logo" />
88
</div>
99
<div class="sidebar-mid-group">
1010
<router-link :to="dashboardRoute" class="nav-link">
11-
<img
12-
src="@/assets/navbar/dashboard.png"
13-
alt="dashboard"
14-
class="icon"
15-
/>
11+
<v-icon name="md-spacedashboard-round" class="icon" scale="3" />
1612
<span class="icon-label">Dashboard</span>
1713
</router-link>
18-
<router-link to="/" class="nav-link">
19-
<img
20-
src="@/assets/navbar/submit_report.png"
21-
alt="submit-report"
22-
class="icon"
23-
/>
14+
<router-link to="/submit" class="nav-link">
15+
<v-icon name="fa-folder-open" class="icon" />
2416
<span class="icon-label">Submit Report</span>
2517
</router-link>
18+
<router-link to="/generate" class="nav-link">
19+
<v-icon name="fa-clipboard-list" class="icon" />
20+
<span class="icon-label">Generate Report</span>
21+
</router-link>
2622
<router-link to="/report" class="nav-link">
27-
<img
28-
src="@/assets/navbar/report_history.png"
29-
alt="report-history"
30-
class="icon"
31-
/>
23+
<v-icon name="fa-history" class="icon" />
3224
<span class="icon-label">Report History</span>
3325
</router-link>
34-
<router-link to="/" class="nav-link">
35-
<img src="@/assets/navbar/members.png" alt="members" class="icon" />
26+
<router-link to="/report" class="nav-link">
27+
<v-icon name="io-people" class="icon" />
3628
<span class="icon-label">Members</span>
3729
</router-link>
38-
<router-link to="/" class="nav-link">
39-
<img
40-
src="@/assets/navbar/report_summary.png"
41-
alt="report-summary"
42-
class="icon"
43-
/>
44-
<span class="icon-label">Report Summary</span>
30+
<router-link :to="adminRoute" class="nav-link">
31+
<v-icon name="md-adminpanelsettings-round" class="icon" />
32+
<span class="icon-label">Admin Panel</span>
4533
</router-link>
4634
</div>
4735
<div class="sidebar-bottom-group">
4836
<router-link :to="profileRoute" class="profile-link">
49-
<img src="@/assets/navbar/profile.png" alt="profile" class="icon" />
37+
<v-icon name="io-person" class="icon" />
38+
</router-link>
39+
<router-link :to="settingsRoute" class="settings-link">
40+
<v-icon name="bi-gear-fill" class="icon" />
5041
</router-link>
5142
<router-link :to="settingsRoute" class="settings-link">
52-
<img src="@/assets/navbar/settings.png" alt="settings" class="icon" />
43+
<v-icon name="fa-sign-out-alt" class="icon" />
5344
</router-link>
5445
</div>
5546
</nav>
@@ -67,20 +58,17 @@ import { computed } from 'vue'
6758
const username = sessionStorage.getItem('username') || ''
6859
6960
const dashboardRoute = computed(() => (username ? `/${username}` : '/login'))
70-
const profileRoute = computed(() =>
71-
username ? `/${username}/profile` : '/login',
72-
)
73-
const settingsRoute = computed(() =>
74-
username ? `/${username}/settings` : '/login',
75-
)
61+
const profileRoute = computed(() => (username ? `/${username}/profile` : '/login'))
62+
const settingsRoute = computed(() => (username ? `/${username}/settings` : '/login'))
63+
const adminRoute = computed(() => (username ? `/${username}/admin` : '/login'))
7664
</script>
7765

7866
<style scoped lang="scss">
7967
.container {
8068
display: grid;
81-
grid-template-columns: 0.5fr 4.5fr;
69+
grid-template-columns: 0.1fr 4.5fr;
8270
grid-template-rows: 1fr;
83-
padding: 0.5em;
71+
padding: 0.75em;
8472
grid-template-areas: 'sidebar main';
8573
width: 100vw;
8674
height: 100vh;
@@ -95,8 +83,8 @@ const settingsRoute = computed(() =>
9583
grid-area: sidebar;
9684
width: 5em;
9785
background-color: $red;
98-
padding: 2em;
99-
margin: 1em;
86+
padding: 1em;
87+
margin: 0.5em 0.5em 0.5em 0em;
10088
border-radius: 10px;
10189
display: flex;
10290
flex-direction: column;
@@ -155,11 +143,11 @@ const settingsRoute = computed(() =>
155143
background-color: #a04747;
156144
}
157145
.content {
158-
grid-area: main;
146+
grid-area: 'main';
159147
width: 100%;
160148
z-index: 0;
161149
justify-content: start;
162150
align-items: start;
163-
margin-left: -3rem;
151+
// margin-left: -2rem;
164152
}
165153
</style>

0 commit comments

Comments
 (0)