Header change (#4465) * header changes * new line, comments * Simplify styling targets --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

e1af2fb47d2f585266663d1bb748d7d457ee5535

L <123923688+Vibecoder9000@users.noreply.github.com>

Signed
Parents: ddb97d78d307640c96390e1d89ec9472cc739962
5 files changed, +109 -14Ignore whitespace
public/css/backgrounds.css+37 -0
@@ -0,0 +1,37 @@
1/* This is the main flex container for the entire drawer */
2#Backgrounds.drawer-content.openDrawer.bg-drawer-layout {
3 display: flex;
4 flex-direction: column;
5 height: calc(100vh - var(--topBarBlockSize));
6 max-height: calc(100vh - var(--topBarBlockSize));
7 height: calc(100dvh - var(--topBarBlockSize));
8 max-height: calc(100dvh - var(--topBarBlockSize));
9 overflow: hidden;
10 width: var(--sheldWidth);
11 max-width: var(--sheldWidth);
12 padding: 0;
13}
14
15#bg-header-fixed {
16 flex-shrink: 0;
17 padding: 5px;
18 background-color: var(--SmartThemeBlurTintColor);
19 border-bottom: 1px solid var(--SmartThemeBorderColor);
20}
21
22#bg-header-fixed>.flex-container {
23 display: flex;
24 align-items: center;
25 gap: 5px;
26}
27
28#bg-scrollable-content {
29 flex-grow: 1;
30 overflow-y: auto;
31 overflow-x: hidden;
32 padding: 0 5px 5px;
33}
34
35#bg-filter {
36 font-size: calc(var(--mainFontSize) * 0.95);
37}
public/css/mobile-styles.css+49 -0
@@ -25,6 +25,55 @@
25 font-size: 15px;25 font-size: 15px;
26 }26 }
2727
28 #bg-header-controls {
29 flex-wrap: wrap;
30 row-gap: 10px;
31 }
32
33 #bg-header-fixed>.flex-container {
34 flex-wrap: wrap;
35 row-gap: 0px;
36 }
37
38 #Backgrounds:not(.selection-mode-active) #bg-header-fixed>.flex-container::after {
39 content: '';
40 order: 1;
41 flex-basis: 100%;
42 height: 0;
43 }
44
45 /* --- Row 1 Item --- */
46 #bg-header-fixed #bg-header-title {
47 order: 1;
48 flex-grow: 1;
49 }
50
51 #bg-header-fixed #background_fitting,
52 #bg-header-fixed #auto_background {
53 order: 1;
54 }
55
56 /* --- Row 2 Item --- */
57 #bg-header-fixed #bg-filter {
58 order: 2;
59 flex-grow: 1;
60 min-width: 0;
61 }
62
63 /* --- Row 3 Item --- */
64 #bg-header-fixed #add_background_button_top {
65 order: 3;
66 width: 100%;
67 text-align: center;
68 padding-top: 0.5em;
69 padding-bottom: 0.5em;
70 }
71
72 #Backgrounds.drawer-content.openDrawer.bg-drawer-layout {
73 width: 100dvw;
74 max-width: 100dvw;
75 }
76
28 #extensions_settings,77 #extensions_settings,
29 #extensions_settings2 {78 #extensions_settings2 {
30 width: 100% !important;79 width: 100% !important;
public/index.html+13 -12
@@ -5284,13 +5284,11 @@
5284 <div id="site_logo" class="drawer-toggle drawer-header" title="Change Background Image" data-i18n="[title]Change Background Image">5284 <div id="site_logo" class="drawer-toggle drawer-header" title="Change Background Image" data-i18n="[title]Change Background Image">
5285 <div class="drawer-icon fa-solid fa-panorama fa-fw closedIcon"></div>5285 <div class="drawer-icon fa-solid fa-panorama fa-fw closedIcon"></div>
5286 </div>5286 </div>
5287 <div id="Backgrounds" class="drawer-content closedDrawer">5287 <div id="Backgrounds" class="drawer-content closedDrawer bg-drawer-layout">
5288 <div class="flex-container">5288 <div id="bg-header-fixed">
5289 <div class="flex-container alignItemsBaseline wide100p">5289 <div class="flex-container alignItemsBaseline wide100p">
5290 <h3 class="margin0 flex2" data-i18n="Background Image">5290 <h3 id="bg-header-title" class="margin0" data-i18n="Backgrounds">Backgrounds</h3>
5291 Background Image5291 <input id="bg-filter" class="text_pole flex1" type="search" data-i18n="[placeholder]Search" placeholder="Search" />
5292 </h3>
5293 <input id="bg-filter" data-i18n="[placeholder]Filter" placeholder="Filter" class="text_pole flex1" type="search" />
5294 <select id="background_fitting" class="text_pole" data-i18n="[title]Background Fitting" title="Background Fitting">5292 <select id="background_fitting" class="text_pole" data-i18n="[title]Background Fitting" title="Background Fitting">
5295 <option value="classic" data-i18n="Classic">Classic</option>5293 <option value="classic" data-i18n="Classic">Classic</option>
5296 <option value="cover" data-i18n="Cover">Cover</option>5294 <option value="cover" data-i18n="Cover">Cover</option>
@@ -5302,17 +5300,17 @@
5302 <i class="fa-solid fa-wand-magic"></i>5300 <i class="fa-solid fa-wand-magic"></i>
5303 <span data-i18n="Auto-select">Auto-select</span>5301 <span data-i18n="Auto-select">Auto-select</span>
5304 </div>5302 </div>
5303 <label for="add_bg_button" id="add_background_button_top" class="menu_button menu_button_icon interactable" title="Add a new background">
5304 <i class="fa-solid fa-plus"></i>
5305 <span data-i18n="Add Background">Add Background</span>
5306 </label>
5305 </div>5307 </div>
5308 </div>
5309 <div id="bg-scrollable-content">
5306 <h3 data-i18n="System Backgrounds" class="wide100p textAlignCenter">5310 <h3 data-i18n="System Backgrounds" class="wide100p textAlignCenter">
5307 System Backgrounds5311 System Backgrounds
5308 </h3>5312 </h3>
5309 <div id="bg_menu_content" class="bg_list">5313 <div id="bg_menu_content" class="bg_list">
5310 <form id="form_bg_download" class="bg_example no-border no-shadow" action="javascript:void(null);" method="post" enctype="multipart/form-data">
5311 <label class="input-file">
5312 <input type="file" id="add_bg_button" name="avatar" accept="image/*, video/*">
5313 <div class="bg_example no-border no-shadow add_bg_but" style="background-image: url('/img/addbg3.png');"></div>
5314 </label>
5315 </form>
5316 </div>5314 </div>
5317 <h3 data-i18n="Chat Backgrounds" class="wide100p textAlignCenter">5315 <h3 data-i18n="Chat Backgrounds" class="wide100p textAlignCenter">
5318 Chat Backgrounds5316 Chat Backgrounds
@@ -5323,6 +5321,9 @@
5323 <div id="bg_custom_content" class="bg_list">5321 <div id="bg_custom_content" class="bg_list">
5324 </div>5322 </div>
5325 </div>5323 </div>
5324 <form id="form_bg_upload" style="display: none;">
5325 <input type="file" id="add_bg_button" name="avatar" accept="image/jpeg,image/png,image/gif,image/bmp,image/svg+xml,video/*">
5326 </form>
5326 </div>5327 </div>
5327 </div>5328 </div>
5328 <div id="extensions-settings-button" class="drawer">5329 <div id="extensions-settings-button" class="drawer">
public/scripts/backgrounds.js+9 -2
@@ -573,14 +573,21 @@ async function delBackground(bg) {
573}573}
574574
575async function onBackgroundUploadSelected() {575async function onBackgroundUploadSelected() {
576 const form = $('#form_bg_download').get(0);576 const form = $('#form_bg_upload').get(0);
577577
578 if (!(form instanceof HTMLFormElement)) {578 if (!(form instanceof HTMLFormElement)) {
579 console.error('form_bg_download is not a form');579 console.error('form_bg_upload is not a form');
580 return;580 return;
581 }581 }
582582
583 const formData = new FormData(form);583 const formData = new FormData(form);
584
585 const file = formData.get('avatar');
586 if (!file || file.size === 0) {
587 form.reset();
588 return;
589 }
590
584 await convertFileIfVideo(formData);591 await convertFileIfVideo(formData);
585 await uploadBackground(formData);592 await uploadBackground(formData);
586 form.reset();593 form.reset();
public/style.css+1 -0
@@ -13,6 +13,7 @@
13@import url(css/welcome.css);13@import url(css/welcome.css);
14@import url(css/data-maid.css);14@import url(css/data-maid.css);
15@import url(css/secrets.css);15@import url(css/secrets.css);
16@import url(css/backgrounds.css);
1617
17:root {18:root {
18 interpolate-size: allow-keywords;19 interpolate-size: allow-keywords;