quantified.uncertainty/metaforecast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak: make indicators responsive to mobile

Browse Source
This commit is contained in:
NunoSempere 2022-11-17 21:58:15 +00:00
parent fc84300712
commit e9796c545d
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/web/common/BoxedLink.tsx
View File

@ -11,13 +11,13 @@ export const BoxedLink: React.FC<Props> = ({
children,
}) => (
<a
className={`px-2 py-1 border-2 border-gray-400 rounded-lg text-black no-underline text-normal hover:bg-gray-100 inline-flex flex-nowrap space-x-1 items-center ${
className={`px-2 py-1 border-2 border-gray-400 rounded-lg text-black no-underline hover:bg-gray-100 inline-flex flex-nowrap space-x-1 items-center text-xs md:text-lg ${
size === "small" ? "text-sm" : ""
}`}
href={url}
target="_blank"
>
<span>{children}</span>
<FaExternalLinkAlt className="text-gray-400 inline" />
<FaExternalLinkAlt className="text-gray-400 inline " />
</a>
);

4
src/web/questions/components/QuestionOptions.tsx
View File

@ -101,7 +101,7 @@ const OptionRow: React.FC<OptionProps> = ({ option, mode, textMode }) => {
<div
className={`flex-none rounded-md text-center ${
mode === "primary"
? "text-normal text-white px-2 py-0.5 font-bold"
? "text-sm md:text-lg text-normal text-white px-2 py-0.5 font-bold"
: "text-sm w-14 py-0.5"
} ${
mode === "primary"
@ -113,7 +113,7 @@ const OptionRow: React.FC<OptionProps> = ({ option, mode, textMode }) => {
</div>
<div
className={`leading-snug ${
mode === "primary" ? "text-normal" : "text-sm"
mode === "primary" ? "text-sm md:text-lg text-normal" : "text-sm"
} ${
mode === "primary" ? textColor(option.probability) : "text-gray-700"
}`}

2
src/web/questions/components/Stars.tsx
View File

@ -54,5 +54,5 @@ function getStarsColor(numstars: number) {
}
export const Stars: React.FC<{ num: number }> = ({ num }) => {
return <div className={getStarsColor(num)}>{getstars(num)}</div>;
return <div className={getStarsColor(num) + " text-xs md:text-lg"}>{getstars(num)}</div>;
};