mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-01 11:45:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Restoring Style on Guides (#595)

Browse Source 
* restoring related spaces styling

* increased img width

* switched to tailwind
This commit is contained in:
Ali Abdalla 2022-02-12 03:56:44 +04:00 committed by GitHub
parent 6f8afa0eb5
commit e68c3188a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
website/homepage/src/guides_template.html
View File

@ -28,7 +28,7 @@
.prose p>img { .prose p>img {
margin: 0 auto; margin: 0 auto;
width: 600px; width: 900px;
max-width: 100%; max-width: 100%;
} }
@ -69,23 +69,18 @@
{{navbar_html|safe}} {{navbar_html|safe}}
<div class="container mx-auto max-w-4xl px-4 mb-12 mt-6" id="guide-template"> <div class="container mx-auto max-w-4xl px-4 mb-12 mt-6" id="guide-template">
{% if spaces is not none %} {% if spaces is not none %}
<p class='mb-2 text-sm text-gray-500'> <div id='spaces-holder'>
<span class="italic">Related Spaces:</span> <a href='https://hf.co/spaces' target='_blank'>
{% for space in spaces %} <img class="inline-block my-0 mx-auto w-5 max-w-full pb-1" src='/assets/img/spaces-logo.svg'>
<a href='{{ space }}' target='_blank' class="hover:text-blue-500 transition">{{ space[30:] }}</a> </a>
{% if not loop.last %}, {% endif %} <p class="m-0 inline text-lg font-normal">Related Spaces: </p>
{% endfor %}
</p>
{% endif %}
{% if tags is not none %} {% for space in spaces %}
<p class='mb-2 text-sm text-gray-500'> <div class='space-link inline-block m-1 px-1 rounded-md'>
<span class="italic">Tags:</span> <a href='{{space}}' target='_blank' class="no-underline">{{space[30:]}}</a>
{% for tag in tags %} </div>
<span>{{ tag }}</span><!--
-->{% if not loop.last %}, {% endif %}
{% endfor %} {% endfor %}
</p> </div>
{% endif %} {% endif %}
<div class="prose mt-6"> <div class="prose mt-6">
@ -121,6 +116,38 @@
}); });
}); });
}); });
var spacesHolder, spaces;
spacesHolder = document.getElementById("spaces-holder");
spaces = spacesHolder.getElementsByTagName('div');
var backgrounds = ['rgba(255,254,188,0.3)',
'rgba(255,205,188,0.3)',
'rgba(255,188,188,0.3)',
'rgba(194,255,169,0.3)',
'rgba(169,255,237,0.3)',
'rgba(182,169,255,0.3)',
'rgba(255,183,245,0.3)']
function shuffleBackgrounds(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
shuffleBackgrounds(backgrounds);
color_counter = 0
for (let i = 0; i < spaces.length; i++) {
spaces[i].style.background = backgrounds[color_counter];
color_counter += 1
if (color_counter == backgrounds.length) {
color_counter = 0;
}
}
</script> </script>
</body> </body>