[클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #4 Chats Screen, Find Screen, More Screen

Chats Screen

- navigation-bar 아이콘에 따라 링크 수정.

 

- chats-screen에 맞게 navigation-bar의 아이콘, header의 text 및 아이콘, user-component 수정,

 

- badge.css 따로 생성.

  사용되는 부분에 badge 클래스 추가하여 적용.

.badge {
    background-color: tomato;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 600;
}

- user-component의 오른쪽 column 수정.(HTML)

  시간, badge 추가.

    <!-- User Component -->
    <main class="main-screen">
        <div class="user-component">
            <div class="user-component__column">
                <img src="img/user_img.jpg" class="user-component__avatar"/>
                <div class="user-component__text">
                    <h4 class="user-component__title">Smile:)</h4>
                    <h6 class="user-component__subtitle">Be Happy Don't Worry</h6>
                </div>
            </div>
            <div class="user-component__column">
                <span class="user-component__time">08:08</span>
                <div class="badge">1</div>
            </div>
        </div>
    </main>

- user-component의 오른쪽 column 수정.(CSS)

  시간, badge 위치 조절. 

  badge가 오른쪽 끝에 위치하도록 수정.

.user-component__column:last-child {
    color:rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.user-component__time {
    display: block;
    margin-bottom: 10px;
}

- chats-screen의 badge 위치 수정으로 friends-screen 위치 변한 거 수정.

  (마지막에 위치한 <span>과 <i>를 <div> 안에 넣어 위치 수정.)

    <!-- User Component -->
    <main class="friends-screen">
        ...

        <div class="friends-screen__channel">
            <div class="friends-screen__channel-header">
                <span>Channel</span>
                <i class="fas fa-chevron-up fa-xs"></i>
            </div>

            <div class="user-component">
                <div class="user-component__column">
                    <img src="img/user_img.jpg" class="user-component__avatar user-component__avatar--sm"/>
                    <div class="user-component__text">
                        <h4 class="user-component__title user-component__title--not-bold">Channel</h4>
                    </div>
                </div>

                <div class="user-component__column">
                    <div>
                        <span>2</span>
                        <i class="fas fa-chevron-right fa-xs"></i>
                    </div>
                </div>
            </div>
        </div>
    </main>

 

Find Screen - icons

- find-screen에 맞게 navigation-bar의 아이콘, header의 text 및 아이콘 수정.

 

- find 아이콘 추가.(HTML)

    <!-- Find Icons -->
    <main class="main-screen">
        <div class="find-icons">
            <div class="find-icons__icon">
                <i class="fas fa-qrcode"></i>
                <span>QR Code</span>
            </div>
            <div class="find-icons__icon">
                <i class="far fa-address-book"></i>
                <span>Add by Contacts</span>
            </div>
            <div class="find-icons__icon">
                <i class="fas fa-fingerprint"></i>
                <span>Add by ID</span>
            </div>
            <div class="find-icons__icon">
                <i class="far fa-envelope"></i>
                <span>Invite</span>
            </div>
        </div>
    </main>

- border 변수로 추가.

  자주 쓰는 코드는 변수로 생성해 사용하는 것이 편리함. 

:root {
    --yellow: #fae100;
    --horizontal-space: 25px;
    --main-border: 1px solid rgba(0, 0,  0, 0.2);
}

- find 아이콘 추가.(CSS)

.find-icons {
    display: flex;
    justify-content: space-between;
    border-bottom: var(--main-border);
    padding-bottom: 25px;
}

.find-icons__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.find-icons__icon i {
    font-size: 40px;
}

.find-icons__icon span {
    margin-top: 20px;

}

 

Find Screen - recommended friends

- recommended friends 추가.(HTML)

    <!-- Find Icons -->
    <main class="main-screen">
        ...

        <div class="recommended-friends">
            <h6 class="recommended-friends__title">Recommended Friends</h6>
            <span>You have no recommended friends.</span>
        </div>
    </main>

- recommended friends 추가.(CSS)

...

.recommended-friends {
    margin: 25px 0px;
    padding: 25px 0px;
    border-top: var(--main-border);
    border-bottom: var(--main-border);
}

.recommended-friends__title {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

.recommended-friends span {
    margin: 110px 0px;
    display: block;
    text-align: center;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.5);
}

 

Find Screen - open chat

- open chat 추가.(HTML)

<!-- Open Chat -->
        <div class="open-chat">
            <div class="open-chat__header">
                <h4>Open Chat</h4>
                <span>Go to Openchat Home<i class="fas fa-chevron-right fa-xs"></i></span>
            </div>

            <div class="open-post">
                <div class="open-post__column">
                    <h5 class="open-post__title">#BTS</h5>
                    <h6 class="open-post__hashtag">#bts#army#friends</h6>
                    <div class="open-post__members">
                        <img src="img/open-chat_member_bts.jpg" />
                        <span class="open-post__member-count">613 members</span>
                        <div class="divider"></div>
                        <span class="open-post__member-status">Active</span>
                    </div>
                </div>

                <div class="open-post__column">
                    <div class="open-post__photo">
                        <img src="img/open-chat_bts.jpg"/>
                        <div class="open-post__heart-count">
                            <i class="fa-solid fa-heart fa-xs"></i>
                            <span>1204</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

- open chat 추가.(CSS)

...
.open-chat__header {
    display: flex;
    justify-content: space-between;
    opacity: 0.8;
    margin-bottom: 25px;
}

.open-chat__header span {
    opacity: 0.6;
}

.open-post {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.open-post__title {
    font-weight: 600;
    margin-bottom: 10px;
}

.open-post__hashtag {
    text-transform: uppercase;
    opacity: 0.6;
}

.open-post__members {
    display: flex;
    align-items: center;
}

.open-post__members img {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 5px;
}

.open-post__member-count {
    opacity: 0.5;
    font-size: 14px;
}

.open-post__members .divider {
    width: 1px;
    height: 15px;
    margin: 0px 5px;
    background-color: rgba(0, 0, 0, 0.5);
}

.open-post__member-status {
    color: #ffb0e0;
}

.open-post__photo img {
    width: 120px;
    height: 120px;
    border-radius: 20px;
}

.open-post__photo {
    position: relative;
}

.open-post__heart-count {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
}

.open-post__heart-count span {
    margin-left: 3px;
}

+ 추가 설명

- .open-post__hashtag

→ text-transform: uppercase;로 문자 대문자로 변경. 

 

- .open-post__heart-count 

→ 사진 위에 위치하도록 하기 위해 position을 absolute로 설정,

     .open-post__photo의 position을 relative로 설정해, .open-post__photo를 기준으로 이동하도록 설정. 

 

More Screen - user component

- more-screen에 맞게 header의 text 및 아이콘 수정.

 

- user component 추가.(HTML)

    <!-- Main Screen -->
    <main class="main-screen">
        <!-- User Component -->
        <div class="user-component">
            <div class="user-component__column">
                <img src="img/user_img.jpg" class="user-component__avatar user-component__avatar--xl"/>
                <div class="user-component__text">
                    <h4 class="user-component__title">Smile:)</h4>
                    <h6 class="user-component__subtitle">+82 010-1234-5678<i class="fas fa-exclamation-circle"></i></h6>
                </div>
            </div>

            <div class="user-component__column">
                <i class="far fa-comment-alt fa-2x"></i>
            </div>
        </div>
        
    </main>

- user component 추가.(CSS)

.user-component__subtitle i {
    margin-left: 5px;
    color: tomato;
}

 

More Screen - icons

- icons 추가.(HTML)

    <!-- Main Screen -->
    <main class="main-screen more-screen">
        ...

        <!-- Icons -->
        <div class="icon-row">
            <div class="icon-row__icon">
                <i class="far fa-calendar-check"></i>
                <span>Calendar</span>
            </div>
            <div class="icon-row__icon">
                <i class="fas fa-archive"></i>
                <span>Talk Drive</span>
            </div>
            <div class="icon-row__icon">
                <i class="far fa-smile"></i>
                <span>Emoticons</span>
            </div>
            <div class="icon-row__icon">
                <i class="fas fa-palette"></i>
                <span>Themes</span>
            </div>
        </div>
    </main>

- icon-raw.css 따로 생성.

- icons 추가.(CSS)

.more-screen .icon-row {
    margin-top: 35px;
}

 

More Screen - suggestions

- suggestions 추가.(HTML)

<!-- Suggestions -->
        <div class="more-suggestions">
            <h4 class="more-suggestions__title">Suggestions</h4>
            <div class="more-suggestions__icons">
                <div class="more-suggestions__icon">
                    <div class="more-suggestions__icon-image">
                        <i class="fas fa-quote-right"></i>
                    </div>
                    <span class="more-suggestions__icon-text">Kokoa Story</span>
                </div>
                <div class="more-suggestions__icon">
                    <div class="more-suggestions__icon-image">
                        <i class="fas fa-users"></i>
                    </div>
                    <span class="more-suggestions__icon-text">Kokoa Friends</span>
                </div>
            </div>
        </div>

- suggestions 추가.(CSS)

...

.more-suggestions {
    margin-top: 30px;
    border-top: var(--main-border);
    padding-top: 40px;
}

.more-suggestions__title {
    margin-bottom: 30px;
}

.more-suggestions__icons {
    display: flex;
}

.more-suggestions__icon {
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.more-suggestions__icon-image {
    width: 60px;
    height: 60px;
    background-color: var(--yellow);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.more-suggestions__icon-image i {
    font-size: 32px;
    color: white;
}

.more-suggestions__icon-text {
    color: rgba(0, 0, 0, 0.5);
}

- setting.html 생성 후 링크로 연결.

 

결과물

- Chats Screen

- Find Screen

- More Screen