구내운송 분할화면시 statbar 찌그러지는 현상

uracle7402 commented 8 years ago

_ _

지난번에 말씀 드렸던 현상입니다. 좌우측 으로 펼쳐치는 스크롤이 꼭! 필요할것 같습니다. 해당 케이스는 이와 같이 이미지와 텍스트들이 찌그러지므로 좌우측 넓이는 높이고 스크롤이 적용되야 할것 같아 요청 드립니다. 감사합니다.

gitaeks commented 8 years ago

분할 화면에서 progress-indicator 에 가로 스크롤이 생성되도록 처리했습니다. 아래 코드를 적용해 주세요.

가로 스크롤 적용 https://github.com/kimsQ/hd-steel/commit/8eb6e061c882448167a471ae7c8f5af82c3ca038

현 단계를 가로 스크롤 중앙에 배치하기 위해서는 분할 화면에서만 아래의 코드를 상황에 맞게 수치를 변경하여 적용하면 될 것 같습니다.

$(".progress-indicator").css('transform','translateX(-120px)')

gitaeks commented 8 years ago

데모는 아래화면에서 지도분할 버튼을 터치하시면 확인하실 수 있습니다. https://kimsq.github.io/hd-steel/tm/IL_GU_CT_1104(2).html

상차완료 상태를 화면중앙으로 위치하기 위해서는 아래의 코드를 추가 적용이 필요합니다. 단계에 따라 translateX(-120px) 수치는 변경해야 할 것 같습니다.

$(".progress-indicator").css('transform','translateX(-120px)')

uracle7402 commented 8 years ago

statbar statbar

수정해주신 css, js를 적용하였는데 statbar에 생겨야할 스크롤이 화면전체에 생겨 있습니다. 현재 분할 화면시 위와 같이 적용되고 있는 모습이며 전체화면 또한 스크롤을 적용하여 넓이를 넗혀 글자가 '영차계량완료' 또는 영차계량기도착' 과 같은 글자가 나와도 한줄에 다보여 줄 수 있도록 적용하라는 지시가 있었습니다. 확인 부탁드립니다. 감사합니다.

gitaeks commented 8 years ago

글자수가 많이 늘어나서 전반적인 수정이 필요할 것 같습니다.

uracle7402 commented 8 years ago

작업대시는대로 말씀해주세요

ilkyunnoh commented 7 years ago

Status bar scroll 이슈 처리 부탁드립니다.

gitaeks commented 7 years ago

특정 위치로 가로스크롤를 위치하기 위해서는 아래의 코드를 적용해 주시면 될 것 같습니다. 숫자를 상황에 맞게 수정해 주시면 됩니다. $(".progress-indicator-wrapper").scrollLeft(180);

아래 데모에 적용해 놓았습니다. https://kimsq.github.io/hd-steel/tm/IL_GU_CT_1102.html

uracle7402 commented 7 years ago

statbar _2 statbar _1

이와같이 분할화면과 일반화면 모두가 글자가 한줄에 보이며 동그라미 상태표시와 가운데 정렬 되었으면 합니다. 감사합니다.

gitaeks commented 7 years ago

아래와 같이 수정되었습니다. 퍼블리싱 영역에 수정사항이 있으니, 아래 수정사항 참고해 주세요.

수정내역 https://github.com/kimsQ/hd-steel/commit/5d1a56df803bc2754a6334426ee0516261eeb1fd

데모 https://kimsq.github.io/hd-steel/tm/IL_GU_CT_1201.html

gitaeks commented 7 years ago

추가수정했습니다. css는 app-tablet.css 전체를 업데이트 해주시구요. html은 아래를 참고해 주세요. https://github.com/kimsQ/hd-steel/blob/gh-pages/tm/IL_GU_CT_1201.html#L108-L147

특이사항은 라벨이 6자 일 경우, .label 에 .hd-lg 를 추가해 줘야 합니다.

<ul class="progress-indicator">
  <li class="completed">
    <span class="bubble"></span>
    <span class="icon icon-check2"></span>
    <span class="time">5분</span>
    <span class="label">수행완료<small class="text-muted">08시35분</small></span>
  </li>
  <li class="completed">
    <span class="bubble"></span>
    <span class="icon icon-check2"></span>
    <span class="time">5분</span>
    <span class="label">도착<small class="text-muted">08시35분</small></span>
  </li>
  <li class="completed">
    <span class="bubble"></span>
    <span class="icon icon-check2"></span>
    <span class="time">5분</span>
    <span class="label hd-lg">상차지도완료<small class="text-muted">08시35분</small></span>
  </li>
  <li class="completed">
    <span class="bubble"></span>
    <span class="icon icon-check2"></span>
    <span class="time">5분</span>
    <span class="label hd-lg">영차계량완료<small class="text-muted">08시35분</small></span>
  </li>
  <li class="active">
    <span class="bubble"></span>
    <span class="icon icon-check2"></span>
    <span class="time"></span>
    <span class="label">도착완료<small class="text-muted">08시35분</small></span>
  </li>
  <li>
    <span class="bubble"></span>
    <span class="label">하차완료<small class="text-muted">08시35분</small></span>
  </li>
  <li>
    <span class="bubble"></span>
    <span class="label">계량완료<small class="text-muted">08시35분</small></span>
  </li>
</ul>

uracle7402 commented 7 years ago

statbar _ statbar statbar_html

말씀해주신대로 CSS적용하여 화면을 보았을때 글자들이 한줄에 보이기는 하나 글자가 6자 이상인것들이 2번이상 나올 경우 위와같이 글자가 밀리는 현상이 보였습니다. 맨밑이미지는 해당 화면의 html소스입니다. 참고 부탁드립니다. 감사합니다.

gitaeks commented 7 years ago

아래 코드를 적용해 보세요. 그대로 곂히면 수치를 조절해 보세요. https://github.com/kimsQ/hd-steel/commit/d13e7652f6a102fa5a4cf452449d73bc9aecea94

uracle7402 commented 7 years ago

주신 코드를 수치조절해도 안되서 min-width 길이와 html을 조금 수정하여 이슈 해결 하였습니다. 감사합니다.

kimsQ / hd-steel

구내운송 분할화면시 statbar 찌그러지는 현상 #154