Plots2: 다양한 페이지 너비에 대해 홈 페이지의 이미지 상자에 있는 텍스트 CSS 수정

@publiclab/mentors 여기서 해야 할 일은...

@oorjitchowdhary 소개 단락이 길고 사용자가 작은 모바일 화면에서 가장 먼저 보게 되어서는 안 되기 때문에

@oorjithowdhary @dinaelhanan에 동의합니다. @jywarren은 무엇을 말합니까?

예, 이것은 의도적이었습니다. 그러나 문제를 다시 설명할 수 있다면 실제로 솔루션을 사용할 수 있습니다. 화면 너비가 변경됨에 따라 텍스트가 고르게 확장되지 않고(이를 보여주기 위해 gif를 업로드해 보세요!) 중단점이 좋지 않습니다. 이미지 크기에 따라 글꼴 크기를 더 균일하게 만드는 데 사용할 수 있는 영리한 CSS가 있는지 궁금합니다. 또는 다양한 크기의 상자에서 멋지게 흐르는 텍스트를 처리하는 다른 방법입니다. 이것은 정말 도움이 되는 연구일 수 있습니다. 강력한 CSS 트릭이 많이 있으며 누군가 이 문제를 처리했을 것입니다. 도움이 되는 경우 전체 이미지를 표시하지 않는 것이 좋습니다.

@jywarren 이거 비슷한가요? https://stackoverflow.com/a/16346076

바로 그거죠!!!!! 훌륭한 데모도:

2018년 12월 6일 목요일 오후 4시 11분 d1g1t4ld1n4 [email protected]에서 다음과 같이 작성했습니다.

@jywarren https://github.com/jywarren 이거 비슷해요?
https://stackoverflow.com/a/16346076

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/publiclab/plots2/issues/4120#issuecomment-445030781 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AABfJ_5MOqK593jmKUsr4-n-YP9IrGulks5u2YfigaJpZM4ZCONp
.

@jywarren 좋아, 그렇다면 https://github.com/publiclab/plots2/issues/4062의 일부로 생각합니다. 이것이 첫 번째 단계여야 합니다(스타일 변경에 대한 소개와 비슷함). 그래서 작업을 할 수 있다면 이를 위해 나는 즉시 그것을 가져갈 것입니다. 감사!

좋아, 이 문제에 대한 작업을 만들고 있습니다.

https://codein.withgoogle.com/dashboard/tasks/4615033783844864/

@SidharthBansal 감사합니다! 다음과 같은 경우 승인을 받아야 합니다.
https://codein.withgoogle.com/dashboard/task-instances/4824240835526656/

조금 조심 스럽네요 @jywarren 이 승인할 때까지 기다리자

@SidharthBansal 잘 들립니다!

👍 대박!

그리고 주의하세요. 이 코드는 현재 코드베이스가 아니라 데이터베이스에 저장되어 있습니다. 따라서 사이트 관리자가 편집할 수 있습니다. 그러나 이는 이에 대한 솔루션이 PR이 아닌 스타일시트와 스크린샷이 될 수 있음을 의미합니다. 사이트에서 이를 구동하는 코드는 다음과 같습니다.

https://gist.github.com/jywarren/b137484ae621dc00a4c48537fd00386b

이것이 의미가 있기를 바랍니다. 약간 이상하지만 이미지나 콘텐츠 텍스트를 코드베이스의 일부로 간주하지 않는 경우가 많으며, 블로그 게시물처럼 첫 페이지를 편집하여 계속 수정할 수 있는 유연성을 좋아합니다.

말이 됩니까?

로컬에서 관리자로 로그인하고 https://localhost :3000/features/...로 이동하여 관리자 전용 기능으로 이동하고 다음과 같이 "home-carousel"이라는 새 기능을 생성하여 작업할 수 있습니다.

그런 다음 위의 요점에서 코드를 붙여넣을 수 있습니다. 그러면 테스트를 위해 로컬 설치의 홈 페이지에 표시됩니다.

@jywarren ok 그래서 cloud9에서 위의 모든 단계를 수행했습니다. 모든 이미지 div를 삭제하고 하나만 남겼습니다.

<div><img alt="fanboat" src="../dinaelhanan/app/assets/images/1.jpeg" /></div>

이미지의 대체 텍스트 대신 회전 목마를 볼 수 있도록 cloud9에 파일을 업로드했습니다. 이것이 내 이미지의 파일 경로이기 때문에 이 파일 경로를 수행했습니다.

작동하지 않습니다 ... 내 vw CSS 트릭이 작동하는지 확인하기 위해 요점의 스타일 태그 끝에 이것을 추가했습니다.

h1.lead-text
{
   font-size: 3vw;
}

그러나 나는 여전히 이미지의 대체 코드를 보고 있습니다... @SidharthBansal @sagarpreet-chadha 혹시 도와주실 수 있을까요? @ValentinaTironi 아마도 당신도 도울 수 있습니다 :)

브라우저 콘솔이나 레일 콘솔에서 오류가 발생합니까?

오류가 없습니다. 단지 캐러셀이 @JonathanXu1에 표시 되도록 할 수 없다는 것뿐입니다.

흠 캐러셀은 써본적이 없어서 한번 해봐야겠네요

@JonathanXu1 좋아요, 감사합니다!

@JonathanXu1 @SidharthBansal 왜 작동하지 않는지 깨달았습니다! jeff가 말했듯이 코드는 코드베이스가 아닌 데이터베이스에 있으므로 표시되지 않고 PR을 만들 필요가 없습니다. 텍스트 크기가 동적으로 되도록 vw를 사용하는 것이 좋습니다. 이 작업을 요청했는데 스크린샷을 얻는 방법을 알아야 합니다... 감사합니다!

그리고 주의하세요. 이 코드는 현재 코드베이스가 아니라 데이터베이스에 저장되어 있습니다. 따라서 사이트 관리자가 편집할 수 있습니다. 그러나 이는 이에 대한 솔루션이 PR이 아닌 스타일시트와 스크린샷이 될 수 있음을 의미합니다. 사이트에서 이를 구동하는 코드는 다음과 같습니다.

https://codein.withgoogle.com/dashboard/task-instances/5245453814726656/

오 알겠어! 어디에서 데이터베이스에 액세스할 수 있으며 어떻게 미리 볼 수 있습니까?

@JonathanXu1 데이터베이스에 액세스할 수 없지만 미리 볼 수는 있습니다.
https://github.com/publiclab/plots2/issues/4120#issuecomment -445054975

https://github.com/publiclab/plots2/issues/4120#issuecomment -445054593과 같이 캐러셀을 만들었지만 대시보드 페이지의 프론트엔드에는 변경 사항이 없습니다. 내가 잘못된 곳을 찾고 있습니까?

편집하다:
나는 당신이하는 것처럼 이미지 alt를 봅니다.

@JonathanXu1 야..:/

github에서 하는 것처럼 이미지 소스를 연결하는 방법이 있을까요? 아니면 로컬에서 호스팅되는 소스 대신 웹 URL을 연결해 보셨습니까?

@JonathanXu1 ooo 좋은 생각입니다 URL에 연결해 보겠습니다.

@JonathanXu1 야 나는 그것을 시도했지만 작동하지 않는 것 같습니다. 제프가 도와줄 수 있을지 지켜봐야 할 것 같아요 :)

@oorjithowdhary 승인할 수 있도록 https://codein.withgoogle.com/dashboard/tasks/6663508033798144/ 제출해 주세요. 더 찾으면 해당 문제에 저를 태그하십시오.

오.. 알았어.. https://codein.withgoogle.com/dashboard/task-instances/5768472920326144/ 승인해 주세요. 그래야 제가 소유권을 주장할 수 있습니다..

모든 노력과 시간에 감사드립니다...

안녕하세요, 아웃리치 인턴입니다. 이 문제가 아직 열려 있습니까? 할당할 수 있습니까?

@Linda-Ikechukwu 가세요.

이 문제가 아직 열려 있습니까? 이거 받아도 될까요?

진행하시기 바랍니다
감사

아직 열려 있는 경우 이 문제를 처리할 수 있습니까?

확실한

이제 해결되었습니다. 감사합니다!