响应式

Author: for-the-zero

index.css

@@ -5,14 +5,21 @@ body{
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
+    overflow-x: hidden;
 }
 mdui-card{
     padding: 8px;
     margin: 10px;
-    width: 150px;
-    min-height: 200px;
+    width: 240px;
+    min-height: 240px;
     vertical-align: top;
 }
+@media screen and (max-aspect-ratio: 3/5) {
+    mdui-card{
+        width: 150px;
+        min-height: 200px;
+    }
+}
 .item-icon{
     font-size: 40px;
 }

index.html

@@ -49,6 +49,7 @@
                     <mdui-menu-item value="no">不分类/No category</mdui-menu-item>
                     <mdui-menu-item value="lang">语言/Languages</mdui-menu-item>
                     <mdui-menu-item value="ui">UI库/UI library</mdui-menu-item>
+                    <mdui-menu-item value="device">设备/Device</mdui-menu-item>
                 </mdui-select>
             </div>
         </div>

index.js

@@ -1,30 +1,3 @@
-/*
-var list(已经导入了，无需创建)中的每一项都是一个项目，格式如下：
-{
-    name: "Taple",
-    icon: "table_chart--outlined",
-    desc: "一个好看的表格，用canvas绘制",
-    url: "./taple/index.html",
-    github: "https://github.com/for-the-zero/Taple",
-    slot: {
-        time: 9,
-        recommend: 100,
-        lang: "cn",
-        ui: "css"
-    }
-},
-
-<mdui-card clickable href="#"><mdui-icon name="video_library--outlined" class="item-icon"></mdui-icon>
-    <h1>114514</h1>
-    <p>114514</p><mdui-chip href="#" icon="link" target="_blank">Github</mdui-chip>
-</mdui-card>
-
-<mdui-collapse-item value="item-2">
-    <mdui-list-item slot="header" icon="folder--outlined">Item 1</mdui-list-item>
-    <mdui-card clickable href="#"><mdui-icon name="video_library--outlined"class="item-icon"></mdui-icon><h1>114514</h1><p>114514</p><mdui-chip href="#" icon="link" target="_blank">Github</mdui-chip></mdui-card>
-</mdui-collapse-item>
-*/
-
 //elements
 const e_tooltip = $('mdui-tooltip');
 const e_sort = $('.sort');

links.js

@@ -9,7 +9,8 @@ var links = [
             time: 0,
             recommend: -20,
             lang: "cn",
-            ui: "mdb"
+            ui: "mdb",
+            device: "both"
         }
     },
 
@@ -23,7 +24,8 @@ var links = [
             time: 1,
             recommend: -15,
             lang: "en",
-            ui: "css"
+            ui: "css",
+            device: "both"
         }
     },
 
@@ -37,7 +39,8 @@ var links = [
             time: 2,
             recommend: -65,
             lang: "cn",
-            ui: "material-web"
+            ui: "material-web",
+            device: "both"
         }
     },
 
@@ -51,7 +54,8 @@ var links = [
             time: 3,
             recommend: 0,
             lang: "cn",
-            ui: "mdui"
+            ui: "mdui",
+            device: "both"
         }
     },
 
@@ -65,7 +69,8 @@ var links = [
             time: 4,
             recommend: -70,
             lang: "cn",
-            ui: "no"
+            ui: "no",
+            device: "mobile"
         }
     },
 
@@ -79,7 +84,8 @@ var links = [
             time: 5,
             recommend: 1,
             lang: "cn",
-            ui: "mdui"
+            ui: "mdui",
+            device: "both"
         }
     },
 
@@ -93,7 +99,8 @@ var links = [
             time: 6,
             recommend: -30,
             lang: "cn",
-            ui: "mdui"
+            ui: "mdui",
+            device: "desktop"
         }
     },
 
@@ -107,7 +114,8 @@ var links = [
             time: 7,
             recommend: -100,
             lang: "cn",
-            ui: "no"
+            ui: "no",
+            device: "both"
         }
     },
 
@@ -121,7 +129,8 @@ var links = [
             time: 8,
             recommend: -80,
             lang: "en",
-            ui: "no"
+            ui: "no",
+            device: "both"
         }
     },
 
@@ -135,7 +144,8 @@ var links = [
             time: 9,
             recommend: 100,
             lang: "en",
-            ui: "css"
+            ui: "css",
+            device: "both"
         }
     },
 
@@ -149,7 +159,8 @@ var links = [
             time: 10,
             recommend: -60,
             lang: "cn",
-            ui: "material-web"
+            ui: "material-web",
+            device: "both"
         }
     },
 
@@ -163,7 +174,8 @@ var links = [
             time: 11,
             recommend: 50,
             lang: "cn",
-            ui: "mdui"
+            ui: "mdui",
+            device: "both"
         }
     }
 ];
@@ -175,6 +187,11 @@ const cate_order = {
         ['css','自己写的css/css by myself'],
         ['material-web','material-web'],
         ['mdb','MDBootstrap'],
-        ['no','无样式/No Style']
+        ['no','无样式/No Style'],
+    ],
+    device: [
+        ['both','两者都适用/Both'],
+        ['desktop','桌面/desktop'],
+        ['mobile','移动/mobile']
     ]
 };