diff options
Diffstat (limited to 'backend/src/main/resources/templates/articles')
3 files changed, 80 insertions, 61 deletions
diff --git a/backend/src/main/resources/templates/articles/edit.html b/backend/src/main/resources/templates/articles/edit.html index f4faee9..d48bd14 100644 --- a/backend/src/main/resources/templates/articles/edit.html +++ b/backend/src/main/resources/templates/articles/edit.html @@ -7,7 +7,8 @@ <body layout:fragment="content"> <div class="flex justify-center bg-white p-12"> - <form th:action="@{/articles/edit/{articleId}(articleId=${article.id})}" th:object="${article}" method="post" class="w-full max-w-lg"> + <form th:action="@{/articles/edit/{articleId}(articleId=${article.id})}" th:object="${article}" method="post" + class="w-full max-w-lg"> <input type="hidden" th:field="*{id}"> <div class="flex flex-wrap -mx-3 mb-6"> <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0"> @@ -21,7 +22,8 @@ name="title" th:field="*{title}" placeholder="Yep"> - <p th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="text-red-500 text-xs italic">Please fill out this field.</p> + <p th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="text-red-500 text-xs italic">Please + fill out this field.</p> </div> <div class="w-full md:w-1/2 px-3"> <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" @@ -34,7 +36,8 @@ name="photoUrl" th:field="*{photoUrl}" placeholder="Doe"> - <p th:if="${#fields.hasErrors('photoUrl')}" th:errors="*{photoUrl}" class="text-red-500 text-xs italic">Please fill out this field.</p> + <p th:if="${#fields.hasErrors('photoUrl')}" th:errors="*{photoUrl}" class="text-red-500 text-xs italic"> + Please fill out this field.</p> </div> </div> <div class="flex flex-wrap -mx-3 mb-6"> @@ -49,12 +52,14 @@ name="content" th:field="*{content}" placeholder="Doe"> - <p th:if="${#fields.hasErrors('content')}" th:errors="*{content}" class="text-red-500 text-xs italic">Please fill out this field.</p> + <p th:if="${#fields.hasErrors('content')}" th:errors="*{content}" class="text-red-500 text-xs italic"> + Please fill out this field.</p> </div> </div> <div class="flex flex-wrap mb-2"> </div> - <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Update</button> + <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Update + </button> </form> </div> diff --git a/backend/src/main/resources/templates/articles/new.html b/backend/src/main/resources/templates/articles/new.html index f5924d6..fec6d6f 100644 --- a/backend/src/main/resources/templates/articles/new.html +++ b/backend/src/main/resources/templates/articles/new.html @@ -7,55 +7,59 @@ <body layout:fragment="content"> <div class="flex justify-center bg-white p-12"> -<form th:action="@{/articles/new}" th:object="${article}" method="post" class="w-full max-w-lg"> - <div class="flex flex-wrap -mx-3 mb-6"> - <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0"> - <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" - for="title"> - Title - </label> - <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" - id="title" - type="text" - name="title" - th:field="*{title}" - placeholder="Yep"> - <p th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="text-red-500 text-xs italic">Please fill out this field.</p> + <form th:action="@{/articles/new}" th:object="${article}" method="post" class="w-full max-w-lg"> + <div class="flex flex-wrap -mx-3 mb-6"> + <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0"> + <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" + for="title"> + Title + </label> + <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" + id="title" + type="text" + name="title" + th:field="*{title}" + placeholder="Yep"> + <p th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="text-red-500 text-xs italic">Please + fill out this field.</p> + </div> + <div class="w-full md:w-1/2 px-3"> + <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" + for="photoUrl"> + Photo URL + </label> + <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" + id="photoUrl" + type="text" + name="photoUrl" + th:field="*{photoUrl}" + placeholder="Doe"> + <p th:if="${#fields.hasErrors('photoUrl')}" th:errors="*{photoUrl}" class="text-red-500 text-xs italic"> + Please fill out this field.</p> + </div> </div> - <div class="w-full md:w-1/2 px-3"> - <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" - for="photoUrl"> - Photo URL - </label> - <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" - id="photoUrl" - type="text" - name="photoUrl" - th:field="*{photoUrl}" - placeholder="Doe"> - <p th:if="${#fields.hasErrors('photoUrl')}" th:errors="*{photoUrl}" class="text-red-500 text-xs italic">Please fill out this field.</p> + <div class="flex flex-wrap -mx-3 mb-6"> + <div class="w-full px-3"> + <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" + for="content"> + Content + </label> + <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" + id="content" + type="text" + name="content" + th:field="*{content}" + placeholder="Doe"> + <p th:if="${#fields.hasErrors('content')}" th:errors="*{content}" class="text-red-500 text-xs italic"> + Please fill out this field.</p> + </div> </div> - </div> - <div class="flex flex-wrap -mx-3 mb-6"> - <div class="w-full px-3"> - <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" - for="content"> - Content - </label> - <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" - id="content" - type="text" - name="content" - th:field="*{content}" - placeholder="Doe"> - <p th:if="${#fields.hasErrors('content')}" th:errors="*{content}" class="text-red-500 text-xs italic">Please fill out this field.</p> + <div class="flex flex-wrap mb-2"> </div> - </div> - <div class="flex flex-wrap mb-2"> - </div> - <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Create</button> + <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Create + </button> -</form> + </form> </div> </body> diff --git a/backend/src/main/resources/templates/articles/show.html b/backend/src/main/resources/templates/articles/show.html index 206aaae..0912e8e 100644 --- a/backend/src/main/resources/templates/articles/show.html +++ b/backend/src/main/resources/templates/articles/show.html @@ -7,7 +7,6 @@ <body layout:fragment="content"> - <!--Title--> <div class="text-center pt-16 md:pt-32"> <p th:text="${article.createdOn}" class="text-sm md:text-base text-green-500 font-bold"></p> @@ -15,14 +14,16 @@ </div> <!--image--> -<div class="container w-full max-w-6xl mx-auto bg-white bg-cover mt-8 rounded" th:style="'background:url(' + @{${article.photoUrl}} + '); height: 75vh;'"></div> +<div class="container w-full max-w-6xl mx-auto bg-white bg-cover mt-8 rounded" + th:style="'background:url(' + @{${article.photoUrl}} + '); height: 75vh;'"></div> <!--Container--> <div class="container max-w-5xl mx-auto -mt-32"> <div class="mx-0 sm:mx-6"> - <div class="bg-white w-full p-8 md:p-24 text-xl md:text-2xl text-gray-800 leading-normal" style="font-family:Georgia,serif;"> + <div class="bg-white w-full p-8 md:p-24 text-xl md:text-2xl text-gray-800 leading-normal" + style="font-family:Georgia,serif;"> <!--Post Content--> @@ -36,12 +37,17 @@ <!--Subscribe--> <div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center"> <h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2> - <h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts delivered right to your inbox</h3> + <h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts + delivered right to your inbox</h3> <div class="w-full text-center pt-4"> <form action="#"> <div class="max-w-sm mx-auto p-1 pr-0 flex flex-wrap items-center"> - <input type="email" placeholder="[email protected]" class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none"> - <button type="submit" class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button> + <input type="email" placeholder="[email protected]" + class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none"> + <button type="submit" + class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400"> + Subscribe + </button> </div> </form> </div> @@ -54,7 +60,9 @@ <img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author"> <div class="flex-1"> <p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p> - <p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p> + <p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a + class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" + href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p> </div> <div class="justify-end"> @@ -74,11 +82,13 @@ <svg class="progress-circle" width="100%" height="100%" viewBox="-1 -1 102 102"> <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/> </svg> - <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="cuurentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up" width="24" height="24" + viewBox="0 0 24 24" stroke-width="1.5" stroke="cuurentColor" fill="none" stroke-linecap="round" + stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> - <line x1="12" y1="5" x2="12" y2="19" /> - <line x1="18" y1="11" x2="12" y2="5" /> - <line x1="6" y1="11" x2="12" y2="5" /> + <line x1="12" y1="5" x2="12" y2="19"/> + <line x1="18" y1="11" x2="12" y2="5"/> + <line x1="6" y1="11" x2="12" y2="5"/> </svg> </button> |