DjalimSimaila/Projet-Symfony
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

search style (not finished)

Browse Source
This commit is contained in:
ZeKap 2024-02-22 14:59:01 +01:00
parent b57b3d0afc
commit 77b34939cd
No known key found for this signature in database
GPG Key ID: 8D70E0631DD5792A
3 changed files with 71 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
assets/styles/app.css
View File

@ -134,3 +134,41 @@ main:is(#login, #register) > form {
}
}
}
main#searchResults {
& > h1 {
padding: 2rem;
text-align: center;
}
& div.results {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-items: stretch;
gap: 2rem;
}
}
section.album {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.7rem;
width: auto;
transition: all ease-out 0.2s;
box-shadow: var(--shadow);
& > span {
width: fit-content;
& > * {
display: inline;
}
}
& > img {
min-width: 180px;
width: 100%;
max-width: 260px;
}
&:hover {
transform: scale(1.02);
box-shadow: var(--shadow-hover);
}
}

2
templates/base.html.twig
View File

@ -48,7 +48,7 @@
</header>
{% endblock %}
<main>{% block body %}{% endblock %}</main>
{% block body %}{% endblock %}
{% block footer %}
<footer>

57
templates/search/search.html.twig
View File

@ -1,27 +1,34 @@
{% extends 'base.html.twig' %}
{% block title %} results for {{ query }} !{% endblock %}
{% block body %}
<style>
.example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
.example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
<div class="example-wrapper">
{% extends 'base.html.twig' %} {% block title %} results for {{ query }} !{%
endblock %} {% block body %}
<main id="searchResults">
<h1>Results for "{{ query }}" with {{fruit_emoji}}:</h1>
{% for result in results %}
{% set array = result['title']|split('-') %}
{% set artist = array[0] %}
{% set song = array[1] %}
<div>
<p>artist : {{artist}}</p>
<p>song : {{song}}</p>
<img loading="lazy" src={{result['cover_image']}} alt="{{song ~ ' by ' ~ artist}}" />
</div>
{% endfor %}
<a href="/search?q={{query}}&page={{previous_page}}&fruit={{fruit_emoji}}">previous page</a>
<p>{{page}}</p>
<a href="/search?q={{query}}&page={{next_page}}&fruit={{fruit_emoji}}">next page</a>
</div>
<div class="results">
{% for result in results %} {% set array = result['title']|split('-') %}
{% set artist = array[0] %} {% set album = array[1] %}
<section class="album">
<span>
<h2>{{album}}</h2>
by
<h3>{{artist}}</h3>
</span>
<img
loading="lazy"
src="{{result['cover_image']}}"
alt="{{album ~ ' by ' ~ artist}}"
/>
<br />
</section>
{% endfor %}
</div>
<nav>
<a
href="/search?q={{query}}&page={{previous_page}}&fruit={{fruit_emoji}}"
>previous page</a
>
<p>{{page}}</p>
<a href="/search?q={{query}}&page={{next_page}}&fruit={{fruit_emoji}}"
>next page</a
>
</nav>
</main>
{% endblock %}