feat: entry types: short & full

index.html

@@ -31,20 +31,30 @@
 	</form>
 	<div id="content">JavaScript disabled?</div>
 	<div id="templates" hidden>
-		<div class="entry">
+		<div class="entry full">
 			<div>
 				<img src="$IMG">
 				<button onclick="installIpa($IDX)">Install</button>
 			</div>
 			<div class="info">
 				<h4>$TITLE</h4>
-				<div>BundleId: <a onclick="searchByBundleId(this)">$BUNDLEID</a></div>
+				<div>BundleId: $BUNDLEID</div>
 				<div>Version: v$VERSION – $SIZE</div>
 				<div>Device: $PLATFORM</div>
 				<div>Minimum OS: $MINOS</div>
 				<div>Link: <a href="$URL" rel="noopener noreferrer nofollow">$URLNAME</a></div>
 			</div>
 		</div>
+		<div class="entry short">
+			<div><img src="$IMG"></div>
+			<div class="info">
+				<h4>$TITLE</h4>
+				<div>BundleId: $BUNDLEID</div>
+				<div>Device: $PLATFORM</div>
+				<div>Minimum OS: $MINOS</div>
+				<div><a onclick="searchBundle($IDX)">Show all</a></div>
+			</div>
+		</div>
 	</div>
 	<div id="overlay" hidden>
 		<div id="installMsg">

script.js

@@ -210,7 +210,8 @@ function entriesToDict(entry) {
 }
 
 function entriesToStr(data) {
-    const template = document.getElementById('templates').querySelector('.entry').outerHTML;
+    const templateType = document.getElementById('unique').checked ? '.short' : '.entry';
+    const template = document.getElementById('templates').querySelector(templateType).outerHTML;
     var rv = '';
     for (var i = 0; i < data.length; i++) {
         const entry = entriesToDict(DB[data[i]]);

style.css

@@ -43,7 +43,7 @@ form input, form select, form button {
 
 /* IPA entry */
 h4 {
-  margin: 0;
+  margin: 0 0 8px;
 }
 .entry {
   display: inline-block;
@@ -56,13 +56,13 @@ h4 {
 .entry>div {
   display: inline-block;
   margin: 8px 8px 8px 0;
+  vertical-align: top;
 }
 .entry img {
   width: 74px;
   height: 74px;
-  margin: 8px;
+  margin: 0 8px 2px;
   border-radius: 17%;
-  vertical-align: top;
 }
 .entry button {
   display: block;