Skip to content

Commit

Permalink
Overflow Scrolling
Browse files Browse the repository at this point in the history
  • Loading branch information
@strawhat19
strawhat19 committed Feb 16, 2023
1 parent e1a2741 commit 442fa9b
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 24 deletions.
34 changes: 22 additions & 12 deletions components/lists.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useContext } from 'react';
import { useContext, useEffect, useRef } from 'react';
import { StateContext, createXML, formatDate } from '../pages/_app';
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

Expand Down Expand Up @@ -86,6 +86,7 @@ const getListStyle = isDraggingOver => ({

export default function Lists(props) {

let listsRef = useRef<any>(null);
const { lists, setLists, alertOpen, setAlertOpen, loading, setLoading, systemStatus, setSystemStatus, setAnimComplete } = useContext<any>(StateContext);

const createList = async (e: any, lists: List[]) => {
Expand Down Expand Up @@ -182,10 +183,8 @@ export default function Lists(props) {
setSystemStatus(`Marking Item as Complete.`);
list.items[list.items.indexOf(item)].complete = !list.items[list.items.indexOf(item)].complete;
list.items[list.items.indexOf(item)].updated = formatDate(new Date());
let filteredLists: List[] = lists.filter((lis: any) => lis.id != list.id);
let updatedLists: List[] = [...filteredLists, list];
localStorage.setItem(`lists`, JSON.stringify(updatedLists));
await setLists(updatedLists);
localStorage.setItem(`lists`, JSON.stringify(lists));
await setLists(lists);
setTimeout(() => setLoading(false), 1500);
setSystemStatus(`Marked Item as Complete.`);
}
Expand Down Expand Up @@ -259,9 +258,20 @@ export default function Lists(props) {
return result;
};

useEffect(() => {
if (listsRef.current.children.length > 0) {
let listItems = listsRef.current.querySelectorAll(`.listItems`);
listItems.forEach(listOfItems => {
if (listOfItems.scrollHeight > listOfItems.clientHeight) {
listOfItems.classList.add(`overflowingList`);
}
})
}
}, [lists])

return <>
<div className="createList lists extended">
<div id={props.id} className={`list items ${props.className}`}>
<div id={props.id} className={`list items addListDiv`}>
<div className="items">
<div className="addListFormItem">
<h2 style={{fontWeight: 600, fontSize: 24, minWidth: `fit-content` }}>Create List {lists.length + 1}</h2>
Expand All @@ -276,19 +286,19 @@ export default function Lists(props) {
</div>
</div>
</div>
<section className={`lists ${lists.length == 1 ? `oneList` : `multiList`}`} id={`lists`}>
<section ref={listsRef} className={`lists ${lists.length == 1 ? `oneList` : `multiList`}`} id={`lists`}>
{lists.map((list, index) => {
return <DragDropContext onDragEnd={(e) => onDragEnd(e, list)}>
return <DragDropContext key={list.id} onDragEnd={(e) => onDragEnd(e, list)}>
<Droppable id={list.id} droppableId={list.id}>
{(provided, snapshot) => (
<div
id={list.id}
ref={provided.innerRef}
{...provided.droppableProps}
className={`list items ${props.className}`}
className={`list items draggableDiv`}
style={getListStyle(snapshot.isDraggingOver)}
>
<button style={{pointerEvents: `none`, position: `relative`}} id={`manage${list.id}Button`} title={`Manage ${list.name}`} className={`flex row iconButton item listTitleButton`}>
<div style={{pointerEvents: `none`, position: `relative`}} id={`manage${list.id}Button`} title={`Manage ${list.name}`} className={`flex row iconButton item listTitleButton`}>
<div className="itemOrder listOrder" style={{maxWidth: `fit-content`}}>
<i style={{color: `var(--gameBlue)`, fontSize: 18, padding: `0 15px`, maxWidth: `fit-content`}} className="fas fa-list"></i>
</div>
Expand All @@ -301,8 +311,8 @@ export default function Lists(props) {
{/* <button title={`Edit List`} className={`iconButton editButton`}><i style={{color: `var(--gameBlue)`, fontSize: 13}} className="fas fa-edit"></i></button> */}
<button style={{pointerEvents: `all`}} onClick={(e) => deleteList(e, list)} title={`Delete List`} className={`iconButton deleteButton`}><i style={{color: `var(--gameBlue)`, fontSize: 13}} className="fas fa-trash"></i><span className={`iconButtonText textOverflow extended`}>Delete {list.items.length > 0 && <><span className={`itemLength`} style={{fontSize: 14, fontWeight: 700, padding: `0 5px`, color: `var(--gameBlue)`, maxWidth: `fit-content`}}>{list.items.length}</span>Item(s)</>}</span></button>
</div>
</button>
<div className="items">
</div>
<div className={`items listItems`}>
{list.items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
Expand Down
44 changes: 34 additions & 10 deletions main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,16 +256,29 @@ html[class~=dark] .dark\:nx-text-neutral-500, html[class~=dark] .dark\:nx-text-g
}

// @media (min-width: 1600px) {
@media (min-width: 1420px) {
// @media (min-width: 1420px) {
@media (min-width: 1365px) {
.multiList {
.itemName {
max-width: 220px;
}
.itemDate {
min-width: 135px !important;
.status {
overflow: hidden;
text-align: left;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
max-width: 50px !important;
}
}
}
}

// @media (max-width: 1600px) {
@media (max-width: 1420px) {
// @media (max-width: 1420px) {
@media (max-width: 1365px) {
.lists {
grid-template-columns: 1fr !important;
.itemName {
Expand All @@ -274,11 +287,12 @@ html[class~=dark] .dark\:nx-text-neutral-500, html[class~=dark] .dark\:nx-text-g
justify-content: flex-start;
.status {
// @extend .textOverflow;
text-align: left;
overflow: hidden;
display: inline-block;
width: 40px !important;
width: 50px !important;
text-overflow: ellipsis;
max-width: 25px !important;
max-width: 50px !important;
}
}
}
Expand Down Expand Up @@ -699,9 +713,13 @@ form {
display: grid;
max-height: 400px;
overflow-x: hidden;
overflow-y: overlay;;
overflow-y: overlay;
width: 100% !important;

&.overflowingList {
padding: 0 10px 0 0;
}

transition: var(--transition);

&::-webkit-scrollbar {
Expand Down Expand Up @@ -804,8 +822,7 @@ form {
font-weight: 500 !important;
transition: var(--transition);
&:not(.itemDate) {
padding: 5px 0;
max-width: 220px !important;
padding: 10px 0;
white-space: normal !important;
word-wrap: break-word !important;
}
Expand All @@ -817,13 +834,18 @@ form {
text-align: right;
overflow: visible;
// max-width: fit-content;
grid-gap: 5px !important;
max-width: 150px !important;
grid-gap: 10px !important;
max-width: 157px !important;
justify-content: space-between;
* {
max-width: fit-content;
}
}

.itemButtons {
padding: 6px;
}

&.complete {
filter: invert(1);
background: rgba(0, 0, 0, 0.5) !important;
Expand All @@ -836,9 +858,11 @@ form {

.itemName {
// min-width: 215px !important;
&:not(.itemDate) {
text-decoration-thickness: 0;
text-decoration: line-through;
text-decoration-color: black;
}
}

.itemButtons {
Expand All @@ -855,7 +879,7 @@ form {
}

.itemButtons {
height: 75%;
height: 100%;
display: flex;
grid-gap: 7px;
padding-right: 7px;
Expand Down
4 changes: 2 additions & 2 deletions theme.config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ const config: DocsThemeConfig = {
content: `Report a Bug →`,
},
editLink: {
// text: null,
text: null,
// text: `Quote goes here`,
component: <a className={`hoverLink`} style={{fontSize: 12}} href={`https://github.com/strawhat19/ProductIVF`} target={`_blank`}>Github →</a> as any,
// component: <a className={`hoverLink`} style={{fontSize: 12}} href={`https://github.com/strawhat19/ProductIVF`} target={`_blank`}>Github →</a> as any,
},
// sidebar: {
// titleComponent: <Form />
Expand Down

1 comment on commit 442fa9b

@vercel
Copy link

@vercel vercel bot commented on 442fa9b Feb 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

product-ivf – ./

product-ivf-git-main-strawhat19.vercel.app
productivf.vercel.app
product-ivf-strawhat19.vercel.app
product-ivf.vercel.app

Please sign in to comment.