Commit 2fb4845c authored by colmoneill's avatar colmoneill

limited height on project blocks, jquery ui to allow animated class toggle ?...

limited height on project blocks, jquery ui to allow animated class toggle ? Not currently working well
parent 42bee14c
/*
/* width */
::-webkit-scrollbar {
width: 2px;
}
/* Track */
::-webkit-scrollbar-track {
background: #d6d6d6;;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #000;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
color: rgb(0, 71, 171);
}
:root {
--bleu-bille: #112B92;
--vert-karel: #00B788;
--orange-karel: #ff5900;
--rose-karel: #FCBFC4;
--rose-pale: #ffe1e4;
--red-question: #ff3f00;
}
main {
flex-direction: row-reverse;
}
nav {
padding-bottom: 10px;
}
/* p.logo {
width: 212px;
display: inline;
float: left;
margin-right: 18px;
margin-top: 19px;
margin-left: 20px;
margin-bottom: 10px;
float: left;
} */
/* nav ul li {
padding-right: 0pt;
}
nav ul {
display: flex;
flex-direction: row;
list-style-type: none;
position: relative;
margin-top: 43px;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8em;
} */
.left {
flex: 2 0;
border-right: 0px;
}
.right {
flex-direction: column;
flex: 1 0;
border-right: 2px solid;
}
.about {
border-top: 2px solid;
flex: 1 0;
}
.left .about {
font-family: junicode-condensed;
line-height: 1em;
font-size: 1.7em;
border-top: 0px;
}
.left .about p + p {
margin-top: 0.6em;
}
.intro {
font-family: "Junicode-Condensed";
font-size: 1.7em;
line-height: 1em;
}
.prolog {
padding: 20px;
background-color: var(--rose-pale);
flex: 2 1;
overflow-y: auto;
}
.about {
flex: 1 1;
}
dt {
font-size: 0.8em;
line-height: 1.3em;
text-transform: uppercase;
color: black;
font-weight: bold;
letter-spacing: 0.025em;
}
dl {
margin: 0;
}
dd {
margin: 0;
}
dd + dt, dl + p {
margin-top: 12pt;
}
blockquote {
font-family: "Caveat-Outline";
line-height: .8em;
font-size: 4em;
margin: 0;
color: var(--orange-karel);
}
blockquote footer {
font-family: "U001";
font-size: 0.25em;
line-height: initial;
color: black;
}
@media only screen and (max-width: 767px) {
main {
flex-direction: column;
}
.about {
max-height: initial;
}
.right .about {
margin-top: 0;
}
.left .contact {
margin-top: 77px;
}
.prolog {
padding: 20px;
background-color: var(--rose-pale);
flex: 1 1;
overflow-y: initial;
}
}
\ No newline at end of file
.agenda {
overflow-y: auto;
flex: 0 0;
}
#detail-container.programme {
background-color: white;
color: var(--bleu-bille);
}
.event-detail-schedule,
#detail-container .event-detail-footer{
border-top: 2px solid var(--bleu-bille);
}
@media only screen and (max-width: 767px) {
#detail-container {
display: block;
}
.right {
display: block;
margin-top: 77px;
}
.left {
height: auto;
}
.agenda {
display: none;
}
#prolog {
display: none;
}
.about {
display: none;
}
blockquote {
margin-right: 0pt;
}
}
\ No newline at end of file
......@@ -600,10 +600,54 @@ div .pad {
font-size: 125%;
}
i.fa{
nav i.fa{
display: none;
}
.height-unlimited{
max-height: none;
overflow: hidden;
position: relative;
/* transition: all 1s; */
}
.height-limited{
max-height: 96px;
overflow: hidden;
position: relative;
/* transition: all 1s; */
}
.height-limited .read-more{
position: absolute;
bottom: 0;
left: 0;
top: 10px;
width: 100%;
text-align: center;
margin: 0;
padding: 0;
background-image: linear-gradient(to bottom, transparent, white);
}
.height-unlimited .read-more{
position: absolute;
bottom: 0;
left: 0;
top: 0;
width: 100%;
text-align: center;
margin: 0;
padding: 0;
background-image: none;
}
a.read-more-button{
margin-top: 30px;
padding: 5px;
position: absolute;
bottom: -5px;
width: 100%;
left: 0;
color: var(--dark-blue);
}
@media screen and (max-width: 1330px) {
ul.secondary{
width: 20%;
......@@ -649,7 +693,6 @@ i.fa{
padding: 15px;
}
ul.secondary{
float: left;
width: auto;
position: absolute;
right: 10px;
......@@ -675,6 +718,7 @@ i.fa{
}
i.fa{
display: block;
font-size: 1em;
}
}
......@@ -684,6 +728,19 @@ i.fa{
overflow: auto;
}
.read-more-button{
display: none;
}
.height-limited{
max-height: none;
}
.height-limited .read-more{
height: auto;
background-image: none;
}
nav {
top: 70px;
position: fixed;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -6,6 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="assets/js/responsive-nav.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
<style>
body {
margin: 10px;
overflow-x: hidden;
position: relative;
}
</style>
<title>OPI</title>
</head>
<body>
......@@ -66,26 +73,39 @@
<p class="section-title">Ongoing projects</p>
<br>
<p class="project-title"><a href="#">ICES WGHIST</a></p>
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<div class="height-limited">
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<p class="read-more"><a href="#" class="read-more-button"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></p>
</div>
</div>
</div>
<div class="project presentation">
<div class="project-detail-header">
<p class="project-title">EU COST Action Network</p>
<p><img class="project-hero" src="assets/img/hmap.jpg"></p>
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<div class="height-limited">
<p><img class="project-hero" src="assets/img/hmap.jpg"></p>
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<p class="read-more"><a href="#" class="read-more-button"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></p>
</div>
</div>
</div>
<div class="project presentation">
<div class="project-detail-header">
<p class="project-title">ICES WGHIST</p>
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<p class="project-title"><a href="#">ICES WGHIST</a></p>
<div class="height-limited">
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<p class="read-more"><a href="#" class="read-more-button"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></p>
</div>
</div>
</div>
<div class="project presentation">
<div class="project-detail-header">
<p class="project-title">EU COST Action Network</p>
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<div class="height-limited">
<p><img class="project-hero" src="assets/img/hmap.jpg"></p>
<p class="project-exerpt">The Oceans Past Initiative is closely linked with the expert working group, WGHIST of the International Council for the Exploration of the Sea (ICES): The ICES Working Group on the History of Fish and Fisheries (WGHIST) brings together fisheries scientists, historians, and marine biologists working on multidecadal to centennial changes in the marine environment. WGHIST aims to improve the understanding of the long-term dynamics of fish populations, fishing fleets, and catching technologies. The results are used for setting baselines for management, restoration, and conservation of marine resources and ecosystems.</p>
<p class="read-more"><a href="#" class="read-more-button"><i class="fa fa-chevron-down" aria-hidden="true"></i></a></p>
</div>
</div>
</div>
</div>
......@@ -112,6 +132,7 @@
</div>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/scroll.js"></script>
<script src="assets/js/fixed-responsive-nav.js"></script>
......@@ -129,4 +150,16 @@
</script> -->
<script type="text/javascript">
$( ".read-more-button" ).click(function() {
console.log("click-button to extend div");
$(this).parent().closest('div').toggleClass("height-unlimited height-limited");
// console.log("click-button ended");
// var parentDiv = $(this).parent().closest('div');
// console.log(parentDiv);
// parentDiv.css({"max-height":"none"});
});
</script>
</body>
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