MC23 Posts - Answer Overflow

MC23

•Created by MC23 on 12/20/2024 in #front-end

Card "flip animation" without position absolute

I was looking for a way to have a flip-on-hover card without using position absolute. So far this solution with absolute is working: https://codepen.io/n00bCod3r/pen/azoJYJP and could be used to provide me some insights on how to achieve what I want I tried using background image on the --front element but unfortunately that didn't work. Please ping on replies 🙏🏻 Also I'm going to sleep soon so if I don't reply it's for that

3 replies

KPCKevin Powell - Community

•Created by MC23 on 12/12/2024 in #front-end

Make big image fit to canvas

Hi everyone, I'm trying to create a scratch effect using canvas. I'm having problems understanding how to make the "hidden" pic to behave like an object-fit: cover would... I know that I probably have to scale it, but I don't understand how. (https://stackoverflow.com/questions/23104582/scaling-an-image-to-fit-on-canvas) https://codepen.io/n00bCod3r/pen/gbYwxBY Just hold LMB and scratch the image, you'll see the hidden one appear

16 replies

KPCKevin Powell - Community

•Created by MC23 on 11/23/2024 in #front-end

Best strategy for light/dark theme using light-dark() function

I'm experimenting with the new light-dark() function and I was looking for ideas on how to better implement the various colours. This is my current implementation:

:root {
  /* text */
  --l-text-color: #1a1c20;
  --d-text-color: #e2e1e1;
  /* background */
  --l-bg-color: #eeeff1;
  --d-bg-color: #1f2023;
  /* button border */
  --l-btn-border: #0e0f10;
  --d-btn-border: #eeecec;

  color-scheme: light dark;

  --text-color: light-dark(var(--l-text-color), var(--d-text-color));
  --bg-color: light-dark(var(--l-bg-color), var(--d-bg-color));
  --btn-border-color: light-dark(var(--l-btn-border), var(--d-btn-border));
}

:root {
  /* text */
  --l-text-color: #1a1c20;
  --d-text-color: #e2e1e1;
  /* background */
  --l-bg-color: #eeeff1;
  --d-bg-color: #1f2023;
  /* button border */
  --l-btn-border: #0e0f10;
  --d-btn-border: #eeecec;

  color-scheme: light dark;

  --text-color: light-dark(var(--l-text-color), var(--d-text-color));
  --bg-color: light-dark(var(--l-bg-color), var(--d-bg-color));
  --btn-border-color: light-dark(var(--l-btn-border), var(--d-btn-border));
}

My final idea would be, using CSS only, to start from #fff and #000 colors and for the various elements (background, text, borders etc) use a variation of this base color. Is it wrong?

56 replies

KPCKevin Powell - Community

•Created by MC23 on 9/12/2024 in #front-end

relative-positioned element is cut off

4 replies

KPCKevin Powell - Community

•Created by MC23 on 9/7/2024 in #front-end

Add marquee effect over image

What I'd like to achieve: https://bennadel-cdn.com/resources/uploads/2023/[email protected] Attempt so far: https://codepen.io/n00bCod3r/pen/gOjNvge Where the left and right border are the image's ones (with the whole title being shown and scrolling)

35 replies

KPCKevin Powell - Community

•Created by MC23 on 6/20/2024 in #ui-ux

Two columns layout for code snippets: A or B?

2 replies

KPCKevin Powell - Community

•Created by MC23 on 3/27/2024 in #front-end

Absolute position problem when scrolling

I'm having a problem with an abolute positioned element when scrolling, it moves and overflows the container: https://codepen.io/n00bCod3r/pen/XWQaZbz I tried adding a position relative to the container, but it gets cut:

8 replies

KPCKevin Powell - Community

•Created by MC23 on 6/1/2023 in #front-end

[Angular MaterialTable] Row class not completely applied in case of overflow

https://stackblitz.com/edit/angular-mat-table-highlight-row-on-scroll-zmdjqj?file=src%2Fapp%2Fapp.component.css As you can see, due to the Flex css part, the row class is not entirely applied. Any idea on how to do that? The flex part must stay, this is a simpler example than my actual project...

1 replies

KPCKevin Powell - Community

•Created by MC23 on 2/2/2023 in #ui-ux

Feedback on icons used to display the respective word

5 replies

KPCKevin Powell - Community

•Created by MC23 on 10/12/2022 in #front-end

Unwanted undefined key in object

Starting from an array like this:

    gridColumns =
    [
      { field: "exam_Internalcode", title: 'Exam ID' },
      { field: "patient", title: 'Patient Name' },
  ]

    gridColumns =
    [
      { field: "exam_Internalcode", title: 'Exam ID' },
      { field: "patient", title: 'Patient Name' },
  ]

And an array like this

  gridData = [
    { exam_Internalcode: 'I-12M4', patient: 'Mark Lenner', idblock: 125 },
    ...
  ]

  gridData = [
    { exam_Internalcode: 'I-12M4', patient: 'Mark Lenner', idblock: 125 },
    ...
  ]

What's the best way to obtain an array like this?

result = [
  {'Exam ID': 'I-12M4', 'Patient Name': 'Mark Lenner'} //no idblock because there is no field for it in gridColumns 
  ...
]

result = [
  {'Exam ID': 'I-12M4', 'Patient Name': 'Mark Lenner'} //no idblock because there is no field for it in gridColumns 
  ...
]

Current solution https://jsfiddle.net/n00bCod3r/jdc1hu5p/ However, I get an undefined key and I don't understand why

14 replies

Gaming

Programming