JS for each page hook + Chat UI improve
Hooked custom plain javascript listener on every page to handle modifications without using React + Chat UI improvements
This commit is contained in:
parent
89e32e480e
commit
e696005c13
|
|
@ -1,6 +1,11 @@
|
|||
import { getWithHeaders, paramsString, DEFAULT_TIMEOUT } from '../_utils/ajax'
|
||||
import { auth, basename } from './utils'
|
||||
|
||||
const script = document.createElement("script");
|
||||
script.src = "/fedilove-no-react.js?v="+Date.now();
|
||||
script.async = true;
|
||||
document.body.appendChild(script);
|
||||
|
||||
function getTimelineUrlPath (timeline) {
|
||||
switch (timeline) {
|
||||
case 'local':
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
<Nav {page} />
|
||||
|
||||
<div id="chat-compose-global" style="visibility: collapse">
|
||||
<div class="compose">
|
||||
<textarea type="text" placeholder="Send your message"></textarea>
|
||||
<button class="primary compose-box-button" aria-label="Send!">
|
||||
<svg xlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<table class="compose"><tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<textarea type="text" placeholder="Send your message"></textarea>
|
||||
</td>
|
||||
<td>
|
||||
<button class="primary compose-box-button" aria-label="Send!">
|
||||
<svg xlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
</div>
|
||||
<!--<script type="text/javascript">
|
||||
window.onload = function(e) {
|
||||
|
|
|
|||
|
|
@ -50,33 +50,40 @@ div.timeline {
|
|||
div#chat-compose-global {
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
padding: 1em;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
width: 100vw !important;
|
||||
|
||||
div.compose {
|
||||
table.compose {
|
||||
background: #ececec;
|
||||
box-shadow: 0px -3px 10px #0000003b;
|
||||
max-width: 60em;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
button {
|
||||
padding: .5em 1em;
|
||||
border-radius: 100%;
|
||||
width: 3.8em;
|
||||
height: 3.8em;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
position: relative;
|
||||
left: .15em;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
background: #fff;
|
||||
border: 10px solid #f2f2f2;
|
||||
max-width: 30em;
|
||||
font-size: 1.2em;
|
||||
width: 100%;
|
||||
min-width: 15em;
|
||||
max-height: 6em;
|
||||
min-height: 4.5em;
|
||||
padding: 1em;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
|
|
@ -85,7 +92,11 @@ div#chat-compose-global {
|
|||
}
|
||||
}
|
||||
|
||||
div.timeline > div.virtual-list {
|
||||
div.main-content.chat {
|
||||
div.dynamic-page-banner[role="navigation"] {
|
||||
visibility: collapse;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.timeline > div.the-list {
|
||||
|
|
@ -94,8 +105,10 @@ div.timeline > div.the-list {
|
|||
background: #e8e8e8;
|
||||
border-radius: 1.5em;
|
||||
margin: .5em 1em;
|
||||
float: right;
|
||||
border: 1px solid #c6c5c5;
|
||||
float: left;
|
||||
max-width: 70%;
|
||||
font-size: .94em;
|
||||
border: none;
|
||||
box-shadow: 6px 6px 6px #dbd7d7;
|
||||
|
||||
a.status-sidebar {
|
||||
|
|
@ -105,9 +118,21 @@ div.timeline > div.the-list {
|
|||
}
|
||||
span.status-author-handle {
|
||||
visibility: collapse;
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
article.status-in-own-thread {
|
||||
background: #e6f4fb !important;
|
||||
float: initial !important;
|
||||
max-width: initial !important;
|
||||
border-radius: .5em !important;
|
||||
box-shadow: 6px 6px 6px #a2a5db !important;
|
||||
|
||||
div.status-content {
|
||||
font-size: .94em !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
//alert(window.location.pathname);
|
||||
|
||||
function flag_main_content_as(tag) {
|
||||
var a = document.querySelector('.main-content');
|
||||
var contains = false;
|
||||
for (var i = 0; i < a.classList.length; i++) {
|
||||
if (a.classList[i] == tag) {
|
||||
contains = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!contains) {
|
||||
a.classList += " "+tag;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function fedilove_customization() {
|
||||
document.querySelector('.main-content').classList = "main-content";
|
||||
document.querySelector('#chat-compose-global').style = 'visibility: collapse';
|
||||
|
||||
if (window.location.pathname.startsWith('/statuses/')) {
|
||||
// this is ugly enough, so we will use CSS for the rest xD
|
||||
flag_main_content_as('chat');
|
||||
document.querySelector('#chat-compose-global').style = '';
|
||||
}
|
||||
}
|
||||
|
||||
var theurl = null;
|
||||
setInterval(function() {
|
||||
var newurl = window.location.pathname;
|
||||
if (newurl != theurl) {
|
||||
fedilove_customization();
|
||||
theurl = newurl;
|
||||
}
|
||||
}, 500);
|
||||
|
||||
Loading…
Reference in New Issue