What happened to responsive first? Or am I just not doing it right? #758

jamesautodude · 2024-11-27T10:30:13Z

jamesautodude
Nov 27, 2024

So I come from bootstrap so bear with me on this...

But I put together a simple example page. Everything works right on desktop versions, but when I go to mobile, the header example is full length still and doesn't compact to mobile with a menu button.

I guess I have to just code a way to do that using tailwind instead of flux kinda handling it for me?

Is this how everything is going to be where I have to manually make everything responsive?

Maybe I'm too spoiled from bootstrap lol

Answered by jamesautodude

Nov 27, 2024

Absolutely. It works for me on both desktop and mobile.

After you make changes, are you running npm run build and php artisan view:clear to make sure you're clearing the cache and viewing the most recent change(s)?

Yeah I did both

Quick question, in the tailwind.config.js, does that automatically include subfolders with:

"./resources/**/*.blade.php"?

I have my layout inside of:

resources/layouts/fluxui/ and it seems like that line isn't going to cover the fluxui folder?

@jeffchown This was the problem. It's fixed now and works correctly 🤦‍♂️🤦‍♂️🤦‍♂️

I had to add:

"./resources/**/**/*.blade.php" to my tailwind config because I had my layout in a subfolder of the layouts folder, and I o…

View full answer

jeffchown · 2024-11-27T11:55:06Z

jeffchown
Nov 27, 2024

@jamesautodude When you view this page: https://fluxui.dev/demo/header in mobile, does it 'compact' to a button like you expect?

12 replies

jamesautodude Nov 27, 2024
Author

@jamesautodude Not sure what you mean re: 'source code has more classes', etc., but if you follow the Flux installation instructions (https://fluxui.dev/docs/installation), then paste the demo code from the code tab on that Header page (https://fluxui.dev/layouts/header) into your view (with a few small edits re: the <head> section, etc., it should work.

You should end up with a Blade view file something like this (which you can convert to a layout file, with a few edits, if desired):

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @fluxStyles
    </head>

    <body class="min-h-screen bg-white dark:bg-zinc-800">
        <flux:header container class="border-b bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700">
            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />

            <flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="max-lg:hidden dark:hidden" />
            <flux:brand href="#" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." class="max-lg:!hidden hidden dark:flex" />

            <flux:navbar class="-mb-px max-lg:hidden">
                <flux:navbar.item icon="home" href="#" current>Home</flux:navbar.item>
                <flux:navbar.item icon="inbox" badge="12" href="#">Inbox</flux:navbar.item>
                <flux:navbar.item icon="document-text" href="#">Documents</flux:navbar.item>
                <flux:navbar.item icon="calendar" href="#">Calendar</flux:navbar.item>

                <flux:separator vertical variant="subtle" class="my-2"/>

                <flux:dropdown class="max-lg:hidden">
                    <flux:navbar.item icon-trailing="chevron-down">Favorites</flux:navbar.item>

                    <flux:navmenu>
                        <flux:navmenu.item href="#">Marketing site</flux:navmenu.item>
                        <flux:navmenu.item href="#">Android app</flux:navmenu.item>
                        <flux:navmenu.item href="#">Brand guidelines</flux:navmenu.item>
                    </flux:navmenu>
                </flux:dropdown>
            </flux:navbar>

            <flux:spacer />

            <flux:navbar class="mr-4">
                <flux:navbar.item icon="magnifying-glass" href="#" label="Search" />
                <flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="#" label="Settings" />
                <flux:navbar.item class="max-lg:hidden" icon="information-circle" href="#" label="Help" />
            </flux:navbar>

            <flux:dropdown position="top" align="start">
                <flux:profile avatar="https://fluxui.dev/img/demo/user.png" />

                <flux:menu>
                    <flux:menu.radio.group>
                        <flux:menu.radio checked>Olivia Martin</flux:menu.radio>
                        <flux:menu.radio>Truly Delta</flux:menu.radio>
                    </flux:menu.radio.group>

                    <flux:menu.separator />

                    <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item>
                </flux:menu>
            </flux:dropdown>
        </flux:header>

        <flux:sidebar stashable sticky class="border-r lg:hidden bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700">
            <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />

            <flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="px-2 dark:hidden" />
            <flux:brand href="#" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." class="hidden px-2 dark:flex" />

            <flux:navlist variant="outline">
                <flux:navlist.item icon="home" href="#" current>Home</flux:navlist.item>
                <flux:navlist.item icon="inbox" badge="12" href="#">Inbox</flux:navlist.item>
                <flux:navlist.item icon="document-text" href="#">Documents</flux:navlist.item>
                <flux:navlist.item icon="calendar" href="#">Calendar</flux:navlist.item>

                <flux:navlist.group expandable heading="Favorites" class="max-lg:hidden">
                    <flux:navlist.item href="#">Marketing site</flux:navlist.item>
                    <flux:navlist.item href="#">Android app</flux:navlist.item>
                    <flux:navlist.item href="#">Brand guidelines</flux:navlist.item>
                </flux:navlist.group>
            </flux:navlist>

            <flux:spacer />

            <flux:navlist variant="outline">
                <flux:navlist.item icon="cog-6-tooth" href="#">Settings</flux:navlist.item>
                <flux:navlist.item icon="information-circle" href="#">Help</flux:navlist.item>
            </flux:navlist>
        </flux:sidebar>

        <flux:main container>
            <flux:heading size="xl" level="1">Good afternoon, Olivia</flux:heading>

            <flux:subheading size="lg" class="mb-6">Here's what's new today</flux:subheading>

            <flux:separator variant="subtle" />
        </flux:main>

        @fluxScripts
    </body>
</html>

Hmm yeah not working for some reason

Have you tried it in your own environment on mobile?

jeffchown Nov 27, 2024

Absolutely. It works for me on both desktop and mobile.

After you make changes, are you running npm run build to compile the css and js assets, and php artisan view:clear to make sure you're clearing the cache and viewing the most recent change(s)?

jamesautodude Nov 27, 2024
Author

Absolutely. It works for me on both desktop and mobile.

After you make changes, are you running npm run build and php artisan view:clear to make sure you're clearing the cache and viewing the most recent change(s)?

Yeah I did both

Quick question, in the tailwind.config.js, does that automatically include subfolders with:

"./resources/**/*.blade.php"?

I have my layout inside of:

resources/layouts/fluxui/ and it seems like that line isn't going to cover the fluxui folder?

jamesautodude Nov 27, 2024
Author

Absolutely. It works for me on both desktop and mobile.

After you make changes, are you running npm run build and php artisan view:clear to make sure you're clearing the cache and viewing the most recent change(s)?

Yeah I did both

Quick question, in the tailwind.config.js, does that automatically include subfolders with:

"./resources/**/*.blade.php"?

I have my layout inside of:

resources/layouts/fluxui/ and it seems like that line isn't going to cover the fluxui folder?

@jeffchown This was the problem. It's fixed now and works correctly 🤦‍♂️🤦‍♂️🤦‍♂️

I had to add:

"./resources/**/**/*.blade.php" to my tailwind config because I had my layout in a subfolder of the layouts folder, and I only had **/*.blade

Answer selected by jamesautodude

jeffchown Nov 27, 2024

@jamesautodude Glad you found the issue.
That is documented here: https://fluxui.dev/docs/installation/ in the Set up Tailwind CSS section

jamesautodude Nov 27, 2024
Author

@jamesautodude Glad you found the issue.
That is documented here: https://fluxui.dev/docs/installation/ in the Set up Tailwind CSS section

Yeah that doesn't say anything about having a subdirectory lol. I just didn't think about it when I moved it to a subdirectory 🥲

Thanks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

What happened to responsive first? Or am I just not doing it right? #758

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 12 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

What happened to responsive first? Or am I just not doing it right? #758

jamesautodude Nov 27, 2024

Replies: 1 comment · 12 replies

jeffchown Nov 27, 2024

jamesautodude Nov 27, 2024 Author

jeffchown Nov 27, 2024

jamesautodude Nov 27, 2024 Author

jamesautodude Nov 27, 2024 Author

jeffchown Nov 27, 2024

jamesautodude Nov 27, 2024 Author

jamesautodude
Nov 27, 2024

Replies: 1 comment 12 replies

jeffchown
Nov 27, 2024

jamesautodude Nov 27, 2024
Author

jamesautodude Nov 27, 2024
Author

jamesautodude Nov 27, 2024
Author

jamesautodude Nov 27, 2024
Author