Tsumanu/cooked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile

Browse Source
This commit is contained in:
eraden 2024-11-17 20:36:29 +01:00
parent 0499c71fbb
commit 1171675ee3
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
cooked/assets/styles.css
View File

@ -2429,6 +2429,10 @@ details.collapse summary::-webkit-details-marker{
list-style-type: disc; list-style-type: disc;
} }
.flex-row{
flex-direction: row;
}
.flex-col{ .flex-col{
flex-direction: column; flex-direction: column;
} }
@ -2477,6 +2481,10 @@ details.collapse summary::-webkit-details-marker{
gap: 2rem; gap: 2rem;
} }
.text-nowrap{
text-wrap: nowrap;
}
.rounded-full{ .rounded-full{
border-radius: 9999px; border-radius: 9999px;
} }

10
cooked/templates/recipies/show.jinja
View File

@ -1,7 +1,7 @@
{% extends "base.jinja" %} {% extends "base.jinja" %}
{% block content %} {% block content %}
<main class="m-4 flex flex-col gap-4 w-full"> <main class="p-4 flex flex-col gap-4 w-full">
{% include "../top_bar.jinja" %} {% include "../top_bar.jinja" %}
<div class="sm:rounded-3xl w-full flex flex-col gap-4"> <div class="sm:rounded-3xl w-full flex flex-col gap-4">
@ -67,9 +67,9 @@
<p class="text-desktop-heading-m"> <p class="text-desktop-heading-m">
Tags Tags
</p> </p>
<div class="flex gap-7"> <div class="flex gap-7 flex-wrap">
{% for tag in tags %} {% for tag in tags %}
<a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center" href="/tags/{{tag.id}}"> <a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center text-nowrap" href="/tags/{{tag.id}}">
{{ tag.name }} {{ tag.name }}
</a> </a>
{% endfor %} {% endfor %}
@ -80,9 +80,9 @@
<p class="text-desktop-heading-m"> <p class="text-desktop-heading-m">
Ingredients Ingredients
</p> </p>
<div class="flex gap-7"> <div class="flex gap-7 flex-wrap flex-row">
{% for ingredient in ingredients %} {% for ingredient in ingredients %}
<a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center" href="/ingredients/{{ingredient.id}}"> <a class="bg-gray-300 dark:bg-gray-700 text-base text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-400 dark:hover:bg-gray-600 flex justify-center items-center text-nowrap" href="/ingredients/{{ingredient.id}}">
{{ ingredient.name }} {{ ingredient.name }}
</a> </a>
{% endfor %} {% endfor %}