ourworld_web/www_tf_demo
20
0
Fork 0
Code Pull Requests Activity

fixed blog mobile view

Browse Source
This commit is contained in:
timurgordon 2022-02-25 17:48:37 +03:00
parent d81a90aacd
commit d351bbc3f1
8 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/layout.css
View File

@ -66,6 +66,10 @@ nav h4 a:active {
@apply border-0 text-black font-light; @apply border-0 text-black font-light;
} }
a h2 {
@apply text-black;
}
a { a {
@apply text-blue-600 font-semibold; @apply text-blue-600 font-semibold;
} }

2
templates/blog/blog.html
View File

@ -21,7 +21,7 @@ and a side nav for category and featured post navigation
{% include "partials/featuredBlog.html" %} {% include "partials/featuredBlog.html" %}
<div class="flex"> <div class="flex flex-col md:flex-row">
{% include "partials/blogPosts.html" %} {% include "partials/blogPosts.html" %}
{% include "partials/blogSidebar.html" %} {% include "partials/blogSidebar.html" %}
</div> </div>

3
templates/categories/single.html
View File

@ -4,10 +4,11 @@
<main class="pt-16"> <main class="pt-16">
<div class="flex"> <div class="flex flex-col md:flex-row">
{% include "partials/blogPosts.html" %} {% include "partials/blogPosts.html" %}
{% include "partials/blogSidebar.html" %} {% include "partials/blogSidebar.html" %}
</div> </div>
</main> </main>
{% endblock content %} {% endblock content %}

4
templates/partials/blogPosts.html
View File

@ -1,6 +1,6 @@
<div class="font-sans text-center px-0 w-full md:w-2/3 lg:w-2/3 mx-auto"> <div class="font-sans text-center px-0 md:w-full md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
<h1 <h1
class="tracking-tight pt-12 lg:pt-24 2xl:pt-32 text-5xl text-left text-5xl fw-500 leading-snug font-normal mb-10" class="tracking-tight pt-12 lg:pt-24 2xl:pt-32 text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
> >
{% set path_array = current_path | split(pat="/") %} {% set path_array = current_path | split(pat="/") %}
{% set taxonomy = path_array[1] %} {% set taxonomy = path_array[1] %}

18
templates/partials/blogSidebar.html
View File

@ -1,14 +1,24 @@
<script>
<div clas="flex flex-col"> window.onload = function(){
<div class="lg:pt-24 flex flex-col mb-12 mr-24"> let activeCategory = window.location.pathname.split("/")[2]
if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
else { activeLink = document.getElementById(activeCategory)}
activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
}
</script>
<div class="mx-8 md:mx-4 flex flex-col">
<div class="lg:pt-24 flex flex-col mb-12 md:mr-24">
<h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER POSTS BY</h4> <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER POSTS BY</h4>
<a class="mb-3" href="/blog">All</a> <a id="all" class="mb-3 text-black font-normal" href="/blog">All</a>
{% set taxonomy = get_taxonomy(kind="categories") %} {% set taxonomy = get_taxonomy(kind="categories") %}
{% set categories = taxonomy.items %} {% set categories = taxonomy.items %}
{% for category in categories %} {% for category in categories %}
{% set path = category.name | slugify %} {% set path = category.name | slugify %}
{% set fullpath = "/categories/" ~ path %} {% set fullpath = "/categories/" ~ path %}
<a class="mb-3" href={{fullpath}}> {{category.name}} </a> <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{category.name}} </a>
{% endfor %} {% endfor %}
</div> </div>

12
templates/partials/featuredBlog.html
View File

@ -1,12 +1,12 @@
<body> <body>
<div class="relative mt-12 lg:mt-16 lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> <div class="relative mt-12 lg:mt-16 grid grid-cols-2 gap-8 items-center">
<div class="relative mx-24"> <div class="relative xl:mx-24 lg:mx-20 md:mx-16 sm:mx-12 mx-8 w-full md:w-auto">
<h3 class="text-base not-italic leading-6 text-gray-600">FEATURED POST</h3> <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED POST</h3>
<a href={{featured.permalink}} class=""> <a href={{featured.permalink}} class="">
<h1 class="text-5xl fw-500 leading-snug font-normal mb-10"> <h2 class="mt-8 text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">
{{ featured.title }} {{ featured.title }}
</h1> </h2>
</a> </a>
<h4 class="text-sm not-italic font-light leading-6 text-gray-600"> <h4 class="text-sm not-italic font-light leading-6 text-gray-600">
@ -16,8 +16,8 @@
</div> </div>
<div class="mt-10 -mx-4 relative lg:mt-0 max-w-full"> <div class="-mx-4 relative lg:mt-0 max-w-full">
<img class="relative mx-auto max-w-full max-h-80" src=/{{featured.extra.imgPath}} alt="" /> <img class="relative mx-auto w-7/12 md:w-auto md:max-w-full max-h-80" src=/{{featured.extra.imgPath}} alt="" />
</div> </div>
</div> </div>

2
templates/partials/header.html
View File

@ -64,9 +64,7 @@
window.onload = function(){ window.onload = function(){
let elements = document.getElementsByTagName("button"); let elements = document.getElementsByTagName("button");
let buttons = [...elements] let buttons = [...elements]
console.log("logg:", buttons)
buttons.forEach((button) => { buttons.forEach((button) => {
console.log("logg:", button)
button.addEventListener( 'click', function() { handleClick(button) }); button.addEventListener( 'click', function() { handleClick(button) });
}) })

2
templates/partials/postCard.html
View File

@ -1,6 +1,6 @@
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden"> <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src=/{{post.extra.imgPath}} alt="" /> <img class="h-48 w-full mx-auto object-cover" src=/{{post.extra.imgPath}} alt="" />
</div> </div>
<div class="flex-1 bg-white p-6 flex flex-col justify-between"> <div class="flex-1 bg-white p-6 flex flex-col justify-between">
<div class="flex-1"> <div class="flex-1">