fix: redesigned the apps page
This commit is contained in:
Shariq Ansari
parent
0f0cf07ff5
commit
b8263aaf55
2 changed files with 98 additions and 86 deletions
|
|
@ -1,37 +1,43 @@
|
|||
.container {
|
||||
max-width: 1000px;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.apps-navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 3rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.apps-wrapper {
|
||||
margin-top: 2.5rem;
|
||||
height: 100vh;
|
||||
max-width: 100vw;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: var(--bg-light-gray);
|
||||
}
|
||||
|
||||
.apps-container {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 60px);
|
||||
row-gap: 50px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--fg-color);
|
||||
padding: 45px 80px;
|
||||
border-radius: var(--border-radius-md);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.apps-title {
|
||||
margin: 0;
|
||||
.title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.apps {
|
||||
gap: 30px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -54,26 +60,60 @@
|
|||
}
|
||||
|
||||
.app-title {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--gray-900);
|
||||
color: var(--gray-900, #171717);
|
||||
font-size: var(--font-size-md);
|
||||
height: fit-content;
|
||||
letter-spacing: 0.24px;
|
||||
line-height: 115%;
|
||||
min-width: 30px;
|
||||
width: fit-content;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
border-radius: var(--border-radius-md);
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background-color: var(--bg-light-gray) !important;
|
||||
}
|
||||
|
||||
.logout-btn a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.apps-container {
|
||||
grid-template-columns: repeat(6, 60px);
|
||||
.apps {
|
||||
grid-template-columns: repeat(4, 1fr) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.apps-container {
|
||||
grid-template-columns: repeat(4, 60px);
|
||||
background: var(--fg-color);
|
||||
gap: 30px;
|
||||
padding: var(--padding-lg);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: var(--fg-color);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.apps {
|
||||
grid-template-columns: repeat(3, 1fr) !important;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 0.75rem;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +1,41 @@
|
|||
---
|
||||
base_template: 'templates/base.html'
|
||||
base_template: "templates/base.html"
|
||||
no_cache: 1
|
||||
---
|
||||
|
||||
{%- block navbar -%}
|
||||
|
||||
{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
|
||||
|
||||
<nav class="apps-navbar">
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<a class="navbar-brand" href="{{ url_prefix }}{{ home_page or "/" }}">
|
||||
{%- if brand_html -%}
|
||||
{{ brand_html }}
|
||||
{%- elif banner_image -%}
|
||||
<img src='{{ banner_image }}'>
|
||||
{%- else -%}
|
||||
<span>{{ (frappe.get_hooks("brand_html") or [_("Home")])[0] }}</span>
|
||||
{%- endif -%}
|
||||
</a>
|
||||
<div class="dropdown">
|
||||
<button class="btn" data-toggle="dropdown">
|
||||
<div class="d-flex align-items-center">
|
||||
{% set user = frappe.utils.get_user_info_for_avatar(frappe.session.user) %}
|
||||
{{ avatar(full_name=user.name, image=user.image) }}
|
||||
<span class="ml-1">{{ user.name }}</span>
|
||||
<span class="ml-2 d-flex">
|
||||
<svg class="es-icon icon-xs"><use href="#es-line-down"></use></svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<a class="dropdown-item" href="/app">
|
||||
{{ _('Switch to Admin') }}
|
||||
</a>
|
||||
<a class="dropdown-item" href="/api/method/web_logout">
|
||||
{{ _('Logout') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{%- endblock -%}
|
||||
|
||||
{%- block footer -%}
|
||||
{%- endblock -%}
|
||||
|
||||
{% block content %}
|
||||
{%- block navbar -%} {% from "frappe/templates/includes/avatar_macro.html" import avatar %} {%-
|
||||
endblock -%} {%- block footer -%} {%- endblock -%} {% block content %}
|
||||
<div class="container">
|
||||
<div class="apps-wrapper">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h2 class="apps-title">{{ _("Apps") }}</h2>
|
||||
<a class="btn btn-default" href="/me">{{ _('My Account') }}</a>
|
||||
</div>
|
||||
<div class="apps-container">
|
||||
<div class="apps-container">
|
||||
<div class="title">{{ _('Select the app to continue') }}</div>
|
||||
{% set appsCount = apps|length if apps|length <= 6 else 6 %}
|
||||
<div class="apps" style="grid-template-columns: repeat({{ appsCount }}, 1fr);">
|
||||
{% for app in apps %}
|
||||
<a href="{{ app.route }}" class="app-icon">
|
||||
<img class="app-logo" src="{{ app.logo }}" />
|
||||
<div class="app-title">
|
||||
{{ app.title }}
|
||||
</div>
|
||||
<div class="app-title">{{ app.title }}</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a href="/api/method/web_logout" class="logout-btn btn btn-default">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-log-out"
|
||||
>
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||||
<polyline points="16 17 21 12 16 7" />
|
||||
<line x1="21" x2="9" y1="12" y2="12" />
|
||||
</svg>
|
||||
<span> {{ _('Logout') }} </span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue