7
1
mirror of https://gitlab.com/ansol/web-ansol.org.git synced 2024-11-22 06:11:30 +00:00

Fix search and event covers CSS

This commit is contained in:
Hugo Peixoto 2021-11-01 17:36:46 +00:00
parent e4f3b52b36
commit 2e3f7e956e
6 changed files with 98 additions and 70 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -178,11 +178,11 @@ nav.main .nav-search:hover {
.events-list li { .events-list li {
min-width: 300px; min-width: 300px;
display: grid; display: grid;
grid-template-areas: "img headline" "img subheader"; grid-template-areas: "img text";
justify-content: left; justify-content: left;
background-color: white; background-color: white;
padding: 20px;
width: calc(50% - 50px); width: calc(50% - 50px);
column-gap: 1rem;
} }
.events-list.events-list-full-width li { .events-list.events-list-full-width li {
@ -190,19 +190,17 @@ nav.main .nav-search:hover {
} }
.events-list .event-cover { .events-list .event-cover {
margin-top: -20px;
margin-left: -20px;
margin-bottom: -20px;
margin-right: 15px;
width: 90px; width: 90px;
height: 90px; height: 90px;
object-fit: cover; object-fit: cover;
display: block;
background-color: white;
} }
.events-list .img { grid-area: img; margin-right: 10px; } .events-list .img { grid-area: img; }
.events-list .headline { grid-area: headline; } .events-list .text { grid-area: text; margin-top: 5px; }
.events-list .date { grid-area: date; } .events-list .date { }
.events-list .subheader { grid-area: subheader; font-size: 0.8rem; margin-top: 10px; } .events-list .subheader { font-size: 0.8rem; margin-top: 10px; }
.events-list .title { font-size: 1.25rem; } .events-list .title { font-size: 1.25rem; }
@ -275,11 +273,11 @@ p { margin: 0px; }
.news-section { background-color: #f7f7f7; } .news-section { background-color: #f7f7f7; }
.events-section { background-color: #f7f7f7; } .events-section { background-color: #f7f7f7; }
section h2 { main section h2 {
position: relative; position: relative;
} }
section h2::before { main section h2::before {
content: ""; content: "";
background-size: 40px 40px; background-size: 40px 40px;
width: 40px; width: 40px;
@ -293,11 +291,11 @@ section h2::before {
.campaigns-section h2::before { background-image: var(--campaigns-icon); } .campaigns-section h2::before { background-image: var(--campaigns-icon); }
.events-section h2::before { background-image: var(--events-icon); } .events-section h2::before { background-image: var(--events-icon); }
section { main section {
padding: 40px 0px; padding: 40px 0px;
} }
section.news-section { margin-top: 20px; } main section.news-section { margin-top: 20px; }
.about { margin-top: 40px; max-width: 660px; } .about { margin-top: 40px; max-width: 660px; }
@ -328,7 +326,13 @@ article.article h1 {
line-height: 2.5rem; line-height: 2.5rem;
} }
/* Search */
.searching .search-results { display: block; } .searching .search-results { display: block; }
.searching nav.main { display: none; }
.searching main { display: none; }
.searching footer { display: none; }
.search-results { display: none; } .search-results { display: none; }
.search-results { .search-results {
@ -339,5 +343,27 @@ article.article h1 {
right: 0; right: 0;
overflow: scroll; overflow: scroll;
background-color: white; background-color: white;
padding: 20px;
} }
.search-results h1 {
font-size: 2.25rem;
font-weight: 300;
line-height: 2.5rem;
}
.search-results h3 {
font-size: 1.5rem;
font-weight: 300;
}
.search-results .search-hit {
padding: 20px 0px;
}
.search-results .search-hit-description {
margin-top: 10px;
}
.search-results .search-title { display: flex; align-items: center; justify-content: space-between; }
.search-results .search-close { font-size: 1.5rem; }

View File

@ -13,30 +13,32 @@
{{ end }} {{ end }}
<img class='event-cover' src="{{ $cover.Permalink }}" /> <img class='event-cover' src="{{ $cover.Permalink }}" />
</a> </a>
<p class="headline"> <div class="text">
<a class="title" href="{{ .Permalink }}">{{ .Title }}</a> <p class="headline">
</p> <a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
<p class="subheader"> </p>
<span class="date"> <p class="subheader">
{{ with .Params.metadata.event.date }} <span class="date">
{{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }} {{ with .Params.metadata.event.date }}
{{ if eq (time.Format "15:04" .start) (time.Format "15:04" .finish) }} {{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }}
{{ time.Format "2 de January de 2006" .start }} {{ if eq (time.Format "15:04" .start) (time.Format "15:04" .finish) }}
{{ time.Format "2 de January de 2006" .start }}
{{ else }}
{{ time.Format "2 de January de 2006" .start }} das
{{ time.Format "15:04" .start }} às
{{ time.Format "15:04" .finish }}
{{ end }}
{{ else if eq (time.Format "January 2006" .start) (time.Format "January 2006" .finish) }}
De {{ time.Format "2" .start }} a {{ time.Format "2 de January de 2006" .finish }}
{{ else }} {{ else }}
{{ time.Format "2 de January de 2006" .start }} das De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .finish }}
{{ time.Format "15:04" .start }} às
{{ time.Format "15:04" .finish }}
{{ end }} {{ end }}
{{ else if eq (time.Format "January 2006" .start) (time.Format "January 2006" .finish) }}
De {{ time.Format "2" .start }} a {{ time.Format "2 de January de 2006" .finish }}
{{ else }}
De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .finish }}
{{ end }} {{ end }}
{{ end }} </span>
</span> &mdash;
&mdash; <span class='location'>{{ .Params.metadata.event.location }}</span>
<span class='location'>{{ .Params.metadata.event.location }}</span> </p>
</p> </div>
</li> </li>
{{ end }} {{ end }}

View File

@ -43,7 +43,7 @@
{{ end }} {{ end }}
</ul> </ul>
<p class="see-more body-width"> <p class="see-more body-width">
<a href="{{ (site.GetPage "Section" "post").Permalink }}">Ver mais notícias</a> <a href="{{ (site.GetPage "noticias").Permalink }}">Ver mais notícias</a>
</p> </p>
</section> </section>
@ -80,30 +80,32 @@
<img class='event-cover' src="{{ .Permalink }}" /> <img class='event-cover' src="{{ .Permalink }}" />
{{ end }} {{ end }}
</a> </a>
<p class="headline"> <div class="text">
<a class="title" href="{{ .Permalink }}">{{ .Title }}</a> <p class="headline">
</p> <a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
<p class="subheader"> </p>
<span class="date"> <p class="subheader">
{{ with .Params.metadata.event.date }} <span class="date">
{{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }} {{ with .Params.metadata.event.date }}
{{ if eq (time.Format "15:04" .start) (time.Format "15:04" .finish) }} {{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }}
{{ time.Format "2 de January de 2006" .start }} {{ if eq (time.Format "15:04" .start) (time.Format "15:04" .finish) }}
{{ time.Format "2 de January de 2006" .start }}
{{ else }}
{{ time.Format "2 de January de 2006" .start }} das
{{ time.Format "15:04" .start }} às
{{ time.Format "15:04" .finish }}
{{ end }}
{{ else if eq (time.Format "January 2006" .start) (time.Format "January 2006" .finish) }}
De {{ time.Format "2" .start }} a {{ time.Format "2 de January de 2006" .finish }}
{{ else }} {{ else }}
{{ time.Format "2 de January de 2006" .start }} das De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .finish }}
{{ time.Format "15:04" .start }} às
{{ time.Format "15:04" .finish }}
{{ end }} {{ end }}
{{ else if eq (time.Format "January 2006" .start) (time.Format "January 2006" .finish) }}
De {{ time.Format "2" .start }} a {{ time.Format "2 de January de 2006" .finish }}
{{ else }}
De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .finish }}
{{ end }} {{ end }}
{{ end }} </span>
</span> &mdash;
&mdash; <span class='location'>{{ .Params.metadata.event.location }}</span>
<span class='location'>{{ .Params.metadata.event.location }}</span> </p>
</p> </div>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>

View File

@ -2,22 +2,20 @@
<div class="container"> <div class="container">
<section class="search-header"> <section class="search-header">
<div class="row no-gutters justify-content-between mb-3"> <div class="search-title">
<div class="col-6"> <h1>{{ i18n "search" }}</h1>
<h1>{{ i18n "search" }}</h1> <a class="search-close" href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Fechar</a>
</div>
<div class="col-6 col-search-close">
<a class="js-search" href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Fechar</a>
</div>
</div> </div>
<div id="search-box"> <div id="search-box">
{{ if eq site.Params.search.engine 1 }} <input
<input name="q" id="search-query" placeholder="{{i18n "search_placeholder"}}" autocapitalize="off" name="q" id="search-query"
autocomplete="off" autocorrect="off" spellcheck="false" type="search"> placeholder="{{i18n "search_placeholder"}}"
{{ else }} autocapitalize="off"
<!-- Search box will appear here --> autocomplete="off"
{{ end }} autocorrect="off"
spellcheck="false" type="search"
>
</div> </div>
</section> </section>