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

fix Store layout: use list-item pattern for full-width elements

Browse Source
This commit is contained in:
omigamedev
2026-01-20 18:45:57 +01:00
parent afa6ac22ba
commit 6ae62a60fc
1 changed files with 93 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
src/main/assets/apps/store/store_content.rml
View File

@@ -12,152 +12,126 @@
</div> </div>
<div style="flex: 1; overflow: auto;"> <div style="flex: 1; overflow: auto;">
<!-- Featured Banner --> <!-- Featured App -->
<div style="margin: 16px; padding: 24px; background-color: #7c3aed; border-radius: 16px;"> <div class="list-header">Featured</div>
<div style="font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 4px;">FEATURED</div>
<div style="font-size: 24px; color: #FFFFFF; font-weight: bold; margin-bottom: 8px;">Weather Pro</div> <div class="list-item" onclick="installApp('weather')" style="background-color: #7c3aed;">
<div style="font-size: 14px; color: rgba(255,255,255,0.9); margin-bottom: 16px;">Beautiful forecasts with live radar</div> <div class="list-item-avatar" style="background-color: #9c5afd; border-radius: 12px;">W</div>
<div class="btn-primary" onclick="installApp('weather')" style="width: 100px;"> <div class="list-item-content">
<span>Install</span> <span class="list-item-title" style="color: #FFFFFF;">Weather Pro</span>
<span class="list-item-subtitle" style="color: #E8D5FF;">Beautiful forecasts with live radar</span>
</div>
<div class="btn-icon">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
</div> </div>
</div> </div>
<!-- Categories --> <!-- Categories Header -->
<div class="section-header"> <div class="list-header">Categories</div>
<span class="section-title">Categories</span>
</div>
<div style="display: flex; gap: 12px; padding: 0 16px; overflow-x: auto;"> <!-- Categories Row -->
<div onclick="openCategory('games')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;"> <div style="display: flex; padding: 0 16px 16px 16px; gap: 12px;">
<div style="width: 48px; height: 48px; border-radius: 12px; background-color: #F44336; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;"> <div onclick="openCategory('games')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
<span style="font-size: 24px; color: #FFFFFF;">G</span> <div class="list-item-avatar" style="background-color: #F44336;">G</div>
</div> <span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Games</span>
<span style="font-size: 14px; color: #FFFFFF;">Games</span>
</div> </div>
<div onclick="openCategory('social')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;"> <div onclick="openCategory('social')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
<div style="width: 48px; height: 48px; border-radius: 12px; background-color: #2196F3; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;"> <div class="list-item-avatar" style="background-color: #2196F3;">S</div>
<span style="font-size: 24px; color: #FFFFFF;">S</span> <span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Social</span>
</div>
<span style="font-size: 14px; color: #FFFFFF;">Social</span>
</div> </div>
<div onclick="openCategory('tools')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;"> <div onclick="openCategory('tools')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
<div style="width: 48px; height: 48px; border-radius: 12px; background-color: #4CAF50; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;"> <div class="list-item-avatar" style="background-color: #4CAF50;">T</div>
<span style="font-size: 24px; color: #FFFFFF;">T</span> <span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Tools</span>
</div>
<span style="font-size: 14px; color: #FFFFFF;">Tools</span>
</div> </div>
<div onclick="openCategory('media')" style="min-width: 100px; padding: 16px; background-color: #1a1a1a; border-radius: 12px; display: flex; flex-direction: column; align-items: center; cursor: pointer;"> <div onclick="openCategory('media')" style="padding: 12px; background-color: #1a1a1a; border-radius: 12px; cursor: pointer;">
<div style="width: 48px; height: 48px; border-radius: 12px; background-color: #FF9800; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;"> <div class="list-item-avatar" style="background-color: #FF9800;">M</div>
<span style="font-size: 24px; color: #FFFFFF;">M</span> <span style="font-size: 13px; color: #FFFFFF; display: block; margin-top: 8px;">Media</span>
</div>
<span style="font-size: 14px; color: #FFFFFF;">Media</span>
</div> </div>
</div> </div>
<!-- Popular Apps --> <!-- Popular Apps -->
<div class="section-header"> <div class="list-header">Popular Apps</div>
<span class="section-title">Popular Apps</span>
<span class="section-action" onclick="seeAllPopular()">SEE ALL</span> <div class="list-item" onclick="openAppDetails('socialvr')">
<div class="list-item-avatar" style="background-color: #E91E63; border-radius: 12px;">S</div>
<div class="list-item-content">
<span class="list-item-title">SocialVR</span>
<span class="list-item-subtitle">Connect in VR</span>
</div>
<div class="btn-icon" onclick="installApp('socialvr'); event.stopPropagation();">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
</div>
</div> </div>
<div class="list"> <div class="list-item" onclick="openAppDetails('vrfit')">
<div class="list-item" onclick="openAppDetails('socialvr')"> <div class="list-item-avatar" style="background-color: #4CAF50; border-radius: 12px;">V</div>
<div class="list-item-avatar" style="background-color: #E91E63; border-radius: 12px;">S</div> <div class="list-item-content">
<div class="list-item-content"> <span class="list-item-title">VR Fitness</span>
<span class="list-item-title">SocialVR</span> <span class="list-item-subtitle">Workout in VR</span>
<span class="list-item-subtitle">Connect in virtual reality</span>
</div>
<div class="btn-outline" onclick="installApp('socialvr'); event.stopPropagation();" style="padding: 8px 16px;">
<span style="font-size: 14px;">Install</span>
</div>
</div> </div>
<div class="btn-icon" onclick="installApp('vrfit'); event.stopPropagation();">
<div class="list-divider"></div> <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
<div class="list-item" onclick="openAppDetails('vrfit')">
<div class="list-item-avatar" style="background-color: #4CAF50; border-radius: 12px;">V</div>
<div class="list-item-content">
<span class="list-item-title">VR Fitness</span>
<span class="list-item-subtitle">Workout in virtual worlds</span>
</div>
<div class="btn-outline" onclick="installApp('vrfit'); event.stopPropagation();" style="padding: 8px 16px;">
<span style="font-size: 14px;">Install</span>
</div>
</div> </div>
</div>
<div class="list-divider"></div> <div class="list-item" onclick="openAppDetails('notesync')">
<div class="list-item-avatar" style="background-color: #FF9800; border-radius: 12px;">N</div>
<div class="list-item" onclick="openAppDetails('notesync')"> <div class="list-item-content">
<div class="list-item-avatar" style="background-color: #FF9800; border-radius: 12px;">N</div> <span class="list-item-title">NoteSync</span>
<div class="list-item-content"> <span class="list-item-subtitle">Notes everywhere</span>
<span class="list-item-title">NoteSync</span>
<span class="list-item-subtitle">Notes across all devices</span>
</div>
<div class="btn-outline" onclick="installApp('notesync'); event.stopPropagation();" style="padding: 8px 16px;">
<span style="font-size: 14px;">Install</span>
</div>
</div> </div>
<div class="btn-icon" onclick="installApp('notesync'); event.stopPropagation();">
<img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
</div>
</div>
<div class="list-divider"></div> <div class="list-item" onclick="openAppDetails('mediaplayer')">
<div class="list-item-avatar" style="background-color: #9C27B0; border-radius: 12px;">M</div>
<div class="list-item" onclick="openAppDetails('mediaplayer')"> <div class="list-item-content">
<div class="list-item-avatar" style="background-color: #9C27B0; border-radius: 12px;">M</div> <span class="list-item-title">Media Player</span>
<div class="list-item-content"> <span class="list-item-subtitle">Play all formats</span>
<span class="list-item-title">Media Player</span> </div>
<span class="list-item-subtitle">Play all video formats</span> <div class="btn-icon" onclick="installApp('mediaplayer'); event.stopPropagation();">
</div> <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
<div class="btn-outline" onclick="installApp('mediaplayer'); event.stopPropagation();" style="padding: 8px 16px;">
<span style="font-size: 14px;">Install</span>
</div>
</div> </div>
</div> </div>
<!-- New Releases --> <!-- New Releases -->
<div class="section-header"> <div class="list-header">New Releases</div>
<span class="section-title">New Releases</span>
<span class="section-action" onclick="seeAllNew()">SEE ALL</span>
</div>
<div class="list"> <div class="list-item" onclick="openAppDetails('calculator')">
<div class="list-item" onclick="openAppDetails('calculator')"> <div class="list-item-avatar" style="background-color: #607D8B; border-radius: 12px;">C</div>
<div class="list-item-avatar" style="background-color: #607D8B; border-radius: 12px;">C</div> <div class="list-item-content">
<div class="list-item-content"> <span class="list-item-title">Calculator</span>
<span class="list-item-title">Calculator</span> <span class="list-item-subtitle">Scientific calc</span>
<span class="list-item-subtitle">Scientific calculator</span>
</div>
<div class="btn-outline" onclick="installApp('calculator'); event.stopPropagation();" style="padding: 8px 16px;">
<span style="font-size: 14px;">Install</span>
</div>
</div> </div>
<div class="btn-icon" onclick="installApp('calculator'); event.stopPropagation();">
<div class="list-divider"></div> <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
</div>
<div class="list-item" onclick="openAppDetails('filemanager')"> </div>
<div class="list-item-avatar" style="background-color: #795548; border-radius: 12px;">F</div>
<div class="list-item-content"> <div class="list-item" onclick="openAppDetails('filemanager')">
<span class="list-item-title">File Manager</span> <div class="list-item-avatar" style="background-color: #795548; border-radius: 12px;">F</div>
<span class="list-item-subtitle">Organize your files</span> <div class="list-item-content">
</div> <span class="list-item-title">File Manager</span>
<div class="btn-outline" onclick="installApp('filemanager'); event.stopPropagation();" style="padding: 8px 16px;"> <span class="list-item-subtitle">Organize files</span>
<span style="font-size: 14px;">Install</span> </div>
</div> <div class="btn-icon" onclick="installApp('filemanager'); event.stopPropagation();">
</div> <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
</div>
<div class="list-divider"></div> </div>
<div class="list-item" onclick="openAppDetails('clock')"> <div class="list-item" onclick="openAppDetails('clock')">
<div class="list-item-avatar" style="background-color: #00BCD4; border-radius: 12px;">C</div> <div class="list-item-avatar" style="background-color: #00BCD4; border-radius: 12px;">C</div>
<div class="list-item-content"> <div class="list-item-content">
<span class="list-item-title">Clock</span> <span class="list-item-title">Clock</span>
<span class="list-item-subtitle">Alarms, timers, world clock</span> <span class="list-item-subtitle">Alarms, timers</span>
</div> </div>
<div class="btn-outline" onclick="installApp('clock'); event.stopPropagation();" style="padding: 8px 16px;"> <div class="btn-icon" onclick="installApp('clock'); event.stopPropagation();">
<span style="font-size: 14px;">Install</span> <img src="../../icons/add.tga" style="width: 24px; height: 24px;"/>
</div>
</div> </div>
</div> </div>
<!-- Bottom padding -->
<div style="height: 24px;"></div> <div style="height: 24px;"></div>
</div> </div>
</div> </div>
@@ -191,19 +165,5 @@ function installApp(appId)
end end
end end
function seeAllPopular()
print("[Store] See all popular apps")
if showToast then
showToast("Popular apps")
end
end
function seeAllNew()
print("[Store] See all new releases")
if showToast then
showToast("New releases")
end
end
print("[Store] Content loaded") print("[Store] Content loaded")
</script> </script>