fix links, use framework

This commit is contained in:
Adrian Woźniak 2024-10-23 16:02:21 +02:00
parent b508efd50f
commit 8bc01d5fd9
10 changed files with 1020 additions and 99 deletions

View File

@ -1,5 +1,8 @@
{
"dependencies": {
"tailwindcss": "^3.4.14"
},
"devDependencies": {
"daisyui": "^4.12.13"
}
}

View File

@ -15,7 +15,7 @@ mod entities;
#[derive(Debug, Template)]
#[template(path = "recipe_card.html")]
struct RecipeCard {
id: i64,
id: i32,
author: Option<String>,
image_url: String,
title: String,

View File

@ -4,17 +4,16 @@
@tailwind components;
@tailwind utilities;
/* overflow-hidden is to prevent overflow within the card */
/*
.card {
@apply bg-white rounded overflow-hidden shadow-md relative;
}
/* object-cover is to prevent distortion */
.badge {
@apply bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded-full p-2 absolute top-0 ml-2 mt-2;
}
/* tracking-wider is for space between letters */
.btn {
@apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider;
}
*/

View File

@ -1,7 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./templates/**/*.html"],
darkMode: true,
theme: {
extend: {
colors: {
@ -19,5 +18,17 @@ module.exports = {
variants: {
extend: {},
},
plugins: [],
plugins: [
require('daisyui'),
],
daisyui: {
themes: ['light', 'dark'], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
darkTheme: "light", // name of one of the included themes for dark mode
base: true, // applies background color and foreground color for root element by default
styled: true, // include daisyUI colors and design decisions for all components
utils: true, // adds responsive and modifier utility classes
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
themeRoot: ":root", // The element that receives theme color CSS variables
},
};

View File

@ -1,8 +1,7 @@
{% extends "base.html" %}
{% block content %}
<!-- main content -->
<main class="px-16 py-6 bg-gray-100 md:col-span-3">
<main class="px-16 py-6 md:col-span-3">
<div class="flex justify-center md:justify-end">
<a href="/sign-in" class="btn text-primary border-primary md:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
</div>
@ -25,5 +24,4 @@
</div>
</div>
</main>
{% endblock %}

View File

@ -14,7 +14,7 @@
</div>
<ul class="text-sm mt-6 hidden md:block" id="menu">
<li class="text-gray-700 font-bold py-2">
<a href="#" class="px-4 flex justify-end border-r-4 border-primary hover:shadow-md">
<a href="/" class="px-4 flex justify-end border-r-4 border-primary hover:shadow-md">
<span>Home</span>
<svg class="w-5 ml-2" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path
@ -22,16 +22,6 @@
</svg>
</a>
</li>
<li class="py-2">
<a href="#" class="px-4 flex justify-end border-r-4 border-white hover:shadow-md">
<span>About</span>
<svg class="w-5 ml-2" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</nav>
</div>

View File

@ -1,4 +1,4 @@
<a class="card hover:shadow-lg transition ease-linear transform hover:scale-105" href="/recipies/{{id}}">
<a class="card hover:shadow-lg transition ease-linear transform hover:scale-105" href="/recipe/{{id}}">
<img src={{image_url}} alt="noodles" class="w-full h-32 md:h-48 object-cover">
<div class="m-4">
<span class="font-bold">{{title}}</span>

View File

@ -1,15 +1,14 @@
{% extends "base.html" %}
{% block content %}
<!-- main content -->
<main class="px-16 py-6 bg-gray-100 md:col-span-3">
<main class="px-16 py-md:col-span-3">
<div class="flex justify-center md:justify-end">
<a href="/sign-in" class="btn text-primary border-primary md:border-2 hover:shadow-lg transition ease-out duration-300">Login</a>
</div>
<div class="sm:bg-white sm:w-[50%] sm:ml-auto sm:mr-auto sm:mt-[10rem] sm:p-10 sm:rounded-3xl">
<div>
<img src={{ recipe.image_url.clone().unwrap_or_default() }} alt="omelette" class="sm:rounded-xl">
<div class="sm:ml-auto sm:mr-auto sm:rounded-3xl">
<div class="sm:mx-auto text-center">
<img src={{ recipe.image_url.clone().unwrap_or_default() }} alt="{{recipe.title}}" class="sm:rounded-xl">
</div>
<div class="pl-[1.7rem] mt-8 sm:p-0 sm:mt-9">
<h1 class="font-young-serif text-[37px] text-stone-700 leading-10 mb-7 sm:text-stone-800">{{ recipe.title }}</h1>
@ -36,6 +35,16 @@
{% endfor %}
</ol>
</div>
<div class="border-bottom marker:text-rose-900 marker:font-outfit-semibold border-b-[2px] ml-auto mr-auto w-[20.2rem] pb-4 mt-8 sm:w-auto">
<p class="Title mb-5">Tags</p>
<ol class="list-disc ml-6">
{% for tag in tags %}
<li class="font-outfit-regular text-stone-500 text-[17px] mb-3 pl-3 text-base">
<div>{{ tag.name }}</div>
</li>
{% endfor %}
</ol>
</div>
</div>
</main>

File diff suppressed because it is too large Load Diff

View File

@ -187,11 +187,34 @@ cross-spawn@^7.0.0:
shebang-command "^2.0.0"
which "^2.0.1"
css-selector-tokenizer@^0.8:
version "0.8.0"
resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
dependencies:
cssesc "^3.0.0"
fastparse "^1.1.2"
cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
culori@^3:
version "3.3.0"
resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739"
integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==
daisyui@^4.12.13:
version "4.12.13"
resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.12.13.tgz#e386c54dd7a55e77dc865f12e1556b37229dfb4e"
integrity sha512-BnXyQoOByUF/7wSdIKubyhXxbtL8gxwY3u2cNMkxGP39TSVJqMmlItqtpY903fQnLI/NokC+bc+ZV+PEPsppPw==
dependencies:
css-selector-tokenizer "^0.8"
culori "^3"
picocolors "^1"
postcss-js "^4"
didyoumean@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@ -228,6 +251,11 @@ fast-glob@^3.3.0:
merge2 "^1.3.0"
micromatch "^4.0.4"
fastparse@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
fastq@^1.6.0:
version "1.17.1"
resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
@ -445,7 +473,7 @@ path-scurry@^1.11.1:
lru-cache "^10.2.0"
minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
picocolors@^1.0.0, picocolors@^1.1.0:
picocolors@^1, picocolors@^1.0.0, picocolors@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@ -474,7 +502,7 @@ postcss-import@^15.1.0:
read-cache "^1.0.0"
resolve "^1.1.7"
postcss-js@^4.0.1:
postcss-js@^4, postcss-js@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==