feat: make mobile friendly

BlueprintFramework · Dec 30, 2024 · 8a3c4e6 · 8a3c4e6
1 parent 6209026
commit 8a3c4e6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/browse/extensions/index.css b/browse/extensions/index.css
@@ -43,4 +43,14 @@
   .extension-card-content {
     --card-padding-top: 240px;
   }
+}
+
+.blueprint-promotion {
+  --width: 75%;
+  width: var(--width);
+}
+@media screen and (max-width: 768px) {
+  .blueprint-promotion {
+    --width: 100% !important;
+  }
 }
diff --git a/browse/extensions/index.html b/browse/extensions/index.html
@@ -194,10 +194,10 @@ <h3 class="pt-5 mt-5 mb-3 fw-bolder">
           </div>
 
           <div class="row g-4">
-            <div class="col-8">
+            <div class="col-lg-8 col-xs-12 order-lg-0 order-1">
               <center>
-                <div class="w-75">
-                  <img src="../../.assets/storage/misc/png/13.png" height="150"/>
+                <div class="blueprint-promotion">
+                  <img src="../../.assets/storage/misc/png/13.png" width="250" style="max-width: 90%"/>
                   <h2 class="h3 my-3">
                     Install and manage this extension with <b>Blueprint</b>!
                   </h2>
@@ -209,11 +209,11 @@ <h2 class="h3 my-3">
                 </div>
               </center>
             </div>
-            <div class="col-4">
+            <div class="col-lg-4 col-md-12">
               ${Object.entries(data.platforms)
                 .map(
                   ([platform, _data]) => `
-                    <div class="platform-button">
+                    <div class="platform-button placeholder-wave">
                       <a href="${
                         platform === "BUILTBYBIT"
                           ? "https://" +

diff --git a/browse/index.html b/browse/index.html
@@ -384,7 +384,7 @@ <h1 class="modal-title fs-5" id="filterModalLabel"><i class="bi bi-filter"></i>
       function sortProducts(products) {
         switch (sortType) {
           case "created":
-            return products.sort((a, b) => new Date(a.created) < new Date(b.created) ? -1 : 1);
+            return products.sort((a, b) => new Date(a.created) < new Date(b.created) ? -1 : 1).reverse();
           case "author":
             return products.sort((a, b) => a.author.name.localeCompare(b.author.name));
           case "popularity":