jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Photo panel is now sized correctly

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2023-01-29 14:37:12 -08:00
parent a71fb177e9
commit 3f0e226587
2 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/App.css
View File

@ -134,14 +134,23 @@ button {
.PhotoInfo, .PhotoInfo,
.FaceInfo { .FaceInfo {
display: flex; display: flex;
align-content: center; justify-content: space-around;
align-items: center;
align-self: center;
text-align: center;
width: 100%; width: 100%;
}
.Photo {
display: flex;
position: relative;
flex-direction: column;
max-height: 60vh;
flex-grow: 1; flex-grow: 1;
} }
.spacer {
display: flex;
flex-shrink: 1;
}
.Photo .FaceBox { .Photo .FaceBox {
border: 1px solid red; border: 1px solid red;
position: absolute; position: absolute;
@ -152,12 +161,6 @@ button {
box-shadow: 0px 0px 10px black; box-shadow: 0px 0px 10px black;
} }
.Photo {
display: flex;
position: relative;
flex-direction: column;
}
.PhotoFaces .UnknownFace, .PhotoFaces .UnknownFace,
.Identities .UnknownFace { .Identities .UnknownFace {
font-size: 2rem; font-size: 2rem;

37
client/src/App.tsx
View File

@ -205,33 +205,34 @@ const Photo = ({ photoId, onFaceClick }: any) => {
alt={photo.filename} alt={photo.filename}
src={`${base}/../${photo.path}thumbs/scaled/${photo.filename}`.replace(/ /g, '%20')}/> src={`${base}/../${photo.path}thumbs/scaled/${photo.filename}`.replace(/ /g, '%20')}/>
{ faces } { faces }
</div> </div>
<div className="PhotoInfo">{ <div className="PhotoInfo">{
moment(photo.taken).format('MMMM Do YYYY, h:mm:ss a') moment(photo.taken).format('MMMM Do YYYY, h:mm:ss a')
}, { }, {
moment(photo.taken).fromNow() moment(photo.taken).fromNow()
}.</div> }.
<div className="FaceInfo"> </div>
{ faceInfo ? faceInfo : 'Hover over face for information.'} <div className="FaceInfo">
</div> { faceInfo ? faceInfo : 'Hover over face for information.'}
<div className="Actions"> </div>
{ photoSelected.length !== 0 && <Button onClick={forget}> <div className="Actions">
Forget Selected</Button> } { photoSelected.length !== 0 && <Button onClick={forget}>
<Button onClick={selectAll}>Select All</Button> Forget Selected</Button> }
<Button onClick={clearSelection}>Select None</Button> <Button onClick={selectAll}>Select All</Button>
</div> <Button onClick={clearSelection}>Select None</Button>
</div>
{ photoSelected.length !== 0 && <div style={{ display: 'flex' }}> { photoSelected.length !== 0 && <div style={{ display: 'flex' }}>
Selected faces (CTRL-CLICK to remove): Selected faces (CTRL-CLICK to remove):
</div> } </div> }
<div className="PhotoFaces"> <div className="PhotoFaces">
{ photoSelected.map(face => { photoSelected.map(face =>
<Face <Face
key={face.faceId} key={face.faceId}
face={face} face={face}
onFaceClick={(e: any) => faceClick(e, face)}/> onFaceClick={(e: any) => faceClick(e, face)}/>
) } ) }
</div>
</div> </div>
</div>
); );
}; };
@ -1056,7 +1057,11 @@ const App = () => {
<div style={{ margin: '1rem' }}>Select image to view</div> <div style={{ margin: '1rem' }}>Select image to view</div>
} }
{ image !== 0 && { image !== 0 &&
<Photo onFaceClick={onFaceClick} photoId={image}/> <div style={{ display: 'flex', flexDirection: 'row' }}>
<div className="spacer"></div>
<Photo onFaceClick={onFaceClick} photoId={image}/>
<div className="spacer"></div>
</div>
} }
{ guess !== undefined && guess.identity && <div { guess !== undefined && guess.identity && <div
className="Guess"> className="Guess">