VoltEuropa/profile.volt.link
VoltEuropa/profile.volt.link
1
0
Fork 0
mirror of https://github.com/voltbonn/profile-picture-generator.git synced 2024-12-22 15:55:08 +00:00
Code Activity

BUGFIX The frames should have the same border as the buttons when selected

Browse source
This commit is contained in:
thomasrosen 2021-01-23 21:46:44 +01:00
parent 51ce05b021
commit 5b353b90ff
2 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/App.css
View file

@ -68,18 +68,34 @@ a:hover{
} }
.FrameChooser .frame{ .FrameChooser .frame{
height: 12vh; position: relative;
display: inline-block;
font-size: 0;
margin: 2vh; margin: 2vh;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 0 1vh rgba(255,255,255,0); /* box-shadow: 0 0 0 1vh rgba(255,255,255,0); */
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
.FrameChooser .frame img{
height: 12vh;
pointer-events: none;
}
.FrameChooser .frame:hover{ .FrameChooser .frame:hover{
transform-origin: center center; transform-origin: center center;
transform: scale(1.1); transform: scale(1.1);
} }
.FrameChooser .frame.choosen{ /* .FrameChooser .frame.choosen{
box-shadow: 0 0 0 1vh white; box-shadow: 0 0 0 1vh white;
} */
.FrameChooser .frame.choosen:after {
content: "";
position: absolute;
top: -0.5vh;
right: -0.5vh;
bottom: -0.5vh;
left: -0.5vh;
box-shadow: 0 0 0 0.5vh white;
} }
.HashtagChooser .hashtag_button { .HashtagChooser .hashtag_button {

9
src/FrameChooser.js
View file

@ -45,7 +45,14 @@ function FrameChooser({onChange}) {
frames.map(frame => { frames.map(frame => {
const frame_src_path = frame.src.default const frame_src_path = frame.src.default
const isChoosen = choosenFrame === frame_src_path const isChoosen = choosenFrame === frame_src_path
return <img alt={frame.name} key={frame_src_path} data-src={frame_src_path} src={frame_src_path} className={isChoosen ? 'frame choosen' : 'frame'} onClick={handleImageChoosing}/> return <div
key={frame_src_path}
data-src={frame_src_path}
className={isChoosen ? 'frame choosen' : 'frame'}
onClick={handleImageChoosing}
>
<img alt={frame.name} src={frame_src_path} />
</div>
}) })
} }
</div> </div>