Spaces:
Running
Running
Commit
•
630fd8c
1
Parent(s):
67dc267
Modify button + add dark mode
Browse files- index.html +20 -14
index.html
CHANGED
@@ -32,15 +32,15 @@
|
|
32 |
|
33 |
iframe {
|
34 |
display: block;
|
35 |
-
border:
|
36 |
width: 100%;
|
37 |
-
height:
|
38 |
pointer-events: none;
|
39 |
}
|
40 |
|
41 |
.grid-container {
|
42 |
display: grid;
|
43 |
-
grid-template-columns: repeat(
|
44 |
grid-gap: 10px;
|
45 |
margin-top: 3.5rem;
|
46 |
margin-left: 3.5rem;
|
@@ -51,6 +51,7 @@
|
|
51 |
position: relative;
|
52 |
overflow-y: hidden;
|
53 |
border-radius: 10px;
|
|
|
54 |
}
|
55 |
.grid-item:hover {
|
56 |
filter: brightness(75%);
|
@@ -83,12 +84,13 @@
|
|
83 |
sort: "likes",
|
84 |
page: 1,
|
85 |
totalPages: -1,
|
|
|
86 |
useTestData: false,
|
87 |
buttonClass(attr, filter) {
|
88 |
if (this[attr] === filter) {
|
89 |
-
return "
|
90 |
}
|
91 |
-
return "text-gray-
|
92 |
},
|
93 |
async switchData() {
|
94 |
this.page = 1;
|
@@ -97,6 +99,10 @@
|
|
97 |
this.themes = data.themes;
|
98 |
this.totalPages = data.totalPages;
|
99 |
},
|
|
|
|
|
|
|
|
|
100 |
async sortThemes(sort) {
|
101 |
this.sort = sort;
|
102 |
this.page = 1;
|
@@ -127,7 +133,7 @@
|
|
127 |
async nextPage() {
|
128 |
if (this.page < this.totalPages) {
|
129 |
this.page += 1;
|
130 |
-
const data = await this.getThemes(this.page, this.
|
131 |
this.themes = this.themes.concat(data.themes);
|
132 |
this.totalPages = data.totalPages;
|
133 |
}
|
@@ -137,35 +143,35 @@
|
|
137 |
</script>
|
138 |
</head>
|
139 |
|
140 |
-
<body class="pb-10 pt-5 bg-
|
141 |
<section
|
142 |
x-data="themesData"
|
143 |
>
|
144 |
<section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-14 mx-auto relative">
|
145 |
<div class="col-span-2 lg:col-span-1 flex flex-col gap-14 row-start">
|
146 |
-
<h1 class="text-lg font-semibold
|
147 |
</div>
|
148 |
<div class="col-span-2 md:col-span-3 flex items-center gap-14 flex flex-wrap lg-auto lg:ml-auto text-sm">
|
149 |
<div class="flex gap-2">
|
150 |
-
<span class="md:px-3 py-1
|
151 |
<button
|
152 |
:class="buttonClass('sort', 'likes')"
|
153 |
-
class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
|
154 |
@click="sortThemes('likes')"
|
155 |
>
|
156 |
Most Likes
|
157 |
</button>
|
158 |
<button
|
159 |
:class="buttonClass('sort', 'recent')"
|
160 |
-
class="text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800 px-2 md:px-3 py-1 rounded-full"
|
161 |
@click="sortThemes('recent')"
|
162 |
>
|
163 |
Recent
|
164 |
</button>
|
165 |
</div>
|
166 |
<div class="flex gap-0">
|
167 |
-
<input type="checkbox" @click="switchData()" class="rounded">
|
168 |
-
<span class="md:px-3 py-1
|
|
|
|
|
169 |
<!-- <button
|
170 |
:class="buttonClass('useTestData', false)"
|
171 |
class="px-2 md:px-3 py-1 rounded-full"
|
@@ -179,7 +185,7 @@
|
|
179 |
<div class="grid-container">
|
180 |
<template x-for="theme in themes" :key="theme.id">
|
181 |
<div class="grid-item">
|
182 |
-
<iframe :src="`${theme.subdomain}?_=${new Date().getTime()}`" :alt="theme.id" scrolling="no" frameborder="0"></iframe>
|
183 |
<a :href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
|
184 |
</div>
|
185 |
</template>
|
|
|
32 |
|
33 |
iframe {
|
34 |
display: block;
|
35 |
+
border: none;
|
36 |
width: 100%;
|
37 |
+
height: 600px;
|
38 |
pointer-events: none;
|
39 |
}
|
40 |
|
41 |
.grid-container {
|
42 |
display: grid;
|
43 |
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
44 |
grid-gap: 10px;
|
45 |
margin-top: 3.5rem;
|
46 |
margin-left: 3.5rem;
|
|
|
51 |
position: relative;
|
52 |
overflow-y: hidden;
|
53 |
border-radius: 10px;
|
54 |
+
border: 1px solid rgb(55 65 81);
|
55 |
}
|
56 |
.grid-item:hover {
|
57 |
filter: brightness(75%);
|
|
|
84 |
sort: "likes",
|
85 |
page: 1,
|
86 |
totalPages: -1,
|
87 |
+
mode: "light",
|
88 |
useTestData: false,
|
89 |
buttonClass(attr, filter) {
|
90 |
if (this[attr] === filter) {
|
91 |
+
return "text-orange-600 bg-gradient-to-br from-orange-300 to-orange-100 px-2 md:px-3 py-1 rounded-full";
|
92 |
}
|
93 |
+
return "text-gray-800 hover:to-orange-300/100 hover:text-orange-600 dark:hover:bg-white";
|
94 |
},
|
95 |
async switchData() {
|
96 |
this.page = 1;
|
|
|
99 |
this.themes = data.themes;
|
100 |
this.totalPages = data.totalPages;
|
101 |
},
|
102 |
+
async switchTheme() {
|
103 |
+
this.mode = this.mode === "light" ? "dark": "light";
|
104 |
+
console.log(this.mode);
|
105 |
+
},
|
106 |
async sortThemes(sort) {
|
107 |
this.sort = sort;
|
108 |
this.page = 1;
|
|
|
133 |
async nextPage() {
|
134 |
if (this.page < this.totalPages) {
|
135 |
this.page += 1;
|
136 |
+
const data = await this.getThemes(this.page, this.sort, this.useTestData);
|
137 |
this.themes = this.themes.concat(data.themes);
|
138 |
this.totalPages = data.totalPages;
|
139 |
}
|
|
|
143 |
</script>
|
144 |
</head>
|
145 |
|
146 |
+
<body class="pb-10 pt-5 bg-white dark:bg-gray-950 relative">
|
147 |
<section
|
148 |
x-data="themesData"
|
149 |
>
|
150 |
<section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-14 mx-auto relative">
|
151 |
<div class="col-span-2 lg:col-span-1 flex flex-col gap-14 row-start">
|
152 |
+
<h1 class="text-lg font-semibold text-gray-800 whitespace-nowrap">Gradio Themes Gallery</h1>
|
153 |
</div>
|
154 |
<div class="col-span-2 md:col-span-3 flex items-center gap-14 flex flex-wrap lg-auto lg:ml-auto text-sm">
|
155 |
<div class="flex gap-2">
|
156 |
+
<span class="md:px-3 py-1 text-gray-800">sort by</span>
|
157 |
<button
|
158 |
:class="buttonClass('sort', 'likes')"
|
|
|
159 |
@click="sortThemes('likes')"
|
160 |
>
|
161 |
Most Likes
|
162 |
</button>
|
163 |
<button
|
164 |
:class="buttonClass('sort', 'recent')"
|
|
|
165 |
@click="sortThemes('recent')"
|
166 |
>
|
167 |
Recent
|
168 |
</button>
|
169 |
</div>
|
170 |
<div class="flex gap-0">
|
171 |
+
<input type="checkbox" @click="switchData()" class="rounded accent-orange-300">
|
172 |
+
<span class="md:px-3 py-1 text-gray-800 ml-0">Use Test Data</span>
|
173 |
+
<input type="checkbox" @click="switchTheme()" class="rounded accent-orange-300">
|
174 |
+
<span class="md:px-3 py-1 text-gray-800 ml-0">Show Dark Mode</span>
|
175 |
<!-- <button
|
176 |
:class="buttonClass('useTestData', false)"
|
177 |
class="px-2 md:px-3 py-1 rounded-full"
|
|
|
185 |
<div class="grid-container">
|
186 |
<template x-for="theme in themes" :key="theme.id">
|
187 |
<div class="grid-item">
|
188 |
+
<iframe :src="`${theme.subdomain}?_=${new Date().getTime()}&__theme=${mode}`" :alt="theme.id" scrolling="no" frameborder="0"></iframe>
|
189 |
<a :href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
|
190 |
</div>
|
191 |
</template>
|