Rewild Your Web
me.webbeef.org
web
browser
dweb
system: simplify mobile overview
This removes the redundant icons at the top of the overview
webbeef.tngl.sh
-18
resources/browserhtml/system/mobile_overview.css
-18
resources/browserhtml/system/mobile_overview.css
···
68
gap: var(--spacing-sm);
69
}
70
71
-
.header-button {
72
-
background: var(--bg-menu);
73
-
border: none;
74
-
color: var(--color-text-menu);
75
-
width: 40px;
76
-
height: 40px;
77
-
border-radius: 50%;
78
-
display: flex;
79
-
align-items: center;
80
-
justify-content: center;
81
-
cursor: pointer;
82
-
transition: background 0.2s ease;
83
-
}
84
-
85
-
.header-button:hover {
86
-
background: var(--color-menu-item-hover);
87
-
}
88
-
89
.grid {
90
flex: 1;
91
overflow-y: auto;
+4
-16
resources/browserhtml/system/mobile_overview.js
+4
-16
resources/browserhtml/system/mobile_overview.js
···
43
new CustomEvent("tab-select", {
44
bubbles: true,
45
detail: { tabId: tab.id },
46
-
})
47
);
48
this.close();
49
}
···
60
new CustomEvent("tab-close", {
61
bubbles: true,
62
detail: { tabId: tab.id },
63
-
})
64
);
65
}, 300);
66
}
···
72
73
handleHome() {
74
this.dispatchEvent(new CustomEvent("tab-home", { bubbles: true }));
75
-
this.close();
76
-
}
77
-
78
-
handleDone() {
79
this.close();
80
}
81
···
123
new CustomEvent("tab-close", {
124
bubbles: true,
125
detail: { tabId: tab.id },
126
-
})
127
);
128
}, 300);
129
} else {
···
143
<div class="container">
144
<div class="header">
145
<span class="header-title">${tabText}</span>
146
-
<div class="header-actions">
147
-
<button class="header-button" @click=${this.handleHome}>
148
-
<lucide-icon name="house"></lucide-icon>
149
-
</button>
150
-
<button class="header-button" @click=${this.handleDone}>
151
-
<lucide-icon name="check"></lucide-icon>
152
-
</button>
153
-
</div>
154
</div>
155
156
<div class="grid">
···
183
<lucide-icon name="x"></lucide-icon>
184
</button>
185
</div>
186
-
`
187
)}
188
189
<div class="home-card" @click=${this.handleHome}>
···
43
new CustomEvent("tab-select", {
44
bubbles: true,
45
detail: { tabId: tab.id },
46
+
}),
47
);
48
this.close();
49
}
···
60
new CustomEvent("tab-close", {
61
bubbles: true,
62
detail: { tabId: tab.id },
63
+
}),
64
);
65
}, 300);
66
}
···
72
73
handleHome() {
74
this.dispatchEvent(new CustomEvent("tab-home", { bubbles: true }));
75
this.close();
76
}
77
···
119
new CustomEvent("tab-close", {
120
bubbles: true,
121
detail: { tabId: tab.id },
122
+
}),
123
);
124
}, 300);
125
} else {
···
139
<div class="container">
140
<div class="header">
141
<span class="header-title">${tabText}</span>
142
</div>
143
144
<div class="grid">
···
171
<lucide-icon name="x"></lucide-icon>
172
</button>
173
</div>
174
+
`,
175
)}
176
177
<div class="home-card" @click=${this.handleHome}>