-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
124 lines (82 loc) · 4.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reddit Retractable Sidebar</title>
<meta charset="UTF-8">
<!-- Viewport for a responsive mobile first site. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fav Icon -->
<link rel="icon" type="image/png" href="https://mca62511.github.io/reddit-retractable-sidebar/favicon.png">
<!-- Google -->
<meta name="description" content="This user script allows you to retract or extend reddit's sidebar allowing for better split screen viewing.">
<meta name="keywords" content="tampermonkey,greasemonkey,script,reddit,sidebar,retractable">
<meta name="application-name" content="Reddit Retractable Sidebar">
<!-- Facebook -->
<meta property="og:title" content="Reddit Retractable Sidebar">
<meta property="og:type" content="article">
<meta property="og:image" content="https://mca62511.github.io/reddit-retractable-sidebar/share.png">
<meta property="og:description" content="This user script allows you to retract or extend reddit's sidebar allowing for better split screen viewing.">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Reddit Retractable Sidebar">
<meta name="twitter:description" content="This user script allows you to retract or extend reddit's sidebar allowing for better split screen viewing.">
<meta name="twitter:image" content="https://mca62511.github.io/reddit-retractable-sidebar/share.png">
<!-- Normalize.css for cross browser consistency -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body translate="no">
<nav>
<h1>Reddit <span id="page-name">Retractable Sidebar</span></h1>
</nav>
<div class="side">
<div class="side-section-top">
This script can be downloaded from its <a href="https://greasyfork.org/en/scripts/19638-reddit-retractable-sidebar">GreasyFork page</a> or by clicking on the button below.
<br>
</div>
<div class="side-section">
<a href="https://greasyfork.org/scripts/19638-reddit-retractable-sidebar/code/Reddit%20Retractable%20Sidebar.user.js">
<button>Install this script</button>
</a>
</div>
<div class="side-section">
<h4>Related links</h3>
<ul>
<li><a href="https://github.com/mca62511/reddit-retractable-sidebar">This project's GitHub page</a></li>
<li><a href="http://michaelcharl.es" target="_blank">Author's Homepage</a></li>
<li><a href="http://github.org/mca62511" target="_blank">Author's GitHub page</a></li>
<li><a href="http://freecodecamp.com" target="_blank">FreeCodeCamp</a></li>
<li><a href="http://reddit.com/r/freecodecamp" target="_blank">FreeCodeCamp subreddit</a></li>
</ul>
</div>
</div>
<h3>A script to hide or show reddit's sidebar.</h3>
<main>
<p>If you do a lot of split screen redditing, you'll quickly find that the sidebar can be a nuisance. Well, this script makes that sidebar retractable.</p>
<p>It adds a FAB button to the right-hand side of the screen which allows you to hide or show the sidebar. It will add a cookie remembering the sidebar's last position so that you can browse the site without continually hiding it.</p>
<p>This page is set up with a demo of the script. You can hide or show the sidebar by clicking on the FAB button to the right.</p>
<div class="flexbox">
<div class="left-image">
<a href="before.jpg" target="_blank">
<img src="before.jpg" alt="Image of reddit with the sidebar showing.">
<p class="caption">Image of the sidebar showing while multitasking.</p>
</a>
</div>
<div class="right-image">
<a href="after.jpg" target="_blank">
<img src="after.jpg" alt="Image of reddit with the sidebar hidden.">
<p class="caption">Image of the sidebar hiddeng while multitasking.</p>
</a>
</div>
</div>
<h4>Getting started</h4>
<p>First, you must have an extension for your browser such as Tampermonkey (Chrome) or Greasemonkey (Firefox).</p>
<p>After one of those extensions are installed, you can easily add this script by clicking on the button to the right or by going to it's <a href="https://greasyfork.org/en/scripts/19638-reddit-retractable-sidebar">GreasyFork</a> page.</p>
<h4>Keyboard Shortcut</h4>
<p>As of version 0.4 you can toggle the sidebar by pressing the "q" key.</p>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src="script.js"></script>
</body>
</html>