diff --git a/View/Pages/SearchLagu.php b/View/Pages/SearchLagu.php index 16f0338a88cc90e03a3f37ebcf857631e8e7d39d..19ab51589fd18a533be0b52ac088c0bd35fc796e 100644 --- a/View/Pages/SearchLagu.php +++ b/View/Pages/SearchLagu.php @@ -13,17 +13,7 @@ ]); ?> -<?php - //$this->layout("Templates/HtmlTemplate", [ - //"title" => "Halaman X | Webtune", - //"styles" => [ - // ], - // "scripts" => [ -// - // ], -// ]); -?> -<!--<button class="primary" id="searchButton">CARI LAGU</button>--> + <label for="jenisSort">SORT HASIL</label> <select id="sortsType" name="sortsType"> <option value="titleASC" <?php if($sortsType==="titleASC")echo "selected"?> >Abjad Menaik(A-Z)</option> @@ -33,25 +23,32 @@ </select> <label for="filterGenre">Filter</label> <select id="filteredGenre" name = "filteredGenre"> - <?php - if($selectedGenre==="nofilter"){ - echo "<option value='nofilter' selected >Tidak Difilter</option>"; - } - else{ - echo "<option value='nofilter' >Tidak Difilter</option>"; - } - foreach($genreList as $_genre){ - if($selectedGenre===$_genre){ - echo "<option value='".$_genre["genre"]."' selected >".$_genre["genre"]."</option>"; - } - else{ - echo "<option value='".$_genre["genre"]."'>".$_genre["genre"]."</option>"; - } - } - ?> + <option value='nofilter' + <?php if($selectedGenre==="nofilter"){ ?> + selected + <?php } ?> + >Tidak Difilter</option> + + <?php foreach($genreList as $_genre){ ?> + <option + value="<?=$_genre["genre"]?>" + <?php if($selectedGenre===$_genre){ ?> + selected + <?php } ?> + > + <?=$_genre["genre"]?></option> + <?php } ?> </select> +<div> +<!-- header --> + +<div id="heading"> + <h1 class="heading__item" id="judul_">Judul</h1> + <h1 class="heading__item">Tahun Rilis</h1> +</div> +<div id='list__container'> + <?php - echo "<div id='list__container'>"; foreach($songs as $song){ $imagePath = $song["image_path"]; $title = $song["title"]; @@ -60,24 +57,21 @@ $year = strlen($release_date)>0 ? explode('-',$release_date)[0]: ""; $genre = $song["genre"]?? ""; $id = $song["song_id"]; - - $html = <<<XYZ - <a href='/lagu/$id' class="list__item"> - <div class="list__item__picture"> - <img src='$imagePath' alt="$title by $singer Cover Image" /> - </div> - <div class="list__item__content"> - <h1 class="list__item__title">$title</h1> - <h2 class="list__item__year">$year</h2> - <p class="list__item__author">$singer</p> - <p class="list__item__genre" >$genre</p> - </div> - </a> - XYZ; - echo $html; - } - echo "</div>"; ?> + <a href='/lagu/<?=$id?>' class="list__item"> + <div class="list__item__picture"> + <img src='<?=$imagePath?>' alt="<?=$title?> by <?=$singer?> Cover Image" /> + </div> + <div class="list__item__content"> + <h1 class="list__item__title"><?=$title?></h1> + <h2 class="list__item__year"><?=$year?></h2> + <p class="list__item__author"><?=$singer?></p> + <p class="list__item__genre" ><?=$genre?></p> + </div> + </a> + <?php } ?> +</div> +</div> <?php $this->component("Component/Pagination", [ "page_number" => $page, diff --git a/static/css/lagu.css b/static/css/lagu.css index 2e99593bf9942bcf57cd35d778cf6ff072e1473c..48402febc8317cbdda1d2ac3e39bed5696efe7d4 100644 --- a/static/css/lagu.css +++ b/static/css/lagu.css @@ -1,5 +1,6 @@ .container__lagu { display: flex; + flex-direction: column; width: 100%; gap: 1.5rem; } diff --git a/static/css/search.css b/static/css/search.css index 5142059c46845f81e1d3e4e57146d4750a0af9b9..75156860cadd4d6873fd61510fee85702dd84934 100644 --- a/static/css/search.css +++ b/static/css/search.css @@ -2,12 +2,13 @@ display: flex; margin: 1.5rem 0; flex-direction: column; + width:80vw; } .list__item { display: flex; flex-direction: row; - width: 70vw; + width: 85vw; padding: 15px; text-decoration: none; color: white; @@ -15,9 +16,11 @@ transition: 100ms ease-in-out; } .list__item__content { + margin-left:10vw; display: grid; width:100%; grid-template-columns: 40vw 8vw; + grid-column-gap:5vw; } .list__item:hover { @@ -53,4 +56,25 @@ .list__item__genre { margin: 0.7em 0 0.5em 3.3em; } - \ No newline at end of file + +#heading{ + margin-top:2vh; + column-gap: 5vw; + display: flex; + flex-grow: 1; + flex-direction: row; + width: 85vw; + padding: 15px; + text-decoration: none; + color: white; + justify-content: space-around; +} + +.heading__item{ + column-gap: 5vw; +} + +#judul_{ + + margin-left:15vw; +} \ No newline at end of file