How to create a ANTD progress bar like a meter - css

I want to create a progress bar like this using antd library to show the percentage value from an API
I design the progress bar like this, but when I apply the stroke color transparent but it shows the normal progress bar instead of showing the relative div like this
when I add a color to it, it shows the added color
below is my code
<div className="w-full mt-2">
<div className="flex flex-row relative">
<div className="w-full py-2 bg-sliderGreenS rounded-l-lg"></div>
<div className="w-full py-2 bg-sliderYellowS rounded-l-lg -ml-3"></div>
<div className="w-full py-2 bg-sliderOrangeS rounded-l-lg -ml-3"></div>
<div className="w-full py-2 bg-sliderRedS rounded-lg -ml-3"></div>
<Progress
className="w-full absolute -mt-1.5"
percent={100}
showInfo={false}
strokeWidth={17}
success={{
percent: x,
strokeColor: "transparent",
}}
strokeColor="rgba(0,0,0,0.5)"
/>
</div>
I want to change it to the 1st attached picture. Am using tailwinds and ANTD package for this

After some work, I came up with an answer, instead of using the progress bar from ANTD I used some custom divs to make the view using absolute and relative behavior.
<div className="w-full mt-2">
<div className="flex flex-row relative">
<div className="w-full py-2 bg-sliderGreenS rounded-l-lg"></div>
<div className="w-full py-2 bg-sliderYellowS rounded-l-lg -ml-3"></div>
<div className="w-full py-2 bg-sliderOrangeS rounded-l-lg -ml-3"></div>
<div className="w-full py-2 bg-sliderRedS rounded-lg -ml-3"></div>
<div
className={`bg-[rgba(0,0,0,0.8)] absolute right-0 z-10 py-2 ${
value >= 1 ? "rounded-r-lg" : "rounded-lg"
} text-end`}
style={{
width: `${(100 - value)}%`,
}}
></div>
</div>
<div
className={`${value ===0 ? "text-start -pl-5" : "text-end"}`}
style={{
width: `${value===100? value : value+2}%`,
}}
>
<div class="pt-2 flex justify-end">
<div className="triangle-up"></div>
</div>
<div className={`text-sm`}>
{value}
</div>
</div>
</div>
value is the amount I want to show as the percentage.
The final result is like this

Related

The options tag renders in a different place than the select parent tag using tailwind and react

I have a problem. I use react and tailwind css. Th modal is relative and the overlay is flex positioned, because I want the main modal to be positioned in the middle of the screen on X axis. Here it comes the problem. The wrapper that contains the options tag renders in a different place than the parent select. I tried fixing it with absolute position and also with relative one. But nothing works...
Because there is not programming logic, I will paste the code.
<div className="modal flex fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabIndex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
<div className=" modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none flex-1 p-2 bg-slate-200">
<div className="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding max-w-2xl mx-auto mt-5 rounded-md outline-none text-current">
<div className="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md ">
<h5 className="text-2xl font-bold leading-normal text-gray-700 underline " id="exampleModalCenteredScrollableLabel">
Add new exercice
</h5>
<button type="button" onClick={() => setOpen(!open)}
className="btn-close box-content p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
data-bs-dismiss="modal" aria-label="Close"><AiOutlineCloseCircle color='black' size={30}/></button>
</div>
<div className="modal-body relative p-4">
<p>Look for the exercice you wish to add, and click import. You may add as many exercices you want, however please make sure you will complete them by the end of the day.</p>
<form >
<div className='flex mt-3 flex-col'>
<input required placeholder='Search by word...' className='border border-slate-400 p-1 rounded-md flex-1 max-w-sm my-2'/>
{/* Problem is here!!!! */}
<select className='border border-slate-400 p-1 rounded-md max-w-sm my-2 [&>option]:bg-black'>
<option defaultValue>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
</select>
</div>

Svelte with Tailwind siding side panel: How do I set this up to use transitions?

Either svelte or tailwind transitions.
This is basically copied from the tailwind components page with some changes to make it work as best as I knew how with svelte. The tailwind component page says it requires JS, but I cannot find any examples of the kind of JS that would be expected in order for it to work the way it does on the component page.
There's a comment block of tailwind classes, but I cannot find docs on how they are to be used.
The side panel works, as in it hides and shows and all the clicks are appropriate, but it snaps. I'd like it to slide in from the side.
How do I make it do a sliding anim/transition?
<aside
class="relative z-10 "
aria-labelledby="slide-over-title"
role="dialog"
aria-modal="true"
class:block={showSidePanel} << my toggle variable in Svelte
class:hidden={!showSidePanel}
on:click|stopPropagation|preventDefault={toggleSidePanel}
transition:fly={{ x: 200, duration: 300 }}
>
<!--
Background backdrop, show/hide based on slide-over state.
Entering: "ease-in-out duration-500"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in-out duration-500"
From: "opacity-100"
To: "opacity-0"
-->
<div
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
class:block={showSidePanel}
class:hidden={!showSidePanel}
/>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-y-0 right-0 mt-20 flex max-w-full pl-10">
<!--
Slide-over panel, show/hide based on slide-over state.
Entering: "transform transition ease-in-out duration-500 sm:duration-700"
From: "translate-x-full"
To: "translate-x-0"
Leaving: "transform transition ease-in-out duration-500 sm:duration-700"
From: "translate-x-0"
To: "translate-x-full"
-->
<div
class="my-auto h-full w-screen max-w-2xl"
on:click|stopPropagation|preventDefault={() => {
// this blocks clicks closing the sidepanel
}}
>
<div
class="m-auto flex h-[95%] flex-col overflow-y-scroll bg-white py-6 shadow-xl"
>
<div class="px-4 sm:px-6">
<div class="flex items-start justify-between">
<h2
class="text-lg font-medium text-gray-900"
id="slide-over-title"
>
Panel title
</h2>
<div class="ml-3 flex h-7 items-center">
<button
type="button"
class="rounded-md bg-white font-bold text-gray-400 hover:text-gray-500"
on:click|stopPropagation={toggleSidePanel}
>
<span class="sr-only">Close panel</span>
<Icon src={X} theme="solid" class="h-8 w-8 font-bold" />
</button>
</div>
</div>
</div>
<div class="relative mt-6 flex-1 px-4 sm:px-6">
<!-- Replace with your content -->
<div class="absolute inset-0 px-4 sm:px-6">
<div
class="h-full border-2 border-dashed border-gray-200"
aria-hidden="true"
/>
</div>
<!-- /End replace -->
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
Instead of using classes to hide or show your sidebar you should use an {#if} block wrapped around the entire aside element to hide and show the sidebar and overlay.
Then you can use the Svelte transition that is right for each element. In the Tailwind comments it's using translate-x-full for the panel transition to get a similar effect you can bind the clientWidth of the actual panel to a variable and use that as the x amount in your Svelte fly transition.
Something like this (I removed some of your code since you had no components linked and used Tailwind CDN so the Tailwind classes would work like in this REPL):
<script>
import { fly, fade } from 'svelte/transition'
let showSidePanel, width
function toggleSidePanel() {
showSidePanel = !showSidePanel
}
</script>
<svelte:head>
<script src="https://cdn.tailwindcss.com"></script>
</svelte:head>
<div>
<button class="p-3" on:click={toggleSidePanel}>
Show side panel
</button>
</div>
{#if showSidePanel}
<aside class="relative z-10">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" transition:fade/>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-y-0 right-0 mt-20 flex max-w-full pl-10">
<div class="my-auto h-full w-screen max-w-2xl">
<div bind:clientWidth={width} transition:fly={{ x: width }} class="m-auto flex h-[95%] flex-col overflow-y-scroll bg-white py-6 shadow-xl">
<div class="px-4 sm:px-6">
<div class="flex items-start justify-between">
<h2 class="text-lg font-medium text-gray-900">
Panel title
</h2>
<div class="ml-3 flex h-7 items-center">
<button class="rounded-md bg-white font-bold text-gray-400 hover:text-gray-500" on:click={toggleSidePanel}>
close
</button>
</div>
</div>
</div>
<div class="relative mt-6 flex-1 px-4 sm:px-6">
<div class="absolute inset-0 px-4 sm:px-6">
<div class="h-full border-2 border-dashed border-gray-200" aria-hidden="true">Some content</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
{/if}

Tailwind grid with carousel mobile responsiveness

I am trying to create a homepage that has two columns, one with text and another with a carousel of images.On web view, the layout looks great, but on mobile view, the images are compressed leaving a lot of space around. I have tried setting the image height to full with h-full which doesn't work. How can i make the image occupy the full grid height on mobile view as well? Any recommendations / references will be appreciated.
My code :
<section className="p-9">
<div className="min-h-screen grid grid-cols-1 sm:grid-cols-2 md:grid-cols-8 lg:grid-cols-8 items-center pt-9">
<div className="col-span-2">
<p className="font-bold text-4xl mb-4 ml-4">
A construction <span className="text-red-600">ecosystem</span> that is
simple, transparent and <span className="text-red-600">efficient</span>
</p>
</div>
{/* <div className="h-full col-span-6">
<img className="w-full h-full m-2" src={carousel1} />
</div> */}
<div
id="carouselExampleCrossfade"
className="absolute carousel slide carousel-fade carousel-dark relative col-span-6 m-2"
data-bs-ride="carousel"
>
<div className="carousel-inner relative w-full h-full overflow-hidden">
<div className="carousel-item active float-left w-full bg-no-repeat bg-cover">
<img
src="https://www.shell.com/business-customers/construction-and-road/about-construction-and-road/_jcr_content/pagePromo/image.img.960.jpeg/1652883928742/two-engineers-working-on-a-construction-site.jpeg"
className="block w-full h-full rounded"
alt="Wild Landscape"
/>
<Link
href={`/service`}
className="absolute bottom-0 left-0 m-6 py-2.5 px-2.5 bg-red-600 text-white font-medium text-md leading-tight rounded hover:text-red-700 hover:bg-gray-100 focus:bg-none focus:outline-none focus:ring-0 active:bg-gray-200 transition duration-150 ease-in-out"
>
<span>{"Testing"}</span>
</Link>
</div>
</div>
</div>
</div>
</section>;
Link to code here
Current view on mobile:
Current view on web:

TailwindCSS fixed width property not working on resolution change

I have this div that's supposed to represent a button next to an input. Ideally on resolution change, the input element's width shrinks but the button stays the same height and width.
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
I set the w-28 property thinking it could achieve this. However, the button changes width if I shrink the window or screen it appears on, and I'm not sure why.
This is the full component:
<div id="settings" className="w-3/4 h-5/6 bg-blue-300 self-center">
<div id="settings-content" className="flex flex-col self-center mx-5">
<div id="header" className="flex flex-col mt-5">
<div id="title" className="font-sans font-bold text-3xl">Block Sites</div>
</div>
<div id="subtitle" className="font-sans text-base font-medium text-neutral-600">Visiting these sites will stop point acquisition until you reset the timer</div>
<div id="block-site-add-list" className="flex flex-row mt-16 justify-between bg-amber-400 shrink-0">
<div className="flex flex-row rounded-lg border border-white border-solid hover:cursor-pointer py-2 px-2 w-28">
<AddIcon></AddIcon>
<div className="flex font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 flex-grow bg-red-500"></input>
</div>
</div>
</div>
This is what the button looks like with a smaller screen, when both words should be on the same line:
You could try adding whitespace-nowrap to your label div to ensure that the text doesn't wrap to two lines. Since you have your elements (button and input) wrapped in another flex, you can add shrink-0 to your wrapper div to keep its size.
For example:
<div id="block-site-add-list" className="flex flex-row ...">
<div className="shrink-0 flex flex-row ...">
<AddIcon></AddIcon>
<div className="whitespace-nowrap font-sans text-base font-medium">Add site</div>
</div>
<input className="ml-5 grow bg-red-500"></input>
</div>

Vertical alignment of text in a button with icon is not correct

I have been trying to make a twitter clone, while making the sidebar I am not able to align the text of "Home" and "Explore". in img you can see "Home" is little bit towards the right. while inspecting I found that faHome icon is of 18x14 size, while faHashtag is of 14x14.
I need to know how I can I keep all button's text and Icon in same alignment.
Following the code for complete screen as shown in image. I am using Tailwind CSS
<div className="flex flex-row">
{--------- Div for Nav Bar ---------}
<div class="px-4 w-80 bg-white flex flex-col justify-start align-center top-0 bottom-0 left-0 fixed">
<div>
<button className="flex p-4 bg-red-500 mb-2 rounded-full mx-auto 2xl:mx-0 2xl:space-x-4 focus:outline-none hover:text-blue hover:bg-blue hover:bg-opacity-20">
<FontAwesomeIcon icon={faHome} className="mr-4 text-xl" />
<span>Home</span>
</button>
<button className="flex p-4 bg-red-500 rounded-full mx-auto 2xl:mx-0 2xl:space-x-4 focus:outline-none hover:text-blue hover:bg-blue hover:bg-opacity-20">
<FontAwesomeIcon icon={faHashtag} className="mr-4 text-xl" />
<span>Explore</span>
</button>
<button className="flex p-4 rounded-full mx-auto 2xl:mx-0 2xl:space-x-4 focus:outline-none hover:text-blue hover:bg-blue hover:bg-opacity-20">
<FontAwesomeIcon icon={faHashtag} size="lg" className="mr-4" />
<span>Explore</span>
</button>
</div>
</div>
{---------------------}
<div className="flex-auto h-screen bg-blue-400">Hello World</div>
<div className="w-96 h-screen bg-gray-400">Hello World</div>
</div>
I want Home and explore to look something like this.
The issue was there because of icons size coming from FontAwesome Icons. though I tried to wrap the size into a div, but that didn't work.
I found out that we can use following to get the desired size of icon.
<FontAwesomeIcon icon={faHome} style={{ width: "20px", height: "230px" }} />

Resources