Skip to content

Commit

Permalink
some more layout refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrmegatelo
mrmegatelo committed Dec 6, 2024
1 parent 1c8e6d7 commit 04f2f67
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 66 deletions.
11 changes: 9 additions & 2 deletions feed/static/feed/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ a:hover {

.root-container {
display: grid;
grid-template-columns: 300px 500px minmax(500px, 1fr);
grid-template-columns: 300px minmax(1000px, 1fr);
height: 100vh;
}

Expand All @@ -201,6 +201,13 @@ a:hover {
.main {
--side-padding: 0;
--vertical-padding: 0;
display: grid;
grid-template-columns: 500px minmax(500px, 1fr);
}

.list {
--side-padding: 0;
--vertical-padding: 0;
}


Expand Down Expand Up @@ -1135,7 +1142,7 @@ a:hover {
}

.feed-detail__logo {
opacity: 0.05;
opacity: 0.05;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion feed/templates/blocks/page-heading.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<header class="page-header spread">
<h1 class="heading">{{ title }}</h1>
<h2 class="heading">{{ title }}</h2>
</header>
84 changes: 44 additions & 40 deletions feed/templates/feed/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,46 +73,50 @@ <h3 class="heading">{% translate 'Feeds' noop %}:</h3>
{% endblock %}

{% block main %}
<header class="feed-header">
<div id="feed-description"
class="feed-description"
>
</div>
<div class="feed-list-filters">
<h4 class="heading">{% translate 'Hide' noop %}:</h4>
<form id="feed-filters"
class="button-group"
method="post"
hx-trigger="change"
hx-target="this"
hx-post="{% url 'api_feed_filters' %}"
<section id="feed-list-section" class="section list">
<header class="feed-header">
<div id="feed-description"
class="feed-description"
>
{% include 'blocks/feed/filters.html' %}
</form>
<a class="button button--xs button--ghost" href="{% url 'feed_index' %}">
{% translate 'Reset filters' noop %}
</a>
</div>
</header>
{% block feed_list %}{% endblock %}
{% endblock %}
</div>
<div class="feed-list-filters">
<h4 class="heading">{% translate 'Hide' noop %}:</h4>
<form id="feed-filters"
class="button-group"
method="post"
hx-trigger="change"
hx-target="this"
hx-post="{% url 'api_feed_filters' %}"
>
{% include 'blocks/feed/filters.html' %}
</form>
<a class="button button--xs button--ghost" href="{% url 'feed_index' %}">
{% translate 'Reset filters' noop %}
</a>
</div>
</header>
{% block feed_list %}{% endblock %}
</section>
<section id="detail-section" class="section">

{% block detail %}
{% if feed_item_pk %}
<article id="feed-detail"
class="feed-detail"
hx-trigger="load"
hx-get="{% url 'api_feed_detail' pk=feed_item_pk %}"
>
{% include 'blocks/feed/loader.html' %}
</article>
{% else %}
<article id="feed-detail" class="feed-detail">
<img src="{% static 'feed/img/logo_compact.svg' %}"
class="feed-detail__logo"
alt="thewalter.app"
width="120"
height="120"/>
</article>
{% endif %}
{% block detail %}
{% if feed_item_pk %}
<article id="feed-detail"
class="feed-detail"
hx-trigger="load"
hx-get="{% url 'api_feed_detail' pk=feed_item_pk %}"
>
{% include 'blocks/feed/loader.html' %}
</article>
{% else %}
<article id="feed-detail" class="feed-detail">
<img src="{% static 'feed/img/logo_compact.svg' %}"
class="feed-detail__logo"
alt="thewalter.app"
width="120"
height="120"/>
</article>
{% endif %}
{% endblock %}
</section>
{% endblock %}
7 changes: 2 additions & 5 deletions feed/templates/layouts/with_sidebar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,8 @@
</small>
</footer>
</aside>
<section id="feed-list-section" class="section main">
<main class="section main">
{% block main %}{% endblock %}
</section>
<section id="detail-section" class="section">
{% block detail %}{% endblock %}
</section>
</main>
</main>
{% endblock %}
39 changes: 21 additions & 18 deletions feed/templates/profile/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
{% extends 'base.html' %}
{% extends 'layouts/with_sidebar.html' %}
{% load i18n %}
{% block content %}
{% block sidebar %}
{% url 'profile_edit' as profile_edit_url %}
{% translate 'Edit profile' noop as profile_edit_text %}
{% url 'password_change' as change_password_url %}
{% translate 'Change password' noop as change_password_text %}
<div class="content content-inner">
<div class="sidebar-block">
{% include 'blocks/page-heading.html' %}
<aside class="cols-3 cols-mobile-12">
<nav>
<ul class="nav-list vertical">
<li>
{% include 'blocks/header/nav-link.html' with url=profile_edit_url text=profile_edit_text %}
</li>
<li>
{% include 'blocks/header/nav-link.html' with url=change_password_url text=change_password_text %}
</li>
<li>
{% include 'blocks/logout.html' %}
</li>
</ul>
</nav>
</aside>
<nav>
<ul class="nav-list vertical">
<li>
{% include 'blocks/header/nav-link.html' with url=profile_edit_url text=profile_edit_text %}
</li>
<li>
{% include 'blocks/header/nav-link.html' with url=change_password_url text=change_password_text %}
</li>
<li>
{% include 'blocks/logout.html' %}
</li>
</ul>
</nav>
</div>
{% endblock %}
{% block main %}

<div class="content content-inner">
<div class="cols-4 cols-mobile-12 ">
{% block profile_content %}
{% endblock %}
Expand Down

0 comments on commit 04f2f67

Please sign in to comment.