Първо поправих долния колонтитул в долната част на страницата. Това ще помогне за използваемостта на приложението и ще направи много по-чист поток. Това, което направих, е да изчисля минималната височина на класа page, за да бъде височината на страницата, като извадя височината на долния колонтитул и височината на горния колонтитул. Това ще избута долния колонтитул до дъното на страницата, ако съдържанието не заема цялата страница.

В /resources/assets/sass/layouts/_page.scss добавих този стил:

min-height: calc(100vh - 130px);

Това, което прави, е да гарантира, че височината на основното съдържание е поне пълната височина на страницата минус височината на долния и горния колонтитул.

Добавена карта за кафене

За да направя изложението на кафенетата малко по-красиво, създадох картичка за всяко едно. Картата е хубав дисплей, който показва името на кафенето и неговия адрес. Ще покажем много данни в тези карти през следващите няколко урока.

Можете да намерите CafeCard.vue тук: /resources/assets/js/components/cafes/CafeCard.vue.

Импортирах картата в началната страница и там, където повторих списъка с кафенета, добавям карта сега. Кодът изглежда така:

<div class="grid-container">
  <div class="grid-x grid-padding-x">
    <loader v-show="cafesLoadStatus == 1" :width="100" :height="100"></loader>
    <cafe-card v-for="cafe in cafes" :key="cafe.id" :cafe="cafe"></cafe-card>
  </div>
</div>

Едно нещо, което трябва да се отбележи, е, че задаваме атрибута :key за кафенето на id на кафенето. Когато използвате персонализирани компоненти във VueJS и итерирате върху тях, трябва да приложите ключов параметър. Това е ново във VueJS 2.

В самата CafeCard увих маркирането с <router-link></router-link>, което изглежда така:

<router-link :to="{ name: 'cafe', params: { id: cafe.id} }">

Това, което прави, е да свърже картата на кафенето с действителната страница за кафенето.

Добавени зареждащи устройства

За да покажа процеса на зареждане, създадох компонент Loader.vue. Можете да видите, че ги използвах на началната страница при зареждане на кафенетата в последния раздел. Направих това като компонент, за да можете да подадете width и height параметри, които позволяват на компонента да се побере на различни места.

Можете да намерите товарача тук: /resources/assets/js/components/global/Loader.vue

Има страхотен източник за зареждане на икони, който използвах тук: SVG Loading icons.

На началната страница това е хубав визуален дисплей за показване на състоянието на приложението.

Tuned Up Cafes.vue

Направих картата CafesMap.vue на цял екран, позиционирайки я абсолютна:

<style lang="scss">
  div#cafe-map{
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: 100px;
  }
</style>

Също така дадох на картата пълната ширина на страницата Cafes.vue, така че шаблонът в момента изглежда така:

<div id="cafes" class="page">
  <cafe-map></cafe-map>
</div>

Тези прости подобрения ще добавят някои предимства по-късно, когато можем да направим някои наслагвания върху картата.

Заключение

Тези прости актуализации сега ще направят приложението много по-лесно за потребителя и ще оставят празен лист за следващите няколко функции, които ще добавим. Следващите уроци ще се потопят повече в някои техники за взаимоотношения на Laraval, докато добавяме методи за варене към кафенетата и дъщерните кафенета (кафенета с повече от едно местоположение).

Чувствайте се свободни да разгледате всички актуализации тук: GitHub — serversideup/roastandbrew.

Здравейте! Пишем книга за разработка на приложения, управлявани от API. Научете първи, след като е готов! Регистрирайте се тук: Регистрация за разработка на приложения, управлявана от API