Skip to content

Commit

Permalink
Improve responsive design for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@silentsoft
silentsoft committed Feb 18, 2022
1 parent 7bf07aa commit b31d203
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 20 deletions.
14 changes: 7 additions & 7 deletions src/main/react/Content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,43 +130,43 @@ export default function Content(props) {
<div className="flex justify-center pb-4">
<div className="flex-col space-y-3">
<div className="flex flex-row items-center justify-end">
<label className="text-sm font-medium leading-none text-gray-700 pr-3">View Type</label>
<label className="text-right text-sm font-medium leading-none text-gray-700 pr-3">View Type</label>
<div className="w-48">
<SimpleDropdown items={['total', 'today-total']} onChange={handleViewChange}/>
</div>
</div>
<div className="flex flex-row items-center justify-end">
<label className="text-sm font-medium leading-none text-gray-700 pr-3">Style</label>
<label className="text-right text-sm font-medium leading-none text-gray-700 pr-3">Style</label>
<div className="w-48">
<SimpleDropdown items={['flat', 'flat-square', 'for-the-badge', 'plastic']} onChange={handleStyleChange}/>
</div>
</div>
<div className="flex flex-row items-center justify-end">
<label className="text-sm font-medium leading-none text-gray-700 pr-3">Label</label>
<label className="text-right text-sm font-medium leading-none text-gray-700 pr-3">Label</label>
<div className="w-48">
<input type="text" className="w-full border border-gray-300 dark:border-gray-700 pl-3 py-1.5 shadow-sm rounded focus:outline-none bg-transparent focus:border-indigo-700 text-gray-800 dark:text-gray-100" placeholder="hits" value={label} onChange={handleLabelChange} />
</div>
</div>
<div className="flex flex-row items-center justify-end">
<label className="text-sm font-medium leading-none text-gray-700 pr-3">Extra Count</label>
<label className="text-right text-sm font-medium leading-none text-gray-700 pr-3">Extra Count</label>
<div className="w-48">
<input type="number" min={0} className="w-full border border-gray-300 dark:border-gray-700 pl-3 py-1.5 shadow-sm rounded focus:outline-none bg-transparent focus:border-indigo-700 text-gray-800 dark:text-gray-100" placeholder="0" value={extraCount} onKeyPress={handleNumberKeyPress} onChange={handleExtraCountChange} />
</div>
</div>
<div className="flex flex-row items-center justify-end">
<label className="text-sm font-medium leading-none text-gray-700 pr-3">Color</label>
<label className="text-right text-sm font-medium leading-none text-gray-700 pr-3">Color</label>
<div className="w-48">
<ColorPicker color="#4c1" onChange={handleColorChange} />
</div>
</div>
<div className="flex flex-row items-center justify-end">
<label className="text-sm font-medium leading-none text-gray-700 pr-3">Label Color</label>
<label className="text-right text-sm font-medium leading-none text-gray-700 pr-3">Label Color</label>
<div className="w-48">
<ColorPicker color="#555" onChange={handleLabelColorChange} />
</div>
</div>
<div className="flex flex-row items-center justify-end">
<label className="text-sm font-medium leading-none text-gray-700 pr-3">Logo</label>
<label className="text-right text-sm font-medium leading-none text-gray-700 pr-3">Logo</label>
<div className="w-48">
<input type="text" className="w-full border border-gray-300 dark:border-gray-700 pl-3 py-1.5 shadow-sm rounded focus:outline-none bg-transparent focus:border-indigo-700 text-gray-800 dark:text-gray-100" placeholder="slug or base64" value={logo} onChange={handleLogoChange} />
</div>
Expand Down
26 changes: 13 additions & 13 deletions src/main/react/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,26 +38,26 @@ export default function Dashboard() {
<Header/>
<div className="container mx-auto px-6">
<div className="flex flex-wrap pb-3">
<div className="container mx-auto flex flex-col items-center space-y-12 py-12">
<div className="container mx-auto flex flex-col items-center space-y-8 sm:space-y-12 py-8 sm:py-12">
<div className="w-11/12 xl:w-8/12 md:w-5/6 sm:w-3/4 lg:flex justify-center items-center flex-col">
<h1 className="text-2xl text-center text-gray-800 font-bold leading-7">
<span className="text-transparent bg-clip-text bg-gradient-to-br from-green-400 to-purple-600">{urn}</span>
</h1>
</div>
{items.length > 0 ? (
<div className="mx-auto container flex justify-center items-center">
<div className="grid grid-cols-3 gap-x-2 gap-y-2 lg:gap-x-6 md:gap-x-6 md:gap-y-6 md:gap-y-6">
<div className="flex justify-center flex-col items-center w-44 h-28 bg-white shadow rounded-2xl">
<h2 className="text-2xl font-extrabold leading-10 text-center text-gray-800">{weekly}</h2>
<p className="mt-4 text-sm md:text-base lg:text-lg leading-none text-center text-gray-600">Weekly</p>
<div className="grid grid-cols-3 gap-x-2 sm:gap-x-4 md:gap-x-6 lg:gap-x-8">
<div className="flex justify-center flex-col items-center bg-white shadow rounded-2xl w-24 h-20 sm:w-32 sm:h-24 md:w-44 md:h-28">
<h2 className="text-lg sm:text-xl md:text-2xl font-extrabold leading-10 text-center text-gray-800">{weekly}</h2>
<p className="mt-1 sm:mt-4 text-sm md:text-base lg:text-lg leading-none text-center text-gray-600">Weekly</p>
</div>
<div className="flex justify-center flex-col items-center w-44 h-28 bg-white shadow rounded-2xl">
<h2 className="text-2xl font-extrabold leading-10 text-center text-gray-800">{monthly}</h2>
<p className="mt-4 text-sm md:text-base lg:text-lg leading-none text-center text-gray-600">Monthly</p>
<div className="flex justify-center flex-col items-center bg-white shadow rounded-2xl w-24 h-20 sm:w-32 sm:h-24 md:w-44 md:h-28">
<h2 className="text-lg sm:text-xl md:text-2xl font-extrabold leading-10 text-center text-gray-800">{monthly}</h2>
<p className="mt-1 sm:mt-4 text-sm md:text-base lg:text-lg leading-none text-center text-gray-600">Monthly</p>
</div>
<div className="flex justify-center flex-col items-center w-44 h-28 bg-white shadow rounded-2xl">
<h2 className="text-2xl font-extrabold leading-10 text-center text-gray-800">{total}</h2>
<p className="mt-4 text-sm md:text-base lg:text-lg leading-none text-center text-gray-600">Total</p>
<div className="flex justify-center flex-col items-center bg-white shadow rounded-2xl w-24 h-20 sm:w-32 sm:h-24 md:w-44 md:h-28">
<h2 className="text-lg sm:text-xl md:text-2xl font-extrabold leading-10 text-center text-gray-800">{total}</h2>
<p className="mt-1 sm:mt-4 text-sm md:text-base lg:text-lg leading-none text-center text-gray-600">Total</p>
</div>
</div>
</div>
Expand All @@ -66,7 +66,7 @@ export default function Dashboard() {
{items.length > 0 ? (
items.reduce((acc, item, index) => {
acc.push(
<div key={index} className="mx-auto container flex justify-center items-center w-full h-44 max-w-screen-lg">
<div key={index} className="mx-auto container flex justify-center items-center w-full h-28 sm:h-32 md:h-40 lg:h-44 max-w-screen-lg">
<ResponsiveCalendar
data={item.data}
from={item.from}
Expand All @@ -82,7 +82,7 @@ export default function Dashboard() {
);
return acc;
}, [])) : (
<div className="mx-auto container flex justify-center items-center w-full h-44 max-w-screen-lg">
<div className="mx-auto container flex justify-center items-center w-full h-28 sm:h-32 md:h-40 lg:h-44 max-w-screen-lg">
<ResponsiveCalendar
data={[]}
from={new Date().getFullYear() + '-01-01'}
Expand Down

0 comments on commit b31d203

Please sign in to comment.