omar/MosisService
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix app layouts: remove style tags from content fragments, use component classes

Browse Source
This commit is contained in:
omigamedev
2026-01-20 17:40:38 +01:00
parent 4b47611902
commit 82bc0c78fe
25 changed files with 5350 additions and 537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
base-apps/com.mosis.music/music.rml
View File

@@ -6,20 +6,30 @@
<link type="text/rcss" href="../../ui/layout.rcss"/>
<script src="../../scripts/navigation.lua"></script>
<script src="../../scripts/layout.lua"></script>
<script src="music.lua"></script>
<title>Music</title>
<style>
.music-content {
flex: 1;
overflow: auto;
padding-bottom: 140px;
}
.mini-player {
position: absolute;
bottom: 56px;
left: 0;
right: 0;
display: flex;
align-items: center;
padding: 8px 16px;
background-color: #282828;
border-top-width: 1px;
border-top-color: #333333;
border-top: 1px solid #333333;
cursor: pointer;
}
.mini-player:hover {
background-color: #333333;
}
.mini-player-art {
@@ -68,6 +78,7 @@
.mini-control-btn img {
width: 28px;
height: 28px;
pointer-events: none;
}
.section-header {
@@ -104,10 +115,12 @@
.recent-item {
min-width: 120px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
}
.recent-item:hover {
opacity: 0.9;
background-color: rgba(255, 255, 255, 0.05);
}
.recent-art {
@@ -214,11 +227,14 @@
}
.music-bottom-nav {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
height: 56px;
background-color: #1E1E1E;
border-top-width: 1px;
border-top-color: #282828;
border-top: 1px solid #282828;
}
.nav-item {
@@ -243,12 +259,29 @@
width: 28px;
height: 28px;
margin-bottom: 4px;
pointer-events: none;
}
.nav-item span {
font-size: 14px;
}
/* Progress bar for mini player */
.progress-container {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background-color: #404040;
}
.progress-bar {
width: 0%;
height: 100%;
background-color: #1DB954;
}
.bg-gradient-1 { background-color: #667eea; }
.bg-gradient-2 { background-color: #f093fb; }
.bg-gradient-3 { background-color: #4facfe; }
@@ -260,7 +293,7 @@
.bg-solid-blue { background-color: #2563eb; }
</style>
</head>
<body class="app-screen" onload="initLayout(document)">
<body class="app-screen" onload="initLayout(document); initMusic(document)">
<!-- System Status Bar -->
<div class="system-status-bar">
<span id="status-time" class="system-status-time">12:30</span>
@@ -278,7 +311,7 @@
</div>
<span class="app-bar-title">Music</span>
<div class="app-bar-actions">
<div class="app-bar-action">
<div class="app-bar-action" onclick="openSearch()">
<img src="../../icons/search.tga"/>
</div>
</div>
@@ -292,28 +325,28 @@
</div>
<!-- Quick Access Grid -->
<div class="quick-access">
<div class="quick-card">
<div class="quick-access" id="quick-access">
<div class="quick-card" onclick="openPlaylist('liked')">
<div class="quick-card-art bg-solid-red">L</div>
<span class="quick-card-title">Liked Songs</span>
</div>
<div class="quick-card">
<div class="quick-card" onclick="openPlaylist('daily1')">
<div class="quick-card-art bg-gradient-1">D</div>
<span class="quick-card-title">Daily Mix 1</span>
</div>
<div class="quick-card">
<div class="quick-card" onclick="openPlaylist('release')">
<div class="quick-card-art bg-solid-green">R</div>
<span class="quick-card-title">Release Radar</span>
</div>
<div class="quick-card">
<div class="quick-card" onclick="openPlaylist('chill')">
<div class="quick-card-art bg-gradient-2">C</div>
<span class="quick-card-title">Chill Vibes</span>
</div>
<div class="quick-card">
<div class="quick-card" onclick="openPlaylist('workout')">
<div class="quick-card-art bg-solid-blue">W</div>
<span class="quick-card-title">Workout Mix</span>
</div>
<div class="quick-card">
<div class="quick-card" onclick="openPlaylist('focus')">
<div class="quick-card-art bg-gradient-3">F</div>
<span class="quick-card-title">Focus Flow</span>
</div>
@@ -325,23 +358,23 @@
<span class="section-action">SEE ALL</span>
</div>
<div class="recent-row">
<div class="recent-item">
<div class="recent-row" id="recent-row">
<div class="recent-item" onclick="openPlaylist('pop')">
<div class="recent-art bg-gradient-4">P</div>
<div class="recent-title">Pop Hits</div>
<div class="recent-subtitle">Playlist</div>
</div>
<div class="recent-item">
<div class="recent-item" onclick="openPlaylist('electronic')">
<div class="recent-art bg-gradient-5">E</div>
<div class="recent-title">Electronic</div>
<div class="recent-subtitle">Playlist</div>
</div>
<div class="recent-item">
<div class="recent-item" onclick="openPlaylist('jazz')">
<div class="recent-art bg-gradient-1">J</div>
<div class="recent-title">Jazz Classics</div>
<div class="recent-subtitle">Playlist</div>
</div>
<div class="recent-item">
<div class="recent-item" onclick="openPlaylist('rock')">
<div class="recent-art bg-gradient-2">R</div>
<div class="recent-title">Rock Legends</div>
<div class="recent-subtitle">Playlist</div>
@@ -354,7 +387,7 @@
<span class="section-action">SEE ALL</span>
</div>
<div class="playlist-item">
<div class="playlist-item" onclick="openPlaylist('daily1')">
<div class="playlist-art bg-gradient-3">1</div>
<div class="playlist-info">
<div class="playlist-title">Daily Mix 1</div>
@@ -362,7 +395,7 @@
</div>
</div>
<div class="playlist-item">
<div class="playlist-item" onclick="openPlaylist('daily2')">
<div class="playlist-art bg-gradient-4">2</div>
<div class="playlist-info">
<div class="playlist-title">Daily Mix 2</div>
@@ -370,7 +403,7 @@
</div>
</div>
<div class="playlist-item">
<div class="playlist-item" onclick="openPlaylist('discover')">
<div class="playlist-art bg-gradient-5">D</div>
<div class="playlist-info">
<div class="playlist-title">Discover Weekly</div>
@@ -380,17 +413,20 @@
</div>
<!-- Mini Player -->
<div class="mini-player">
<div class="mini-player-art">M</div>
<div class="mini-player" onclick="openNowPlaying()">
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="mini-player-art" id="mini-player-art">M</div>
<div class="mini-player-info">
<div class="mini-player-title">Midnight City</div>
<div class="mini-player-artist">M83</div>
<div class="mini-player-title" id="mini-player-title">Midnight City</div>
<div class="mini-player-artist" id="mini-player-artist">M83</div>
</div>
<div style="display: flex; gap: 4px;">
<div class="mini-control-btn">
<div class="mini-control-btn" onclick="toggleLike(); event.stopPropagation();">
<img src="../../icons/heart.tga"/>
</div>
<div class="mini-control-btn">
<div class="mini-control-btn" id="mini-play-btn" onclick="togglePlay(); event.stopPropagation();">
<img src="../../icons/play.tga"/>
</div>
</div>
@@ -402,11 +438,11 @@
<img src="../../icons/home.tga"/>
<span>Home</span>
</div>
<div class="nav-item">
<div class="nav-item" onclick="openSearch()">
<img src="../../icons/search.tga"/>
<span>Search</span>
</div>
<div class="nav-item">
<div class="nav-item" onclick="openLibrary()">
<img src="../../icons/library.tga"/>
<span>Library</span>
</div>