Skip to content

Commit

Permalink
chore: make responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@markphelps
markphelps committed Jul 11, 2023
1 parent 838a5d1 commit 0bfd8ec
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 27 deletions.
4 changes: 2 additions & 2 deletions ui/src/app/flags/Evaluation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,8 +260,8 @@ export default function Evaluation() {
</p>
</div>
<div
className="pattern-boxes w-full border p-6 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-black
dark:pattern-gray-900 lg:w-3/4"
className="pattern-boxes w-full border p-2 pattern-bg-gray-50 pattern-gray-100 pattern-opacity-100 pattern-size-2 dark:pattern-bg-black dark:pattern-gray-900
lg:w-3/4 lg:p-6"
>
<DndContext
sensors={sensors}
Expand Down
50 changes: 25 additions & 25 deletions ui/src/components/rules/NewRule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,34 +43,34 @@ const NewRule = forwardRef(
key={rule.id}
ref={ref}
style={style}
className={`${className} w-full items-center space-y-2 rounded-md border px-6 py-2 shadow-md shadow-violet-100 bg-white border-violet-300 hover:shadow-violet-200 sm:flex sm:flex-col`}
className={`${className} w-full items-center space-y-2 rounded-md border shadow-md shadow-violet-100 bg-white border-violet-300 hover:shadow-violet-200 sm:flex sm:flex-col lg:px-6 lg:py-2`}
>
<div className="flex w-full flex-1 items-center text-xs">
<div className="flex w-full flex-1 items-center p-4 text-xs lg:p-0">
<span
key={rule.id}
className={classNames(
readOnly ? 'hover:cursor-not-allowed' : 'hover:cursor-move',
'ml-2 hidden h-4 w-4 justify-start text-gray-300 hover:text-violet-300 sm:flex'
'ml-2 hidden h-4 w-4 justify-start text-gray-400 hover:text-violet-300 sm:flex'
)}
{...rest}
>
{rule.rank === 1 && <ArrowDownIcon />}
{rule.rank === totalRules && <ArrowUpIcon />}
{rule.rank !== 1 && rule.rank !== totalRules && <ArrowsUpDownIcon />}
</span>
<div className="ml-2 flex grow items-center justify-around">
<span className="flex items-center px-6 py-4 text-xs font-light text-gray-600">
<div className="flex grow flex-col items-center justify-center sm:ml-2 md:flex-row md:justify-between">
<span className="flex items-center text-xs font-light text-gray-600 lg:px-6 lg:py-4">
IF
</span>
<Link
to={`/namespaces/${namespace.key}/segments/${rule.segment.key}`}
>
<span className="flex items-center px-6 py-4 font-medium">
<div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
<p className="flex whitespace-nowrap text-gray-500">
Matches Segment
<span className="flex items-center px-6 py-4">
<div className="min-w-0 flex-auto space-y-2 text-center">
<p className="flex whitespace-nowrap text-gray-600">
Matches Segment:
</p>
<p className="truncate bg-violet-50/80 px-3 py-1 font-semibold text-gray-900 hover:underline hover:underline-offset-2">
<p className="truncate bg-violet-50/80 px-3 py-1 font-medium text-gray-900 hover:underline hover:underline-offset-2">
{rule.segment.name}
</p>
</div>
Expand All @@ -80,38 +80,38 @@ const NewRule = forwardRef(
THEN
</span>
{rule.rollouts.length === 0 && (
<span className="flex items-center font-medium">
<CheckIcon className="h-6 w-6 text-violet-400" />
<div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
<p className="mt-1 flex text-gray-500">Return Match</p>
<p className="bg-violet-50/80 px-3 py-1 font-semibold text-gray-900">
<span className="flex items-center">
<CheckIcon className="hidden h-6 w-6 text-violet-400 lg:mr-4 lg:block" />
<div className="min-w-0 flex-auto space-y-2 text-center">
<p className="mt-1 flex text-gray-600">Return Match:</p>
<p className="bg-violet-50/80 px-3 py-1 font-medium text-gray-900">
true
</p>
</div>
</span>
)}
{rule.rollouts.length === 1 && (
<span className="flex items-center font-medium">
<VariableIcon className="h-6 w-6 text-violet-400" />
<div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
<p className="mt-1 flex text-gray-500">Return Variant</p>
<p className="bg-violet-50/80 px-3 py-1 font-semibold text-gray-900">
<span className="flex items-center">
<VariableIcon className="hidden h-6 w-6 text-violet-400 lg:mr-4 lg:block" />
<div className="min-w-0 flex-auto space-y-2 text-center">
<p className="mt-1 flex text-gray-600">Return Variant:</p>
<p className="bg-violet-50/80 px-3 py-1 font-medium text-gray-900">
{rule.rollouts[0].variant.key}
</p>
</div>
</span>
)}
{rule.rollouts.length > 1 && (
<span className="flex items-center font-medium">
<VariableIcon className="h-6 w-6 text-violet-400" />
<div className="ml-6 min-w-0 flex-auto space-y-1 text-center">
<p className="mt-1 flex text-gray-500">Return a Distribution</p>
<span className="flex items-center">
<VariableIcon className="hidden h-6 w-6 text-violet-400 lg:mr-4 lg:block" />
<div className="min-w-0 flex-auto space-y-2 text-center">
<p className="mt-1 flex text-gray-600">Return a Distribution</p>
</div>
</span>
)}
</div>
<Menu as="div" className="hidden sm:flex">
<Menu.Button className="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900">
<Menu.Button className="ml-4 block text-gray-600 hover:text-gray-900">
<EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button>
{!readOnly && (
Expand Down

0 comments on commit 0bfd8ec

Please sign in to comment.