Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit18b008b

Browse files
committed
Merge branch 'master' into CW2-31-refactor-code
2 parents31d76a0 +8b63ebc commit18b008b

File tree

3 files changed

+124
-19
lines changed

3 files changed

+124
-19
lines changed
Lines changed: 50 additions & 0 deletions
Loading

‎frontend/src/pages/about/our-history.tsx‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
importLayoutfrom"@/components/Layout";
22
importPageBodyfrom"@/components/PageBody";
33
importPageTitlefrom"@/components/PageTitle";
4+
import{useState}from"react";
5+
6+
constMIN_YEAR=2007;
7+
constMAX_YEAR=2020;
8+
constDEFAULT_YEAR=2020;
49

510
constOurHistoryPage=()=>{
6-
// Years from 2020 to 2007
7-
constyears:number[]=Array.from({length:14},(_,i)=>2020-i);
11+
const[year,setYear]=useState(DEFAULT_YEAR);
12+
const[shouldDisplayTip,setShouldDisplayTip]=useState(true);
813

914
return(
1015
<Layout>
@@ -39,14 +44,35 @@ const OurHistoryPage = () => {
3944

4045
<divclassName="border-t border-gray-300 my-5"></div>
4146

42-
{years.map((year:number)=>(
43-
<divkey={year}className="mb-4">
44-
<divclassName="flex flex-col items-center mb-5">
45-
<h2className="text-2xl font-semibold mb-2">{year}</h2>
46-
<imgsrc={`/images/csesoc-team-${year}.png`}alt={`CSESoc Team${year}`}height={600}width={600}/>
47-
</div>
47+
<divclassName="flex flex-col items-center mt-5">
48+
<h2className="text-4xl font-semibold mb-5">{year}</h2>
49+
50+
<input
51+
id="history-year-slider"
52+
type="range"
53+
min={MIN_YEAR}
54+
max={MAX_YEAR}
55+
defaultValue={DEFAULT_YEAR}
56+
step={1}
57+
className="w-full h-2 bg-blue-300 rounded-lg appearance-none cursor-pointer"
58+
onChange={(e)=>{
59+
setYear(parseInt(e.target.value))
60+
setShouldDisplayTip(false)
61+
}}
62+
/>
63+
<divclassName="flex flex-row w-full justify-between mt-1">
64+
<p>{MIN_YEAR}</p>
65+
<p>{MAX_YEAR}</p>
66+
</div>
67+
68+
{shouldDisplayTip&&(
69+
<pclassName="mt-5">Use the slider to see the teams from past years!</p>
70+
)}
71+
72+
<divkey={year}className="h-[600px] w-[600px] mt-10">
73+
<imgsrc={`/images/csesoc-team-${year}.png`}alt={`CSESoc Team${year}`}/>
4874
</div>
49-
))}
75+
</div>
5076
</PageBody>
5177
</Layout>
5278
);

‎frontend/src/pages/resources.tsx‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,35 @@ export default function ResourcesPage() {
1616
<divclassName="relative">
1717
<Imagesrc="assets/resources_bg.svg"alt="Background"className="-z-50 absolute"fill/>
1818

19+
<divclassName="flex">
20+
<spanclassName="text-lg">Made by</span>
21+
<Image
22+
src="/assets/csesoc_logo.svg"
23+
alt="CSESoc Logo"
24+
width={100}
25+
height={100}
26+
className="pl-2"
27+
/>
28+
</div>
29+
1930
<divclassName="py-8 bg-no-repeat bg-center">
2031
<divclassName="grid grid-cols-4 1 gap-x-9 gap-y-5">
21-
{stage1.map((item:resourceCards)=>{
32+
{stage3.map((item:resourceCards)=>{
2233
return(
2334
<a
2435
key={item.id}
2536
href={item.href}
2637
target="_blank"
27-
className={`col-span-4 p-5${boxStyling} flex`}
38+
className={`md:col-span-2col-span-4 p-5${boxStyling} flex`}
2839
>
29-
<divclassName="flexjustify-centeralign-middle items-centerpl-2 pr-10">
40+
<divclassName="flex align-middle items-centerpt-2 pb-4 pr-10">
3041
<Image
3142
src={item.svg}
3243
alt={item.alt}
3344
draggable="false"
3445
width={item.width}
3546
height={item.height}
47+
className="rounded-md"
3648
/>
3749
</div>
3850
<div>
@@ -42,16 +54,34 @@ export default function ResourcesPage() {
4254
</a>
4355
);
4456
})}
57+
</div>
58+
</div>
4559

46-
{stage2.map((item:resourceCards)=>{
60+
<ahref="https://devsoc.app/"target="_blank"rel="noopener noreferrer">
61+
<div
62+
className={`flex grow-on-hover cursor-pointer transform transition-transform duration-300 hover:scale-105`}
63+
>
64+
<spanclassName="text-lg">Made by</span>
65+
<Image
66+
src="/assets/devsoc_logo.svg"
67+
alt="DevSoc Logo"
68+
width={110}
69+
height={110}
70+
className="pl-1"
71+
/>
72+
</div>
73+
</a>
74+
<divclassName="py-8 bg-no-repeat bg-center">
75+
<divclassName="grid grid-cols-4 1 gap-x-9 gap-y-5">
76+
{stage1.map((item:resourceCards)=>{
4777
return(
4878
<a
4979
key={item.id}
5080
href={item.href}
5181
target="_blank"
52-
className={`xl:col-span-1 col-span-4 p-5${boxStyling}`}
82+
className={`col-span-4 p-5${boxStyling} flex`}
5383
>
54-
<divclassName="flex align-middle items-centerpt-2pb-4">
84+
<divclassName="flexjustify-centeralign-middle items-centerpl-2pr-10">
5585
<Image
5686
src={item.svg}
5787
alt={item.alt}
@@ -68,22 +98,21 @@ export default function ResourcesPage() {
6898
);
6999
})}
70100

71-
{stage3.map((item:resourceCards)=>{
101+
{stage2.map((item:resourceCards)=>{
72102
return(
73103
<a
74104
key={item.id}
75105
href={item.href}
76106
target="_blank"
77-
className={`md:col-span-2 col-span-4 p-5${boxStyling} flex`}
107+
className={`xl:col-span-1 col-span-4 p-5${boxStyling}`}
78108
>
79-
<divclassName="flex align-middle items-center pt-2 pb-4 pr-10">
109+
<divclassName="flex align-middle items-center pt-2 pb-4">
80110
<Image
81111
src={item.svg}
82112
alt={item.alt}
83113
draggable="false"
84114
width={item.width}
85115
height={item.height}
86-
className="rounded-md"
87116
/>
88117
</div>
89118
<div>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp