Gitlab is now using https://gitlab.lcsb.uni.lu as it's primary address. Please update your bookmarks. FAQ.

Commit 377a6a9a authored by Jacek Lebioda's avatar Jacek Lebioda Committed by Laurent Heirendt
Browse files

Fixing a couple of issues in the redesign

parent acdab0cd
......@@ -42,14 +42,21 @@
<main class="page-content" aria-label="Content" style="margin-right: 0%">
{% if site.internal %}
<div class="indicator tooltip" id="external-indicator">
<i class="material-icons">verified</i>
<p>
External
<i class="material-icons">info</i>
</p>
<span class="tooltip-text">
You are connected to the uni.lu network. <br />You see all the cards.
</span>
</div>
{% else %}
<div class="indicator tooltip" id="internal-indicator">
<i class="material-icons">pending</i>
<p>
External
<i class="material-icons">info</i>
</p>
<span class="tooltip-text">
You are <strong>not connected</strong> to the uni.lu network. <br />You can see only publicly available cards. <br />In order to see all, please connect to the university network via VPN.
</span>
......
......@@ -260,7 +260,7 @@
/* ==================================================== */
div.search-bar {
width: 60%;
margin-left: 20%;
margin-left: 12%;
display: flex;
}
@media (max-width: 1080px) {
......@@ -300,19 +300,31 @@ div.search-bar {
.indicator {
position: absolute;
top: 190px;
right: 75px;
right: 59px;
color: #d6d6d6;
text-align: center;
cursor: pointer;
}
@media (max-width: 1080px) {
.indicator {
top: 40px;
right: 20px;
top: 128px;
right: 72px;
}
}
.indicator > i {
font-size: 36px;
@media (max-width: 650px) {
.indicator {
top: 50px;
right: 50px;
}
}
.indicator > p > i {
font-size: 20px;
position: relative;
top: 5px;
left: 5px;
}
.indicator > p {
font-size: 14px;
}
/* ==================================================== */
/* Tooltip */
......@@ -321,7 +333,7 @@ div.search-bar {
visibility: hidden;
width: 400px;
right: 120%;
top: -15px;
top: -43px;
background-color: var(--tooltip-bg);
color: var(--secondary-color);
text-align: center;
......
......@@ -38,7 +38,7 @@ window.boxHider = (function() {
}
}
function UnhideElement(element) {
function ShowElement(element) {
if (element instanceof HTMLElement) {
element.style['display'] = 'inline-block';
}
......@@ -52,7 +52,7 @@ window.boxHider = (function() {
function ShowAllBoxes() {
var allBoxes = GetAllBoxElementsArray();
allBoxes.map(function(box) {
UnhideElement(box);
ShowElement(box);
});
}
......@@ -74,17 +74,22 @@ window.boxHider = (function() {
// Hide the "All Categories" element
HideAllCategories();
// Finally, hide all boxes except of the selected one
// Moreover, make sure that the selected boxes are displayed.
var allBoxes = GetAllBoxElementsArray();
if (boxId.startsWith('handbook')) {
allBoxes.map(function(box) {
if (!box.id.startsWith('handbook')) {
HideElement(box);
} else {
ShowElement(box);
}
});
} else {
allBoxes.map(function(box) {
if (box != selectedBox) {
HideElement(box);
} else {
ShowElement(box);
}
});
}
......
......@@ -12,6 +12,21 @@ order: -1
}
</style>
{% comment %}
This code adds CSS that hides the index-boxes by default.
It's in javascript, so that it doesn't effect the browsers with javascript disabled.
How the correct boxes are shown then? box_hider.js shows them
{% endcomment %}
<script>
var element = document.createElement('style');
var content = document.createTextNode(".index-box {display: none;}");
var head = document.getElementsByTagName('head');
if (head.length > 0) {
element.appendChild(content);
head[0].appendChild(element);
}
</script>
<!-- index -->
<div class="index-box-container">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment