nique le javascript

pages/info.md

@@ -4,9 +4,6 @@ static : true
 
 ...
 
-
-#info
-
 Gathering scholars and professionals from different domains, Latitude is a platform strongly engaged in context-based research 
 and design. Latitude aims at understanding space in its multiple dimensions focusing on emergences, space-place issues, the everyday 
 and the unexpected. It takes works on well-established urban conditions and territories, as well as liminal physical and social contexts, 
@@ -15,12 +12,12 @@ The platform’s research and practice-based approach produces visually oriented
 and other initiatives that involve the general public like workshops and seminars. Latitude is a dynamic working group that collaborates 
 with universities, design offices, civil society organizations, public institutions and artists.
 
-        Members:
+	Members:
 Andrea Aragone, Andrea Bortolotti, Federico Broggini, Olivia Casagrande, Davide Cauciello, Marta De Marchi, Bruno Dias Ventura, 
 Marta Finotello, Roberto Genna, Martina Gentili, Alessandra Marcon, Kewalin Num-In, Octavio Piñeiro Aramburu, Marco Ranzato, 
 Riccardo Ruggeri, Fabio Vanin.
 
-        Past:
+	Past:
 Sadhia Khan, Griet Lambrechts, Michiel Vanbalen, Cati Vilquin. Smaranda Alexandresku, Lina Bentaleb, Valentina Bonifacio, Pauline Cabrit, 
 Elena Calafati, Beniamino Casagrande, Viola Castellano, Simone Conz, Romina Cornejo Escudero, Caterina Dubini, Bianca Fanta, Chiara 
 Ferronato, Federico Gobbato Liva, Roberta Marcolongo, Andrea Masciantonio, Talita Medina, Anna Penso, Aryani Sari Rahmanti, Stefano 

pages/news.md

@@ -4,4 +4,15 @@ static: true
 
 ...
 
-Veneto 2100: Living with Water investigates how the Veneto region can transform starting from the actual and forecasted environmental threats caused by increasing urbanisation and climate changes. The territory, subjected to more frequent flooding and drought, has been investigated trough spatial and ethnographic surveys. Universities, experts from various fields and local actors, has been involved to share their personal point of view to demonstrate the importance of local stakeholder and the social aspect that influence region's vulnerability. Starting from water issues this multidisciplinary methodology led to the construction of a new set of urban tools and landscape strategies to rethinking and restructuring the territories of Veneto region towards more resilient cities. 
+![image](http://192.168.178.147:5000/pages/00_NEWS/20190711_GWG_SummerSchool_Dossier_AJ-1.jpg)
+
+Claim Industrial Surfaces
+Act One: Asiat Depave
+Green With Grey International Summer School
+
+Apply by August 19!
+
+Claim Industrial Surfaces, Act One: Asiat Depave is held at Asiat Site in Vilvoorde (Belgium) from 31 August –  08 September. It is the first act of the Green With Grey (GWG) project which envisions the industrial platforms of Flanders’s Nevelstad—or Nebular City—(Belgium) as progressively and surgically softened areas (Green) that concurrently function as source and place of production (Grey). As part of the “Proeftuinen Ontharding” (tests projects concerning desealing) launched by the Departement “Omgeving” of the Flamish Government, GWG obsessively seeks for strategies to de-seal the industrial sites of Flanders while increasing their productivity. 
+Tutoring includes the GWG team Latitude Platform, UCLouvain and KU Leuven, in collaboration with 51N4E, Plant en Houtgoed, and Onkruid. The Summer School is addressed to master and bachelor students, and young professionals and it is constellated by a number of activities that involve also local players such as municipalities, manufacturers and the general public. The Act One of Claim Industrial Surfaces coagulates onsite concrete actions and initiates the de-sealing pilot project. Participants will enact the production stages of desealing (demolishing, materials sorting, reuse/recycling) while also testing the socio-technical devices associated to each phase (labour and tools, processing, phases).
+
+Candidates should apply by sending a PDF file-portfolio (two pages, A4 portrait, 7MB maximum size) at: info@latitude-platform.eu

static/main.js

@@ -2,19 +2,47 @@ $(document).ready(function() {
     
     var imgW =  $(".gal .img_container").width()
     $(".gal .img_container").css('height',imgW);
+    
     $(".alist").on("click", "li",function(){
-        $(".content-wrapper").removeClass('open');   
+    $(".content-wrapper").removeClass('open');   
-        $(this).find(".content-wrapper").addClass('open');   
+    $(this).find(".content-wrapper").addClass('open');   
-    });
+});
 
-    $("a.news").click(function(){
+$("a.news").click(function(){
-        $("#news").toggleClass('open');
+    $("#news").toggleClass('open');
+});   
 
-    });
+$("a.info").click(function(){
-    $("a.info").click(function(){
+    $("#info").toggleClass('open');
-        $("#info").toggleClass('open');
+});
 
-    });
+$(".closebtn").click(function(e){
+    e.stopPropagation(); // Prevent event bubbling
+    $(this).parent().removeClass('open');
+    console.log("Close button clicked - should remove 'open' class");
+});
+
+
+    
+    //
+    //$(".alist").on("click", "li",function(){
+        //$(".content-wrapper").removeClass('open');   
+        //$(this).find(".content-wrapper").addClass('open');   
+    //});
+    
+    //$("a.news").click(function(){
+        //$("#news").toggleClass('open');
+     //});   
+
+    //$("a.info").click(function(){
+        //$("#info").toggleClass('open');
+    //});
+
+    //$(".closebtn").click(function(){
+        //$(this).parent().removeClass('open');
+        //$(this).parent().toggleClass('wkfhjsldkgfh');
+        //console.log("fuubar");
+    //});
 
       $(document).on("click", ".gal img", function() {
           var clickedSrc = $(this).attr("src");

static/style.css

@@ -46,12 +46,55 @@
 body{
     margin:0 10px;
     padding:0;    
-    font-size : 12px; 
+    font-size : 16px; 
+}
+
+
+nav {
+    position : fixed ;
+    background: #fff;
+    z-index:10000;
+    width:100%;
+    border-bottom: 1px solid;
+}
+
+.closebtn{
+    width:50px;
+    height:50px;
+    background:red;
+    top:30px;
+    right:20px;
+    position: absolute;
+    z-index: 1000000;
+}
+
+
+#content{
+    margin-top:90px;
+}
+
+div.content{
+    margin-left:-35px;
+}
+
+div.content td{
+    background-color: #ededed;
+    padding-bottom: 5px;
+}
+
+div.content p{
+    padding-top: 15px;
+}
+
+div.content img{
+    width: 25%;
+margin-right:80%;
 }
 
 #menu {
     display: grid;
     grid-template-columns: 8fr 2fr;
+    background-color: white;
 }
 
 @media (max-width: 1080px) {
@@ -63,18 +106,19 @@ body{
 }
 #menu ul {
     list-style: none;
-    margin:0;
+    margin-top:20px;
+    margin-bottom:20px;
     padding: 25px 5px;
 }
 
 #menu ul li {
     display:inline-block;
     margin-right:60px;
-    font-size:1.5em;
+    font-size:1em;
 }
 
 #menu ul li:first-of-type {
-    font-size:1.5em;
+    font-size:1em;
 }
 
     
@@ -99,7 +143,8 @@ body{
 }
 
 a:hover{
-    color:#95a5a6 !important;
+    color: black !important;
+    text-decoration: solid underline black 1.2px !important;
 }
 
 
@@ -108,6 +153,7 @@ a:hover{
     width:100%;
     height:0;
     overflow : hidden; 
+    position:relative;
 }
 
 .banner .content{
@@ -120,8 +166,12 @@ a:hover{
     border-bottom:solid 1px;
     padding:0;
     margin:0;
-    background: #eaeaea; 
+    background: #e6e6e6; 
     cursor: pointer;
+    position:sticky;
+    width:99.5%;
+    top:110px;
+    z-index:10000;
 }
 
 
@@ -152,7 +202,7 @@ a:hover{
     height:20px;
     content: ' ▲';
     right:0;
-    font-size: 1em;
+    font-size: 0.5em;
 }
 
 .legend li.sort-desc::after {
@@ -161,7 +211,7 @@ a:hover{
     height:20px;
     right:0;
     content: ' ▼';
-    font-size: 1em;
+    font-size: 0.5em;
 }
 .legend li:last-of-type {
     border-right: none;
@@ -172,6 +222,12 @@ a:hover{
     grid-template-columns: 1fr 4fr  1fr  3fr 2fr 2fr 5fr ;
 } 
 
+ul.legend {
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+    
+} 
+
 
 #articles ul {
     list-style:none;
@@ -209,8 +265,8 @@ a:hover{
 #articles ul.alist li:hover{
     /*! font-size:1em; */
     border-bottom: 1px solid #000000;   
-    color : #000;
+    color : white;
-    background: #eaeaea;
+    background: #b3b3b3;
 }
 
 #articles .legend li {
@@ -289,6 +345,8 @@ a:hover{
     grid-template-areas:  
         " gallerie gallerie"
         " imgZoom content ";
+    position: relative  ;
+   
 }   
 
 
@@ -303,7 +361,11 @@ a:hover{
 	row-gap: 15px;
     height:auto;
     max-width: 100%;
-    padding-top:20px;
+    padding-top:10px;
+}
+
+div.gal {
+    cursor:crosshair;
 }
 
 
@@ -335,7 +397,9 @@ a:hover{
 
 
 .imgzoom{
-    padding:20px;
+    padding-top:30px;
+    padding-bottom:30px;
+    margin-left:-62px;
     display: grid;
     
 }
@@ -343,12 +407,11 @@ a:hover{
 
 .meta {
 		border:none;
-        padding:  10px ;
+        padding:  0px ;
-        font-size: 1.5em; 
+        font-size: 1em; 
 }
 .meta tr {
 	border:none;
-	background: #f0f0f0;
      vertical-align: baseline;
 }
 .meta td {
@@ -365,6 +428,7 @@ a:hover{
 
 .content-wrapper .content {
     padding:10px;
+
 }
 
 #content-wrapper p{
@@ -393,6 +457,10 @@ a:hover{
     margin: 20px 0 0 -10px ;
 }
 
+div.content-wrapper {
+    background: #ededed !important;
+}
+
 #metad{
     margin: 5px 0 30px 0;
 }
@@ -440,10 +508,21 @@ p em img{
 
 p{
     line-height:1.2em;
-    margin-top:1.5em;
+    margin-right:25%;
-    margin-bottom:1.5em;
+    text-align:left;
-    text-align:justify;
+    font-size:1.4em;
-    font-size:1.3em;
+    line-height: 1.1;
+    
+}
+
+pre{ 
+    line-height:1.2em;
+    margin-right:25%;
+    text-align:left;
+    font-size:1.4em;
+    line-height: 1.1;
+    text-indent: 5%;
+    
 }
 
 

templates/index.html

@@ -10,10 +10,15 @@
   <body>
 
     {% include 'menu.html' %}
+<div id="content">
+    
+
     <div id="info" class="banner">
         <div class="content">
             {{ info }}
         </div>
+        <div class="closebtn">
+        </div>
     </div>    
     
    {% if news %}
@@ -21,6 +26,8 @@
         <div class="content">
             {{ news }}
         </div>
+        <div class="closebtn">
+        </div>
     </div>    
     {% endif %} 
 
@@ -48,6 +55,9 @@
                      <span class="network">{{article.network}}</span>
                 </div>
                 <div class="content-wrapper">
+                
+                <div class="closebtn">
+                </div>
             {% if imgDict[article.path]   %}
                     <div class="gal">
 		        {% for img in imgDict[article.path] : %}
@@ -106,6 +116,7 @@
             </ul>
     </div>
 
+</div>
 <script  src="https://code.jquery.com/jquery-3.7.1.min.js"
 	 integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
 	 crossorigin="anonymous"></script>

templates/menu.html

@@ -1,10 +1,10 @@
 <div id="menu">
         <nav>
             <ul>
-                <li><a href="{{ url_for('index', _external=False) }}">Latitud Plateform</a></li>
+                <li><a href="{{ url_for('index', _external=False) }}">Latitude Platform</a></li>
-		<li><a href="#" class="info">info</a></li>
+		<li><a href="#" class="info">Info</a></li>
                 {% if news %}
-		<li><a href="#" class="news">news</a></li>
+		<li><a href="#" class="news">News</a></li>
                 {% endif %}
             <li>
                 <span id="search-box">