make .flex-page .left-menu more responsive

master
Alice 5 years ago
parent 349b4abbf2
commit d7ea7eb37f

@ -342,26 +342,6 @@ table.admin-list tbody tr:last-child td { border-bottom: 0; }
table.admin-list tbody tr:nth-child(even) { background: #eee; }
@media screen and (max-width: 64em) {
.content {
padding: 0em 1em 3em 1em;
}
header{
height: 120px;
}
header nav{
float: left;
width: 100%;
}
header nav ul{
text-align: center;
padding-top: 0;
}
}
/***************************************************/
/********************* Forms / Buttons */
@ -899,3 +879,53 @@ div.ticket-message-private {
@media screen and (max-width: 64em) {
.content {
padding: 0em 1em 3em 1em;
}
header{
height: 120px;
}
header nav{
float: left;
width: 100%;
}
header nav ul{
text-align: center;
padding-top: 0;
}
.flex-page {
flex-direction: column;
}
.flex-page .left-menu {
width: 100%;
display: flex;
flex-direction: row;
}
.flex-page .left-menu ul {
padding: 1em 0.25em;
}
.install-guides {
padding-left: 0;
}
.install-guides li {
display: block;
padding: 0.25em 1.5em;
width: auto;
text-align: left;
}
.install-guides li a {
line-height: 1em;
}
.install-guides li i {
display: inline-block;
font-size: 1.4em;
width: 1.5em;
}
}

@ -6,29 +6,31 @@
{% block content %}
<div class="flex-page">
<div class="left-menu">
<p class="menu-title">{% trans 'Account' %}</p>
<ul>
<li><a href="/account/">
<i class="fa fa-dashboard fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Overview' %}
</a></li>
<li><a href="/account/config">
<i class="fa fa-download fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Config Download' %}
</a></li>
<li><a href="/account/settings">
<i class="fa fa-gears fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Settings' %}
</a></li>
<li><a href="/payments">
<i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Payments' %}
</a></li>
<li><a href="/account/logs">
<i class="fa fa-archive fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Logs' %}
</a></li>
</ul>
<div class="submenu">
<p class="menu-title">{% trans 'Account' %}</p>
<ul>
<li><a href="/account/">
<i class="fa fa-dashboard fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Overview' %}
</a></li>
<li><a href="/account/config">
<i class="fa fa-download fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Config Download' %}
</a></li>
<li><a href="/account/settings">
<i class="fa fa-gears fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Settings' %}
</a></li>
<li><a href="/payments">
<i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Payments' %}
</a></li>
<li><a href="/account/logs">
<i class="fa fa-archive fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Logs' %}
</a></li>
</ul>
</div>
</div>
<div class="content-box">
{% block account_content %}{% endblock %}

@ -5,63 +5,69 @@
{% block content %}
<div class="flex-page">
<div class="left-menu">
<p class="menu-title">{% trans 'Help' %}</p>
<ul>
<li class="pure-menu-item">
<a href="{% url 'page' 'help' %}">
<i class="fa fa-life-ring fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Guides' %}
</a>
</li>
<li class="pure-menu-item">
<a href="{% url 'kb:kb_index' %}">
<i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Knowledge Base' %}
</a>
</li>
<li class="pure-menu-item">
<a href="/page/self-diagnosis">
<i class="fa fa-wrench fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Self-Diagnosis' %}
</a>
</li>
<li><a href="/page/privacy">
<i class="fa fa-shield fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Privacy' %}
</a></li>
</ul>
<div class="submenu">
<p class="menu-title">{% trans 'Help' %}</p>
<ul>
<li class="pure-menu-item">
<a href="{% url 'page' 'help' %}">
<i class="fa fa-life-ring fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Guides' %}
</a>
</li>
<li class="pure-menu-item">
<a href="{% url 'kb:kb_index' %}">
<i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Knowledge Base' %}
</a>
</li>
<li class="pure-menu-item">
<a href="/page/self-diagnosis">
<i class="fa fa-wrench fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Self-Diagnosis' %}
</a>
</li>
<li><a href="/page/privacy">
<i class="fa fa-shield fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Privacy' %}
</a></li>
</ul>
</div>
<p class="menu-title">{% trans 'Installation' %}</p>
<ul>
<li><a href="/page/install-android">
<i class="fa fa-android fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Android' %}
</a></li>
<li><a href="/page/install-windows">
<i class="fa fa-windows fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Windows' %}
</a></li>
<li><a href="/page/install-gnulinux">
<i class="fa fa-linux fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'GNU/Linux' %}
</a></li>
<li><a href="/page/install-osx">
<i class="fa fa-apple fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'OS X' %}
</a></li>
<li><a href="/page/install-chromeos">
<i class="fa fa-chrome fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Chrome OS' %}
</a></li>
</ul>
<div class="submenu">
<p class="menu-title">{% trans 'Installation' %}</p>
<ul>
<li><a href="/page/install-android">
<i class="fa fa-android fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Android' %}
</a></li>
<li><a href="/page/install-windows">
<i class="fa fa-windows fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Windows' %}
</a></li>
<li><a href="/page/install-gnulinux">
<i class="fa fa-linux fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'GNU/Linux' %}
</a></li>
<li><a href="/page/install-osx">
<i class="fa fa-apple fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'OS X' %}
</a></li>
<li><a href="/page/install-chromeos">
<i class="fa fa-chrome fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Chrome OS' %}
</a></li>
</ul>
</div>
<p class="menu-title">{% trans 'Advanced' %}</p>
<ul>
<li><a href="/page/advanced-tor">
<i class="fa fa-user-secret fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Tor' %}
</a></li>
</ul>
<div class="submenu">
<p class="menu-title">{% trans 'Advanced' %}</p>
<ul>
<li><a href="/page/advanced-tor">
<i class="fa fa-user-secret fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Tor' %}
</a></li>
</ul>
</div>
</div>
<div class="content-box">
{% if title %}

@ -5,46 +5,50 @@
{% block content %}
<div class="flex-page">
<div class="left-menu">
<p class="menu-title">{% trans 'Support' %}</p>
<ul>
<li class="pure-menu-item">
<a href="{% url 'tickets:new' %}">
<i class="fa fa-plus-square fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'New Ticket' %}
</a>
</li>
<li class="pure-menu-item">
<a href="/tickets/open">
<i class="fa fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Open Tickets' %}
{% if open_n > 0 %}({{open_n}}){% endif %}
</a>
</li>
<li class="pure-menu-item">
<a href="/tickets/closed">
<i class="fa fa-folder fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Closed Tickets' %}
</a>
</li>
</ul>
{% if perms.tickets.view_any_ticket %}
<p class="menu-title">{% trans 'Staff' %}</p>
<div class="submenu">
<p class="menu-title">{% trans 'Support' %}</p>
<ul>
<li class="pure-menu-item">
<a href="/tickets/all_open">
<i class="fa fa-fire-extinguisher fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'All Open' %}
{% if all_open_n > 0 %}({{all_open_n}}){% endif %}
<a href="{% url 'tickets:new' %}">
<i class="fa fa-plus-square fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'New Ticket' %}
</a>
</li>
<li class="pure-menu-item">
<a href="/tickets/all_closed">
<i class="fa fa-archive fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'All Closed' %}
<a href="/tickets/open">
<i class="fa fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Open Tickets' %}
{% if open_n > 0 %}({{open_n}}){% endif %}
</a>
</li>
<li class="pure-menu-item">
<a href="/tickets/closed">
<i class="fa fa-folder fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'Closed Tickets' %}
</a>
</li>
</ul>
{% endif %}
</div>
<div class="submenu">
{% if perms.tickets.view_any_ticket %}
<p class="menu-title">{% trans 'Staff' %}</p>
<ul>
<li class="pure-menu-item">
<a href="/tickets/all_open">
<i class="fa fa-fire-extinguisher fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'All Open' %}
{% if all_open_n > 0 %}({{all_open_n}}){% endif %}
</a>
</li>
<li class="pure-menu-item">
<a href="/tickets/all_closed">
<i class="fa fa-archive fa-fw" aria-hidden="true"></i>&nbsp;
{% trans 'All Closed' %}
</a>
</li>
</ul>
{% endif %}
</div>
</div>
<div class="content-box">
{% block tickets_content %}{% endblock %}

Loading…
Cancel
Save