Make all corners less rounded on mobile (blakeblackshear#11068)

* make corners less rounded on mobile * fix live dashboard classes
guxiaoqi2007 · Apr 22, 2024 · d6e93d0 · d6e93d0
1 parent ba3930a
commit d6e93d0
Show file tree

Hide file tree

Showing 19 changed files with 67 additions and 55 deletions.
diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
@@ -40,7 +40,7 @@ export default function CameraImage({
  {enabled ? (
  <img
  ref={imgRef}
- className="object-contain rounded-2xl"
+ className="object-contain rounded-lg md:rounded-2xl"
  onLoad={() => {
  setHasLoaded(true);
 

diff --git a/web/src/components/camera/ResizingCameraImage.tsx b/web/src/components/camera/ResizingCameraImage.tsx
@@ -100,7 +100,7 @@ export default function CameraImage({
  >
  {enabled ? (
  <canvas
- className="rounded-2xl"
+ className="rounded-lg md:rounded-2xl"
  data-testid="cameraimage-canvas"
  height={scaledHeight}
  ref={canvasRef}

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
@@ -63,7 +63,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
  }}
  >
  <div
- className="size-full rounded cursor-pointer overflow-hidden"
+ className="size-full rounded md:rounded-lg cursor-pointer overflow-hidden"
  onClick={onOpenReview}
  >
  {previews ? (

diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
@@ -104,7 +104,7 @@ export default function ExportCard({
  </Dialog>
 
  <div
- className={`relative aspect-video bg-black rounded-2xl flex justify-center items-center ${className}`}
+ className={`relative aspect-video bg-black rounded-lg md:rounded-2xl flex justify-center items-center ${className}`}
  onMouseEnter={
  isDesktop && !exportedRecording.in_progress
  ? () => setHovered(true)
@@ -123,7 +123,7 @@ export default function ExportCard({
  >
  {hovered && (
  <>
- <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
+ <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-lg md:rounded-2xl" />
  <div className="absolute top-1 right-1 flex items-center gap-2">
  <a
  className="z-20"
@@ -172,19 +172,19 @@ export default function ExportCard({
  <>
  {exportedRecording.thumb_path.length > 0 ? (
  <img
- className="size-full absolute inset-0 object-contain aspect-video rounded-2xl"
+ className="size-full absolute inset-0 object-contain aspect-video rounded-lg md:rounded-2xl"
  src={exportedRecording.thumb_path.replace("/media/frigate", "")}
  onLoad={() => setLoading(false)}
  />
  ) : (
- <div className="absolute inset-0 bg-secondary rounded-2xl" />
+ <div className="absolute inset-0 bg-secondary rounded-lg md:rounded-2xl" />
  )}
  </>
  )}
  {loading && (
- <Skeleton className="absolute inset-0 aspect-video rounded-2xl" />
+ <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
  )}
- <div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none rounded-2xl">
+ <div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none rounded-lg md:rounded-2xl">
  <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm capitalize">
  {exportedRecording.name.replaceAll("_", " ")}
  </div>

diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
@@ -210,7 +210,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
  </SubItemTrigger>
  <Portal>
  <SubItemContent
- className={isDesktop ? "" : "w-[92%] rounded-2xl"}
+ className={
+ isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
+ }
  >
  <span tabIndex={0} className="sr-only" />
  <MenuItem
@@ -280,7 +282,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
  </SubItemTrigger>
  <Portal>
  <SubItemContent
- className={isDesktop ? "" : "w-[92%] rounded-2xl"}
+ className={
+ isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
+ }
  >
  <span tabIndex={0} className="sr-only" />
  {colorSchemes.map((scheme) => (

diff --git a/web/src/components/overlay/ExportDialog.tsx b/web/src/components/overlay/ExportDialog.tsx
@@ -130,7 +130,9 @@ export default function ExportDialog({
  </Trigger>
  <Content
  className={
- isDesktop ? "sm:rounded-2xl" : "px-4 pb-4 mx-4 rounded-2xl"
+ isDesktop
+ ? "sm:rounded-lg md:rounded-2xl"
+ : "px-4 pb-4 mx-4 rounded-lg md:rounded-2xl"
  }
  >
  <ExportContent

diff --git a/web/src/components/player/BirdseyeLivePlayer.tsx b/web/src/components/player/BirdseyeLivePlayer.tsx
@@ -21,12 +21,18 @@ export default function BirdseyeLivePlayer({
  let player;
  if (liveMode == "webrtc") {
  player = (
- <WebRtcPlayer className={`rounded-2xl size-full`} camera="birdseye" />
+ <WebRtcPlayer
+ className={`rounded-lg md:rounded-2xl size-full`}
+ camera="birdseye"
+ />
  );
  } else if (liveMode == "mse") {
  if ("MediaSource" in window || "ManagedMediaSource" in window) {
  player = (
- <MSEPlayer className={`rounded-2xl size-full`} camera="birdseye" />
+ <MSEPlayer
+ className={`rounded-lg md:rounded-2xl size-full`}
+ camera="birdseye"
+ />
  );
  } else {
  player = (
@@ -39,7 +45,7 @@ export default function BirdseyeLivePlayer({
  } else if (liveMode == "jsmpeg") {
  player = (
  <JSMpegPlayer
- className="size-full flex justify-center rounded-2xl overflow-hidden"
+ className="size-full flex justify-center rounded-lg md:rounded-2xl overflow-hidden"
  camera="birdseye"
  width={birdseyeConfig.width}
  height={birdseyeConfig.height}
@@ -54,8 +60,8 @@ export default function BirdseyeLivePlayer({
  className={`relative flex justify-center w-full cursor-pointer ${className ?? ""}`}
  onClick={onClick}
  >
- <div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
- <div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
+ <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
+ <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
  <div className="size-full">{player}</div>
  </div>
  );

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
@@ -164,7 +164,7 @@ export default function HlsVideoPlayer({
  >
  <video
  ref={videoRef}
- className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
+ className={`size-full bg-black rounded-lg md:rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
  preload="auto"
  autoPlay
  controls={false}

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
@@ -95,7 +95,7 @@ export default function LivePlayer({
  if (liveMode == "webrtc") {
  player = (
  <WebRtcPlayer
- className={`rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
+ className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
  camera={cameraConfig.live.stream_name}
  playbackEnabled={cameraActive}
  audioEnabled={playAudio}
@@ -109,7 +109,7 @@ export default function LivePlayer({
  if ("MediaSource" in window || "ManagedMediaSource" in window) {
  player = (
  <MSEPlayer
- className={`rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
+ className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
  camera={cameraConfig.name}
  playbackEnabled={cameraActive}
  audioEnabled={playAudio}
@@ -128,7 +128,7 @@ export default function LivePlayer({
  } else if (liveMode == "jsmpeg") {
  player = (
  <JSMpegPlayer
- className="size-full flex justify-center rounded-2xl overflow-hidden"
+ className="size-full flex justify-center rounded-lg md:rounded-2xl overflow-hidden"
  camera={cameraConfig.name}
  width={cameraConfig.detect.width}
  height={cameraConfig.detect.height}
@@ -144,13 +144,13 @@ export default function LivePlayer({
  data-camera={cameraConfig.name}
  className={`relative flex justify-center ${liveMode == "jsmpeg" ? "size-full" : "w-full"} outline cursor-pointer ${
  activeTracking
- ? "outline-severity_alert outline-3 rounded-2xl shadow-severity_alert"
+ ? "outline-severity_alert outline-3 rounded-lg md:rounded-2xl shadow-severity_alert"
  : "outline-0 outline-background"
  } transition-all duration-500 ${className}`}
  onClick={onClick}
  >
- <div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
- <div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
+ <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
+ <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
  {player}
 
  <div

diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
@@ -238,7 +238,7 @@ function PreviewVideoPlayer({
 
  return (
  <div
- className={`relative rounded-2xl w-full flex justify-center bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
+ className={`relative rounded-lg md:rounded-2xl w-full flex justify-center bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
  onClick={onClick}
  >
  <img
@@ -283,7 +283,7 @@ function PreviewVideoPlayer({
  )}
  </video>
  {cameraPreviews && !currentPreview && (
- <div className="absolute inset-0 text-white rounded-2xl flex justify-center items-center">
+ <div className="absolute inset-0 text-white rounded-lg md:rounded-2xl flex justify-center items-center">
  No Preview Found
  </div>
  )}
@@ -481,11 +481,11 @@ function PreviewFramesPlayer({
  >
  <img
  ref={imgRef}
- className={`size-full object-contain rounded-2xl bg-black`}
+ className={`size-full object-contain rounded-lg md:rounded-2xl bg-black`}
  onLoad={onImageLoaded}
  />
  {previewFrames?.length === 0 && (
- <div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-2xl align-center text-center">
+ <div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-lg md:rounded-2xl align-center text-center">
  No Preview Found
  </div>
  )}

diff --git a/web/src/components/settings/MotionTuner.tsx b/web/src/components/settings/MotionTuner.tsx
@@ -308,7 +308,7 @@ export default function MotionTuner({
  </div>
  </div>
  ) : (
- <Skeleton className="size-full rounded-2xl" />
+ <Skeleton className="size-full rounded-lg md:rounded-2xl" />
  )}
  </div>
  );

diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
@@ -247,7 +247,7 @@ export function EventSegment({
  </HoverCardTrigger>
  <HoverCardPortal>
  <HoverCardContent
- className="rounded-2xl w-[250px] p-2"
+ className="rounded-lg md:rounded-2xl w-[250px] p-2"
  side="left"
  >
  <img

diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
@@ -113,7 +113,7 @@ function Exports() {
  <DialogContent className="max-w-7xl">
  <DialogTitle>{selected?.name}</DialogTitle>
  <video
- className="size-full rounded-2xl"
+ className="size-full rounded-lg md:rounded-2xl"
  playsInline
  preload="auto"
  autoPlay

diff --git a/web/src/pages/SubmitPlus.tsx b/web/src/pages/SubmitPlus.tsx
@@ -182,11 +182,11 @@ export default function SubmitPlus() {
  return (
  <div
  key={event.id}
- className="w-full rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
+ className="w-full rounded-lg md:rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
  onClick={() => setUpload(event)}
  >
  <img
- className="aspect-video h-full object-contain rounded-2xl"
+ className="aspect-video h-full object-contain rounded-lg md:rounded-2xl"
  src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}
  loading="lazy"
  />

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
@@ -249,7 +249,7 @@ export default function EventView({
  </div>
  </ToggleGroupItem>
  <ToggleGroupItem
- className={`px-3 py-4 rounded-2xl ${
+ className={`px-3 py-4 rounded-lg ${
  severityToggle == "significant_motion"
  ? ""
  : "text-muted-foreground"
@@ -891,7 +891,7 @@ function MotionReview({
  {motionData ? (
  <>
  <PreviewPlayer
- className={`rounded-2xl ${spans} ${grow}`}
+ className={`rounded-lg md:rounded-2xl ${spans} ${grow}`}
  camera={camera.name}
  timeRange={currentTimeRange}
  startTime={previewStart}
@@ -917,7 +917,7 @@ function MotionReview({
  </>
  ) : (
  <Skeleton
- className={`rounded-2xl size-full ${spans} ${grow}`}
+ className={`rounded-lg md:rounded-2xl size-full ${spans} ${grow}`}
  />
  )}
  </div>

diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
@@ -175,7 +175,7 @@ export default function LiveDashboardView({
  )}
 
  <div
- className={`mt-2 px-2 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4 *:rounded-2xl *:bg-black`}
+ className={`mt-2 px-2 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
  >
  {includeBirdseye && birdseyeConfig?.enabled && (
  <BirdseyeLivePlayer
@@ -198,7 +198,7 @@ export default function LiveDashboardView({
  <LivePlayer
  cameraRef={cameraRef}
  key={camera.name}
- className={grow}
+ className={`${grow} rounded-lg md:rounded-2xl bg-black`}
  windowVisible={
  windowVisible && visibleCameras.includes(camera.name)
  }

diff --git a/web/src/views/system/CameraMetrics.tsx b/web/src/views/system/CameraMetrics.tsx
@@ -189,7 +189,7 @@ export default function CameraMetrics({
  <div className="text-muted-foreground text-sm font-medium">Overview</div>
  <div className="grid grid-cols-1 md:grid-cols-3">
  {statsHistory.length != 0 ? (
- <div className="p-2.5 bg-background_alt rounded-2xl">
+ <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
  <div className="mb-5">DPS</div>
  <CameraLineGraph
  graphId="overall-stats"
@@ -200,7 +200,7 @@ export default function CameraMetrics({
  />
  </div>
  ) : (
- <Skeleton className="w-full h-32" />
+ <Skeleton className="w-full rounded-lg md:rounded-2xl h-32" />
  )}
  </div>
  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -214,7 +214,7 @@ export default function CameraMetrics({
  </div>
  <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
  {Object.keys(cameraCpuSeries).includes(camera.name) ? (
- <div className="p-2.5 bg-background_alt rounded-2xl">
+ <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
  <div className="mb-5">CPU</div>
  <CameraLineGraph
  graphId={`${camera.name}-cpu`}
@@ -230,7 +230,7 @@ export default function CameraMetrics({
  <Skeleton className="size-full aspect-video" />
  )}
  {Object.keys(cameraFpsSeries).includes(camera.name) ? (
- <div className="p-2.5 bg-background_alt rounded-2xl">
+ <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
  <div className="mb-5">DPS</div>
  <CameraLineGraph
  graphId={`${camera.name}-dps`}