diff --git a/pages/028_IER.md b/pages/028_IER.md index 2da3428..e3931cb 100644 --- a/pages/028_IER.md +++ b/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: -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 - - +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 +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 \ No newline at end of file diff --git a/pages/028_IER/.DS_Store b/pages/028_IER/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/pages/028_IER/.DS_Store differ diff --git a/pages/028_IER/00_Layout_ProjectImages.jpg b/pages/028_IER/00_Layout_ProjectImages.jpg new file mode 100644 index 0000000..5c4c2fe Binary files /dev/null and b/pages/028_IER/00_Layout_ProjectImages.jpg differ diff --git a/pages/030_ESC.md b/pages/030_ESC.md index 71d2171..33284a7 100644 --- a/pages/030_ESC.md +++ b/pages/030_ESC.md @@ -1,13 +1,14 @@ -upper: ESC -title : Every Space Counts published: 2018-01-01 + +upper: ESC +title : Every Space Counts +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: -desc: -author: Andrea Aragone, Lina Bentaleb, Davide Cauciello, Marta De Marchi, Octavio Piñeiro Aramburu, Marco Ranzato - +team: Andrea Aragone, Lina Bentaleb, Davide Cauciello, Marta De Marchi, Octavio Piñeiro Aramburu, Marco Ranzato +client: jocker +budget: 666.666$ ... diff --git a/pages/034_GWG.md b/pages/034_GWG.md index b43a1ba..238dcb4 100644 --- a/pages/034_GWG.md +++ b/pages/034_GWG.md @@ -1,34 +1,18 @@ -upper: GWG -title : Green With Grey | Groen Met Grijs published: 2019-01-01 + +upper: GWG +title : Green With Grey | Groen Met Grijs +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: -desc: -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) - - - +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) +client: Departemente Omgeving +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. diff --git a/pages/059_LML.md b/pages/059_LML.md new file mode 100644 index 0000000..03e150b --- /dev/null +++ b/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 \ No newline at end of file diff --git a/pages/059_LML/01.jpeg b/pages/059_LML/01.jpeg new file mode 100644 index 0000000..da3aa2c Binary files /dev/null and b/pages/059_LML/01.jpeg differ diff --git a/pages/059_LML/01.jpg b/pages/059_LML/01.jpg new file mode 100644 index 0000000..44f32d3 Binary files /dev/null and b/pages/059_LML/01.jpg differ diff --git a/pages/059_LML/02.jpeg b/pages/059_LML/02.jpeg new file mode 100644 index 0000000..ba0bc9a Binary files /dev/null and b/pages/059_LML/02.jpeg differ diff --git a/pages/059_LML/03.jpeg b/pages/059_LML/03.jpeg new file mode 100644 index 0000000..85a93bb Binary files /dev/null and b/pages/059_LML/03.jpeg differ diff --git a/pages/059_LML/04-crop.jpg b/pages/059_LML/04-crop.jpg new file mode 100644 index 0000000..c38fc0a Binary files /dev/null and b/pages/059_LML/04-crop.jpg differ diff --git a/pages/099_EXP.md b/pages/099_EXP.md new file mode 100644 index 0000000..15f1b09 --- /dev/null +++ b/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. diff --git a/pages/099_EXP/.DS_Store b/pages/099_EXP/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/pages/099_EXP/.DS_Store differ diff --git a/pages/099_EXP/01-crop.jpg b/pages/099_EXP/01-crop.jpg new file mode 100644 index 0000000..44f32d3 Binary files /dev/null and b/pages/099_EXP/01-crop.jpg differ diff --git a/pages/099_EXP/01.jpeg b/pages/099_EXP/01.jpeg new file mode 100644 index 0000000..da3aa2c Binary files /dev/null and b/pages/099_EXP/01.jpeg differ diff --git a/pages/099_EXP/02.jpeg b/pages/099_EXP/02.jpeg new file mode 100644 index 0000000..ba0bc9a Binary files /dev/null and b/pages/099_EXP/02.jpeg differ diff --git a/pages/099_EXP/03.jpeg b/pages/099_EXP/03.jpeg new file mode 100644 index 0000000..85a93bb Binary files /dev/null and b/pages/099_EXP/03.jpeg differ diff --git a/pages/099_EXP/04-crop.jpg b/pages/099_EXP/04-crop.jpg new file mode 100644 index 0000000..c38fc0a Binary files /dev/null and b/pages/099_EXP/04-crop.jpg differ diff --git a/pages/099_EXP/04.jpeg b/pages/099_EXP/04.jpeg new file mode 100644 index 0000000..2982c0b Binary files /dev/null and b/pages/099_EXP/04.jpeg differ diff --git a/pages/099_EXP/05.jpeg b/pages/099_EXP/05.jpeg new file mode 100644 index 0000000..846c8b0 Binary files /dev/null and b/pages/099_EXP/05.jpeg differ diff --git a/pages/099_EXP/Cover.jpg b/pages/099_EXP/Cover.jpg new file mode 100644 index 0000000..7ad6b3b Binary files /dev/null and b/pages/099_EXP/Cover.jpg differ diff --git a/static/main.js b/static/main.js index 0d5163e..8f69e20 100644 --- a/static/main.js +++ b/static/main.js @@ -1,68 +1,92 @@ $(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' - ); + + var imgW = $(".gal .img_container").width() + $(".gal .img_container").css('height',imgW); + $(".alist").on("click", "li",function(){ + $(".content-wrapper").removeClass('open'); + $(this).find(".content-wrapper").addClass('open'); + }); + + + + $(document).on("click", ".gal img", function() { + var clickedSrc = $(this).attr("src"); + console.log(clickedSrc); + $(this).closest(".gal").next(".imgzoom").find("img").attr("src", clickedSrc); + }); + + + let currentSort = null; + let currentDirection = 'asc'; + + // Click handler for sort buttons + $('.legend li.sort').click(function() { + const sortBy = $(this).attr('data-sort'); + console.log("Sorting by:", sortBy); // Debug info + + // Toggle direction if clicking the same sort again + if (currentSort === sortBy) { + currentDirection = currentDirection === 'asc' ? 'desc' : 'asc'; + } else { + currentDirection = 'asc'; + } + + currentSort = sortBy; + console.log("Direction:", currentDirection); // Debug info + + // 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; } - // 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); - } + // Get all list items + let $articles = $list.children('li').toArray(); + 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 - $(".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"); - } - } + // Re-append in new order + $list.empty(); + $.each($articles, function(i, item) { + $list.append(item); }); + + // Update UI indicators + $('.legend li.sort').removeClass('active sort-asc sort-desc'); + $(this).addClass('active'); + $(this).addClass(currentDirection === 'asc' ? 'sort-asc' : 'sort-desc'); + }); + + }); + diff --git a/static/mainjsbak b/static/mainjsbak new file mode 100644 index 0000000..f67cbab --- /dev/null +++ b/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') + + //}); + + +}); diff --git a/static/style.css b/static/style.css index 02e946b..290ebaa 100644 --- a/static/style.css +++ b/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; - + 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,11 +273,84 @@ 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; diff --git a/templates/index.html b/templates/index.html index 6932b54..994c04c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -11,7 +11,6 @@ {% include 'menu.html' %} -
+
{%endif%} +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Project type: {{article.type}}
Location: {{article.location}}
Project Time: {{article.period}}
Team: {{article.team}}
Partners: {{article.network}}
Client: {{article.client}}
Budget: {{article.budget}}
+
{{article}}