Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/styling #83

Merged
merged 5 commits into from
Oct 5, 2024
Merged

Feat/styling #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c7383bf
add subsribe button to author page
naomi-eliasar Oct 5, 2024
e2d75b5
blogpost styling of buttons
naomi-eliasar Oct 5, 2024
f564084
take up more available space
naomi-eliasar Oct 5, 2024
ea5ccba
like and comment counter to top
naomi-eliasar Oct 5, 2024
62571b3
location in bloggrid
naomi-eliasar Oct 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/blog/templates/blog/author_index_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

{% block content %}
<div class="bg-green-700 py-8 flex-grow">
<div class="max-w-3xl md:max-w-5xl mx-auto p-4">
<div class="max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1800px] 2xl:max-w-full mx-auto p-4">
<div class="bg-white rounded-xl overflow-hidden drop-shadow">
<div class="p-8">
<h1 class="text-4xl font-bold mb-4 text-black">{{ page.title }}</h1>
Expand Down
10 changes: 7 additions & 3 deletions src/blog/templates/blog/author_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@

{% block content %}
<div class="bg-green-700 py-8 flex-grow">
<div class="flex flex-col gap-4 max-w-3xl md:max-w-5xl mx-auto p-4 bg-white rounded-xl overflow-hidden drop-shadow">
<h1 class="text-4xl font-bold text-black">{{ page.title }}</h1>

<div class="flex flex-col gap-4 max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1500px] mx-auto p-4 bg-white rounded-xl overflow-hidden drop-shadow">
<div class="flex flex-row justify-between items-center">
<h1 class="text-4xl font-bold text-black">{{ page.title }}</h1>
{% include "blog/includes/subscribe-author.html" with author=page.user user=user class="h-10 w-10" %}
</div>


<div class="flex flex-row gap-4 items-center">
<div>
{% user_avatar page.user %}
Expand Down
2 changes: 1 addition & 1 deletion src/blog/templates/blog/blog_index_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{% block content %}
{% include "blog/includes/timeline.html" with grouped_blog_posts=grouped_blog_posts itinerary=itinerary %}

<div class="bg-green-700 py-8 flex-grow">
<div class="bg-green-700 py-8 px-4 flex-grow">
{% include "blog/includes/filter-bar.html" %}
{% include "blog/includes/blogpost-grid.html" with blogposts=blogpages only %}
<div class="container mx-auto mt-8">
Expand Down
74 changes: 45 additions & 29 deletions src/blog/templates/blog/blog_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,36 +14,52 @@
{% else %}
<div class="h-full w-full bg-gray-300"></div>
{% endif %}
<div class="h-full absolute top-0 p-4 w-full flex flex-col justify-end bg-gradient-to-t to-transparent from-yellow-500">
<div class="flex items-end justify-between gap-4">
<div class="absolute top-0 right-0 flex flex-row z-10 items-center p-2 gap-2">
<div id="like-section" class="flex items-center">
<button
id="like-button"
data-post-id="{{ page.id }}"
class="flex items-center space-x-2 px-2 py-1 rounded-full transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600
{% if user in page.likes.all %}
bg-blue-600 text-white hover:bg-blue-700
{% else %}
bg-white text-gray-700 hover:bg-gray-300
{% endif %}
">
<div class="text-xl rounded-full -ml-1">😻</div>
<div id="like-count" class="font-bold block mt-0.5">{{ page.like_count }}</div>
</button>
</div>
{% include "blog/includes/subscribe-author.html" with author=page.author user=user class="h-10 w-10" %}
</div>
<div class="h-full absolute top-0 p-4 w-full flex flex-col justify-end gap-2 bg-gradient-to-t to-transparent from-yellow-500">

<div class="flex justify-between gap-4">
<div class="flex-col flex-1">
<h1 class="header-text-color flex-wrap font-bold text-xl md:text-4xl mb-0 line-clamp-3">{{ page.title }}</h1>
<div class="text-sm italic">{{ page.specific.date | date:"d-m-Y H:i" }}</div>
<div id="like-section" class="flex items-center space-x-2 pr-2 mt-2">
<button id="like-button" data-post-id="{{ page.id }}" class="flex items-center space-x-2 px-2 py-1 rounded-full transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
{% if user in page.likes.all %}
bg-red-500 text-white hover:bg-red-600
{% else %}
bg-white text-gray-700 hover:bg-gray-300
{% endif %}
">
<div class="text-xl rounded-full -ml-1 bg-white">😻</div>
<div id="like-count" class="font-bold block mt-0.5">{{ page.like_count }}</div>
</button>
<h1 class="header-text-color flex-wrap font-bold text-xl md:text-4xl line-clamp-3">{{ page.title }}</h1>
<div class="flex justify-between items-center">
<div class="flex flex-col">
<div class="text-sm italic">{{ page.specific.date | date:"d-m-Y H:i" }}</div>
<div class="text-sm">
{% for location in page.location.all %}
📍{{location.name}}
{% endfor %}
</div>
</div>
{% if page.author.author_page %}
<a href="{{ page.author.author_page.url }}" class="flex flex-row items-center gap-2 hover:underline">
<p class="text-sm italic hidden sm:block">{% post_user_display_name page %}</p>
{% post_user_avatar page 'w-10 h-10 rounded-full object-cover sm:w-12 sm:h-12' %}
</a>
{% else %}
<div class="flex flex-row items-center gap-4">
<p class="hidden sm:flex text-sm italic">{% post_user_display_name page %}</p>
{% post_user_avatar page %}
</div>
{% endif %}
</div>
</div>
{% if page.author.author_page %}
<a href="{{ page.author.author_page.url }}" class="flex flex-row items-center gap-2 hover:underline">
<p class="text-sm italic hidden sm:block">{% post_user_display_name page %}</p>
{% post_user_avatar page 'w-10 h-10 rounded-full object-cover sm:w-16 sm:h-16' %}
</a>
{% else %}
<div class="flex flex-row items-center gap-4">
<p class="hidden sm:flex text-sm italic">{% post_user_display_name page %}</p>
{% post_user_avatar page %}
</div>
{% endif %}
{% include "blog/includes/subscribe-author.html" with author=page.author user=user %}

</div>
{% if page.hero_text %}
<div class="flex ml-auto items-center gap-4">
Expand Down Expand Up @@ -121,9 +137,9 @@ <h1 class="header-text-color flex-wrap font-bold text-xl md:text-4xl mb-0 line-c
likeCount.textContent = data.like_count;
if (data.liked) {
likeButton.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-300');
likeButton.classList.add('bg-red-500', 'text-white', 'hover:bg-red-600');
likeButton.classList.add('bg-blue-600', 'text-white', 'hover:bg-blue-700');
} else {
likeButton.classList.remove('bg-red-500', 'text-white', 'hover:bg-red-600');
likeButton.classList.remove('bg-blue-600', 'text-white', 'hover:bg-blue-700');
likeButton.classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-300');
}
});
Expand Down
39 changes: 24 additions & 15 deletions src/blog/templates/blog/includes/blogpost-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% load i18n static wagtailcore_tags wagtailimages_tags custom_image_tags user_tags %}

<div class="max-w-3xl md:max-w-5xl w-full mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-4" id="grid">
<div class="max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1800px] 2xl:max-w-full w-full mx-auto grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4" id="grid">
{% for post in blogposts %}
<a
href="{% pageurl post %}"
Expand All @@ -16,26 +16,35 @@
{% else %}
<div class="h-80 bg-gray-300"></div>
{% endif %}
<div class="absolute top-0 right-0 p-2">
<div class="flex items-center ml-auto bg-yellow-500 bg-opacity-60 rounded-full px-1">
<span class="text-xl">😻</span>
<span class="pr-1 mt-0.5">{{ post.specific.like_count }}</span>
<span class="text-xl">💬</span>
<span class="pr-1">{{ post.specific.comments.count }}</span>
</div>
</div>
<div class="h-full absolute top-0 p-4 w-full flex flex-col justify-end bg-gradient-to-t to-transparent from-yellow-500">
<h2 class="header-text-color font-bold text-4xl group-hover:underline hover:underline decoration-wavy mb-2 pb-2.5 line-clamp-2">{{ post.title }} </h2>
<div class="flex flex-col justify-between gap-2 text-sm">
<div class="flex flex-row items-center flex-wrap gap-2">
<div class="flex flex-row items-center gap-2">
{% post_user_avatar post 'w-8 h-8 rounded-full object-cover' %}
{{ post.specific.date | date:"d-m-Y H:i" }}
<div class="flex items-center space-x-1 ml-auto bg-white rounded-full px-1">
<span class="text-xl">😻</span>
<span class="font-bold pr-1 mt-0.5">{{ post.specific.like_count }}</span>
<span class="text-xl">💬</span>
<span class="font-bold pr-1">{{ post.specific.comments.count }}</span>
<div class="flex flex-row justify-between w-full">
<div>
{{ post.specific.date | date:"d-m-Y H:i" }}
</div>
<div>
{% for location in post.location.all %}
📍{{location.name}}
{% endfor %}
</div>
</div>
</div>
<div>
{% if post.specific.intro %}
<div class="line-clamp-2">{{ post.specific.intro }}</div>
{% else %}
{{ post.specific.body|richtext|slice:":500" }}
{% endif %}
</div>
{% if post.specific.intro %}
<div class="line-clamp-2">{{ post.specific.intro }}</div>
{% else %}
{{ post.specific.body|richtext|slice:":500" }}
{% endif %}
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/blog/templates/blog/includes/filter-bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% load wagtailcore_tags wagtailimages_tags user_tags %}

<div class="max-w-3xl md:max-w-5xl mx-auto drop-shadow-lg">
<div class="max-w-3xl md:max-w-5xl lg:max-w-7xl xl:max-w-[1800px] 2xl:max-w-full mx-auto drop-shadow-lg">

<div class="transition p-4 rounded-lg relative min-h-16">

Expand Down
11 changes: 10 additions & 1 deletion src/blog/templates/blog/includes/subscribe-author.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
<!-- Add this to your author_page.html template -->
{% if user.is_authenticated %}
<button id="subscribeButton" data-author-id="{{ author.id }}" title="{% if user in author.subscribers.all %}Unsubscribe{% else %}Subscribe{% endif %}" class="focus:outline-none bg-green-600 hover:bg-green-700 text-white block flex-0 w-10 h-10 sm:w-16 sm:h-16 rounded-full">
<button
id="subscribeButton"
data-author-id="{{ author.id }}"
title="{% if user in author.subscribers.all %}Unsubscribe{% else %}Subscribe{% endif %}"
class="
{% if class %}
{{class}} bg-green-600 hover:bg-green-700 text-white rounded-full
{% else %}
focus:outline-none bg-green-600 hover:bg-green-700 text-white block flex-0 w-10 h-10 sm:w-16 sm:h-16 rounded-full
{% endif %}">
{% if user in author.subscribers.all %}
🔕
{% else %}
Expand Down
Loading