Skip to content
This repository has been archived by the owner on Jun 26, 2021. It is now read-only.

Feature scrolling gallery #18

Merged
merged 12 commits into from
Apr 23, 2021
Merged

Feature scrolling gallery #18

merged 12 commits into from
Apr 23, 2021

Conversation

miketvo
Copy link
Member

@miketvo miketvo commented Apr 22, 2021 •
edited

Please check on your devices if it has any bugs and is working properly according to Dr. Tri's requirements.

Bonus features:

  • Touch events also stop scrolling (mobile user consideration)
  • Gallery left and right button now works!
  • Hide gallery left and right button if gallery does not overflow (if not enough cards)
  • Scalable: You can have as many galleries in a page as you want, as long as you strictly follow the template html structure as I did in /public/mall/index.html and include /public/js/cards.js file at the end of body

Example gallery template structure:

<body>
<section class="card-gallery">
    <h2 class="card-gallery-title">GALLERY NAME</h2>

    <button class="card-gallery-left-bttn"><i class="fas fa-angle-left"></i></button>
    <div class="card-gallery-content flex-container flex-justify-content-space-between flex-align-items-center overflow-hidden clear-both">

      <div class="product-card">
        <a href="./"><img alt="image of a product" src="../../../media/image/placeholder.jpg"></a>
        <div class="product-card-details">
          <a class="product-card-title" href="./">Product Title Goes Here</a>
          <a class="product-card-shop" href="../">Shop Name Goes Here</a>
          <p class="product-card-price">$12.99</p>
          <div class="product-card-sale-card">13/10/2015</div>
        </div>
      </div>

   </div>
   <button class="card-gallery-right-bttn"><i class="fas fa-angle-right"></i></button>
</section>

<script src="../../../js/cards.js"></script>
</body>

@miketvo miketvo changed the base branch from main to dev April 22, 2021 17:35
@miketvo
Copy link
Member Author

miketvo commented Apr 22, 2021 •
edited

#19 No solution as of now. Keep this issue open so I can come back on it later. This branch is finished for dev cycle 2.

@miketvo miketvo merged commit 8c62c33 into dev Apr 23, 2021
@miketvo miketvo deleted the feature-scrolling-gallery branch April 23, 2021 11:50
@miketvo miketvo mentioned this pull request May 9, 2021
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@rider3458 rider3458 rider3458 approved these changes

@doanyennhi doanyennhi doanyennhi approved these changes

@tnathu-ai tnathu-ai Awaiting requested review from tnathu-ai

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@miketvo @rider3458 @doanyennhi