mirror/Huntarr.io
1
0
Fork 0
mirror of https://github.com/plexguide/Huntarr.io.git synced 2025-12-30 18:50:14 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: implement responsive grid layout for app cards and update styling

Browse Source
This commit is contained in:
Admin9705
2025-05-18 18:00:40 -04:00
parent 272facd0de
commit e360d7ee48
2 changed files with 95 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
docs/apps/index.html
View File

@@ -61,93 +61,95 @@
<h2>Supported Applications</h2>
<div class="app-card sonarr-card">
<div class="app-card-header">
<div class="app-card-icon sonarr">
<img src="../images/arrs/48-sonarr.png" alt="Sonarr Logo" width="48" height="48">
<div class="app-cards-grid">
<div class="app-card sonarr-card">
<div class="app-card-header">
<div class="app-card-icon sonarr">
<img src="../images/arrs/48-sonarr.png" alt="Sonarr Logo" width="48" height="48">
</div>
<h3 class="app-card-title">Sonarr</h3>
</div>
<h3 class="app-card-title">Sonarr</h3>
</div>
<div class="app-card-content">
<p>Manage and automate TV show downloads.</p>
</div>
<div class="app-card-footer">
<a href="sonarr.html">View Sonarr Documentation →</a>
</div>
</div>
<div class="app-card radarr-card">
<div class="app-card-header">
<div class="app-card-icon radarr">
<img src="../images/arrs/48-radarr.png" alt="Radarr Logo" width="48" height="48">
<div class="app-card-content">
<p>Manage and automate TV show downloads.</p>
</div>
<h3 class="app-card-title">Radarr</h3>
</div>
<div class="app-card-content">
<p>Manage and automate movie downloads.</p>
</div>
<div class="app-card-footer">
<a href="radarr.html">View Radarr Documentation →</a>
</div>
</div>
<div class="app-card lidarr-card">
<div class="app-card-header">
<div class="app-card-icon lidarr">
<img src="../images/arrs/48-lidarr.png" alt="Lidarr Logo" width="48" height="48">
<div class="app-card-footer">
<a href="sonarr.html">View Documentation →</a>
</div>
<h3 class="app-card-title">Lidarr</h3>
</div>
<div class="app-card-content">
<p>Manage and automate music downloads.</p>
</div>
<div class="app-card-footer">
<a href="lidarr.html">View Lidarr Documentation →</a>
</div>
</div>
<div class="app-card readarr-card">
<div class="app-card-header">
<div class="app-card-icon readarr">
<img src="../images/arrs/48-readarr.png" alt="Readarr Logo" width="48" height="48">
<div class="app-card radarr-card">
<div class="app-card-header">
<div class="app-card-icon radarr">
<img src="../images/arrs/48-radarr.png" alt="Radarr Logo" width="48" height="48">
</div>
<h3 class="app-card-title">Radarr</h3>
</div>
<h3 class="app-card-title">Readarr</h3>
</div>
<div class="app-card-content">
<p>Manage and automate book downloads.</p>
</div>
<div class="app-card-footer">
<a href="readarr.html">View Readarr Documentation →</a>
</div>
</div>
<div class="app-card whisparr-card">
<div class="app-card-header">
<div class="app-card-icon whisparr">
<img src="../images/arrs/48-whisparr.png" alt="Whisparr Logo" width="48" height="48">
<div class="app-card-content">
<p>Manage and automate movie downloads.</p>
</div>
<h3 class="app-card-title">Whisparr V2</h3>
</div>
<div class="app-card-content">
<p>Manage and automate adult content downloads.</p>
</div>
<div class="app-card-footer">
<a href="whisparr.html">View Whisparr Documentation →</a>
</div>
</div>
<div class="app-card whisparr-card">
<div class="app-card-header">
<div class="app-card-icon whisparr">
<img src="../images/arrs/48-whisparr.png" alt="Whisparr V3 Logo" width="48" height="48">
<div class="app-card-footer">
<a href="radarr.html">View Documentation →</a>
</div>
<h3 class="app-card-title">Whisparr V3 (Eros)</h3>
</div>
<div class="app-card-content">
<p>Newer version of Whisparr for managing adult content downloads.</p>
<div class="app-card lidarr-card">
<div class="app-card-header">
<div class="app-card-icon lidarr">
<img src="../images/arrs/48-lidarr.png" alt="Lidarr Logo" width="48" height="48">
</div>
<h3 class="app-card-title">Lidarr</h3>
</div>
<div class="app-card-content">
<p>Manage and automate music downloads.</p>
</div>
<div class="app-card-footer">
<a href="lidarr.html">View Documentation →</a>
</div>
</div>
<div class="app-card-footer">
<a href="eros.html">View Whisparr V3 Documentation →</a>
<div class="app-card readarr-card">
<div class="app-card-header">
<div class="app-card-icon readarr">
<img src="../images/arrs/48-readarr.png" alt="Readarr Logo" width="48" height="48">
</div>
<h3 class="app-card-title">Readarr</h3>
</div>
<div class="app-card-content">
<p>Manage and automate book downloads.</p>
</div>
<div class="app-card-footer">
<a href="readarr.html">View Documentation →</a>
</div>
</div>
<div class="app-card whisparr-card">
<div class="app-card-header">
<div class="app-card-icon whisparr">
<img src="../images/arrs/48-whisparr.png" alt="Whisparr Logo" width="48" height="48">
</div>
<h3 class="app-card-title">Whisparr V2</h3>
</div>
<div class="app-card-content">
<p>Manage and automate adult content downloads.</p>
</div>
<div class="app-card-footer">
<a href="whisparr.html">View Documentation →</a>
</div>
</div>
<div class="app-card whisparr-card">
<div class="app-card-header">
<div class="app-card-icon whisparr">
<img src="../images/arrs/48-whisparr.png" alt="Whisparr V3 Logo" width="48" height="48">
</div>
<h3 class="app-card-title">Whisparr V3 (Eros)</h3>
</div>
<div class="app-card-content">
<p>Newer version of Whisparr for managing adult content downloads.</p>
</div>
<div class="app-card-footer">
<a href="eros.html">View Documentation →</a>
</div>
</div>
</div>

19
docs/css/main.css
View File

@@ -708,15 +708,23 @@ footer {
}
/* Card style for app blocks */
/* App cards grid container */
.app-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin: 20px 0;
}
.app-card {
display: flex;
flex-direction: column;
border-radius: 8px;
background-color: rgba(20, 25, 35, 0.6);
margin: 20px 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
overflow: hidden;
height: 100%;
}
.app-card:hover {
@@ -725,9 +733,11 @@ footer {
}
.app-card-header {
padding: 15px;
padding: 12px 15px;
display: flex;
align-items: center;
background-color: #252a34;
border-bottom: none;
}
.app-card-icon {
@@ -778,14 +788,15 @@ footer {
}
.app-card-content {
padding: 15px;
padding: 12px 15px;
flex: 1;
}
.app-card-footer {
padding: 10px 15px;
padding: 8px 15px;
background-color: rgba(10, 15, 25, 0.3);
text-align: right;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* Card styled for sonarr */