Skip to content

Commit cfd0575

Browse files
kexanakexana
authored
clean sidebar (#23)
1 parent bdef15b commit cfd0575

File tree

9 files changed

+69
-37
lines changed

9 files changed

+69
-37
lines changed

‎my-app/package-lock.json‎

Lines changed: 0 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎my-app/src/pages/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ListViewPresenter } from '../presenters/ListViewPresenter.jsx';
66
function App(props) {
77
return (
88
<div className="flex h-screen w-screen">
9-
<div className="flex-auto w-40% h-full bg-[#49347E]">
9+
<div className="flex-auto w-40% h-full bg-gradient-to-t from-[#4f3646] to-[#6747c0]">
1010
<SidebarPresenter model={props.model}/>
1111
</div>
1212

‎my-app/src/views/Components/SideBarComponents/ButtonGroupField.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from "react";
22

3-
export default function ButtonGroupField() {
3+
export default function ButtonGroupField({items}) {
44
const [activeIndex, setActiveIndex] = useState(null);
55

66
const handleClick = (index) => {
@@ -19,7 +19,7 @@ export default function ButtonGroupField() {
1919
</div>
2020
<div className="flex flex-col sm:inline-flex sm:flex-row rounded-lg shadow-2xs
2121
w-full items-center font-medium text-white bg-[#aba8e0] border border-gray-200">
22-
{["Item 1", "Item 2", "Item 3"].map((item, index) => (
22+
{items.map((item, index) => (
2323
<button
2424
key={index}
2525
type="button"

‎my-app/src/views/Components/SideBarComponents/CourseTranscriptList.jsx‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,33 +11,33 @@ export default function CourseTranscriptList() {
1111
local = JSON.parse(localStorage.getItem("completedCourses"));
1212
setItems(local);
1313
});
14-
15-
14+
15+
1616
const [items, setItems] = useState(local);
17-
17+
1818
function removeItem(index) {
1919
var newItems = [];
20-
for (let i = 0; i < items.length; i++){
20+
for (let i = 0; i < items.length; i++) {
2121
if (i != index)
2222
newItems.push(items[i]);
2323
}
2424
localStorage.setItem("completedCourses", JSON.stringify(newItems));
2525
window.dispatchEvent(new Event("completedCourses changed"));
2626
};
27-
function removeAllItems(){
27+
function removeAllItems() {
2828
let newitems = [];
2929
localStorage.setItem("completedCourses", JSON.stringify(newitems));
3030
window.dispatchEvent(new Event("completedCourses changed"));
3131

3232
};
3333

34-
34+
3535

3636
return (
3737
<div className="max-w-80">
3838
<div className="flex justify-between">
39-
40-
<h3 className="text-lg flex-auto">Taken courses:</h3>
39+
40+
<h3 className="text-lg flex-auto">Taken courses:</h3>
4141
<button
4242
onClick={() => removeAllItems()}
4343
className="text-red-500 hover:text-red-700 font-bold text-sm hover:bg-red-300 rounded-lg flex-auto h-5"
@@ -47,18 +47,30 @@ export default function CourseTranscriptList() {
4747
</div>
4848

4949
{/* Container for multiple items per row */}
50-
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
50+
<div className="grid grid-cols-3 w-full max-[1200px]:grid-cols-2 gap-1 sm:gap-2">
5151
{items.map((item, index) => (
5252
<div
5353
key={index}
54-
className="flex items-center bg-[#aba8e0] px-3 py-1 rounded-md shadow-md text-sm"
54+
className="flex items-center bg-[#aba8e0] px-3 py-1 rounded-md shadow-md text-sm min-w-18"
5555
>
56-
<span className="mr-2">{item}</span>
56+
<span className="flex-auto mr-2">{item}</span>
5757
<button
5858
onClick={() => removeItem(index)}
59-
className="text-red-500 hover:text-red-700 font-bold text-sm hover:bg-red-300 rounded-lg"
59+
className="text-violet-600 hover:text-red-700 font-bold text-sm hover:bg-red-300 rounded-md"
6060
>
61-
✖
61+
<svg
62+
xmlns="http://www.w3.org/2000/svg"
63+
className="w-4 h-4"
64+
viewBox="0 0 24 24"
65+
fill="none"
66+
stroke="currentColor"
67+
strokeWidth="4"
68+
strokeLinecap="round"
69+
strokeLinejoin="round"
70+
>
71+
<line x1="18" y1="6" x2="6" y2="18" />
72+
<line x1="6" y1="6" x2="18" y2="18" />
73+
</svg>
6274
</button>
6375
</div>
6476
))}

‎my-app/src/views/Components/SideBarComponents/DropDownField.jsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { useState } from "react";
22

3-
export default function DropDownField() {
3+
export default function DropDownField({options}) {
44
const [isOpen, setIsOpen] = useState(false);
55
const [selectedItems, setSelectedItems] = useState([]);
66

7-
const items = ["Option 1", "Option 2", "Option 3", "Option 4"];
7+
const items = options;
88

99
const toggleDropdown = () => setIsOpen(!isOpen);
1010

@@ -50,7 +50,12 @@ export default function DropDownField() {
5050
onChange={() => handleCheckboxChange(item)}
5151
className="mr-2 sr-only peer"
5252
/>
53-
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-violet-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-violet-500 dark:peer-checked:bg-blue-600"></div>
53+
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4
54+
peer-focus:ring-blue-300 rounded-full peer
55+
peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full
56+
peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px]
57+
after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all
58+
peer-checked:bg-violet-500 "></div>
5459
<span>{item}</span>
5560
</label>
5661
</li>

‎my-app/src/views/Components/SideBarComponents/SliderField.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function UploadField(props) {
4949
items-center font-medium text-white bg-[#aba8e0] border border-gray-200 p-3">
5050
<div className="flex-1 justify-between pl-2">
5151
<span
52-
className={"text-sm font-bold text-white text-gray-600"}
52+
className={"text-sm font-bold text-white "}
5353
>
5454
Credits: {values[selectedIndex]}
5555
</span>

‎my-app/src/views/Components/SideBarComponents/ToggleField.jsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
export default function ToggleField(props) {
3+
export default function ToggleField({field1, field2 }) {
44
return (
55
<div className='m-2'>
66
<div className='mb-2 text-white justify-center'>
@@ -12,28 +12,35 @@ export default function ToggleField(props) {
1212
<p className='text-sm opacity-50'> - filter description</p>
1313
</div>
1414
</div>
15-
<div class="flex flex-col sm:flex-row md:flex-row rounded-lg shadow-2xs w-full items-center font-medium text-white bg-[#aba8e0] border border-gray-200">
15+
<div class="flex flex-col sm:flex-row md:flex-row rounded-lg shadow-2xs w-full items-center
16+
font-medium text-white bg-[#aba8e0] ">
1617
<label class="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px
1718
first:rounded-t-md last:rounded-b-md sm:first:rounded-s-md sm:mt-0 sm:first:ms-0 s
1819
m:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-md text-sm font-medium
1920
focus:z-10 border border-gray-200 shadow-2xs cursor-pointer">
2021
<input type="checkbox" value="" class="sr-only peer" />
2122
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none
22-
peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-violet-500
23+
peer-focus:ring-4 peer-focus:ring-blue-300
2324
rounded-full peer peer-checked:after:translate-x-full
2425
rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-['']
2526
after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border
2627
after:rounded-full after:h-5 after:w-5 after:transition-all
2728
peer-checked:bg-violet-500 "></div>
28-
<span>English</span>
29+
<span>{field1}</span>
2930
</label>
3031
<label class="flex-auto py-3 px-4 inline-flex gap-x-2 -mt-px -ms-px
3132
first:rounded-t-md last:rounded-b-md sm:first:rounded-s-md sm:mt-0 sm:first:ms-0 s
3233
m:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-md text-sm font-medium
3334
focus:z-10 border border-gray-200 shadow-2xs cursor-pointer">
3435
<input type="checkbox" value="" class="sr-only peer" />
35-
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-violet-500 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-violet-500 dark:peer-checked:bg-blue-600"></div>
36-
<span>Swedish</span>
36+
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4
37+
peer-focus:ring-blue-300 rounded-full peer
38+
peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full
39+
peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px]
40+
after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full
41+
after:h-5 after:w-5 after:transition-all peer-checked:bg-violet-500
42+
"></div>
43+
<span>{field2 }</span>
3744
</label>
3845
</div>
3946
</div>

‎my-app/src/views/Components/SideBarComponents/UploadField.jsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -176,9 +176,10 @@ export default function UploadField(props) {
176176
return (
177177
<div className='pb-5 px-8 '>
178178
<div className="flex items-center justify-center ">
179-
<label for="PDF-Scraper-Input" className="flex flex-col items-center justify-center w-full h-50 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-[#aba8e0] dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-400 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
179+
<label for="PDF-Scraper-Input" className="flex flex-col items-center justify-center w-full h-50 border-2
180+
border-gray-300 border-dashed rounded-lg cursor-pointer bg-[#aba8e0] hover:bg-gray-400">
180181
<div className="flex flex-col items-center justify-center pt-5 pb-6">
181-
<svg className="w-8 h-8 mb-4 text-white dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
182+
<svg className="w-8 h-8 mb-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
182183
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
183184
</svg>
184185
<p className="mb-2 text-sm "><span className="font-semibold">Click to upload</span> or drag and drop</p>
@@ -188,9 +189,11 @@ export default function UploadField(props) {
188189
</label>
189190
</div>
190191
<p className='text-sm opacity-50 pt-3'> Describe how the Transcript upload works</p>
191-
<pre id="PDF-Scraper-Error" className={`text-red-500 text-xs text-wrap ${errorVisibility}`}>
192-
{errorMessage}
193-
</pre>
192+
<div className='max-w-70'>
193+
<pre id="PDF-Scraper-Error" className={`text-red-500 text-xs text-wrap ${errorVisibility}`}>
194+
{errorMessage}
195+
</pre>
196+
</div>
194197
<CourseTranscriptList />
195198
</div>
196199
);

‎my-app/src/views/SidebarView.jsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,19 @@ function SidebarView(props) {
1717
[&::-webkit-scrollbar-thumb]:bg-gray-300'>
1818
<div class="z-10 w-100% rounded-lg justify-center" >
1919
<h6 class="m-2 text-lg font-medium text-white text-center">
20-
Filters
20+
Filters
2121
</h6>
22-
<ToggleField/>
23-
<ButtonGroupField />
22+
<ToggleField
23+
field1={"English"}
24+
field2={"Swedish"}
25+
/>
26+
<ButtonGroupField
27+
items={["item 1", "item 2", "item 3"]}
28+
/>
2429
<SliderField />
25-
<DropDownField/>
30+
<DropDownField
31+
options={["option 1", "option 2", "option 3", "option 4", "option 5"]}
32+
/>
2633
</div>
2734

2835
</div>

0 commit comments

Comments
 (0)