pingu_98/cara
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated headers submenu and and mobile responsiveness

Browse source
This commit is contained in:
Luis Aleixo 2022-09-16 11:19:53 +02:00
parent e13c96faa2
commit d63a6f2cf1
3 changed files with 27 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
caimira/apps/static/css/style.css
View file

@ -179,6 +179,13 @@ body {
height: 4em;
}
.submenu-division {
border-right: 3px white solid;
width: 25px;
height: 30px;
margin-right: 10px;
}
/*===== FIXED BACKGROUND IMG =====*/
.fixed-background {
@ -325,6 +332,9 @@ footer img {
.h1-text {
font-size: 1.5rem;
}
.mobile-sub-section {
width: 100%!important;
}
}
/* Devices under 768px (md) */

33
caimira/apps/templates/base/index.html.j2
View file

@ -30,41 +30,38 @@
</div>
<div id="apps_section" class="d-none">
<div class="d-flex flex-row" >
{# <h2 class="paragraph-title pr-4 align-self-center">Apps:</h2>
<br> #}
<div class="pr-3"><a href="{{ calculator_prefix }}" role="button" class="btn btn-lg btn-outline-primary"><div class="d-flex d-row"><i class="icon-calculator"></i><span class="pl-2">Calculator</div></a></div>
<br>
<div class="expert_app_button"><a href="/expert-app" role="button" class="btn btn-lg btn-outline-secondary"><div class="d-flex d-row"><i class="icon-expert"></i><span class="pl-2">Expert (beta)</div></a></div>
</div>
{# <hr width="95%"> #}
<br>
</div>
</div>
<div class="align-self-center">
<img src="static/images/CAiMIRA_1_Vs3_Colour.jpg" class="caimira_home_image">
</div>
</div>
<br>
<div class="d-flex justify-content-between">
<div class="w-25"><hr width="95%">
<div class="d-flex m-3 align-items-center"><i class="bi bi-window" style="font-size: 25px"></i><div><p class="paragraph-title ml-2">Applications</p></div></div>
<div class="m-3">CAiMIRA is composed of two applications, the <a href="{{ calculator_prefix }}">Calculator</a> and the <a href="/expert-app">Expert App</a>.</div>
<div class="split">
<div class="w-25 mobile-sub-section"><hr width="95%">
<div class="d-flex m-2 align-items-center"><i class="bi bi-window" style="font-size: 25px"></i><div><p class="paragraph-title ml-2">Applications</p></div></div>
<div class="m-2">CAiMIRA is composed of two applications, the <a href="{{ calculator_prefix }}">Calculator</a> and the <a href="/expert-app">Expert App</a>.</div>
</div>
<div class="w-25"><hr width="95%">
<div class="d-flex m-3 align-items-center"><i class="bi bi-info-square-fill" style="font-size: 25px"></i><div><p class="paragraph-title ml-2">About</p></div></div>
<div class="m-3"><a href="/about">About</a> page for details on methodology, assumptions and limitations of CAiMIRA.</div>
<div class="w-25 mobile-sub-section"><hr width="95%">
<div class="d-flex m-2 align-items-center"><i class="bi bi-info-square-fill" style="font-size: 25px"></i><div><p class="paragraph-title ml-2">About</p></div></div>
<div class="m-2"><a href="/about">About</a> page for details on methodology, assumptions and limitations of CAiMIRA.</div>
</div>
<div class="w-25"><hr width="95%">
<div class="d-flex m-3 align-items-center"><i class="bi bi-journal-text" style="font-size: 25px"></i><div><p class="paragraph-title ml-2">Documentation</p></div></div>
<div class="m-3">Documentation for CAiMIRA's applications, available online.<br><a href="https://caimira.readthedocs.io/">caimira.readthedocs.io/</a></div>
<div class="w-25 mobile-sub-section"><hr width="95%">
<div class="d-flex m-2 align-items-center"><i class="bi bi-journal-text" style="font-size: 25px"></i><div><p class="paragraph-title ml-2">Documentation</p></div></div>
<div class="m-2">Documentation for CAiMIRA's applications, available online.<br><a href="https://caimira.readthedocs.io/">caimira.readthedocs.io/</a></div>
</div>
<div class="w-25"><hr width="95%">
<div class="d-flex m-3 align-items-center"><i class="bi bi-git" style="font-size: 25px"></i><div><p class="paragraph-title ml-2">GitLab</p></div></div>
<div class="m-3">Official CAiMIRA's GitLab repository.<br><a href="https://gitlab.cern.ch/cara/cara">gitlab.cern.ch/cara/cara</a></div>
<div class="w-25 mobile-sub-section"><hr width="95%">
<div class="d-flex m-2 align-items-center"><i class="bi bi-git" style="font-size: 25px"></i><div><p class="paragraph-title ml-2">GitLab</p></div></div>
<div class="m-2">Official CAiMIRA's GitLab repository.<br><a href="https://gitlab.cern.ch/cara/cara">gitlab.cern.ch/cara/cara</a></div>
</div>
</div>
</div>
<br>
{% block caimira_at_cern %}

4
caimira/apps/templates/base/layout.html.j2
View file

@ -42,9 +42,9 @@
<a class="nav-link dropdown-toggle {{ "header-navbar nav-link active" if "calculator/" in active_page else "header-navbar nav-link" }}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Apps
</a>
<ul class="dropdown-menu dropwown-navbar-colors text-right" style="min-width: 12rem;" aria-labelledby="navbarDropdown">
<ul class="dropdown-menu dropwown-navbar-colors" style="min-width: 12rem;" aria-labelledby="navbarDropdown">
<li><a href="{{ calculator_prefix }}" class="{{ "header-navbar nav-link active" if "calculator/" == active_page else "header-navbar nav-link" }}">Calculator</a></li>
<li><a href="{{ calculator_prefix }}/user-guide" style="margin-left: 2rem" class="{{ "header-navbar nav-link active" if "user-guide" in active_page else "header-navbar nav-link" }}">User Guide</a></li>
<li><div class="d-flex"><span class="d-flex align-self-center submenu-division"></span><a href="{{ calculator_prefix }}/user-guide" class="{{ "header-navbar nav-link active" if "user-guide" in active_page else "header-navbar nav-link" }}">User Guide</a></div></li>
<li><a href="/expert-app" class="{{ "header-navbar nav-link active" if "/expert-app" == active_page else "header-navbar nav-link" }}">Expert app (beta)</a></li>
</ul>
</li>