theme-gallery

Running

App Files Files Community

freddyaboulton HF staff commited on Mar 15, 2023

Commit

630fd8c

•

1 Parent(s): 67dc267

Modify button + add dark mode

Browse files

Files changed (1) hide show

index.html +20 -14

index.html CHANGED Viewed

@@ -32,15 +32,15 @@
 		iframe {
 			display: block;
-			border: 1px solid transparent;
 			width: 100%;
-			height: 500px;
 			pointer-events: none;
 		}
 		.grid-container {
 			display: grid;
-			grid-template-columns: repeat(3, minmax(300px, 1fr));
 			grid-gap: 10px;
       margin-top: 3.5rem;
       margin-left: 3.5rem;
@@ -51,6 +51,7 @@
 			position: relative;
       overflow-y: hidden;
       border-radius: 10px;
 		}
     .grid-item:hover {
       filter: brightness(75%);
@@ -83,12 +84,13 @@
         sort: "likes",
         page: 1,
         totalPages: -1,
         useTestData: false,
         buttonClass(attr, filter) {
           if (this[attr] === filter) {
-            return "bg-black dark:bg-white shadow-lg text-white dark:text-black hover:bg-black hover:text-white";
           }
-          return "text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500 hover:text-gray-800";
         },
         async switchData() {
           this.page = 1;
@@ -97,6 +99,10 @@
           this.themes = data.themes;
           this.totalPages = data.totalPages;
         },
         async sortThemes(sort) {
           this.sort = sort;
           this.page = 1;
@@ -127,7 +133,7 @@
         async nextPage() {
           if (this.page < this.totalPages) {
             this.page += 1;
-            const data = await this.getThemes(this.page, this.filter, this.useTestData);
             this.themes = this.themes.concat(data.themes);
             this.totalPages = data.totalPages;
           }
@@ -137,35 +143,35 @@
     </script>
   </head>
-  <body class="pb-10 pt-5 bg-gray-100 dark:bg-gray-900 relative">
     <section
       x-data="themesData"
     >
       <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-14 mx-auto relative">
         <div class="col-span-2 lg:col-span-1 flex flex-col gap-14 row-start">
-          <h1 class="text-lg font-semibold dark:text-white whitespace-nowrap">Gradio Themes Gallery</h1>
         </div>
         <div class="col-span-2 md:col-span-3 flex items-center gap-14 flex flex-wrap lg-auto lg:ml-auto text-sm">
           <div class="flex gap-2">
-            <span class="md:px-3 py-1 dark:text-white text-gray-400">sort by</span>
             <button
             :class="buttonClass('sort', 'likes')"
-            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"
             @click="sortThemes('likes')"
             >
               Most Likes
             </button>
             <button
               :class="buttonClass('sort', 'recent')"
-              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"
               @click="sortThemes('recent')"
             >
               Recent
             </button>
           </div>
           <div class="flex gap-0">
-            <input type="checkbox" @click="switchData()" class="rounded">
-            <span class="md:px-3 py-1 dark:text-white text-gray-400 ml-0">Use Test Data</span>
             <!-- <button
               :class="buttonClass('useTestData', false)"
               class="px-2 md:px-3 py-1 rounded-full"
@@ -179,7 +185,7 @@
       <div class="grid-container">
       <template x-for="theme in themes" :key="theme.id">
         <div class="grid-item">
-          <iframe :src="`${theme.subdomain}?_=${new Date().getTime()}`" :alt="theme.id" scrolling="no" frameborder="0"></iframe>
           <a :href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
         </div>
       </template>

 		iframe {
 			display: block;
+			border: none;
 			width: 100%;
+			height: 600px;
 			pointer-events: none;
 		}
 		.grid-container {
 			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 			grid-gap: 10px;
       margin-top: 3.5rem;
       margin-left: 3.5rem;
 			position: relative;
       overflow-y: hidden;
       border-radius: 10px;
+      border: 1px solid rgb(55 65 81);
 		}
     .grid-item:hover {
       filter: brightness(75%);
         sort: "likes",
         page: 1,
         totalPages: -1,
+        mode: "light",
         useTestData: false,
         buttonClass(attr, filter) {
           if (this[attr] === filter) {
+            return "text-orange-600 bg-gradient-to-br from-orange-300 to-orange-100 px-2 md:px-3 py-1 rounded-full";
           }
+          return "text-gray-800 hover:to-orange-300/100 hover:text-orange-600 dark:hover:bg-white";
         },
         async switchData() {
           this.page = 1;
           this.themes = data.themes;
           this.totalPages = data.totalPages;
         },
+        async switchTheme() {
+          this.mode = this.mode === "light" ? "dark": "light";
+          console.log(this.mode);
+        },
         async sortThemes(sort) {
           this.sort = sort;
           this.page = 1;
         async nextPage() {
           if (this.page < this.totalPages) {
             this.page += 1;
+            const data = await this.getThemes(this.page, this.sort, this.useTestData);
             this.themes = this.themes.concat(data.themes);
             this.totalPages = data.totalPages;
           }
     </script>
   </head>
+  <body class="pb-10 pt-5 bg-white dark:bg-gray-950 relative">
     <section
       x-data="themesData"
     >
       <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-14 mx-auto relative">
         <div class="col-span-2 lg:col-span-1 flex flex-col gap-14 row-start">
+          <h1 class="text-lg font-semibold text-gray-800 whitespace-nowrap">Gradio Themes Gallery</h1>
         </div>
         <div class="col-span-2 md:col-span-3 flex items-center gap-14 flex flex-wrap lg-auto lg:ml-auto text-sm">
           <div class="flex gap-2">
+            <span class="md:px-3 py-1 text-gray-800">sort by</span>
             <button
             :class="buttonClass('sort', 'likes')"
             @click="sortThemes('likes')"
             >
               Most Likes
             </button>
             <button
               :class="buttonClass('sort', 'recent')"
               @click="sortThemes('recent')"
             >
               Recent
             </button>
           </div>
           <div class="flex gap-0">
+            <input type="checkbox" @click="switchData()" class="rounded accent-orange-300">
+            <span class="md:px-3 py-1 text-gray-800 ml-0">Use Test Data</span>
+            <input type="checkbox" @click="switchTheme()" class="rounded accent-orange-300">
+            <span class="md:px-3 py-1 text-gray-800 ml-0">Show Dark Mode</span>
             <!-- <button
               :class="buttonClass('useTestData', false)"
               class="px-2 md:px-3 py-1 rounded-full"
       <div class="grid-container">
       <template x-for="theme in themes" :key="theme.id">
         <div class="grid-item">
+          <iframe :src="`${theme.subdomain}?_=${new Date().getTime()}&__theme=${mode}`" :alt="theme.id" scrolling="no" frameborder="0"></iframe>
           <a :href="`https://huggingface.co/spaces/${theme.id}`" target="_blank"></a>
         </div>
       </template>