Mobile-friendly design for Reddit Old
目前為
// ==UserScript==
// @name Reddit Old Mobile 📱
// @description Mobile-friendly design for Reddit Old
// @author Agreasyforkuser
// @match https://old.reddit.com/*
// @match https://www.redditmedia.com/mediaembed/*
// @exclude-match https://old.reddit.com/chat/*
// @version 3.4
// @license MIT
// @icon https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
// @namespace namespace example
// ==/UserScript==
if(window.location.hostname === 'old.reddit.com'){
{
const metaViewportElement = document.createElement('meta');
metaViewportElement.setAttribute('name', 'viewport');
metaViewportElement.setAttribute('content', 'width=device-width, initial-scale=1');
document.head.appendChild(metaViewportElement);
}
{
const styles = new CSSStyleSheet();
// language=CSS
styles.replaceSync(`
html,
/* Expanded Media UNDER the post */
.entry {overflow:visible;}
/* Rounded Corners for Expanded Posts */
.media-preview {border-radius: 15px;}
/* Centering Expanded Posts */
/* .expando {display: flex;flex-direction: column; align-items :center;} */
.thing .media-preview-content, .thing .media-preview-content video {max-width:100%;height:auto !important}
/* Bigger Action Buttons, Spacing */
.link .flat-list {font-size:large; text-align:center; margin-top:10px}
.subreddit {font-size: large;}
/* Border between Posts */
.link {border-bottom:1px solid black;}
.link { padding-left: 0;}
/* Upvote Scores On Thumbnails */
.midcol {background-color:rgba(0, 0, 0, 0.5); border-radius:5px}
.link .score {color:white}
.comments-page .link .score {color:black}
.comments-page .midcol {background:none}
.midcol {margin: 0}
.link .midcol { position:absolute; z-index:999;font-size: x-small;}
/* No Overlapping with Text-Only-Posts */
.link .title {text-align: center;font-size:large; margin-bottom: 1px;}
/* Centering this too for aesthetics */
.tagline {text-align: center; margin-bottom: 3px;}
/* Comment Page */
.panestack-title { text-align:center}
.commentarea .menuarea {text-align:center}
#noresults {margin-right: 0px;text-align: center; opacity: 0.7}
#sr-header-area:not(:hover) {opacity:1}
#sr-more-link {background:none}
/* selected Tab */
.tabmenu li.selected a {border:none;}
.tabmenu li a {font-size:small}
/* Top Header */
/*#header { border-bottom: 3px solid #cee3f8; border-bottom-right-radius: 15px; border-right: 3px solid #cee3f8; border-left: 3px solid #cee3f8; border-bottom-left-radius: 15px;} */
#header {border: 3px solid #cee3f8; }
#header-bottom-right { position: initial !important }
body {
overflow-x: hidden;
}
.listing-chooser,
#redesign-beta-optin-btn {
display: none;
}
#sr-header-area {
height: auto;
}
#sr-header-area .width-clip {
display: flex;
}
#sr-header-area .width-clip,
#sr-header-area .sr-list,
#sr-more-link,
#header-bottom-right {position: inherit;}
#sr-header-area .sr-list {
overflow: auto;
}
.tabmenu {
max-width: 100%;
overflow: auto;
}
.side {
z-index: 1001;
position: absolute;
top: 0;
left: 0;
margin: var(--header-height) 0 0 0;
width: 0;
overflow-x: hidden;
}
.side--active {
width: 100%;
}
.side--active ~ .content {
height: var(--sidebar-height);
}
.content {
margin: 0 !important;
width: 100% !important;
overflow-x: auto;
overflow-y: hidden;
}
.comments-page #siteTable .thing {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
'score thumbnail'
'main main';
grid-gap: 5px;
}
.comments-page #siteTable .thing:not(:has(.thumbnail)) {
grid-template-areas:
'score main'
'. main';
}
.comments-page #siteTable .thing .midcol {
grid-area: score;
}
.comments-page #siteTable .thing .thumbnail {
grid-area: thumbnail;
}
.comments-page #siteTable .thing .entry {
grid-area: main;
}
.comments-page #siteTable .thing .media-embed {
width: 100%;
height: auto;
}
.infobar,
.searchpane,
.wiki-page .wiki-page-content,
.panestack-title,
.commentarea .menuarea {
margin: 5px;
}
.commentarea .menuarea {
display: flex;
}
#search input[type=text],
.roundfield,
.formtabs-content {
width: 100%;
}
.subreddit .midcol {
width: auto !important;
}
.roundfield,
.roundfield * {
box-sizing: border-box;
}
.roundfield input,
.roundfield textarea,
.roundfield select {
max-width: 100%;
}
.usertext,
.menuarea {
overflow: auto;
}
.combined-search-page #search {
padding: 0;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
'query submit'
'advanced advanced'
'restrictSubreddit restrictSubreddit'
'nsfw nsfw';
}
.combined-search-page #search input[type=text] {
grid-area: query;
min-width: auto;
}
.combined-search-page #search .search-submit-button {
grid-area: submit;
}
.combined-search-page #search label:has([name="restrict_sr"]) {
grid-area: restrictSubreddit;
}
.combined-search-page #search label:has([name="include_over_18"]) {
grid-area: nsfw;
}
.combined-search-page #search p:has(#search_showmore) {
grid-area: advanced;
}
.search-result-group {
width: 100% !important;
min-width: auto !important;
box-sizing: border-box;
}
.search-result-subreddit .search-result-meta {
padding: 0.5rem 0;
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.search-result-subreddit .search-result-meta .stamp {
align-self: flex-start;
}
.search-link,
.search-result-body a {
overflow-wrap: anywhere;
white-space: normal;
}
`);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];
}
{
const sidebarElement = document.querySelector('.side');
if(sidebarElement){
const
menuElement = document.querySelector('.tabmenu'),
sidebarButtonContainerElement = document.createElement('li'),
sidebarButtonElement = document.createElement('a');
sidebarButtonElement.textContent = 'sidebar';
sidebarButtonElement.setAttribute('href', '#');
sidebarButtonElement.addEventListener(
'click',
event => {
event.preventDefault();
const extraHeaderHeight = document.querySelector('.submit-page')
? window.$('.content > h1').outerHeight(true) + window.$(menuElement).outerHeight(true) + 10
: 0;
document.documentElement.style.setProperty(
'--header-height',
`${window.$('#header').outerHeight(true) + extraHeaderHeight}px`
);
sidebarButtonContainerElement.classList.toggle(
'selected',
sidebarElement.classList.toggle('side--active')
);
document.documentElement.style.setProperty(
'--sidebar-height',
`${sidebarElement.offsetHeight + extraHeaderHeight}px`
);
}
);
sidebarButtonContainerElement.appendChild(sidebarButtonElement);
menuElement.appendChild(sidebarButtonContainerElement);
}
}
}
else if(window.location.hostname === 'www.redditmedia.com'){
const styles = new CSSStyleSheet();
// language=CSS
styles.replaceSync(`
.embedly-embed {
width: 100%;
}
`);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];
}
////////////////////////// Move Searchbar, make some space on the Comments Page//////////////////////////////////////////////////
// var excludedPattern = /https:\/\/.*\.reddit\.com\/.*\/comments\/.*/;
// if (!excludedPattern.test(window.location.href)) {
// // Get the search form element
// var searchForm = document.getElementById('search');
// // Get the tab menu element
// var tabMenu = document.querySelector('.tabmenu');
// // Move the search form to the right of the tab menu
// if (searchForm && tabMenu) {
// tabMenu.parentNode.insertBefore(searchForm, tabMenu.nextSibling);
// }
// }
// if (excludedPattern.test(window.location.href)) {
// // Select the element with the ID "header-bottom-right"
// var headerBottomRight = document.getElementById('header-bottom-right');
// // Check if the element exists
// if (headerBottomRight) {
// // Remove the element from its parent element
// headerBottomRight.parentNode.removeChild(headerBottomRight);
// }
// }
/////////////////////Toggle Top Header On Scroll /////////////////////////////////////////////////////////////
// 'use strict';
// var header = document.getElementById('header');
// var headerHeight = header.offsetHeight;
// var lastScrollTop = 0;
// if (header) {
// header.style.position = 'fixed';
// header.style.top = '0';
// header.style.zIndex = '1100';
// header.style.width = '100%';
// document.body.style.paddingTop = headerHeight + 'px';
// window.addEventListener('scroll', function() {
// var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// if (scrollTop > lastScrollTop) {
// // Scrolling down
// header.style.opacity = '0';
// } else {
// // Scrolling up
// header.style.opacity = '.91';
// if (scrollTop > 0) {
// // Move header 45% of its height upwards
// var moveAmount = Math.round(0.45 * headerHeight);
// header.style.top = (-moveAmount) + 'px';
// } else {
// // At the top, reset header
// header.style.top = '0';
// header.style.opacity = '1';
// }
// }
// lastScrollTop = scrollTop;
// });
// }