Първо поправих долния колонтитул в долната част на страницата. Това ще помогне за използваемостта на приложението и ще направи много по-чист поток. Това, което направих, е да изчисля минималната височина на класа 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