Skip to content

feat: improve library page layout with timeline and switch #368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sumitakhuli wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: improve library page layout with timeline and switch #368

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
096cdef
feat: improve library page layout with timeline and switch
sumitakhuli Feb 14, 2026
80509ec
fix(styles): align library page design with website blue theme
sumitakhuli Feb 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
299 changes: 159 additions & 140 deletions src/pages/LibraryPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,179 +36,190 @@

*/

import { Flex, Box, Text, Button, useColorModeValue,Switch } from "@chakra-ui/react";
import { Flex, Box, Text, Button, useColorModeValue, Switch, VStack, HStack, Icon, Badge } from "@chakra-ui/react";
import i18n from "../i18n";
import { TimeIcon, PhoneIcon } from "@chakra-ui/icons";
import { TimeIcon, PhoneIcon, CalendarIcon } from "@chakra-ui/icons";
import { useState } from "react";
import { LIBRARY_OPENING_HOURS, LIBRARY_PHONE_LIST } from "../assets/data/Library";

export default function LibraryPage() {
const [isExamPeriod, setisExamPeriod] = useState(false);
const currentPeriod = isExamPeriod ? "InExams" : "InSemester";

// Theme colors
const cardBg = useColorModeValue("#0050e0", "#f3f3f3");
const cardBorder = useColorModeValue("#0050e0", "#f3f3f3");
const textColor = useColorModeValue("#f3f3f3", "black");
const highlightBg = useColorModeValue("whiteAlpha.200", "blackAlpha.100");
const iconColor = useColorModeValue("#f3f3f3", "black");

// Get current day index
const currentDayIndex = new Date().getDay();

const isToday = (dayType) => {
if (dayType === 'weekdays' && currentDayIndex >= 1 && currentDayIndex <= 5) return true;
if (dayType === 'saturday' && currentDayIndex === 6) return true;
if (dayType === 'sunday' && currentDayIndex === 0) return true;
return false;
};

const ScheduleRow = ({ label, time, dayType }) => {
const active = isToday(dayType);
const isOpen = time && time.start;

return (
<HStack
w="100%"
justify="space-between"
p={2}
bg={active ? highlightBg : "transparent"}
borderRadius="md"
borderLeft={active ? "4px solid" : "none"}
borderColor={useColorModeValue("white", "black")}
>
<HStack spacing={3}>
<Icon as={allowedDaysIcons[dayType]} color={iconColor} boxSize={5} />
<Text fontWeight={active ? "bold" : "medium"} fontSize={{ base: "md", lg: "lg" }}>{label}</Text>
</HStack>
{isOpen ? (
<Badge
bg={useColorModeValue("white", "black")}
color={useColorModeValue("#0050e0", "#f3f3f3")}
variant="solid"
px={2}
borderRadius="full"
fontSize="sm"
>
{time.start} - {time.end}
</Badge>
) : (
<Badge
colorScheme="red"
variant="solid"
px={2}
borderRadius="full"
fontSize="sm"
>
{i18n.t("kleista")}
</Badge>
)}
</HStack>
);
};

const allowedDaysIcons = {
weekdays: CalendarIcon,
saturday: TimeIcon,
sunday: TimeIcon
};

return (
<Flex
w="100vw"
overflowX="none"
flexDirection="column"
alignItems="center"
fontFamily="Syne"
color={textColor}
>
{/* Wrapper container */}
<Flex
textAlign="center"
flexDirection={{ base: "column", lg: "row" }}
columnGap="3"
alignItems="center"
columnGap="6"
alignItems="stretch"
justifyContent="center"
width="100%"
height={{ lg: "75vh" }}
maxWidth="1200px"
paddingX={{ sm: "2", base: "4", md: "8" }}
py={8}
>
{/* Ωράριο */}
{/* Ωράριο Card */}
<Box
flex={1}
border="2px"
borderRadius="1rem"
bg={useColorModeValue("#0050e0", "#f3f3f3")}
borderColor={useColorModeValue("#0050e0", "#f3f3f3")}
marginBottom={{ base: "2", lg: "0" }}
marginTop={{ lg: "fit-content" }}
px="4"
py="4"
width="100%"
display={"flex"}
textAlign={"center"}
justifyContent={"center"}
alignItems={"center"}
height={{ lg: "fit-content" }}
bg={cardBg}
borderColor={cardBorder}
p={6}
display="flex"
flexDirection="column"
>
<Flex
flexDirection={"column"}
alignItems="flex-start"
h="fit-content"
fontFamily="Syne"
w="100%"
fontSize={{ base: "md", lg: "xl" }}
color={useColorModeValue("#f3f3f3", "black")}
>
<Flex flexDirection={"row"} alignItems="center">
<TimeIcon w={6} h={6} />
<Text
fontSize={{base: "lg",lg: "2xl"}}
ml="2"
as="span"
fontWeight={"bold"}
>
{i18n.t("orario")}{" "}
({isExamPeriod ? i18n.t("exams_period") : i18n.t("semester_period") })
</Text>
</Flex>
<Flex mt="1rem" flexDirection={"row"} alignItems="center" gap={{base: "1px", lg: 2}} >
<Box mx="2" fontSize={{ base: "sm", lg: "xl", }}>
<Text as="span" fontWeight={"bold"}>
{i18n.t("defPar")}
</Text>{" "}
<br />
{LIBRARY_OPENING_HOURS[currentPeriod].on_weekdays.start}-
{LIBRARY_OPENING_HOURS[currentPeriod].on_weekdays.end}
</Box>

<Box mx="2" fontSize={{ base: "sm", lg: "xl", }}>
<Text as="span" fontWeight={"bold"}>
{i18n.t("savvato")}
</Text>{" "}
<br />

{LIBRARY_OPENING_HOURS[currentPeriod].on_saturday.start
? `${LIBRARY_OPENING_HOURS[currentPeriod].on_saturday.start}-${LIBRARY_OPENING_HOURS[currentPeriod].on_saturday.end}`
: i18n.t("kleista")}
</Box>
<Box mx="2" fontSize={{ base: "sm", lg: "xl", }}>
<Text as="span" fontWeight={"bold"}>
{i18n.t("kyriaki")}
</Text>{" "}
<br />
{LIBRARY_OPENING_HOURS[currentPeriod].on_sunday.start
? `${LIBRARY_OPENING_HOURS[currentPeriod].on_sunday.start}-${LIBRARY_OPENING_HOURS[currentPeriod].on_sunday.end}`
: i18n.t("kleista")}
</Box>
<Flex justify="space-between" align="center" mb={6} flexWrap="wrap" gap={2}>
<HeadingWithIcon icon={TimeIcon} title={i18n.t("orario")} color={textColor} />
<Flex align="center" gap={2}>
<Text fontSize="sm" fontWeight="bold">
{isExamPeriod ? i18n.t("exams_period") : i18n.t("semester_period")}
</Text>
<Switch
isChecked={isExamPeriod}
onChange={(e) => setisExamPeriod(e.target.checked)}
colorScheme="whiteAlpha"
size="lg"
sx={{
'span.chakra-switch__track': {
bg: useColorModeValue('whiteAlpha.400', 'blackAlpha.300'),
},
'span.chakra-switch__track[data-checked]': {
bg: useColorModeValue('white', 'black'),
},
'span.chakra-switch__thumb': {
bg: useColorModeValue('#0050e0', '#f3f3f3'),
}
}}
/>
</Flex>
<br/>
<Button
onClick={() => setisExamPeriod((prev) => !prev)}
leftIcon={<TimeIcon />}
variant="outline"
mt="1.4"
size="sm"
bg={useColorModeValue("#f3f3f3", "black")}
_hover={{ bg: isExamPeriod ? useColorModeValue("#f3f3f3", "black") : useColorModeValue("#f3f3f3", "black") }}
>
{i18n.t(!isExamPeriod ? "exams_period": "semester_period") }
</Button>
</Flex>


<VStack spacing={3} align="stretch">
<ScheduleRow
label={i18n.t("defPar")}
time={LIBRARY_OPENING_HOURS[currentPeriod].on_weekdays}
dayType="weekdays"
/>
<ScheduleRow
label={i18n.t("savvato")}
time={LIBRARY_OPENING_HOURS[currentPeriod].on_saturday}
dayType="saturday"
/>
<ScheduleRow
label={i18n.t("kyriaki")}
time={LIBRARY_OPENING_HOURS[currentPeriod].on_sunday}
dayType="sunday"
/>
</VStack>
</Box>
{/* Επικοινωνία */}

{/* Επικοινωνία Card */}
<Box
flex={1}
border="2px"
borderRadius="1rem"
borderColor={useColorModeValue("#0050e0", "#f3f3f3")}
bg={useColorModeValue("#0050e0", "#f3f3f3")}
marginBottom={{ base: "2", lg: "0" }}
marginTop="2"
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
py="4"
px="3"
width="100%"
height={{ lg: "30%" }}
paddingX={{ sm: "2", base: "4",md: "8"}}
bg={cardBg}
borderColor={cardBorder}
p={6}
mt={{ base: 4, lg: 0 }}
display="flex"
flexDirection="column"
justifyContent="center"
>
<Flex
mx="2"
flexDirection={"column"}
alignItems="flex-start"
rowGap={3}
justifyContent={"flex-start"}
columnGap={3}
color={useColorModeValue("#f3f3f3", "black")}
fontFamily="Syne"
w="100%"
fontSize={{ base: "md", lg: "2xl" }}
>
<Flex flexDirection={"row"} alignItems="center">
<PhoneIcon w={6} h={5} />
<Text
fontSize={{ base: "lg", lg: "2xl" }}
ml="2"
as="span"
fontWeight={"bold"}
>
{i18n.t("epikoinonia")}
</Text>
</Flex>
<HeadingWithIcon icon={PhoneIcon} title={i18n.t("epikoinonia")} mb={6} color={textColor} />

<Flex
flexDirection={"row"}
alignItems="center"
justifyContent="space-between"
w="100%"
gap="3"
fontSize={{ base: "sm", lg: "xl", }}
>
<Text>
{LIBRARY_PHONE_LIST[0]} <br />
{LIBRARY_PHONE_LIST[1]}
</Text>
<Text>
{" "}
{LIBRARY_PHONE_LIST[2]} <br /> {LIBRARY_PHONE_LIST[3]}{" "}
</Text>
<Text fontWeight="bold"> {i18n.t("imiorofos")} </Text>
</Flex>
</Flex>
<VStack align="start" spacing={6} pl={2} w="100%">
<HStack align="start" w="100%">
<Text fontWeight="bold" minW="100px" fontSize="lg">{i18n.t("imiorofos")}:</Text>
<VStack align="start" spacing={1}>
{LIBRARY_PHONE_LIST.map((phone, index) => (
<Text key={index} fontSize="lg" fontWeight="medium">{phone}</Text>
))}
</VStack>
</HStack>
</VStack>
</Box>
</Flex>

<Button
mt={6}
color={useColorModeValue("#0050e0", "#f3f3f3")}
variant="ghost"
fontWeight="bold"
Expand Down Expand Up @@ -239,15 +250,23 @@ export default function LibraryPage() {
</svg>
</Box>
}
onClick={(e) => {
i18n.language === "en"
? window.open("https://www.lib.uom.gr/index.php/en/")
onClick={() => {
i18n.language === "en"
? window.open("https://www.lib.uom.gr/index.php/en/")
: window.open("https://www.lib.uom.gr/index.php/el/");
}}
justifyContent="center"
>
{i18n.t("istoselidaVivliothikis")}
</Button>
</Flex>
);
}

const HeadingWithIcon = ({ icon, title, mb, color }) => (
<HStack mb={mb} spacing={3}>
<Icon as={icon} boxSize={6} color={color} />
<Text fontSize={{ base: "xl", lg: "2xl" }} fontWeight="bold" color={color}>
{title}
</Text>
</HStack>
);