add: initial support for tablet/desktop mode

This commit will add initial support for tablet/desktop mode by trick the navbar a bit
This commit is contained in:
RainyXeon
2024-08-09 17:33:56 +07:00
committed by ThePedroo
parent 6a0f5aaad2
commit fbed1e5633
4 changed files with 132 additions and 62 deletions
+63 -61
View File
@@ -264,7 +264,7 @@
<!-- INFO: System theme small page -->
<div id="small_panel_theme" class="panel">
<div class="header" style="display: flex; align-items: center; justify-content: initial;">
<div class="header" style="padding-left: 20px; display: flex; align-items: center; justify-content: initial;">
<div id="sp_theme_close" style="width: 36px; height: 36px; margin-right: 6px;">
<img src="./assets/back.svg"/>
</div>
@@ -286,7 +286,7 @@
<!-- INFO: Language small page -->
<div id="small_panel_language" class="panel">
<div class="header" style="display: flex; align-items: center; justify-content: initial;">
<div class="header" style="padding-left: 20px; display: flex; align-items: center; justify-content: initial;">
<div id="sp_lang_close" style="width: 36px; height: 36px; margin-right: 6px;">
<img src="./assets/back.svg"/>
</div>
@@ -299,68 +299,70 @@
</div>
<!-- INFO: Bottom navbar -->
<div id="navbar" class="navbar radios">
<div class="dimc">
<input id="n_home" type="radio" name="navbutton" value="home" checked/>
<label class="radio dimc" for="n_home">
<div class="dimc" style="display: grid; place-items: center;">
<div class="dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_home"></div>
<div style="grid-area: 1 / 1;" id="nibg_home" class="navicon"></div>
<div id="navbar_support_div">
<div id="navbar" class="navbar radios">
<div class="navicon_support nav_dimc">
<input id="n_home" type="radio" name="navbutton" value="home" checked/>
<label class="navicon_support radio nav_dimc" for="n_home">
<div class="navicon_support nav_dimc" style="display: grid; place-items: center;">
<div class="navicon_support nav_dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_home"></div>
<div style="grid-area: 1 / 1;" id="nibg_home" class="navicon"></div>
</div>
<div id="nav_home_title" class="navtitle nav_dimc">Home</div>
</div>
<div id="nav_home_title" class="navtitle dimc">Home</div>
</div>
</label>
</label>
</div>
<div class="nav_dimc">
<input id="n_modules" type="radio" name="navbutton" value="modules"/>
<label class="radio nav_dimc" for="n_modules">
<div class="nav_dimc" style="display: grid; place-items: center;">
<div class="nav_dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_modules"></div>
<div style="grid-area: 1 / 1;" id="nibg_modules" class="navicon"></div>
</div>
<div id="nav_modules_title" class="navtitle nav_dimc">Modules</div>
</div>
</label>
</div>
<div class="nav_dimc">
<input id="n_actions" type="radio" name="navbutton" value="actions"/>
<label class="radio nav_dimc" for="n_actions">
<div class="nav_dimc" style="display: grid; place-items: center;">
<div class="nav_dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_actions"></div>
<div style="grid-area: 1 / 1;" id="nibg_actions" class="navicon"></div>
</div>
<div id="nav_actions_title" class="navtitle nav_dimc">Actions</div>
</div>
</label>
</div>
<div class="navicon_support nav_dimc">
<input id="n_settings" type="radio" name="navbutton" value="settings"/>
<label class="navicon_support radio nav_dimc" for="n_settings">
<div class="navicon_support nav_dimc" style="display: grid; place-items: center;">
<div class="navicon_support nav_dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_settings"></div>
<div style="grid-area: 1 / 1;" id="nibg_settings" class="navicon"></div>
</div>
<div id="nav_settings_title" class="navtitle nav_dimc">Settings</div>
</div>
</label>
</div>
</div>
<div class="dimc">
<input id="n_modules" type="radio" name="navbutton" value="modules"/>
<label class="radio dimc" for="n_modules">
<div class="dimc" style="display: grid; place-items: center;">
<div class="dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_modules"></div>
<div style="grid-area: 1 / 1;" id="nibg_modules" class="navicon"></div>
</div>
<div id="nav_modules_title" class="navtitle dimc">Modules</div>
</div>
</label>
</div>
<div class="dimc">
<input id="n_actions" type="radio" name="navbutton" value="actions"/>
<label class="radio dimc" for="n_actions">
<div class="dimc" style="display: grid; place-items: center;">
<div class="dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_actions"></div>
<div style="grid-area: 1 / 1;" id="nibg_actions" class="navicon"></div>
</div>
<div id="nav_actions_title" class="navtitle dimc">Actions</div>
</div>
</label>
</div>
<div class="dimc">
<input id="n_settings" type="radio" name="navbutton" value="settings"/>
<label class="radio dimc" for="n_settings">
<div class="dimc" style="display: grid; place-items: center;">
<div class="dimc" style="display: grid; place-items: center; width: 65px;">
<div style="grid-area: 1 / 1;" id="ni_settings"></div>
<div style="grid-area: 1 / 1;" id="nibg_settings" class="navicon"></div>
</div>
<div id="nav_settings_title" class="navtitle dimc">Settings</div>
</div>
</label>
</div>
</div>
</body>
</html>