Chapter 22. Room Detail

#22.0 Photo Grid

rooms/models.py

def first_photo(self):
    photo, = self.photos.all()[:1]
    return photo.file.url

def get_next_four_photos(self):
    photos = self.photos.all()[1:5]
    return photos

templates\rooms\room_detail.html

<div class="-mt-5 container max-w-full h-75vh flex mb-20">
    <div class="h-full w-1/2 bg-cover bg-center" style="background-image: url({{room.first_photo}})"></div>
    <div class="h-full w-1/2 flex flex-wrap">

        {% for photo in room.get_next_four_photos  %}
        <div class="w-1/2 h-auto bg-cover bg-center border-gray-500 border"
            style="background-image: url({{photo.file.url}})"></div>
        {% endfor %}

    </div>
</div>

#22.1 Styling the Room part One

templates\rooms\room_detail.html

<div class="container mx-auto flex justify-around pb-56">
    <div class="w-1/2">
        <div class="flex justify-between">
            <div>
                <h4 class="text-3xl font-medium mb-px">{{room.name}}</h4>
                <span class="text-gray-700 font-light">{{room.city}}</span>
            </div>
            <a href="{{room.host.get_absolute_url}}" class="flex flex-col items-center">
                {% include "mixins/user_avatar.html" with user=room.host %}
                <span class="mt-2 text-gray-500">{{room.host.first_name}}</span>
            </a>
        </div>
        <div class="flex">
            {{room.room_type}}
            {{room.get_beds}}
            {{room.bedrooms}}
        </div>
    </div>
    <div class="w-1/3"></div>
</div>

rooms\models.py

def get_beds(self):
    if self.beds == 1:
        return "1 bed"
    else:
        return f"{self.beds} beds"

#22.2 Styling the Room part Two

Django의 pluralize 기능 ⇒ get_beds() 만드는 것 대신 {{room.beds}} bed{{room.beds|pluralize}}

assets\scss\styles.scss : border 생성

.border-section {
  @apply border-b border-gray-400 pb-8 mt-8;
}

templates\rooms\room_detail.html

<div class="flex border-section">
    <span class="mr-5 font-light">{{room.room_type}}</span>
    <span class="mr-5 font-light">{{room.beds}} bed{{room.beds|pluralize}}</span>
    <span class="mr-5 font-light">{{room.bedrooms}} bedroom{{room.bedrooms|pluralize}}</span>
    <span class="mr-5 font-light">{{room.baths}} bath{{room.baths|pluralize}}</span>
    <span class="mr-5 font-light">{{room.guests}} guest{{room.guests|pluralize}}</span>
</div>

<p class="border-section">
    {{room.description}}
</p>

<div class="border-section">
    <h4 class="font-medium text-lg mb-5">Amenities</h4>
    {% for a in room.amenities.all %}
    <li class="mb-2">{{a}}</li>
    {% endfor %}
</div>

<div class="border-section">
    <h4 class="font-medium text-lg mb-5">Facilities</h4>
    {% for f in room.facilities.all %}
    <li class="mb-2">{{f}}</li>
    {% endfor %}
</div>

<div class="border-section">
    <h4 class="font-medium text-lg mb-5">House Rules</h4>
    {% for r in room.house_rules.all %}
    <li class="mb-2">{{r}}</li>
    {% endfor %}
</div>

<div class="border-section">
    <h4 class="font-medium text-2xl mb-5">Reviews</h4>
    <div>
        {{room.total_rating}} {{room.reviews.count}} review{{room.reviews.count|pluralize}}
    </div>
</div>

#22.3 Room Reviews

templates\mixins\user_avatar.html

사진 크기 지정 : {{h_and_w}default:'h-20 w-20'}}

글자 크기 지정 : {{text|default:'text-3xl'}}

templates\rooms\room_detail.html

<div class="mt-10">
    <h4 class="font-medium text-2xl mb-5">Reviews</h4>
    <div class="flex items-center">
        <div>
            <i class="fas fa-star text-teal-500"></i>
            <span class="font-bold text-xl">{{room.total_rating}}</span>
        </div>

        <div class="h-4 w-px bg-gray-400 mx-5"></div>

        <div>
            <span class="font-bold text-xl">{{room.reviews.count}}</span>
            <span>review{{room.reviews.count|pluralize}}</span>
        </div>
    </div>

    <div class="mt-10">
        {% for review in room.reviews.all %}
        <div class="border-section">
            <div class="mb-3 flex">
                <div>
                    {% include "mixins/user_avatar.html" with user=review.user h_and_w='h-10 w-10' text='text-xl' %}
                </div>
                <div class="flex flex-col ml-5">
                    <span class="font-medium">{{review.user.first_name}}</span>
                    <span class="text-sm text-gray-500">{{review.created|date:'F Y'}}</span>
                </div>
            </div>
            <p>{{review.review}}</p>
        </div>
        {% endfor %}
    </div>

</div>