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

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

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

Loading…
Cancel
Save