SaaikaHatak
SaaikaHatak
Explore posts from servers
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
Still thanks for help ^_^
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
with Timeout it was setting width and then after a 1ms it was changing it instead of going straight to desired width (as JS is one-thread language)
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
my first animations on that were done via <Transition /> that Vue provides
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
Well Im using Vue, and without declared width it was just skipping the transition as it wasnt going from 0 to 200px, it was going from undefined to 200px (correct me if im wrong)
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
Yeah, that would propably be the way to go, but first row isnt a specified value either. My friend told me not to do transition via width, and go with pure transform scale and by using timeouts with 1ms I managed to achieve propably best result. Im not yet sure if overview should be visible while scaling but thats not an issue. Here is what I was trying to have. It's slow because I wanted to see if image is jiggling on scaling
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
I tried to create a codepen, but I have to change a lot of things as I am using component based framework, anyway thanks for trying. I believe I achieved desired look
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
Thats something I want to achieve, the thing is I dont know how long/wide description will be (Dont want to have a fixed height). I think I got to the point I could say Im happy. Basically I have a Movie List which is just a set of images When I hover that image it shows me a new element which is Movie Card that gets all data about hovered element (title, rating,description, DOM position) The very same Movie Card is being created with almost no width, with transition that movie card is becoming wider(bigger) to that Movie List width hovered element and after that it becomes 1.55 bigger (transform scale). Also when unhovered its the same, but in reverese; Movie Card with grid-template-rows: min-content 1fr; is working perfectly. The thing is when for first row I set 1fr I have empty space as my image has 16/9 aspect ratio so it basically needs to be fit/min/max-content Second row works great but when my transition is starting its for example 50px wide, making my second row to have a lot of height as text tries to fit that element If You still cant understand me just forget about it. I will try on my own or leave it like that
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
All I need is to make sure that div will have a height of the content before showing it to the user (it may overflow or anything) but it wont go higher than desired width
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
Animation is basically scaling up if hovered, and scaling down if unhover where it then dissapear
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
No description
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 8/29/2023 in #front-end
Grid card with image, text under and transform scale
<div class="hovered">
<img
:src="props.slide.image"
:alt="props.slide.title || props.slide.name"
width="250"
height="120"
/>
<div class="info" :class="props.text ? 'hidden' : ''">
<h3 v-if="renderText">
<span class="name">Title:</span>
{{ props.slide.title || props.slide.name }}
</h3>
<p v-if="renderText">
<span class="name">Release date:</span> {{ releaseDate }}
</p>
<p v-if="renderText">
<span class="name">Rating</span> {{ props.slide.vote_average }}
<span class="name">Votes:</span> {{ props.slide.vote_count }}
</p>
<p v-if="renderText" class="overview">
<span class="name">Overview: </span> {{ props.slide.overview }}
</p>
</div>
</div>
<div class="hovered">
<img
:src="props.slide.image"
:alt="props.slide.title || props.slide.name"
width="250"
height="120"
/>
<div class="info" :class="props.text ? 'hidden' : ''">
<h3 v-if="renderText">
<span class="name">Title:</span>
{{ props.slide.title || props.slide.name }}
</h3>
<p v-if="renderText">
<span class="name">Release date:</span> {{ releaseDate }}
</p>
<p v-if="renderText">
<span class="name">Rating</span> {{ props.slide.vote_average }}
<span class="name">Votes:</span> {{ props.slide.vote_count }}
</p>
<p v-if="renderText" class="overview">
<span class="name">Overview: </span> {{ props.slide.overview }}
</p>
</div>
</div>
my HTML (I dont need that v-if which shows h3 and paragraph only if animation is done if there is better solution) and here are my styles for now
.hovered {
--scale-size: 1.85;
}
.info {
display: flex;
flex-direction: column;
padding: 0.5rem 0.25rem;
background-color: #181818;
border-radius: 0 0 7px 7px;
margin: -1px 0;
height: 100%;
}

.hidden {
height: max-content;
}

h3 {
font-size: calc(clamp(0.4rem, 1.5dvw, 0.7rem) / 1.1);
font-weight: 300;
line-height: 1.1rem;
// transform: scale( calc(1 / var(--scale-size)));
}
p {
font-size: calc(clamp(0.4rem, 1.5dvw, 0.7rem) / 1.1);
font-weight: 300;
padding: 0.1rem 0;
}
.overview {
font-size: calc(clamp(0.2rem, 1.5dvw, 0.6rem) / 1.1);
}
.name {
font-weight: 700;
}
.hovered {
line-height: normal;
box-shadow: rgb(0 0 0 / 75%) 0px 3px 10px;
position: absolute;
transform: translate(-50%, -50%) scale(var(--scale-size));
display: grid;
font-weight: 400;

grid-template-rows: max-content minmax(100%, 1fr);

gap: 0;

padding: 0;
z-index: 25;
}

img {
object-fit: fill;
width: 100%;
height: auto;
border-radius: 7px 7px 0 0;
}
.hovered {
--scale-size: 1.85;
}
.info {
display: flex;
flex-direction: column;
padding: 0.5rem 0.25rem;
background-color: #181818;
border-radius: 0 0 7px 7px;
margin: -1px 0;
height: 100%;
}

.hidden {
height: max-content;
}

h3 {
font-size: calc(clamp(0.4rem, 1.5dvw, 0.7rem) / 1.1);
font-weight: 300;
line-height: 1.1rem;
// transform: scale( calc(1 / var(--scale-size)));
}
p {
font-size: calc(clamp(0.4rem, 1.5dvw, 0.7rem) / 1.1);
font-weight: 300;
padding: 0.1rem 0;
}
.overview {
font-size: calc(clamp(0.2rem, 1.5dvw, 0.6rem) / 1.1);
}
.name {
font-weight: 700;
}
.hovered {
line-height: normal;
box-shadow: rgb(0 0 0 / 75%) 0px 3px 10px;
position: absolute;
transform: translate(-50%, -50%) scale(var(--scale-size));
display: grid;
font-weight: 400;

grid-template-rows: max-content minmax(100%, 1fr);

gap: 0;

padding: 0;
z-index: 25;
}

img {
object-fit: fill;
width: 100%;
height: auto;
border-radius: 7px 7px 0 0;
}
26 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 3/20/2023 in #front-end
How to design a page from jpg design file?
I know it doesnt have to be pixel perfect. I just wanna make most of it, and I like making things exactly as it is (for my personal fun).
5 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 2/20/2023 in #front-end
height 100vh problem on page load
OK. It seems it was something with the device. After reinstalling chrome it works fine
15 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 2/20/2023 in #front-end
height 100vh problem on page load
15 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 2/20/2023 in #front-end
height 100vh problem on page load
15 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 2/20/2023 in #front-end
height 100vh problem on page load
15 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 2/20/2023 in #front-end
height 100vh problem on page load
At least
15 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 2/20/2023 in #front-end
height 100vh problem on page load
Each section supposed to take 100vh of space
15 replies
KPCKevin Powell - Community
Created by SaaikaHatak on 2/20/2023 in #front-end
height 100vh problem on page load
For a section div. No matter if its min-height or height.
15 replies