timw4mail/collection-crud
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Reformat the header into a mega dropdown

Browse Source
This commit is contained in:
Timothy Warren 2022-10-27 11:54:47 -04:00
parent 27f5cd792f
commit 9af61e0c7e
2 changed files with 130 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/css/app.css
View File

@ -64,3 +64,39 @@ textarea {
text-decoration: line-through; text-decoration: line-through;
color: #000; color: #000;
} }
/* ----------------------------------------------------------------------------
Mega Menu
---------------------------------------------------------------------------- */
.mega-menu .dropdown-pane {
width: 100%;
margin: 0 auto !important;
left: 0% !important;
right: 0% !important;
}
.mega-menu .menu {
background: none;
}
.mega-menu > a {
position: relative;
}
.mega-menu > a::after {
display: block;
width: 0;
height: 0;
border: inset 6px;
content: '';
border-bottom-width: 0;
border-top-style: solid;
border-color: #1779ba transparent transparent;
/* margin-left: calc(100% + .25rem);*/
position:absolute;
top: 45%;
right: 0;
}

65
templates/header.html.twig
View File

@ -1,8 +1,15 @@
<h1>Collection CRUD</h1>
<div class="top-bar"> <div class="top-bar">
<div class="top-bar-left"> <div class="top-bar-left">
<ul class=" dropdown menu" data-dropdown-menu>
<li class="menu-text">Collection CRUD</li>
<li class="mega-menu">
<a data-toggle="meta-menu" href="#">Meta</a>
<div class="dropdown-pane bottom" id="meta-menu" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:11">
<div class="row expanded">
<div class="column">
<ul class="menu"> <ul class="menu">
<li class="menu-text">Meta</li> <li class="menu-text">Computer Related</li>
<li class="{{ route starts with 'brand_' ? 'is-active' }}"> <li class="{{ route starts with 'brand_' ? 'is-active' }}">
<a href="{{ path('brand_index') }}">🕺 Brands</a> <a href="{{ path('brand_index') }}">🕺 Brands</a>
</li> </li>
@ -19,8 +26,29 @@
<a href="#">🐏 Ram Types</a> <a href="#">🐏 Ram Types</a>
</li> </li>
</ul> </ul>
</div>
<div class="column">
<ul class="menu"> <ul class="menu">
<li class="menu-text">Photography</li> <li class="menu-text">Photography Related</li>
<li class="{{ route starts with 'film_' ? 'is-active' }}">
<a href="{{ path('film_index') }}">🎞️ Film</a>
</li>
<li class="{{ route starts with 'camera-type_' ? 'is-active' }}">
<a href="{{ path('camera-type_index') }}">🎥 Camera Types</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="mega-menu">
<a data-toggle="photo-menu" href="#">Photography</a>
<div class="dropdown-pane bottom" id="photo-menu" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:11">
<div class="row expanded">
<div class="column">
<ul class="menu">
<li class="menu-text">Currently Owned</li>
<li class="{{ route starts with 'camera_' ? 'is-active' }}"> <li class="{{ route starts with 'camera_' ? 'is-active' }}">
<a href="{{ path('camera_index') }}">📷 Cameras</a> <a href="{{ path('camera_index') }}">📷 Cameras</a>
</li> </li>
@ -30,9 +58,10 @@
<li class="{{ route starts with 'lens_' ? 'is-active' }}"> <li class="{{ route starts with 'lens_' ? 'is-active' }}">
<a href="{{ path('lens_index') }}">🔎 Lenses</a> <a href="{{ path('lens_index') }}">🔎 Lenses</a>
</li> </li>
</ul>
<li hidden> </div>
<ul> <div class="column">
<ul class="menu">
<li class="menu-text">Previously Owned</li> <li class="menu-text">Previously Owned</li>
<li class="{{ route starts with 'previously-owned-camera' ? 'is-active' }}"> <li class="{{ route starts with 'previously-owned-camera' ? 'is-active' }}">
<a href="{{ path('previously-owned-camera_index') }}">📷 Cameras</a> <a href="{{ path('previously-owned-camera_index') }}">📷 Cameras</a>
@ -44,23 +73,21 @@
<a href="{{ path('previously-owned-lens_index') }}">🔎 Lenses</a> <a href="{{ path('previously-owned-lens_index') }}">🔎 Lenses</a>
</li> </li>
</ul> </ul>
</div>
</div>
</div>
</li> </li>
<li class="mega-menu">
<a data-toggle="computer-menu" href="#">Computer Related</a>
<li class="menu-text">Meta</li> <div class="dropdown-pane bottom" id="computer-menu" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:11">
<li class="{{ route starts with 'film_' ? 'is-active' }}"> <div class="row expanded">
<a href="{{ path('film_index') }}">🎞️ Film</a>
</li>
<li class="{{ route starts with 'camera-type_' ? 'is-active' }}">
<a href="{{ path('camera-type_index') }}">🎥 Camera Types</a>
</li>
</ul>
<ul class="menu"> <ul class="menu">
<li class="menu-text">Computer Components</li>
<li class="{{ route starts with 'gpu_' ? 'is-active' }}"> <li class="{{ route starts with 'gpu_' ? 'is-active' }}">
<a href="{{ path('gpu_index') }}">🎮 Graphics Cards</a> <a href="{{ path('gpu_index') }}">🎮 Graphics Cards</a>
</li> </li>
<li class="not-implemented {{ route starts with 'cpu_' ? 'is-active' }}"> <li class="{{ route starts with 'app_cpu_' ? 'is-active' }}">
<a href="#">🧠 CPUs</a> <a href="{{ path('app_cpu_index') }}">🧠 CPUs</a>
</li> </li>
<li class="{{ route starts with 'fpu_' ? 'is-active' }}"> <li class="{{ route starts with 'fpu_' ? 'is-active' }}">
<a href="{{ path('fpu_index') }}">🧮 FPUs</a> <a href="{{ path('fpu_index') }}">🧮 FPUs</a>
@ -71,6 +98,10 @@
</ul> </ul>
</div> </div>
</div> </div>
</li>
</ul>
</div>
</div>
{% for message in app.flashes('notice') %} {% for message in app.flashes('notice') %}
<div class="small callout flash-notice"> <div class="small callout flash-notice">