mirror of
https://gitlab.com/ansol/web-ansol.org.git
synced 2024-11-22 06:11:30 +00:00
Merge branch 'design/improve-search-and-event-covers' into 'master'
Fix search and event covers CSS See merge request tcarrondo/hugo-ansol.org!7
This commit is contained in:
commit
eeed03d67a
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@ -178,11 +178,11 @@ nav.main .nav-search:hover {
|
||||
.events-list li {
|
||||
min-width: 300px;
|
||||
display: grid;
|
||||
grid-template-areas: "img headline" "img subheader";
|
||||
grid-template-areas: "img text";
|
||||
justify-content: left;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
width: calc(50% - 50px);
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.events-list.events-list-full-width li {
|
||||
@ -190,19 +190,17 @@ nav.main .nav-search:hover {
|
||||
}
|
||||
|
||||
.events-list .event-cover {
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
margin-bottom: -20px;
|
||||
margin-right: 15px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.events-list .img { grid-area: img; margin-right: 10px; }
|
||||
.events-list .headline { grid-area: headline; }
|
||||
.events-list .date { grid-area: date; }
|
||||
.events-list .subheader { grid-area: subheader; font-size: 0.8rem; margin-top: 10px; }
|
||||
.events-list .img { grid-area: img; }
|
||||
.events-list .text { grid-area: text; margin-top: 5px; }
|
||||
.events-list .date { }
|
||||
.events-list .subheader { font-size: 0.8rem; margin-top: 10px; }
|
||||
|
||||
.events-list .title { font-size: 1.25rem; }
|
||||
|
||||
@ -275,11 +273,11 @@ p { margin: 0px; }
|
||||
.news-section { background-color: #f7f7f7; }
|
||||
.events-section { background-color: #f7f7f7; }
|
||||
|
||||
section h2 {
|
||||
main section h2 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
section h2::before {
|
||||
main section h2::before {
|
||||
content: "";
|
||||
background-size: 40px 40px;
|
||||
width: 40px;
|
||||
@ -293,11 +291,11 @@ section h2::before {
|
||||
.campaigns-section h2::before { background-image: var(--campaigns-icon); }
|
||||
.events-section h2::before { background-image: var(--events-icon); }
|
||||
|
||||
section {
|
||||
main section {
|
||||
padding: 40px 0px;
|
||||
}
|
||||
|
||||
section.news-section { margin-top: 20px; }
|
||||
main section.news-section { margin-top: 20px; }
|
||||
|
||||
.about { margin-top: 40px; max-width: 660px; }
|
||||
|
||||
@ -328,7 +326,13 @@ article.article h1 {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
.searching .search-results { display: block; }
|
||||
.searching nav.main { display: none; }
|
||||
.searching main { display: none; }
|
||||
.searching footer { display: none; }
|
||||
|
||||
.search-results { display: none; }
|
||||
|
||||
.search-results {
|
||||
@ -339,5 +343,27 @@ article.article h1 {
|
||||
right: 0;
|
||||
overflow: scroll;
|
||||
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; }
|
||||
|
||||
@ -13,30 +13,32 @@
|
||||
{{ end }}
|
||||
<img class='event-cover' src="{{ $cover.Permalink }}" />
|
||||
</a>
|
||||
<p class="headline">
|
||||
<a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</p>
|
||||
<p class="subheader">
|
||||
<span class="date">
|
||||
{{ with .Params.metadata.event.date }}
|
||||
{{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }}
|
||||
{{ if eq (time.Format "15:04" .start) (time.Format "15:04" .finish) }}
|
||||
{{ time.Format "2 de January de 2006" .start }}
|
||||
<div class="text">
|
||||
<p class="headline">
|
||||
<a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</p>
|
||||
<p class="subheader">
|
||||
<span class="date">
|
||||
{{ with .Params.metadata.event.date }}
|
||||
{{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }}
|
||||
{{ 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 }}
|
||||
{{ time.Format "2 de January de 2006" .start }} das
|
||||
{{ time.Format "15:04" .start }} às
|
||||
{{ time.Format "15:04" .finish }}
|
||||
De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .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 }}
|
||||
De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .finish }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</span>
|
||||
—
|
||||
<span class='location'>{{ .Params.metadata.event.location }}</span>
|
||||
</p>
|
||||
</span>
|
||||
—
|
||||
<span class='location'>{{ .Params.metadata.event.location }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
{{ end }}
|
||||
</ul>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
@ -80,30 +80,32 @@
|
||||
<img class='event-cover' src="{{ .Permalink }}" />
|
||||
{{ end }}
|
||||
</a>
|
||||
<p class="headline">
|
||||
<a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</p>
|
||||
<p class="subheader">
|
||||
<span class="date">
|
||||
{{ with .Params.metadata.event.date }}
|
||||
{{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }}
|
||||
{{ if eq (time.Format "15:04" .start) (time.Format "15:04" .finish) }}
|
||||
{{ time.Format "2 de January de 2006" .start }}
|
||||
<div class="text">
|
||||
<p class="headline">
|
||||
<a class="title" href="{{ .Permalink }}">{{ .Title }}</a>
|
||||
</p>
|
||||
<p class="subheader">
|
||||
<span class="date">
|
||||
{{ with .Params.metadata.event.date }}
|
||||
{{ if eq (time.Format "2 January 2006" .start) (time.Format "2 January 2006" .finish) }}
|
||||
{{ 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 }}
|
||||
{{ time.Format "2 de January de 2006" .start }} das
|
||||
{{ time.Format "15:04" .start }} às
|
||||
{{ time.Format "15:04" .finish }}
|
||||
De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .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 }}
|
||||
De {{ time.Format "2 de January de 2006" .start }} a {{ time.Format "2 de January de 2006" .finish }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</span>
|
||||
—
|
||||
<span class='location'>{{ .Params.metadata.event.location }}</span>
|
||||
</p>
|
||||
</span>
|
||||
—
|
||||
<span class='location'>{{ .Params.metadata.event.location }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
@ -2,22 +2,20 @@
|
||||
<div class="container">
|
||||
<section class="search-header">
|
||||
|
||||
<div class="row no-gutters justify-content-between mb-3">
|
||||
<div class="col-6">
|
||||
<h1>{{ i18n "search" }}</h1>
|
||||
</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 class="search-title">
|
||||
<h1>{{ i18n "search" }}</h1>
|
||||
<a class="search-close" href="#" onclick="document.querySelector('body').classList.toggle('searching'); return false;">Fechar</a>
|
||||
</div>
|
||||
|
||||
<div id="search-box">
|
||||
{{ if eq site.Params.search.engine 1 }}
|
||||
<input name="q" id="search-query" placeholder="{{i18n "search_placeholder"}}" autocapitalize="off"
|
||||
autocomplete="off" autocorrect="off" spellcheck="false" type="search">
|
||||
{{ else }}
|
||||
<!-- Search box will appear here -->
|
||||
{{ end }}
|
||||
<input
|
||||
name="q" id="search-query"
|
||||
placeholder="{{i18n "search_placeholder"}}"
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false" type="search"
|
||||
>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user