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 -14Showing whitespace changes
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 @@
2525 font-size: 15px;
2626 }
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+
2877 #extensions_settings,
2978 #extensions_settings2 {
3079 width: 100% !important;
public/index.html+13 -12
@@ -5284,13 +5284,11 @@
52845284 <div id="site_logo" class="drawer-toggle drawer-header" title="Change Background Image" data-i18n="[title]Change Background Image">
52855285 <div class="drawer-icon fa-solid fa-panorama fa-fw closedIcon"></div>
52865286 </div>
52875287 <div id="Backgrounds" class="drawer-content closedDrawer bg-drawer-layout">
52885288 <div classid="flexbg-containerheader-fixed">
52895289 <div class="flex-container alignItemsBaseline wide100p">
52905290 <h3 id="bg-header-title" class="margin0 flex2" data-i18n="Background ImageBackgrounds">Backgrounds</h3>
5291- Background Image
5291+ <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" />
52945292 <select id="background_fitting" class="text_pole" data-i18n="[title]Background Fitting" title="Background Fitting">
52955293 <option value="classic" data-i18n="Classic">Classic</option>
52965294 <option value="cover" data-i18n="Cover">Cover</option>
@@ -5302,17 +5300,17 @@
53025300 <i class="fa-solid fa-wand-magic"></i>
53035301 <span data-i18n="Auto-select">Auto-select</span>
53045302 </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>
5307+ </div>
53055308 </div>
5309+ <div id="bg-scrollable-content">
53065310 <h3 data-i18n="System Backgrounds" class="wide100p textAlignCenter">
53075311 System Backgrounds
53085312 </h3>
53095313 <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>
53165314 </div>
53175315 <h3 data-i18n="Chat Backgrounds" class="wide100p textAlignCenter">
53185316 Chat Backgrounds
@@ -5323,6 +5321,9 @@
53235321 <div id="bg_custom_content" class="bg_list">
53245322 </div>
53255323 </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>
53265327 </div>
53275328 </div>
53285329 <div id="extensions-settings-button" class="drawer">
public/scripts/backgrounds.js+9 -2
@@ -573,14 +573,21 @@ async function delBackground(bg) {
573573}
574574
575575async function onBackgroundUploadSelected() {
576576 const form = $('#form_bg_downloadform_bg_upload').get(0);
577577
578578 if (!(form instanceof HTMLFormElement)) {
579579 console.error('form_bg_downloadform_bg_upload is not a form');
580580 return;
581581 }
582582
583583 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+
584591 await convertFileIfVideo(formData);
585592 await uploadBackground(formData);
586593 form.reset();
public/style.css+1 -0
@@ -13,6 +13,7 @@
1313@import url(css/welcome.css);
1414@import url(css/data-maid.css);
1515@import url(css/secrets.css);
16+@import url(css/backgrounds.css);
1617
1718:root {
1819 interpolate-size: allow-keywords;