nezumi/loi-phan-internship
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/loi-phan-internship.git synced 2026-09-22 13:38:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #19 from Nez27/feature/menu-html

Browse Source 
Implement html layout for menu section.
This commit is contained in:
Loi Phan
2023-07-28 11:28:17 +07:00
committed by GitHub
parent 555ba51706 c183174d6b
commit a3a75f1d58
4 changed files with 24 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-02/src/includes/mixins.pug
+2
View File
@@ -1,3 +1,5 @@
- var avatar_img_path = "./assets/images/avatar/";
mixin foodItemCard(food) mixin foodItemCard(food)
.card-item .card-item
img.card-img(src=offer_img_path + "item-card.png", alt="Item card image") img.card-img(src=offer_img_path + "item-card.png", alt="Item card image")
practice/practice-02/src/index.pug
+1
View File
@@ -23,3 +23,4 @@ html(lang="en")
include layouts/welcome include layouts/welcome
include layouts/offer include layouts/offer
include layouts/service include layouts/service
include layouts/menu
practice/practice-02/src/layouts/menu.pug
+21
View File
@@ -0,0 +1,21 @@
- var image_menu_path = "./assets/images/menu/";
- var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"];
- var list_image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"];
- var default_food_data = { price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] };
section.menu
.menu__container
h2.menu__heading
span.primary-text= Menu
= " That "
span.secondary-text Always
= " Make You Fall In "
span.primary-text Love
.menu__list-category
each item in list_category
a.menu__category-item.link-text(href="javascript:void(0)")= item
.menu__card-list
each url in list_image_food
- var image_food = { imageUrl: url };
+foodItemCard({ ...image_food, ...default_food_data })
practice/practice-02/src/layouts/offer.pug
-1
View File
@@ -1,5 +1,4 @@
- var offer_img_path = "./assets/images/offer/"; - var offer_img_path = "./assets/images/offer/";
- var avatar_img_path = "./assets/images/avatar/";
- var food_1 = { imageUrl: offer_img_path + "food-1.png", price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; - var food_1 = { imageUrl: offer_img_path + "food-1.png", price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] };
- var food_2 = { imageUrl: offer_img_path + "food-2.png", price: "15", ratePoint: "4.8", foodName: "Chicken Tikka", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-4.png" }, { avatarUrl: avatar_img_path + "avatar-5.png" }, { avatarUrl: avatar_img_path + "avatar-6.png" }] }; - var food_2 = { imageUrl: offer_img_path + "food-2.png", price: "15", ratePoint: "4.8", foodName: "Chicken Tikka", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-4.png" }, { avatarUrl: avatar_img_path + "avatar-5.png" }, { avatarUrl: avatar_img_path + "avatar-6.png" }] };