Merge branch 'feature/mobile_options' into 'master'

Remove ExpertApp from mobile and tablet screen sizes

Closes #221

See merge request cara/cara!305
This commit is contained in:
Andre Henriques 2021-12-16 11:37:12 +01:00
commit 6bd8b70241
3 changed files with 34 additions and 29 deletions

View file

@ -234,6 +234,10 @@ footer img {
width: 25%;
}
#mobile_calculator_option {
display: none;
}
#nat_vent_image {
height: 15em;
}
@ -246,7 +250,7 @@ footer img {
height: 6em;
margin: 1%;
}
#mobile-app-buttons {
#calculator_app_button {
display: none!important;
}
.feedback {
@ -286,6 +290,9 @@ footer img {
.nav-link {
padding: .5rem .5rem!important;
}
#apps_dropdown {
display: none;
}
#report_version {
font-size: .5rem;
}
@ -302,13 +309,6 @@ footer img {
#mobile_link {
display: inline!important;
}
#desktop_logo {
display: none!important;
}
#mobile_logo {
display: block!important;
}
.feedback {
float:right;
font-size:.75rem;
@ -328,16 +328,16 @@ footer img {
} */
/* Large (lg) devices (desktops, 992px and up) */
@media (max-width: 992px) {
#download-pdf {
/* Large (lg) devices (tablets) */
@media (max-width: 64em) {
.expert_app_button {
display: none;
}
#link_reproduce_results {
display: none;
#desktop_logo {
display: none!important;
}
#mobile_link {
display: inline!important;
#mobile_logo {
display: block!important;
}
}

View file

@ -11,12 +11,11 @@
</header>
<div class="container container--padding">
<div class="d-flex flex-row mb-3 justify-content-around" id="mobile-app-buttons">
<div class="d-flex mb-3 justify-content-center" id="calculator_app_button">
<div><a href="{{ calculator_prefix }}" role="button" class="btn btn-outline-primary"><div class="d-flex d-row"><i class="icon-calculator"></i><span class="pl-1">Calculator</div></a></div>
<div><a href="https://cara.web.cern.ch/expert-app" role="button" class="btn btn-outline-secondary"><div class="d-flex d-row"><i class="icon-expert"></i><span class="pl-1">Expert (beta)</div></a></div>
</div>
<div class="split">
<div class="col-sm-8 pl-0">
<div class="col-lg-8 col-md-7 pl-0">
<h2 class="paragraph-title">Introduction</h2><br>
<div>
<p>
@ -43,7 +42,7 @@
<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><a href="https://cara.web.cern.ch/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 class="expert_app_button"><a href="https://cara.web.cern.ch/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%">
</div>

View file

@ -35,16 +35,22 @@
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-link"><a href="/" class="{{ "header-navbar nav-link active" if "home/" == active_page else "header-navbar nav-link" }}">HOME</a></li>
<li class="nav-item dropdown p-2">
<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" style="min-width: 14rem;" aria-labelledby="navbarDropdown">
<li><a href="{{ calculator_prefix }}" class="{{ "header-navbar nav-link active" if "calculator/" == active_page else "header-navbar nav-link" }}">CARA CALCULATOR</a></li>
<li><a href="{{ calculator_prefix }}/user-guide" style="margin-left: 4rem" class="{{ "header-navbar nav-link active" if "user-guide" in active_page else "header-navbar nav-link" }}">USER GUIDE</a></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>
<div id="apps_dropdown">
<li class="nav-item dropdown p-2">
<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" style="min-width: 14rem;" aria-labelledby="navbarDropdown">
<li><a href="{{ calculator_prefix }}" class="{{ "header-navbar nav-link active" if "calculator/" == active_page else "header-navbar nav-link" }}">CARA CALCULATOR</a></li>
<li><a href="{{ calculator_prefix }}/user-guide" style="margin-left: 4rem" class="{{ "header-navbar nav-link active" if "user-guide" in active_page else "header-navbar nav-link" }}">USER GUIDE</a></li>
<li class="expert_app_button"><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>
</div>
<div id="mobile_calculator_option">
<li class="nav-link"><a href="{{ calculator_prefix }}" class="{{ "header-navbar nav-link active" if "calculator/" == active_page else "header-navbar nav-link" }}">CARA CALCULATOR</a></li>
<li class="nav-link"><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></li>
</div>
<li class="nav-link"><a href="https://hse.cern/covid-19-information" class="header-navbar nav-link">COVID INFORMATION</a></li>
<li class="nav-link"><a href="/about" class="{{ "header-navbar nav-link active" if "about" == active_page else "header-navbar nav-link" }}">ABOUT</a></li>
{% if user.is_authenticated() %}