From 76344441ebe432d8f06c9c097bb8063f3cf9889a Mon Sep 17 00:00:00 2001 From: lzzfnc Date: Thu, 21 Oct 2021 02:34:41 +0200 Subject: [PATCH] style and diary --- add_diary.ipynb | 110 ++++++++++++++++++++++++++++++++++++++++++++++++ cms.js | 12 +++--- cms.json | 9 +++- index.html | 2 +- style.css | 54 +++++++++++++++--------- 5 files changed, 158 insertions(+), 29 deletions(-) create mode 100644 add_diary.ipynb diff --git a/add_diary.ipynb b/add_diary.ipynb new file mode 100644 index 0000000..bee60d0 --- /dev/null +++ b/add_diary.ipynb @@ -0,0 +1,110 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": 1, + "id": "607070ae-bceb-4476-b755-0835e5c07014", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "What's the recipe's name?\n", + "Provide a description for the recipe\n", + "Who is the chef?\n", + "Which ingredients do you need? Please write them separated by a comma\n", + "Which passages do you follow to cook the recipe? Please write them separated by a comma\n" + ] + } + ], + "source": [ + "print(\"What's the title?\")\n", + "title = input()\n", + "\n", + "print(\"Who is writing?\")\n", + "chef = input()\n", + "\n", + "print(\"What do you want to write?\")\n", + "text = input()" + ] + }, + { + "cell_type": "code", + "execution_count": 2, + "id": "ec5f984d-bc73-4d4e-a8e0-8b9d2e758152", + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "{\"recipes\": [{\"title\": \"Pizza and fruit salad soup\", \"description\": \"Minim laborum ipsum sunt minim nulla officia cillum quis labore ad voluptate enim deserunt nulla.\", \"chef\": \"chef Malvozzo\", \"ingredients\": [\"\\ud83c\\udf55\", \"\\ud83e\\udd6d\", \"\\ud83c\\udf49\", \"\\ud83c\\udf48\"], \"instructions\": [\"Id est velit ullamco ea sint aliqua laboris incididunt consectetur do aliqua sint eiusmod.\", \"Mescola\", \"Pariatur eu exercitation ipsum qui e\", \"Quis pariatur magna id pariatur consectetur irure in sint.\", \"Culpa sunt non consequat consequat excepteur amet ut veniam cupidatat in occaecat consectetur velit.\", \"servire ben caldo!\"]}, {\"title\": \"Kip & Ice Kream Siup\", \"description\": \"Id consequat deserunt laborum ea commodo sit voluptate sunt commodo excepteur sit incididunt amet.\", \"chef\": \"Mad Moonfish\", \"ingredients\": [\"\\ud83c\\udf57\", \"\\ud83c\\udf5a\", \"funghetti\", \"\\ud83c\\udf49\", \"\\ud83e\\udd57\"], \"instructions\": [\"Exercitation eiusmod adipisicing ex ut amet qui minim est anim reprehenderit nulla voluptate quis.\", \"Occaecat anim veniam occaecat ut pariatur culpa sit reprehenderit ullamco cupidatat.\", \"Et reprehenderit mollit cillum Lorem est.\", \"Magna aliquip sint aliqua proident.\", \"sluuuurp\"]}, {\"title\": \"NLTK Soupa\", \"description\": \"A delicious soup made with natural language tomato and kiwi\", \"chef\": \"Python\", \"ingredients\": [\"pasta\", \"mushroom\", \"pizza\", \"internet\"], \"instructions\": [\"Cook the pasta in the internet\", \"Dig a hole near a mushroom\", \"Bury the pizza in the hole\", \"Turn off internet\", \"Drain the pasta\", \"Turn internet on again\"]}, {\"title\": \"A new sup\", \"description\": \"just a test soup to see how does the cms taste like\", \"chef\": \"python\", \"ingredients\": [\"computer\", \"soupboat\", \"jupiter\", \"zen\"], \"instructions\": [\"turn on the computer\", \"enter the soupboat\", \"access jupiter\", \"start the kernel with little zen\", \"put python to boil\", \"wait and shift enter\"]}, {\"title\": \"Misu sup\", \"description\": \"A tasty misu sup yes yes yes\", \"chef\": \"Mitsos\", \"ingredients\": [\"Miso\", \"Water\", \"Salt\", \"Hash\", \"Egg\", \"Oil\", \"Pepper\", \"Glitter\", \"Mushrooms\"], \"instructions\": [\"Take the glitter and put them on your face\", \"Boil the water\", \"Throw the mushrooms in the boiling water\", \"Throw an egg against your neighbour\", \"Add salt and pepper\", \"Enjoy\"]}, {\"title\": \"A visual studio soup\", \"description\": \"A soup from the jupiter lab in visual studio ecc ecc really testy\", \"chef\": \"Visual sudo\", \"ingredients\": [\"Visual Studio\", \"Zen\", \"soup-gen repo\", \"git\", \"soupboat\"], \"instructions\": [\"Open visual studio and pull the repo from git\", \"Follow the jupiter notebook\", \"hope it works\", \"commit and push all the changes\", \"update the soupboat\"]}]}\n" + ] + } + ], + "source": [ + "import json\n", + "from datetime import datetime as dt\n", + "\n", + "def suffix(d):\n", + " return 'th' if 11<=d<=13 else {1:'st',2:'nd',3:'rd'}.get(d%10, 'th')\n", + "\n", + "def custom_strftime(format, t):\n", + " return t.strftime(format).replace('{S}', str(t.day) + suffix(t.day))\n", + "\n", + "recipe = {\n", + " \"type\":\"diary\",\n", + " \"title\":title,\n", + " \"date\": custom_strftime('%B the {S}, %Y', dt.now()),\n", + " \"chef\": chef,\n", + " \"text\": text\n", + "}\n", + "\n", + "cms = ''\n", + "\n", + "with open('cms.json', 'r') as file:\n", + " cms_string = file.read()\n", + " cms = json.loads(cms_string)\n", + "\n", + "cms[\"recipes\"].append(recipe)\n", + "\n", + "with open('cms.json','w') as file:\n", + " file.write(json.dumps(cms))\n", + " print('Thank you for your contribuition')\n" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "2d4de3af-fe7e-4691-8ac9-590b398aae66", + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "interpreter": { + "hash": "63fd5069d213b44bf678585dea6b12cceca9941eaf7f819626cde1f2670de90d" + }, + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.7.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} diff --git a/cms.js b/cms.js index 870c74c..fdc7534 100644 --- a/cms.js +++ b/cms.js @@ -42,10 +42,6 @@ function addDiary(diary) { title.innerHTML = diary.title; card.appendChild(title); - // let info = document.createElement("div"); - // info.classList.add("info"); - // card.appendChild(info); - let date = document.createElement("div"); date.classList.add("date"); date.innerHTML = diary.date; @@ -53,14 +49,18 @@ function addDiary(diary) { let text = document.createElement("div"); text.classList.add("text"); - text.innerHTML = diary.text; - card.appendChild(text); + let content = document.createElement("p"); + content.innerHTML = diary.text; + + text.appendChild(content); let chef = document.createElement("span"); chef.classList.add("chef"); chef.innerHTML = diary.chef; text.appendChild(chef); + card.appendChild(text); + cookbook.appendChild(card); } diff --git a/cms.json b/cms.json index 7552c22..e34353d 100644 --- a/cms.json +++ b/cms.json @@ -231,7 +231,7 @@ "date": "October the 20th, 2021", "title": "how to add a diary page", "chef": "grr", - "text": "helo, if you want to add a diary page just follow the same steps for teh recipes but open the \"add_diary.ipynb\" instead. ciao ciao have fun!" + "text": "helo, if you want to add a diary page just follow the same steps for teh recipes but open the add_diary.ipynb instead. ciao ciao have fun!" }, { "title": "Paris Soup", @@ -273,6 +273,13 @@ "Add salt on what's left", "Return to Rome" ] + }, + { + "type": "diary", + "title": "this is a new diary page \ud83c\udf54", + "date": "October the 20th, 2021", + "chef": "mitsos", + "text": "this is a bit too much public but...(with kamo's voice) it's ok. today was the first day of the trial for the murder of Zak Kostopoulos. My friend Antonis went to a shady strip club with some lesbians and their presence made the machos go away. he did some pole dancing there. " } ] } \ No newline at end of file diff --git a/index.html b/index.html index 3863ec5..2f04a0b 100644 --- a/index.html +++ b/index.html @@ -102,7 +102,7 @@

TODO short term:

  • 🔍 Ingredients list and filter!!! (like chat reader)
  • 🚫 Inclusive / Exclusive filters
    • -
  • 💬 Different types of entries for the cms: recipe, diary, ecc.
    • +
  • 💬 Different types of entries for the cms: recipe, diary, ecc.
  • 🎨 Design
  • 💻 Receive recipe as a form ?
  • 📷 Add recipe picture ?
    • diff --git a/style.css b/style.css index 11a1956..d8ab28d 100644 --- a/style.css +++ b/style.css @@ -5,6 +5,7 @@ body { font-family: Arial, Helvetica, sans-serif; font-size: 1.25rem; line-height: 1.4; + box-sizing: border-box; } .intro { @@ -56,7 +57,7 @@ h3 { } .how-to { - padding-left: 1ch; + padding-left: 1em; border-left: 2px dotted currentColor; } @@ -80,7 +81,7 @@ button.tag { font-size: 20px; display: inline-block; border: 1px solid currentColor; - padding: 0 0.5ch; + padding: 0 0.5em; border-radius: 1em; margin: 4px; text-transform: capitalize; @@ -95,11 +96,16 @@ button.tag { .recipes { display: flex; justify-content: flex-start; + flex-direction: row; flex-wrap: wrap; - row-gap: 16px; - column-gap: 16px; + /* display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-flow: row dense; */ + + row-gap: 24px; + column-gap: 24px; } .recipe, @@ -108,9 +114,9 @@ button.tag { display: none; background-color: #ffffff; flex-grow: 1; - flex-basis: 55ch; + flex-basis: 600px; border-radius: 16px; - padding: 0 1ch; + padding: 0 16px; } .recipe.active { @@ -126,7 +132,7 @@ button.tag { } .recipe .title { - margin-bottom: 8px; + margin-bottom: 0; } .recipe .description { @@ -175,31 +181,31 @@ button.tag { /* DIARY */ .diary { - margin: 16px 0; font-family: "Ortica"; display: inline-block; + align-self: flex-start; background-color: transparent; - border-left: 2px dotted currentColor; border-radius: 0; - align-self: flex-start; -} -.diary .info { - display: flex; - justify-content: space-between; - align-items: baseline; + border-left: 2px dotted currentColor; + margin: 16px 0; } .diary .title { - margin-bottom: 8px; + margin-bottom: 0; +} + +.diary .date { + opacity: 0.6; } .diary .text { - margin-top: 1.4em; + margin-top: 16px; } -.diary .chef { - display: inline-block; - margin-left: 1ch; +.diary .text p { + margin: 0; + margin-right: 1ch; + display: inline; } .diary .chef::before { @@ -218,6 +224,12 @@ button.tag { } li { - margin-bottom: 0.6em; + margin-bottom: 0.4em; + } + + .diary .chef { + margin-top: 8px; + display: block; + text-align: right; } }