styled convo view with images and other convos

This commit is contained in:
jorge 2024-04-01 18:15:52 +02:00
parent 51d0ba24e2
commit da21ef92e2
10 changed files with 346 additions and 173 deletions

View File

@ -1615,6 +1615,23 @@ Add your custom styles in this file so it is easier to update the theme.
padding-bottom: 4rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main > article.xarxaprod-convo {
display: grid;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main > article.xarxaprod-convo > * {
max-width: 40rem;
margin: 0 auto;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main > article.xarxaprod-convo > header {
grid-row-start: 2;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main > article.xarxaprod-convo > footer {
max-width: unset;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main > section {
padding-bottom: 4rem;
}
@ -1948,19 +1965,19 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper {
/*
* big lletters block below titles
* */
* big lletters block below titles
* */
/*
* blocks columns with line below each block
* see Que oferim?
* */
* blocks columns with line below each block
* see Que oferim?
* */
/*
* download files
* line and icon to show download
*
* * * * * * * */
* download files
* line and icon to show download
*
* * * * * * * */
/* used in
* ./template-parts/section-eachpost.php
@ -1983,6 +2000,8 @@ Add your custom styles in this file so it is easier to update the theme.
*
* */
/* mapas leaflet associats */
/*
* categories:
*
@ -2167,6 +2186,30 @@ Add your custom styles in this file so it is easier to update the theme.
font-size: 0.8rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper article.xarxaprod-convo > .xarxaprod-convo-info-fields {
padding-top: 2rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper article.xarxaprod-convo > .entry-footer {
padding-top: 2rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper article.xarxaprod-convo > .entry-footer .xarxaprod-more-convos-header {
padding: 2rem 0;
font-size: 1.6rem;
text-align: center;
text-transform: uppercase;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper article.xarxaprod-convo > .entry-footer .last-convos {
padding: 2rem 0;
border-top: 0.05em solid #000;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper article.xarxaprod-convo > .entry-footer .last-convos > header {
display: none;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-convo-info-fields,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda-info {
margin-bottom: 2em;
@ -2284,6 +2327,20 @@ Add your custom styles in this file so it is easier to update the theme.
font-size: 1rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-contact {
font-size: 0.9rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-contact h6 {
font-size: 0.9rem;
border: none;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-contact li {
display: grid;
grid-template-columns: 1fr 2fr;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associats-map,
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-espais-map {
aspect-ratio: 4 / 3;
@ -2300,20 +2357,6 @@ Add your custom styles in this file so it is easier to update the theme.
aspect-ratio: 16 / 9;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-contact {
font-size: 0.9rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-contact h6 {
font-size: 0.9rem;
border: none;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-contact li {
display: grid;
grid-template-columns: 1fr 2fr;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-cards,
.edit-post-visual-editor__content-area .editor-styles-wrapper .category-convocatories,
.edit-post-visual-editor__content-area .editor-styles-wrapper .category-activitats,
@ -2663,7 +2706,6 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-gallery-images {
--this-aspect-ratio: 16 / 9;
display: grid;
grid-template-rows: 6fr 1fr;
grid-gap: 1rem;
overflow: hidden;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,6 @@
@media screen {
@media screen {
//any screen
.sticky {
display: block;
}
@ -13,7 +15,6 @@
}
.page-content,
//.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
@ -27,63 +28,63 @@
margin: 0 0 1.5em;
}
.home-featured {
padding: 0 1rem;
padding: 0 1rem;
}
/*
* big lletters block below titles
* */
.xarxaprod-intro {
line-height: 1.2;
margin-top: 0;
margin-bottom: 0;
}
/*
* blocks columns with line below each block
* see Que oferim?
* */
.ratlla-abaix,.border-bottom {
.wp-block-column {
position:relative;
}
/*
* big lletters block below titles
* */
.xarxaprod-intro {
line-height: 1.2;
margin-top: 0;
margin-bottom: 0;
}
/*
* blocks columns with line below each block
* see Que oferim?
* */
.ratlla-abaix,.border-bottom {
.wp-block-column {
position:relative;
}
.wp-block-heading {
padding-top: 1em;
padding-bottom: 2em;
display:inline-grid;
&:after {
content: "";
border-bottom: $border__line;
width: 100%;
position: absolute;
bottom: 0;
}
.wp-block-heading {
padding-top: 1em;
padding-bottom: 2em;
display:inline-grid;
&:after {
content: "";
border-bottom: $border__line;
width: 100%;
position: absolute;
bottom: 0;
}
}
/*
* download files
* line and icon to show download
*
* * * * * * * */
.descarregar-fitxers,.descarga-fichero,.download-files {
a {
display: inline-block;
width: 100%;
border-bottom: $border__line;
&:after {
content: "";
display:inline-block;
float: right;
width: 1em;
height: 1em;
background-image: url(./assets/img/icon-download.svg);
background-repeat: none;
background-size: contain;
}
}
}
}
}
/*
* download files
* line and icon to show download
*
* * * * * * * */
.descarregar-fitxers,.descarga-fichero,.download-files {
a {
display: inline-block;
width: 100%;
border-bottom: $border__line;
&:after {
content: "";
display:inline-block;
float: right;
width: 1em;
height: 1em;
background-image: url(./assets/img/icon-download.svg);
background-repeat: none;
background-size: contain;
}
}
}
/* used in
* ./template-parts/section-eachpost.php
@ -113,7 +114,7 @@
padding: 0.5em 0;
}
.more-link {
margin-top: 1rem;
margin-top: 1rem;
}
}
@ -165,7 +166,27 @@
font-size: $font__size-body*0.8;
}
}
article.xarxaprod-convo {
> .xarxaprod-convo-info-fields, {
padding-top: 2rem;
}
> .entry-footer {
padding-top: 2rem;
.xarxaprod-more-convos-header {
padding: 2rem 0;
font-size: $font__size-body*1.6;
text-align: center;
text-transform: uppercase;
}
.last-convos{
padding: 2rem 0;
border-top: $border__line;
> header {
display:none;
}
}
}
}
.xarxaprod-convo-info-fields,
.xarxaprod-agenda-info {
margin-bottom: 2em;
@ -197,7 +218,7 @@
dt {
grid-row: 1 / 1;
font-weight: 100;
}
}
dd {
grid-row: 1 / 2;
margin: 0;
@ -278,7 +299,20 @@
* page-templates/associats-search.php
*
* */
//mapas leaflet
.xarxaprod-associat {
}
.xarxaprod-associat-contact {
font-size: $font__size-body*0.9;
h6 {
font-size: $font__size-body*0.9;
border: none;
}
li {
display:grid;
grid-template-columns: 1fr 2fr;
}
}
/* mapas leaflet associats */
.xarxaprod-associats-map,.xarxaprod-espais-map {
aspect-ratio: 4 / 3;
background-color: rgba(200,200,200,0.4); //place holder background color
@ -293,19 +327,6 @@
aspect-ratio: 16 / 9;
}
}
.xarxaprod-associat {
}
.xarxaprod-associat-contact {
font-size: $font__size-body*0.9;
h6 {
font-size: $font__size-body*0.9;
border: none;
}
li {
display:grid;
grid-template-columns: 1fr 2fr;
}
}
/*
* categories:
*
@ -452,7 +473,6 @@
}
}
}
@media screen and (max-width: 48em) {
//only smaller than 48em
@ -505,7 +525,7 @@
font-size: $font__size-body*1.5;
}
}
.single-xarxaprod-associat {
.xarxaprod-associat {
.xarxaprod-associat-info {
@ -535,18 +555,17 @@
}
@media screen and (min-width: 80em) {
//only bigger than 80rem
.xarxaprod-filtered-content {
grid-template-columns: 1fr 3fr;
gap: $grid__gap * 6;
.archive-posts {
grid-template-columns: repeat(2 , minmax(0,1fr));
&.archive-xarxaprod-associats,&.archive-custom-post-type-associat {
grid-template-columns: repeat(1 , minmax(0,1fr));
}
.xarxaprod-filtered-content {
grid-template-columns: 1fr 3fr;
gap: $grid__gap * 6;
.archive-posts {
grid-template-columns: repeat(2 , minmax(0,1fr));
&.archive-xarxaprod-associats,&.archive-custom-post-type-associat {
grid-template-columns: repeat(1 , minmax(0,1fr));
}
}
.archive-posts {
grid-template-columns: repeat(3 , minmax(0,1fr));
}
}
.archive-posts {
grid-template-columns: repeat(3 , minmax(0,1fr));
}
}

View File

@ -41,7 +41,7 @@
.xarxaprod-associat-gallery-images { //section
--this-aspect-ratio: 16 / 9;
display: grid;
grid-template-rows: 6fr 1fr;
//grid-template-rows: 6fr 1fr; //no need to impose height, it will auto adapt
grid-gap: $grid__gap;
overflow: hidden;
.xarxaprod-associat-slides-nav{ //navigation

View File

@ -1,4 +1,6 @@
@media screen {
//any screen
html:not([data-scroll='0']) {
.site-header:before {
content: "";
@ -12,7 +14,7 @@
margin-right:-50vw;
height: 100%;
z-index: -1;
background-color: $color__white;
background-color: $color__white;
}
}
.no-sidebar {
@ -49,7 +51,7 @@
top: 0;
z-index: 500;
width: 100%;
padding: 0.5rem 0;
padding: 0.5rem 0;
background-color: transparent;
.main {
@ -77,18 +79,18 @@
.site-footer {
display: flex;
flex-flow: row;
background: $color__black;
color: $color__white;
background: $color__black;
color: $color__white;
margin-top: 4em;
:where(.wp-block-columns.is-layout-flex) {
gap: $grid__gap * 5;
}
gap: $grid__gap * 5;
}
.site-info {
&> section {
margin-top: 2em;
padding: 2em 4em;
border-top: $border__line;
}
margin-top: 2em;
padding: 2em 4em;
border-top: $border__line;
}
}
a {
color: $color__white;
@ -97,11 +99,11 @@
}
}
ul[id*="menu-footer"] {
column-count: 3;
column-count: 3;
a {
text-decoration: underline;
}
}
}
}//end .site-footer
:where(.wp-block-columns.is-layout-flex) {
gap: $grid__gap * 1.5;
@ -143,7 +145,7 @@
margin-right:-50vw;
height: 100%;
z-index: -1;
background-color: $color__white;
background-color: $color__white;
}
}
.site {
@ -161,15 +163,15 @@
}
}
.site-header {
padding: 0;
padding: 0;
.main {
grid-column: 2/4;
width: 100%;
grid-column: 2/4;
width: 100%;
}
.secondary {
grid-column: 2/4;
align-items: center;
grid-column: 2/4;
align-items: center;
width: 100%;
}
}
@ -177,6 +179,23 @@
padding: 0;
> article {
padding-bottom: 4rem;
&.xarxaprod-convo {
display: grid;
> * {
max-width: 40rem;
margin: 0 auto;
}
> header {
grid-row-start: 2;
}
> aside, > .xarxaprod-espai-image {
}
> .entry-content {
}
> footer{
max-width: unset;
}
}
}
> section {
padding-bottom: 4rem;
@ -198,17 +217,17 @@
.archive-posts {
grid-template-columns: repeat(3 , 1fr);
}
.xarxaprod-faqs-aside {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.xarxaprod-faqs-aside {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.xarxaprod-search-form {
&:hover,&:active,&:focus,&:target {
flex-grow: 1;
}
flex-grow: 1;
}
}
}
}
}
@media screen and (min-width: 80em) {
//only bigger than 80rem
@ -237,4 +256,3 @@
padding: 0;
}
}

View File

@ -1479,6 +1479,23 @@ textarea {
padding-bottom: 4rem;
}
.site-main > article.xarxaprod-convo {
display: grid;
}
.site-main > article.xarxaprod-convo > * {
max-width: 40rem;
margin: 0 auto;
}
.site-main > article.xarxaprod-convo > header {
grid-row-start: 2;
}
.site-main > article.xarxaprod-convo > footer {
max-width: unset;
}
.site-main > section {
padding-bottom: 4rem;
}
@ -1842,8 +1859,8 @@ textarea {
}
/*
* big lletters block below titles
* */
* big lletters block below titles
* */
.xarxaprod-intro {
line-height: 1.2;
margin-top: 0;
@ -1851,9 +1868,9 @@ textarea {
}
/*
* blocks columns with line below each block
* see Que oferim?
* */
* blocks columns with line below each block
* see Que oferim?
* */
.ratlla-abaix .wp-block-column,
.border-bottom .wp-block-column {
position: relative;
@ -1876,10 +1893,10 @@ textarea {
}
/*
* download files
* line and icon to show download
*
* * * * * * * */
* download files
* line and icon to show download
*
* * * * * * * */
.descarregar-fitxers a,
.descarga-fichero a,
.download-files a {
@ -1998,6 +2015,30 @@ textarea {
font-size: 0.8rem;
}
article.xarxaprod-convo > .xarxaprod-convo-info-fields {
padding-top: 2rem;
}
article.xarxaprod-convo > .entry-footer {
padding-top: 2rem;
}
article.xarxaprod-convo > .entry-footer .xarxaprod-more-convos-header {
padding: 2rem 0;
font-size: 1.6rem;
text-align: center;
text-transform: uppercase;
}
article.xarxaprod-convo > .entry-footer .last-convos {
padding: 2rem 0;
border-top: 0.05em solid #000;
}
article.xarxaprod-convo > .entry-footer .last-convos > header {
display: none;
}
.xarxaprod-convo-info-fields,
.xarxaprod-agenda-info {
margin-bottom: 2em;
@ -2124,6 +2165,21 @@ textarea {
* page-templates/associats-search.php
*
* */
.xarxaprod-associat-contact {
font-size: 0.9rem;
}
.xarxaprod-associat-contact h6 {
font-size: 0.9rem;
border: none;
}
.xarxaprod-associat-contact li {
display: grid;
grid-template-columns: 1fr 2fr;
}
/* mapas leaflet associats */
.xarxaprod-associats-map,
.xarxaprod-espais-map {
aspect-ratio: 4 / 3;
@ -2140,20 +2196,6 @@ textarea {
aspect-ratio: 16 / 9;
}
.xarxaprod-associat-contact {
font-size: 0.9rem;
}
.xarxaprod-associat-contact h6 {
font-size: 0.9rem;
border: none;
}
.xarxaprod-associat-contact li {
display: grid;
grid-template-columns: 1fr 2fr;
}
/*
* categories:
*
@ -2526,7 +2568,6 @@ textarea {
.xarxaprod-associat-gallery-images {
--this-aspect-ratio: 16 / 9;
display: grid;
grid-template-rows: 6fr 1fr;
grid-gap: 1rem;
overflow: hidden;
}

File diff suppressed because one or more lines are too long

View File

@ -100,8 +100,8 @@
</section>
</section>
<section class="xarxaprod-associat-gallery-images">
<?php if( have_rows('xxp_associat_gallery_images') ){ ?>
<section class="xarxaprod-associat-gallery-images">
<nav class="xarxaprod-associat-slides-nav">
<?php while( have_rows('xxp_associat_gallery_images') ): the_row(); ?>
<?php $image=get_sub_field('xxp_associat_image'); ?>
@ -110,7 +110,6 @@
</a>
<?php endwhile; //end while has rows ?>
</nav>
<ul class="xarxaprod-associat-slides">
<?php while( have_rows('xxp_associat_gallery_images') ): the_row(); ?>
<?php $image=get_sub_field('xxp_associat_image'); ?>
@ -122,8 +121,9 @@
</li>
<?php endwhile; //end while has rows ?>
</ul>
<?php }; //end if xxp_associat_gallery_images ?>
</section>
<?php }; //end if xxp_associat_gallery_images ?>
<section class="xarxaprod-associat-convos">
<?php get_template_part( 'template-parts/section', 'last-convos' ); ?>
</section>

View File

@ -15,6 +15,53 @@
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<aside cass="xarxaprod-espai-image">
<?php
if( get_field('xxp_convo_espai_associat') ):
// read here howto
// https://www.advancedcustomfields.com/resources/relationship/#display-list-of-posts-with-setuppostdata
$espai_associat_posts = get_field('xxp_convo_espai_associat');
if( $espai_associat_posts ):
foreach( $espai_associat_posts as $post ):
// Setup this post for WP functions (variable must be named $post).
setup_postdata($post); ?>
<?php
// search and output images
// check if has post_thumbnail
if ( has_post_thumbnail() ){
xarxaprod_post_thumbnail('full');
} else { ?>
<?php if( have_rows('xxp_associat_gallery_images') ){ ?>
<section class="xarxaprod-associat-gallery-images">
<ul class="xarxaprod-associat-slides">
<?php while( have_rows('xxp_associat_gallery_images') ): the_row(); ?>
<?php $image=get_sub_field('xxp_associat_image'); ?>
<li id="<?php echo acf_esc_html( $image['filename'] );?>" class="xarxaprod-associat-image">
<?php //print_r( $image ); //echo the whole array ?>
<?php //print_r( $image['ID'] ); // echo one fiels of the array?>
<?php echo wp_get_attachment_image( $image['ID'], 'full' ); ?>
<p class="caption"><?php //echo acf_esc_html( $image['caption'] );?></p>
</li>
<?php endwhile; //end while has rows ?>
</ul>
</section>
<?php }; //end if xxp_associat_gallery_images ?>
<?php };//end has_post_thumbnail ?>
<?php endforeach;
// Reset the global post object so that the rest of the page works correctly.
wp_reset_postdata();
endif;
endif;
?>
</aside>
<section class="xarxaprod-convo-info-fields">
<ul>
<?php if( get_field('xxp_convo_espai_associat') ):
@ -83,7 +130,7 @@
</ul>
</section>
<div class="entry-content">
<main class="entry-content">
<?php
the_content(
sprintf(
@ -106,9 +153,15 @@
)
);
?>
</div><!-- .entry-content -->
</main><!-- .entry-content -->
<section class="">
</section>
<footer class="entry-footer">
<h6 class="xarxaprod-more-convos-header big"> Altres convòcatories</h6>
<?php get_template_part( 'template-parts/section', 'last-convos' ); ?>
<footer class="entry-footer">
<?php xarxaprod_entry_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->