diff --git a/.env b/.env index f52b5b90021fee60435ceed50a22ad2ed886cb65..8a1f32a03775fac077f6ad39d633619efa9bedf5 100644 --- a/.env +++ b/.env @@ -1,4 +1,4 @@ -REACT_APP_STYLEGUIDE_URL=https://styleguide.pir-test.eu/2.0.4 +REACT_APP_STYLEGUIDE_URL=https://styleguide.pir-test.eu/2.1.0 REACT_APP_API_BASE_URL=https://cf2021.pir-test.eu/api REACT_APP_MATOMO_ID=135 REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pir-test.eu/14 diff --git a/src/components/posts/Post.jsx b/src/components/posts/Post.jsx index 73505a856bd3e95aa43e7efc2605497e592b2f37..f66d6795b6f6f08660cff2b4acf100545ac71c9b 100644 --- a/src/components/posts/Post.jsx +++ b/src/components/posts/Post.jsx @@ -196,15 +196,18 @@ const Post = ({ className="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3 object-cover" alt={author.name} /> - <div className="flex-1"> + {/* overflow-hidden to avoid spammers damaging the UI */} + <div className="flex-1 overflow-hidden"> <div className="mb-1"> <div className="flex justify-between items-start xl:items-center"> <div className="flex flex-col xl:flex-row xl:items-center"> <div className="flex flex-col xl:flex-row xl:items-center"> <span className="font-bold">{author.name}</span> <div className="mt-1 xl:mt-0 xl:ml-2 leading-tight"> - <span className="text-grey-200 text-sm">{author.group}</span> - <span className="text-grey-200 ml-1 text-xs"> + <span className="text-grey-200 text-xs sm:text-sm"> + {author.group} + </span> + <span className="text-grey-200 ml-1 text-xs sm:text-sm"> @{" "} {format( datetime, @@ -314,7 +317,7 @@ const Post = ({ {labels} </div> <div - className="text-sm lg:text-base text-black leading-normal content-block" + className="text-sm lg:text-base text-black leading-normal content-block overflow-x-scroll" dangerouslySetInnerHTML={htmlContent} ></div> </div> diff --git a/src/containers/AddPostForm.jsx b/src/containers/AddPostForm.jsx index ace1a15b49850c88b126d584a99ad18ec23e962f..ec0b5e89ef5356155ac8dddc8a7dd8782c051c2f 100644 --- a/src/containers/AddPostForm.jsx +++ b/src/containers/AddPostForm.jsx @@ -71,20 +71,20 @@ const AddPostForm = ({ className }) => { /> <div className="form-field" onChange={(evt) => setType(evt.target.value)}> - <div className="form-field__wrapper"> + <div className="form-field__wrapper form-field__wrapper--freeform flex-col sm:flex-row"> <div className="radio form-field__control"> <label> <input type="radio" name="postType" value="post" defaultChecked /> - <span> + <span className="text-sm sm:text-base"> PĹ™idávám <strong>běžnĂ˝ pĹ™ĂspÄ›vek</strong> </span> </label> </div> - <div className="radio form-field__control"> + <div className="radio form-field__control ml-0 mt-4 sm:mt-0 sm:ml-4"> <label> <input type="radio" name="postType" value="procedure-proposal" /> - <span> + <span className="text-sm sm:text-base"> PĹ™idávám <strong>návrh postupu</strong> </span> </label> diff --git a/src/containers/GlobalStats.jsx b/src/containers/GlobalStats.jsx index 065962d73b549505dde8893edc18048558493549..96ecbef827f4515da183a8272910359dde2b5d34 100644 --- a/src/containers/GlobalStats.jsx +++ b/src/containers/GlobalStats.jsx @@ -25,8 +25,15 @@ const GlobalStats = () => { ? items[nextProgramEntryId] : null; + const nextProgramEntryCaption = nextProgramEntry + ? `${nextProgramEntry.title} @ ${format( + nextProgramEntry.expectedStartAt, + isToday(nextProgramEntry.expectedStartAt) ? "H:mm" : "dd. MM. H:mm" + )}` + : null; + return ( - <div className="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-2xs md:text-xs lg:text-sm text-grey-300"> + <div className="bg-grey-50 flex space-x-4 leading-normal px-4 py-2 text-2xs md:text-xs lg:text-sm text-grey-300 whitespace-no-wrap"> <div> <strong>{onlineMembers}</strong>{" "} <span> @@ -42,16 +49,14 @@ const GlobalStats = () => { <span>Vel. skupiny ÄŤlenĹŻ je</span> <strong>{groupSizeHalf}</strong> </div> {nextProgramEntry && ( - <div className="flex-grow text-right hidden sm:block lg:hidden xl:block"> + <div className="flex-grow text-right hidden sm:block lg:hidden xl:block truncate"> Následuje:{" "} - <Link to="/program" className="font-bold"> - {nextProgramEntry.title} @{" "} - {format( - nextProgramEntry.expectedStartAt, - isToday(nextProgramEntry.expectedStartAt) - ? "H:mm" - : "dd. MM. H:mm" - )} + <Link + to="/program" + className="font-bold" + title={nextProgramEntryCaption} + > + {nextProgramEntryCaption} </Link> </div> )}