final css to be done / filter fix / galleie done / accordeon fix

pages/028_IER.md

@@ -1,15 +1,16 @@
+published: 2019-01-01
 
 upper: IER
 title : Ilot d'Eau Le Retour
-published: 2017-01-01
+period: 2017-2019
 location: Forest, Brussels-Capital Region, Belgium
 type: research, workshop, co-design, installation
 fund: Innoviris Co-Create
 network: Arkipel, Bruxelles Environnement, Casablanco, Celine de Vos, Forest Municipality, Ecotechnic, Etats Généraux de l’Eau à Bruxelles (EGEB), Faculté d'Architecture La Cambre Horta (Université Libre de Bruxelles), HYDR Lab (Vrije Universiteit Brussels), Jardin Essentiel, Jette Municipality, Le Début des Haricots, Maison de Quartier Saint-Antoine, Niccolò Masini, Potager de l’Imprimerie, Quartier Wiels Wijk, Verte Berthelot
-desc: 
+team: Andrea Aragone, Davide Cauciello, Simone Conz, Romina Cornejo Escudero, Bruno Dias Ventura, Marta Finotello, Alessandra Marcon, Octavio Piñeiro Aramburu, Ana Moura Bastos, Marco Ranzato
-author: Andrea Aragone, Davide Cauciello, Simone Conz, Romina Cornejo Escudero, Bruno Dias Ventura, Marta Finotello, Alessandra Marcon, Octavio Piñeiro Aramburu, Ana Moura Bastos, Marco Ranzato
+client: 
-
+budget: 
-
 ...
 
 
+Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text 

pages/030_ESC.md

@@ -1,13 +1,14 @@
+published: 2018-01-01
+
 upper: ESC
 title : Every Space Counts 
-published: 2018-01-01
+period: 2018
 location: BOZAR Centre for fine arts
 type: exhibition
-fund: 
+fund: Wayne Enterprises 
 network: Architecture Workroom Brussels, Bureau Bas Smets, JNC International, Taktyk
-cat: 
+team: Andrea Aragone, Lina Bentaleb, Davide Cauciello, Marta De Marchi, Octavio Piñeiro Aramburu, Marco Ranzato
-desc: 
+client: jocker
-author: Andrea Aragone, Lina Bentaleb, Davide Cauciello, Marta De Marchi, Octavio Piñeiro Aramburu, Marco Ranzato
+budget: 666.666$
-
 ...
 

pages/034_GWG.md

@@ -1,34 +1,18 @@
+published: 2019-01-01
+
 upper: GWG
 title : Green With Grey | Groen Met Grijs 
-published: 2019-01-01
+period: 2018-2022
 location: Flanders, Belgium
 type: research, workshop
 fund: Department Omgeving, Vlaamse Overheid
 network: Aquafin, Architecture Workroom Brussels, Asiat Site, Cargovil vzw, David Giacomelli, Departement Omgeving, Katholische Universität Leuven, Loop Studio, Onkruid, Plant en Houtgoed, POM Vlaams-Brabant, Université Catholique de Louvain, Vilvoorde Municipality, VLAIO, VLM, VMM, 51N4E, 1010au
-cat: 
+team: Andrea Aragone, Federico Broggini, Davide Cauciello, Alexander Colson, Bruno Dias Ventura,  Federico Gobbato Liva, Ciel Grommen, Marco Ranzato, Octavio Piñeiro Aramburu; (Alessandra Marcon for Asiat Depave workshop) 
-desc: 
+client: Departemente Omgeving
-author: Andrea Aragone, Federico Broggini, Davide Cauciello, Alexander Colson, Bruno Dias Ventura,  Federico Gobbato Liva, Ciel Grommen, Marco Ranzato, Octavio Piñeiro Aramburu; (Alessandra Marcon for Asiat Depave workshop) 
+budget: 188.000 €
-
-
-
 ...
  
-
-
-
-Project Type: Action-research project
-
-Location: Flanders, Belgium 
-
-Project time: 2018-2022
-
-Team: Marco Ranzato, Andrea Aragone, Federico Broggini, Federico Gobbato Liva
- 
 Partners: UCLouvain and KULeuven
 
-Client: Departemente Omgeving
-
-Budget: 188.000 €
-
 Flanders is one of the best-known productive regions of Europe. Concentrating the majority of the Belgian industry and workforce, the Region features a continuous and dense infrastructure throughout its landscape: slabs of asphalt and concrete, tiles, sheds, wide roads, unused vegetated remnants of space, and industrial platforms. These elements cover approximately 4.5% of the urbanisation of the region and 15% of its overall land take, becoming a major question when it comes to the soil impermeabilization and water management question. This work looks at industrial platforms as water towers spread right across the Flemish territory. Water towers that nowadays are inactive, thus repelling approximately millions of m3 of rainwater. 
 What if this water tower are turned on instead? GreenWithGrey is one of the strategic projects of the “Proeftuinen Ontharding,” a programme aiming at tackling the very diffuse – and land consuming – urbanisation of Flanders through strategic desealing actions. Within this framework, GreenWithGrey explores possibilities for desealing Flemish industrial platforms to tackle questions such as providing more room for water and strengthening the regional water cycle. GreenWithGrey achieves the ongoing transition through a mix of doing and undoing, of actions and policies, of top down and bottom-up strategies.

pages/059_LML.md

@@ -0,0 +1,14 @@
+
+upper: LML
+title : Liminal
+published: 2020-01-01
+location: Slavutych, Ukraine
+type: workshop, installation
+fund: Small European Students of Architecture Meeting, European Architecture Student Assembly
+network: 
+desc: 
+author: Davide Cauciello, Octavio Piñeiro Aramburu
+
+...
+
+content Text

pages/099_EXP.md

@@ -0,0 +1,20 @@
+published: 2025-01-01
+
+upper: EXP
+title : Example page 
+period: 1985-2025
+location: gotham city
+type: crime fight
+fund: Wayne Enterprises 
+network: internet , DcUniverse
+team: pfff, alexis, bruce
+client: jocker
+budget: 666.666$
+...
+
+
+
+Eau de Couture is a project realized in Jardin Akarova, a collective garden sitting in front of the social housing blocks of the Brigittines neighbourhood in the heart of Bruxelles. The project consists in the co-construction and renovation of a public space, together with inhabitants and local associations, revolving around a rainwater collection tank for irrigation and a vegetated buffer area for overflow water.
+
+Eau de Couture is part of the projects Initiatives Durables 2020, focused on urban agriculture and promoted by the municipality of Bruxelles Ville. The material re-use approach is one of the main design principles of the project team. In this sense the collaboration between the municipality and the design team has been constructive and dynamic: Bruxelles Ville made available the warehouse where all the materials concerning public spaces are stocked. The base of the rainwater tank and the overflow system is designed re-using the materials found in the warehouse.
+In Eau de Couture we aimed to design a prototypical device to collect water that, by an economy of means, helps to better define and enhance public spaces. We imagine that Eau de Couture can be adopted in different locations according to the specificities of each context.

static/main.js

@@ -1,68 +1,92 @@
 $(document).ready(function() {
-    // Sorting state management
+    
-    const sortState = {};
+    var imgW =  $(".gal .img_container").width()
-
+    $(".gal .img_container").css('height',imgW);
-    // Function to sort articles
+    $(".alist").on("click", "li",function(){
-    function sortArticles(columnClass) {
+        $(".content-wrapper").removeClass('open');   
-        const $list = $('.alist');
+        $(this).find(".content-wrapper").addClass('open');   
-        const $listItems = $list.children('li');
+    });
-
+
-        // Determine sort direction
+
-        if (!sortState[columnClass]) {
+
-            sortState[columnClass] = 'asc';
+      $(document).on("click", ".gal img", function() {
-        } else {
+          var clickedSrc = $(this).attr("src");
-            sortState[columnClass] = (sortState[columnClass] === 'asc') ? 'desc' : 'asc';
+          console.log(clickedSrc);
-        }
+          $(this).closest(".gal").next(".imgzoom").find("img").attr("src", clickedSrc);
-
+  });
-        // Sort the list items based on the text of the specified column
+
-        $listItems.sort(function(a, b) {
+
-            const aText = $(a).find('.' + columnClass).text().trim().toLowerCase();
+    let currentSort = null;
-            const bText = $(b).find('.' + columnClass).text().trim().toLowerCase();
+    let currentDirection = 'asc';
-            
+
-            // Special handling for period (numeric sorting)
+  // Click handler for sort buttons
-            if (columnClass === 'period') {
+  $('.legend li.sort').click(function() {
-                const aNum = parseInt(aText);
+    const sortBy = $(this).attr('data-sort');
-                const bNum = parseInt(bText);
+    console.log("Sorting by:", sortBy); // Debug info
-                return sortState[columnClass] === 'asc' 
+
-                    ? aNum - bNum 
+    // Toggle direction if clicking the same sort again
-                    : bNum - aNum;
+    if (currentSort === sortBy) {
-            }
+      currentDirection = currentDirection === 'asc' ? 'desc' : 'asc';
-            
+    } else {
-            // Default alphabetical sorting
+      currentDirection = 'asc';
-            return sortState[columnClass] === 'asc'
-                ? aText.localeCompare(bText)
-                : bText.localeCompare(aText);
-        });
-
-        // Detach and reappend sorted items to maintain DOM structure
-        $list.empty().append($listItems);
-
-        // Update sort direction indicators
-        $('.legend li').removeClass('sort-asc sort-desc');
-        $(`.legend li[data-sort="${columnClass}"]`).addClass(
-            sortState[columnClass] === 'asc' ? 'sort-asc' : 'sort-desc'
-        );
     }
 
-    // Add click event to legend spans for sorting
+    currentSort = sortBy;
-    $('.legend li').on('click', function() {
+    console.log("Direction:", currentDirection); // Debug info
-        const columnClass = $(this).attr("data-sort");
+
+    // Get the list and all articles
+    const $list = $('ul.alist');
+    if ($list.length === 0) {
+      console.error("List with class 'alist' not found"); // Debug info
+      return;
+    }
 
-        // If the column exists in the article items, sort by that column
+    // Get all list items
-        if ($('.alist li').first().find('.' + columnClass).length > 0) {
+    let $articles = $list.children('li').toArray();
-            sortArticles(columnClass);
+    console.log("Found", $articles.length, "articles"); // Debug info
-        }
+
+    // Sort the articles
+    $articles.sort(function(a, b) {
+      // Find the spans with the sorting class
+      const $spanA = $(a).find('span.' + sortBy);
+      const $spanB = $(b).find('span.' + sortBy);
+
+      // If either element doesn't have the required span, skip sorting
+      if ($spanA.length === 0 || $spanB.length === 0) {
+        return 0;
+      }
+
+      const valueA = $spanA.text().trim().toLowerCase();
+      const valueB = $spanB.text().trim().toLowerCase();
+
+      // Try sorting as numbers if possible
+      const numA = parseFloat(valueA);
+      const numB = parseFloat(valueB);
+
+      let result;
+      if (!isNaN(numA) && !isNaN(numB)) {
+        result = numA - numB;
+      } else {
+        // Otherwise sort alphabetically
+        result = valueA.localeCompare(valueB);
+      }
+
+      // Reverse if descending
+      return currentDirection === 'desc' ? -result : result;
     });
 
-    // Toggle content visibility
+    // Re-append in new order
-    $(".alist").on('click', 'li', function(e) {
+    $list.empty();
-        // Prevent sorting when clicking on content
+    $.each($articles, function(i, item) {
-        if (!$(e.target).closest('.legend').length) {
+      $list.append(item);
-            // Check if click is outside content-wrapper and not on its child elements
-            if (!$(e.target).closest('.content-wrapper').length) {
-                const $contentWrapper = $(this).find('.content-wrapper');
-                $contentWrapper.toggleClass("open");
-            }
-        }
     });
+
+    // Update UI indicators
+    $('.legend li.sort').removeClass('active sort-asc sort-desc');
+    $(this).addClass('active');
+    $(this).addClass(currentDirection === 'asc' ? 'sort-asc' : 'sort-desc');
+  });
+
+
 });
+

static/mainjsbak

@@ -0,0 +1,88 @@
+$(document).ready(function() {
+    // Sorting state management
+    const sortState = {};
+
+    // Function to sort articles
+    function sortArticles(columnClass) {
+        const $list = $('.alist');
+        const $listItems = $list.children('li');
+
+        // Determine sort direction
+        if (!sortState[columnClass]) {
+            sortState[columnClass] = 'asc';
+        } else {
+            sortState[columnClass] = (sortState[columnClass] === 'asc') ? 'desc' : 'asc';
+        }
+
+        // Sort the list items based on the text of the specified column
+        $listItems.sort(function(a, b) {
+            const aText = $(a).find('.' + columnClass).text().trim().toLowerCase();
+            const bText = $(b).find('.' + columnClass).text().trim().toLowerCase();
+            
+            // Special handling for period (numeric sorting)
+            if (columnClass === 'period') {
+                const aNum = parseInt(aText);
+                const bNum = parseInt(bText);
+                return sortState[columnClass] === 'asc' 
+                    ? aNum - bNum 
+                    : bNum - aNum;
+            }
+            
+            // Default alphabetical sorting
+            return sortState[columnClass] === 'asc'
+                ? aText.localeCompare(bText)
+                : bText.localeCompare(aText);
+        });
+
+        // Detach and reappend sorted items to maintain DOM structure
+        $list.empty().append($listItems);
+
+        // Update sort direction indicators
+        $('.legend li').removeClass('sort-asc sort-desc');
+        $(`.legend li[data-sort="${columnClass}"]`).addClass(
+            sortState[columnClass] === 'asc' ? 'sort-asc' : 'sort-desc'
+        );
+    }
+
+    // Add click event to legend spans for sorting
+    $('.legend li').on('click', function() {
+        const columnClass = $(this).attr("data-sort");
+        
+        // If the column exists in the article items, sort by that column
+        if ($('.alist li').first().find('.' + columnClass).length > 0) {
+            sortArticles(columnClass);
+        }
+    });
+
+    // Toggle content visibility
+    $(".alist").on('click', 'li', function(e) {
+        // Prevent sorting when clicking on content
+        if (!$(e.target).closest('.legend').length) {
+            // Check if click is outside content-wrapper and not on its child elements
+            if (!$(e.target).closest('.content-wrapper').length) {
+                const $contentWrapper = $(this).find('.content-wrapper');
+                $contentWrapper.toggleClass("open");
+            }
+        }
+    });
+
+  $(".gal img").click(function() {
+    // Get the src of the clicked image
+    var clickedSrc = $(this).attr("src");
+    console.log(clickedSrc); 
+    // Find the parent gallery of the clicked image
+    var currentGallery = $(this).closest(".gal");
+    
+    // Change the src of the last image in THIS specific gallery
+    currentGallery.find("img").last().attr("src", clickedSrc);
+});
+
+    //$(".gal .img_container img").click(function(){
+        //var imgsrc = $(this).attr('src');
+        //console.log(imgsrc);
+        //$(this).last().css('border', 'solid')
+
+    //});
+
+
+});

static/style.css

@@ -103,8 +103,9 @@ a:hover{
 }
 
 
-#articles .legend{
+.legend{
     border-top:solid  1px;
+    border-bottom:solid 1px;
     padding:0;
     margin:0;
     background: #eaeaea; 
@@ -113,9 +114,10 @@ a:hover{
 
 
 
-#articles .legend li {
+.legend .sort {
     border-right: solid 1px;
-    padding-left: 10px;
+    padding: 10px 10px;
+    display: inline-block
 }
 
 .legend li{
@@ -149,11 +151,11 @@ a:hover{
     content: ' ▼';
     font-size: 1em;
 }
-#articles .legend li:last-of-type {
+.legend li:last-of-type {
     border-right: none;
 }
 
-#articles .legend , #articles ul li a {
+ .legend , #articles .alist li .articleData  {
     display: grid;
     grid-template-columns: 1fr 4fr  1fr  3fr 2fr 2fr 5fr ;
 } 
@@ -167,7 +169,7 @@ a:hover{
 
 
 #articles ul li{
-    /*! font-size:1em; */
+    font-size:1em;
     padding:10px 0px;
     border-bottom: 1px solid #000000;   
 }
@@ -195,18 +197,17 @@ a:hover{
 #articles ul.alist li:hover{
     /*! font-size:1em; */
     border-bottom: 1px solid #000000;   
-    color : #fff;
+    color : #000;
     background: #eaeaea;
 }
 
-#articles ul li a {
+#articles .legend li {
     color : #000000;
     text-decoration:none;
     pointer-events: none;    
-    
 }
 
-#articles ul li a span{
+#articles .alist li  span{
     padding-left: 10px;
     overflow: hidden;
     white-space: nowrap;
@@ -216,7 +217,7 @@ a:hover{
 }
 
 
-#articles ul li a span::after{
+#articles .alist li  span::after{
     display: block;
     z-index: 10;
     content:'';
@@ -232,29 +233,38 @@ a:hover{
 
 
 
-#articles ul li:hover a span::after{
+#articles ul li:hover  span::after{
     display: none;  
 }
 
-#articles ul.alist li .content-wrapper{
+#articles  .alist li .content-wrapper{
     height:0;
-    max-height: 0;
+    max-height: 0px;
     overflow: hidden;
     color : #000;
-    background: #fff
+    background: #fff;
+    transition: max-height .5s ease-in;
+    /*! width: 100vw; */
 }
 
 
-#articles ul.alist li .content-wrapper p{
-    width: 80%;
-    margin:auto;
-}
-
 .open{
     height:auto !important;
     max-height:2000px !important;
     margin-top: 10px !important;
-    transition: max-height 0.25s ease-in;
+}
+
+
+.content-wrapper .content{
+    grid-area: content;
+    width:80%;
+    margin: 20px auto;
+}
+
+
+#articles ul.alist li .content-wrapper p{
+    width: 100%;
+    margin:auto;
 }
 
 
@@ -263,10 +273,83 @@ a:hover{
     font-size:1em!important;
     background:#fff;
     display: grid;
-    grid-template-columns: 1fr 1fr ;
+    grid-template-columns: : 1fr 2fr ;
+    grid-template-areas:  
+        " gallerie gallerie"
+        " imgZoom content ";
+}   
+
+
+.content-wrapper .gal{
+    grid-area: gallerie;
+}
+
+.gal {
+	display : grid ;
+	grid-template-columns: repeat(18 , 1fr) ;
+	column-gap: 5px;
+	row-gap: 15px;
+    height:auto;
+    max-width: 100%;
+    padding-top:20px;
+}
+
+
+.img_container {
+	height: 50px;
+    position: relative;
+	overflow: hidden;
+	display: grid;
+	align-content: center;
+	align-items: center;
+	justify-items: center;
+	justify-content: center;
+	align-items: center;
+	align-content: space-around;
+}
+
+
+.img_container img{
+	width :150%;
+    height: auto;
+}
+
+
+
+
+.img_container:last-of-type {
+}
+
+
+
+.imgzoom{
+    padding:20px;
+    display: grid;
+    
+}
+
 
+.meta {
+		border:none;
+        padding:  10px ;
+        font-size: 1.5em; 
+}
+.meta tr {
+	border:none;
+	background: #f0f0f0;
+     vertical-align: baseline;
+}
+.meta td {
+	border:none;
+	text-align:left;
+	background: #ffffff;
 }
 
+.meta tr td:first-of-type{
+        width: auto;
+        padding-right: 20px ;
+        white-space: nowrap;
+}
 
 .content-wrapper .content {
     padding:10px;
@@ -323,26 +406,6 @@ a:hover{
 #metad .date {
 }
 
-table {
-  border-collapse: collapse;
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-th, td {
-  text-align: left;
-  padding: 8px;
-  border: 1px solid #ddd;
-}
-
-tr:nth-child(even) {
-  background-color: #f2f2f2;
-}
-
-th {
-  background-color: #000;
-  color: white;
-}
 
 img {
     width:100%;
@@ -371,35 +434,6 @@ p{
     font-size:1.3em;
 }
 
-.gal {
-	display : grid ;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr  ;
-	column-gap: 10px;
-	row-gap: 10px;
-}
-
-.img_container {
-	position: relative;
-	overflow: hidden;
-	//display: grid;
-	//align-content: center;
-	//align-items: center;
-	//justify-items: center;
-	//justify-content: center;
-	//align-items: center;
-	//align-content: space-around;
-}
-
-
-.img_container:last-of-type {
-    grid-column: 1 / span 5
-}
-
-
-
-.img_container img{
-	width:100%;
-}
 
 .fullImg{
 	grid-column: span 3;

templates/index.html

@@ -11,7 +11,6 @@
 
     {% include 'menu.html' %}
  
-    <div id="articles">
     <ul class="legend">
         <li class="sort" data-sort="upper"><span>upper</span></li>
         <li class="sort" data-sort="title"><span>project name</span></li>
@@ -21,19 +20,20 @@
         <li class="sort" data-sort="fund"><span>initiative/fund</span></li>
         <li class="sort" data-sort="network"><span>network</span></li>
     </ul>
+    <div id="articles">
             <ul class="alist">
 
         {% for article in articles %}
             <li {% if not imgDict[article.path]  %}class="noContent"{%endif%} >
-               <a href="" ><!-- {{ url_for('index', _external=False) }}{{ article.path }}--> 
+                <div class="articleData">
-                <span class="upper">{{ article.upper }}</span>
+                     <span class="upper">{{ article.upper }}</span>
-                <span class="title ">{{article.title}}</span>
+                     <span class="title ">{{article.title}}</span>
-                <span class="period">{{article.published.strftime('%Y') }}</span>
+                     <span class="period">{{article.period}}</span>
-                <span class="location">{{article.location}}</span>
+                     <span class="location">{{article.location}}</span>
-                <span class="type">{{article.type}}</span>
+                     <span class="type">{{article.type}}</span>
-                <span class="fund">{{article.fund}}</span>
+                     <span class="fund">{{article.fund}}</span>
-                <span class="network">{{article.network}}</span>
+                     <span class="network">{{article.network}}</span>
-               </a> 
+                </div>
                 <div class="content-wrapper">
             {% if imgDict[article.path]   %}
                     <div class="gal">
@@ -45,7 +45,44 @@
 		            </div>
 		        {% endfor %}
 	            </div>{%endif%}
+                    <div class="imgzoom">
+		          <img src="pages/{{article.path}}/{{img}}"/>
+                    </div> 
                     <div class="content">
+                        <div class="meta">
+                            <table>
+                                <tbody>
+                                      <tr>
+                                        <td><b>Project type:</b></td>
+                                        <td> {{article.type}}</td>
+                                      </tr>
+                                      <tr>
+                                        <td><b>Location:</b></td>
+                                        <td> {{article.location}}</td>
+                                      </tr>
+                                      <tr>
+                                        <td><b>Project Time:</b></td>
+                                        <td> {{article.period}}</td>
+                                      </tr>
+                                      <tr>
+                                        <td><b>Team:</b></td>
+                                        <td> {{article.team}}</td>
+                                      </tr>
+                                      <tr>
+                                        <td><b>Partners:</b></td>
+                                        <td> {{article.network}}</td>
+                                      </tr>
+                                      <tr>
+                                        <td><b>Client:</b></td>
+                                        <td> {{article.client}}</td>
+                                      </tr>
+                                      <tr>
+                                        <td><b>Budget:</b></td>
+                                        <td> {{article.budget}}</td>
+                                      </tr>
+                                </tbody>
+                            </table>
+                        </div>
                         {{article}}
                     </div>
                 </div>