Add functionality to expand windows

princeibs commented 3 months ago

Currently, mini windows such as "Account" are fixed sizes, make windows expandable, don't worry about the content inside the window.

If you have any more questions or need more clarity on this issue, endeavour to join the StarkLudo contributors channel (https://t.me/+hnjQooODZOA2M2Rk) on Telegram and the project leads will be there to help.

ShantelPeters commented 3 months ago

Hi @princeibs can I work on this This would be my first time contributing to this ecosystem

onlydustapp[bot] commented 3 months ago

Hi @ShantelPeters! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

thesledge04 commented 3 months ago

Hi @princeibs can I work on this This would be my first time contributing to this ecosystem

martinvibes commented 3 months ago

hello @princeibs i would love to work on this if i'm giving the opportunity

onlydustapp[bot] commented 3 months ago

Hi @thesledge04! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

onlydustapp[bot] commented 3 months ago

Hi @martinvibes! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

CollinsC1O commented 3 months ago

Hi @princeibs I will love to work on this

onlydustapp[bot] commented 3 months ago

Hi @CollinsC1O! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

Supa-mega commented 3 months ago

hi @princeibs can i pls jump on this task ?

onlydustapp[bot] commented 3 months ago

Hi @Supa-mega! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

melnikga commented 3 months ago

Hi, can I take this? My profile on OnlyDust: https://app.onlydust.com/u/melnikga

onlydustapp[bot] commented 3 months ago

Hi @melnikga! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

ikemHood commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey, I am ikem Peter. a fullstack software developer with 3+ years of working experience, I would love to help out with this issue...

Ugo-X commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack blockchain Developer with expertise in Next.js, Nest.js, TypeScript, JavaScript, React, Node.js, Three.js, and Solidity. My journey with OnlyDust hackathons began at Edition 1, and I've since made 47 contributions across 11 projects. With my extensive experience on the OnlyDust platform (profile: https://app.onlydust.com/u/Ugo-X), I've honed my skills in delivering quality solutions under pressure. I bring a unique blend of technical proficiency and user-focused design to every project, whether it's crafting immersive 3D experiences or developing smart contracts. My track record shows I can adapt quickly and contribute effectively to diverse challenges. As we surf through Edition 7, I'm excited to leverage my skills and hackathon experience to push the boundaries of blockchain development. I'm confident in my ability to tackle new challenges and drive innovation in this space.

How I plan on tackling this issue

Understanding the Problem The current UI for mini windows like "Account" has a fixed size, which can limit the display of information. The goal is to make these windows expandable to accommodate more content without compromising the overall layout. Proposed Solution I will:

Identify the Mini Windows: • Determine which elements in the UI are classified as mini windows. These might include pop-ups, tooltips, or sidebars.
Add Expand/Collapse Functionality: • Implement a mechanism to allow users to expand or collapse these windows. This could involve: • Buttons or icons: Adding a small "expand" or "collapse" button within the window. • Hover or click actions: Triggering expansion or collapse when the user hovers over or clicks on a specific area of the window.
Adjust Window Size: • When a user expands a window, dynamically adjust its height or width to reveal more content. • Ensure that the window's size does not exceed the available screen space or interfere with other UI elements.
Consider Content Responsiveness: • If the content within the mini windows is dynamic or can vary in length, explore ways to make it responsive to the window's size. This might involve: • Scrolling: Enabling vertical or horizontal scrolling within the window if the content exceeds its dimensions. • Dynamic resizing: Adjusting the font size or layout of elements within the window to fit the available space.
Test and Iterate: • Thoroughly test the expanded mini windows to ensure that they function as expected and do not cause any layout issues. • Gather feedback from users to assess the effectiveness of the expandable feature and identify any areas for improvement. • Make necessary adjustments to refine the UI based on the feedback. By following these steps, I can enhance the usability of mini windows in the UI, providing users with more flexibility in viewing information and improving the overall user experience.

Joy-Adah commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi my name is Joy and i am a frontend developer.

How I plan on tackling this issue

I would approach this by ensuring all mini windows are expandable and also responsive on all devices.

DioChuks commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a software engineer with Full-Stack Development: End-to-End Projects: With expertise in both frontend (React.js, TypeScript) and backend (Node.js, Laravel), i can handle full-stack projects, building robust and scalable web applications from the ground up. API Design and Integration: My knowledge of Node.js and Laravel positions me well to design and implement APIs that power frontend applications, ensuring seamless integration and performance.

Advanced Frontend Techniques: Component Design: With experience in React.js, i can create reusable, modular components that improve code maintainability and consistency across projects. State Management: Leverage my knowledge to implement advanced state management strategies, whether using built-in React tools like Context API or external libraries like Redux. Performance Optimization: Use my understanding of JavaScript and TypeScript to write optimized code, improving the performance and responsiveness of my applications. System Design: With 4+ years of experience, i can contribute to designing complex systems, choosing the right architecture and technology stack based on project requirements. Best Practices: Apply industry best practices in design patterns, code organization, and project management, leading to more robust and maintainable codebases.

How I plan on tackling this issue

First and foremost, I would review the source, namely the component in charge of rendering the "Account" window. Determine how the window's dimensions (width and height) are currently configured—whether they are hardcoded, set via CSS classes, or managed by a state. Second, if the window size is controlled by CSS, I would change the CSS to allow the window to resize. This might include using resize: both on the window's container, as well as setting min-width, min-height, and max-width, max-height as needed.

State Management Approach: If the size of the React component is controlled by a state, I would add logic to allow resizing, such as adding event listeners for mouse drag events and adjusting the state accordingly.

Third, I will include a draggable corner or border in the window that users may grab and resize. Use JavaScript to determine the new size based on the user's mouse movements, then change the component's state accordingly.

I could even go so far as to ensure that the resizing feature is accessible, either by permitting keyboard resizing or making the new sizes easily perceivable by screen readers.

ScottyDavies commented 3 months ago

Hi @princeibs can I be assigned this please? I’m ready to work.

onlydustapp[bot] commented 3 months ago

Hi @ScottyDavies! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

ScottyDavies commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am front end developer with 4 years experience, i have worked on similar projects in the past. this will be my first time contributing and i am ready to work

How I plan on tackling this issue

I would approach the problem with the following steps Understand Requirement: Make mini windows expandable, ignore content. Key Elements: Window structure (HTML), sizing/positioning (CSS), expansion functionality (JS). Solution Design: HTML: Consistent window structure with header, content, resize handles. CSS: Initial window size, position, resize handle styles. JS: Resize event listeners, window size/position updates. Implement: Code HTML, CSS, JS for expandable windows. Test and Refine: Thoroughly test, refine implementation. Document and Review: Document approach and review solution.

Benjtalkshow commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @princeibs

I can work on the "Add functionality to expand windows #15" issue. My name is Benjamin, and I have extensive experience building gamified TypeScript projects, specializing in Next.js, TypeScript, and frontend development. I’ve contributed to various projects, including those on OnlyDust, where I tackled complex UI and component challenges.

Understanding the Issue

Currently, mini windows, such as the "Account" window, are fixed in size, limiting user interaction and flexibility. The goal is to allow these windows to be expandable, providing users with the ability to adjust the window size according to their needs.

How I plan on tackling this issue

Window Expansion Functionality

Feature Implementation: I will implement a feature that allows users to expand or resize the mini windows dynamically.
User Experience: I will ensure the window's resizable functionality is smooth and user-friendly, even though the content inside the window is not a concern for this task.

Testing and Validation

Device Testing: I will test the expandable functionality across different devices and screen sizes to ensure a consistent and responsive user experience.
Intuitive Controls: I will verify that the resizing handles or controls are intuitive and easy to use.

By implementing this functionality, I aim to enhance the user interface's flexibility, giving users more control over how they interact with various windows in the application.

josephchimebuka commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @princeibs I am Joseph Chimebuka I'm a full-stack software developer with 4+ years of experience in crafting innovative products. I've built a range of projects, including https://mattedsgn.vercel.app/ and https://metacrypt.vercel.app/ showcasing my expertise in React, Next.js, and blockchain technologies. I'm also an active contributor onlydust. here's my account https://app.onlydust.com/u/josephchimebuka.

I am new to this repo and would love the chance to contribute

How I plan on tackling this issue

I will add functionality to allow windows to be expanded when needed

Jayse007 commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I've have 5 years of experience with Javascript, typescript and I have used it to work on multiple projects and know how to make proper use of the libraries provided to achieve goals at hand.

How I plan on tackling this issue

I'd approach this problem using JavaScript or TypeScript by implementing a dynamic resizing mechanism for the mini windows. Here's a general outline of the steps involved:

Identify the mini windows:

I would take advantage of the concept of events and CSS selectors I would use CSS selectors to target the specific elements that represent the mini windows.

Add resize handles:

I would use capture mouse events: I would attach event listeners to the resize handles to capture mouse down, mouse move, and mouse up events. When the mouse is pressed down on a resize handle, store the initial window

thesledge04 commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have extensive experience in front-end development, particularly in creating responsive and interactive user interfaces. I’ve worked on several projects where I had to implement resizable components, such as dialog boxes and modal windows, ensuring they adapt smoothly to user interactions.

In previous roles, I’ve used CSS, JavaScript, and front-end frameworks like React to handle dynamic sizing of UI elements. For instance, I’ve implemented draggable and resizable windows using CSS properties such as resize and overflow, along with JavaScript to manage the resizing logic, event listeners, and state.

To make the fixed-size windows expandable, I would apply my knowledge of these tools to enable resizing functionality. I’d ensure that the user can drag the corners or edges of the window to resize it, while maintaining the window’s appearance and behavior. This would improve the flexibility and usability of the application’s interface, allowing users to adjust windows according to their preferences.

My experience with responsive design principles and handling different screen sizes would also be beneficial in ensuring that the resizable windows work consistently across various devices and resolutions.

How I plan on tackling this issue

Enable Resizing with CSS: Use CSS to allow the window to be resized by the user. The resize property in CSS can be applied to the window's container. Set the overflow property to auto to ensure that any content that exceeds the window’s size will be scrollable if needed. css Copy code .mini-window { resize: both; overflow: auto; width: 300px; / Initial fixed width / height: 200px; / Initial fixed height / min-width: 150px; / Minimum width for resizing / min-height: 100px; / Minimum height for resizing / max-width: 100%; / Limit to prevent window from becoming too large / max-height: 100%; border: 1px solid #ccc; / Optional: Visual cue for resizing / box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); / Optional: Shadow for aesthetics / } In this CSS snippet, resize: both; allows the window to be resized in both horizontal and vertical directions.
Add Resizable Handles (Optional): To provide a more intuitive user experience, you can add custom resizable handles at the corners and sides of the window. These can be created using pseudo-elements or additional divs. css Copy code .mini-window::after { content: ""; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; cursor: se-resize; background: transparent; / Optional: Add a background or icon / }
Handle Resizing Events with JavaScript (Optional for Enhanced Control): If you need more control over the resizing behavior, such as maintaining aspect ratios or triggering specific actions on resize, you can use JavaScript to listen to resize events. javascript Copy code const miniWindow = document.querySelector('.mini-window');

miniWindow.addEventListener('mousedown', function (event) { if (event.target === miniWindow) { const initWidth = miniWindow.offsetWidth; const initHeight = miniWindow.offsetHeight; const initX = event.clientX; const initY = event.clientY;

    function onMouseMove(e) {
        const newWidth = initWidth + (e.clientX - initX);
        const newHeight = initHeight + (e.clientY - initY);
        miniWindow.style.width = `${newWidth}px`;
        miniWindow.style.height = `${newHeight}px`;
    }

    function onMouseUp() {
        window.removeEventListener('mousemove', onMouseMove);
        window.removeEventListener('mouseup', onMouseUp);
    }

    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
}

}); This code snippet adds a custom resizing function that adjusts the window's size as the user drags from the window's corner.

Testing and Refinement: After implementing the resizing functionality, I would thoroughly test it across different browsers and devices to ensure consistent behavior. Check for edge cases, such as resizing the window to its minimum or maximum limits, and adjust the implementation if necessary.

melnikga commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I am a frontend developer, I have participated in all ODHacks since the second one, I would be very pleased to work on your project.

How I plan on tackling this issue

My profile on OnlyDust: https://app.onlydust.com/u/melnikga

ShantelPeters commented 3 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a blockchain developer with background in typescript ,rust ,solidarity ,cario ,fullstack deverlopment this would my first time applying to this ecosystem

How I plan on tackling this issue

Here's how I would approach making mini windows expandable, focusing on the core concepts and considerations:

1. Identify the Target Element:

HTML Structure: First, I'd need to determine the HTML element that represents the mini window. It's likely a <div> or similar container element.

Example:

<div class="mini-window">
  <!-- Window content goes here -->
</div>

2. Enable Resizing:

CSS resize Property: The most straightforward way to make an element resizable is to use the CSS resize property.
- resize: both; allows resizing in both directions (horizontal and vertical).
- resize: vertical; or resize: horizontal; restricts resizing to a single direction.

Example:

.mini-window {
  width: 200px;
  height: 150px;
  resize: both;
}

3. Visual Feedback:

Cursor: Change the cursor to a resize cursor (e.g., nwse-resize for both directions) when hovering over the resize handle (usually the bottom right corner) to provide visual feedback to the user.
```
.mini-window:hover {
  cursor: nwse-resize; 
}
```

4. Handle Content Overflow (Optional):

overflow: auto;: If the content inside the mini window might exceed its initial size, use overflow: auto; to allow scrollbars to appear if needed.
```
.mini-window {
  overflow: auto;
}
```

5. JavaScript (Optional):

Event Listeners: If you need to perform actions when the window is resized (e.g., adjust content, update layout), you'll need to add event listeners in JavaScript.
resize Event: Listen for the resize event on the container element.

Example:

const miniWindow = document.querySelector('.mini-window');

miniWindow.addEventListener('resize', () => {
  // Get the new width and height
  const newWidth = miniWindow.offsetWidth;
  const newHeight = miniWindow.offsetHeight;

  // Update content or layout based on the new dimensions
  console.log("New width:", newWidth, "New height:", newHeight); 
});

Key Points:

UI Framework: If you're using a UI framework like React, Angular, or Vue, it likely has built-in components or methods for making elements resizable. Refer to your framework's documentation.
Content Responsiveness: Consider how the content inside the mini window will adapt to the new size. You might need to use CSS flexbox or grid layout to make the content responsive.
User Experience: Think about how the resize functionality will impact the user experience. Make sure it's intuitive and easy to use.

Example (Simplified HTML and CSS):

<!DOCTYPE html>
<html>
<head>
  <title>Expandable Mini Window</title>
  <style>
    .mini-window {
      width: 200px;
      height: 150px;
      border: 1px solid #ccc;
      resize: both;
      overflow: auto;
    }

    .mini-window:hover {
      cursor: nwse-resize;
    }
  </style>
</head>
<body>
  <div class="mini-window">
    <!-- Window content goes here -->
    <p>This is the content of the mini window.</p>
  </div>
</body>
</html>

onlydustapp[bot] commented 3 months ago

The maintainer princeibs has assigned Joy-Adah to this issue via OnlyDust Platform. Good luck!

sivicstudio / starkludo