swimmy jones Posts - Answer Overflow

swimmy jones

Posts Comments

KPCKevin Powell - Community

•Created by swimmy jones on 2/21/2024 in #front-end

MUI DataGrid Columns and Filter Buttons Not Working

Here's my code, anybody have any idea why the Columns and Filter buttons would not work?

2 replies

KPCKevin Powell - Community

•Created by swimmy jones on 2/20/2024 in #front-end

Grid with Toggleable Sidebar Issue

Well, copilot can't figure it out so maybe you guys can. I'm trying to create a sidebar that is toggleable, which seems like it should be pretty simple, but I get this weird behavior where the main takes a few seconds to readjust it's width. Here's the css

/* Main Layout Styles */
body {
    display: grid;
    /* sidebar takes 1 part, main content fills the rest */
    grid-template-columns: 250px auto;
    grid-template-rows: auto 1fr; /* top navigation auto-sized, rest takes remaining space */
    grid-template-areas:
        "topnav topnav"
        "sidebar main";
    height: 100vh; /* make the grid container fill the viewport height */
    transition: width 0.3s ease-in-out;
}

.top-navigation {
    grid-area: topnav;
}

.sidebar {
    grid-area: sidebar;
    background-color: white;
    font-size: 0.8rem;
    width: 250px;
    transition: width 0.3s ease-in-out;
    overflow: hidden;
    & button {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    body,
    body:not(.sidebar-open) {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "topnav"
            "main";
    }
    .sidebar {
        display: none;
    }
}

main {
    grid-area: main;
}

body:not(.sidebar-open) {
    grid-template-columns: 0px auto;
}

body:not(.sidebar-open) .sidebar {
    width: 0px;
    border: none !important;
}

/* Main Layout Styles */
body {
    display: grid;
    /* sidebar takes 1 part, main content fills the rest */
    grid-template-columns: 250px auto;
    grid-template-rows: auto 1fr; /* top navigation auto-sized, rest takes remaining space */
    grid-template-areas:
        "topnav topnav"
        "sidebar main";
    height: 100vh; /* make the grid container fill the viewport height */
    transition: width 0.3s ease-in-out;
}

.top-navigation {
    grid-area: topnav;
}

.sidebar {
    grid-area: sidebar;
    background-color: white;
    font-size: 0.8rem;
    width: 250px;
    transition: width 0.3s ease-in-out;
    overflow: hidden;
    & button {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    body,
    body:not(.sidebar-open) {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "topnav"
            "main";
    }
    .sidebar {
        display: none;
    }
}

main {
    grid-area: main;
}

body:not(.sidebar-open) {
    grid-template-columns: 0px auto;
}

body:not(.sidebar-open) .sidebar {
    width: 0px;
    border: none !important;
}

4 replies

KPCKevin Powell - Community

•Created by swimmy jones on 11/14/2023 in #front-end

Next 14 Session Provider

Does anybody know how to setup a session provider with Next JS 14? I just went through their tutorial, and it was cool, but there's no info on how to setup the session provider, and everything I try online seems to be out of date. I'm considering just switching to a more well documented version of next, but wanted to get the thoughts of you guys before resorting to that. Thanks.

1 replies

KPCKevin Powell - Community

•Created by swimmy jones on 10/18/2022 in #ui-ux

Design Resources

Hey guys, I'm re-building the frontend for a site and I have a question. For folks like me who are good at the CSS part but not so good at the "design" part, do you guys have any favorite resources for getting a designer to come up with a Figma file that has all the fancy stuff like svg designs, backgrounds, color decisions, etc? The site I've been tasked with is a site for a Rodeo. They have general and sponsor tickets for Rodeo, Merchandise, and then other general marketing stuff they want on the site. I can replicate pretty much any Figma file, I'm just not so talented at the "design/creative" part, and I'd like the site to look good / clean. I'm willing to pay also, so don't feel the need to only supply free resources.

10 replies

Gaming

Programming