blindxfish/devplacepy
1
0
Fork 0
forked from retoor/devplacepy
Code Pull Requests Activity

feat: add responsive layout with media queries for mobile and tablet breakpoints

Browse Source 
Implement responsive design adjustments across admin, auth, base, feed, gists, landing, messages, news, notifications, post, profile, projects, and services CSS files with collapsible sidebar, touch-friendly navigation, and reordered content sections for screen widths below 768px and 480px. Add hamburger menu toggle, mobile overlay panel, and back button for messages view in Application.js.
This commit is contained in:
retoor
2026-05-15 23:34:45 +00:00
parent e304119d76
commit 1b4a60619e
16 changed files with 715 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devplacepy/templates/base.html
+38
View File
@@ -82,10 +82,48 @@
<a href="/auth/login" class="topnav-link"><span class="icon">🔑</span>Login</a>
<a href="/auth/signup" class="btn btn-primary btn-sm"><span class="icon">✨</span>Sign Up</a>
{% endif %}
<button class="topnav-hamburger" id="hamburger-btn" aria-label="Toggle menu">&#x2630;</button>
</div>
</div>
</nav>
<div class="topnav-mobile-overlay" id="mobile-overlay"></div>
<div class="topnav-mobile-panel" id="mobile-panel">
<nav class="topnav-mobile-links">
<a href="/" class="topnav-mobile-link {% if request.url.path == '/' %}active{% endif %}"><span class="icon">🏠</span> Home</a>
<a href="/feed" class="topnav-mobile-link {% if request.url.path == '/feed' %}active{% endif %}"><span class="icon">📝</span> Posts</a>
<a href="/news" class="topnav-mobile-link {% if 'news' in request.url.path %}active{% endif %}"><span class="icon">📰</span> News</a>
<a href="/gists" class="topnav-mobile-link {% if 'gists' in request.url.path %}active{% endif %}"><span class="icon">📄</span> Gists</a>
<a href="/projects" class="topnav-mobile-link {% if 'projects' in request.url.path %}active{% endif %}"><span class="icon">🚀</span> Projects</a>
{% if user %}
<a href="/messages" class="topnav-mobile-link {% if 'messages' in request.url.path %}active{% endif %}"><span class="icon">✉️</span> Messages</a>
<a href="/notifications" class="topnav-mobile-link {% if 'notifications' in request.url.path %}active{% endif %}"><span class="icon">&#x1F514;</span> Notifications</a>
{% if user.get('role') == 'Admin' %}
<div class="topnav-mobile-divider"></div>
<div class="topnav-mobile-section-label">Admin</div>
<a href="/admin/users" class="topnav-mobile-link {% if 'admin/users' in request.url.path %}active{% endif %}"><span class="icon">&#x1F465;</span> Users</a>
<a href="/admin/news" class="topnav-mobile-link {% if 'admin/news' in request.url.path %}active{% endif %}"><span class="icon">&#x1F4F0;</span> News</a>
<a href="/admin/services" class="topnav-mobile-link {% if 'admin/services' in request.url.path %}active{% endif %}"><span class="icon">&#x2699;&#xFE0F;</span> Services</a>
<a href="/admin/settings" class="topnav-mobile-link {% if 'admin/settings' in request.url.path %}active{% endif %}"><span class="icon">&#x1F527;</span> Settings</a>
{% endif %}
<div class="topnav-mobile-divider"></div>
<div class="topnav-mobile-user">
<img src="{{ avatar_url('multiavatar', user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ user['username'] }}" loading="lazy">
<div class="topnav-mobile-user-info">
<span>{{ user['username'] }}</span>
<span class="topnav-mobile-user-role">{{ user.get('role', 'Member') }}</span>
</div>
</div>
<a href="/profile/{{ user['username'] }}" class="topnav-mobile-link"><span class="icon">&#x1F464;</span> Profile</a>
<a href="/auth/logout" class="topnav-mobile-link"><span class="icon">&#x1F6AA;</span> Logout</a>
{% else %}
<div class="topnav-mobile-divider"></div>
<a href="/auth/login" class="topnav-mobile-link"><span class="icon">&#x1F511;</span> Login</a>
<a href="/auth/signup" class="topnav-mobile-link"><span class="icon">&#x2728;</span> Sign Up</a>
{% endif %}
</nav>
</div>
{% if breadcrumbs and breadcrumbs|length > 1 %}
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>