From 9291fde960b5c30a522fefbeecf356bbf7a40442 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 29 Oct 2022 12:22:07 +1100 Subject: [PATCH] Fixes responsive images (omg finally), removes app padding --- frontend/src/app/App.scss | 12 +++++------- .../features/gallery/CurrentImageDisplay.scss | 16 +++++----------- .../src/features/gallery/CurrentImageDisplay.tsx | 12 +----------- .../src/features/gallery/CurrentImagePreview.tsx | 12 +++++++++--- frontend/src/features/system/ProgressBar.scss | 12 ++++++++++++ frontend/src/features/system/ProgressBar.tsx | 1 - frontend/src/features/system/SiteHeader.scss | 9 ++++----- .../features/tabs/ImageToImage/ImageToImage.scss | 3 ++- frontend/src/features/tabs/InvokeTabs.scss | 2 +- frontend/src/features/tabs/InvokeWorkarea.scss | 6 +++--- .../features/tabs/TextToImage/TextToImage.scss | 1 + frontend/src/styles/Mixins/_Variables.scss | 12 ++++++++---- frontend/src/styles/index.scss | 1 + 13 files changed, 52 insertions(+), 47 deletions(-) diff --git a/frontend/src/app/App.scss b/frontend/src/app/App.scss index 043c36c036..1995a5053d 100644 --- a/frontend/src/app/App.scss +++ b/frontend/src/app/App.scss @@ -2,20 +2,18 @@ .App { display: grid; - width: max-content; + width: 100vw; + height: 100vh; + background-color: var(--background-color); } .app-content { display: grid; - row-gap: 1rem; - margin: 0.6rem; - padding: 1rem; - border-radius: 0.5rem; - background-color: var(--background-color); + row-gap: 0.5rem; + padding: $app-padding; grid-auto-rows: max-content; width: $app-width; height: $app-height; - min-width: min-content; } .app-console { diff --git a/frontend/src/features/gallery/CurrentImageDisplay.scss b/frontend/src/features/gallery/CurrentImageDisplay.scss index 3fefcc80cb..89230ae751 100644 --- a/frontend/src/features/gallery/CurrentImageDisplay.scss +++ b/frontend/src/features/gallery/CurrentImageDisplay.scss @@ -7,9 +7,6 @@ row-gap: 1rem; background-color: var(--background-color-secondary); border-radius: 0.5rem; - &[data-tab-name='txt2img'] { - height: $app-text-to-image-height; - } } .current-image-options { @@ -24,25 +21,22 @@ } } -.current-image-viewer { - position: relative; - width: 100%; - height: 100%; -} - .current-image-preview { position: relative; justify-content: center; align-items: center; display: flex; width: 100%; - // height: 100%; - height: $app-text-to-image-height; + height: 100%; img { background-color: var(--img2img-img-bg-color); border-radius: 0.5rem; object-fit: contain; + max-width: 100%; + max-height: 100%; + height: auto; + position: absolute; } } diff --git a/frontend/src/features/gallery/CurrentImageDisplay.tsx b/frontend/src/features/gallery/CurrentImageDisplay.tsx index fb7b5c119f..d470f2eb71 100644 --- a/frontend/src/features/gallery/CurrentImageDisplay.tsx +++ b/frontend/src/features/gallery/CurrentImageDisplay.tsx @@ -2,7 +2,6 @@ import { RootState, useAppSelector } from '../../app/store'; import CurrentImageButtons from './CurrentImageButtons'; import { MdPhoto } from 'react-icons/md'; import CurrentImagePreview from './CurrentImagePreview'; -import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer'; import { tabMap } from '../tabs/InvokeTabs'; import { GalleryState } from './gallerySlice'; import { OptionsState } from '../options/optionsSlice'; @@ -37,7 +36,6 @@ const CurrentImageDisplay = () => { currentImage, intermediateImage, activeTabName, - shouldShowImageDetails, } = useAppSelector(currentImageDisplaySelector); const imageToDisplay = intermediateImage || currentImage; @@ -47,15 +45,7 @@ const CurrentImageDisplay = () => { {imageToDisplay ? ( <> -
- - {shouldShowImageDetails && ( - - )} -
+ ) : (
diff --git a/frontend/src/features/gallery/CurrentImagePreview.tsx b/frontend/src/features/gallery/CurrentImagePreview.tsx index fdfcb54a9c..e1342d59f7 100644 --- a/frontend/src/features/gallery/CurrentImagePreview.tsx +++ b/frontend/src/features/gallery/CurrentImagePreview.tsx @@ -7,6 +7,7 @@ import * as InvokeAI from '../../app/invokeai'; import { createSelector } from '@reduxjs/toolkit'; import _ from 'lodash'; import { OptionsState } from '../options/optionsSlice'; +import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer'; export const imagesSelector = createSelector( [(state: RootState) => state.gallery, (state: RootState) => state.options], @@ -72,9 +73,8 @@ export default function CurrentImagePreview(props: CurrentImagePreviewProps) {
{!shouldShowImageDetails && (
@@ -108,6 +108,12 @@ export default function CurrentImagePreview(props: CurrentImagePreviewProps) {
)} + {shouldShowImageDetails && ( + + )}
); } diff --git a/frontend/src/features/system/ProgressBar.scss b/frontend/src/features/system/ProgressBar.scss index 017b21833c..4bbe9c15f3 100644 --- a/frontend/src/features/system/ProgressBar.scss +++ b/frontend/src/features/system/ProgressBar.scss @@ -1,7 +1,19 @@ +@use '../../styles/Mixins/' as *; + .progress-bar { background-color: var(--root-bg-color); + height: $progress-bar-thickness !important; div { background-color: var(--progress-bar-color); + &[data-indeterminate] { + background-color: unset; + background-image: linear-gradient( + to right, + transparent 0%, + var(--progress-bar-color) 50%, + transparent 100% + ); + } } } diff --git a/frontend/src/features/system/ProgressBar.tsx b/frontend/src/features/system/ProgressBar.tsx index e2905172dc..9cbfcb8c5d 100644 --- a/frontend/src/features/system/ProgressBar.tsx +++ b/frontend/src/features/system/ProgressBar.tsx @@ -28,7 +28,6 @@ const ProgressBar = () => { return (