Skip to content

Mobile friendly #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jmartin2939 wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Mobile friendly #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
78970cb
added new futures and style
Jan 6, 2016
6065593
update readme
jmartin2939 Jan 6, 2016
caf5e84
Update README.md
jmartin2939 Jan 6, 2016
a7bb450
adding missing content. sync issue from Windows
Jan 6, 2016
2b03e87
removing useless log
jmartin2939 Jan 6, 2016
9184326
Delete error_log
jmartin2939 Jan 6, 2016
0dc7aec
mobile formatting
Jan 7, 2016
f52d879
update readme
jmartin2939 Jan 7, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,12 @@ commie is a pastebin script with line commenting support.

To install, clone this somewhere under your webroot (PHP required) and make the data directory writable.

This was hacked together in a couple of hours. So treat it as beta for now. Pull Requests welcome.
This was hacked together in a couple of hours. So treat it as beta for now. Pull Requests welcome.

#updates January 7th, 2016

-Small format Edits to allow for mobile

-Mobile friendly CSS changes

-Add date to footer
Empty file added data/Make_This_Dir_Writable
View file
Open in desktop
Empty file.
1 change: 0 additions & 1 deletion data/make_this_dir_writable
View file
Open in desktop

This file was deleted.

29 changes: 16 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,46 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Copy link
Owner

@splitbrain splitbrain Jan 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the only real mobile specific change, correct?

Copy link
Author

@jmartin2939 jmartin2939 Jan 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This helps adjust most everything. The changes to CSS, insure everything else fits in the box. like the comment on pre

This will adjust the scale of the text, but pre will still extend past the intend frame:
example

<meta charset="UTF-8">
<link href="lib/style.css" rel="stylesheet"/>
<link href="lib/favicon.ico" rel="shortcut icon"/>
<title>commie ☭</title>
</head>
<body>

<pre id="paste">
_
___ ___ _____ _____|_|___ <span class="sickle">☭</span>
| _| . | | | | -_|
|___|___|_|_|_|_|_|_|_|___|

commie is a pastebin script with line commenting support.
available at <a href="https://github.com/splitbrain/commie">github</a>. made by <a href="http://www.splitbrain.org">splitbrain</a>.

<div id="content">

<pre>
_____ _
| |___ _____ _____|_|___ <span class="sickle">☭</span>
| --| . | | | | -_|
|_____|___|_|_|_|_|_|_|_|___|
</pre>

<div id="paste">
Copy link
Owner

@splitbrain splitbrain Jan 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why switching from the semantic pre (which signal preformatted text) to the unspecific div here?

Copy link
Author

@jmartin2939 jmartin2939 Jan 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pre has issues adjusting to mobile. But the ASCII art doesn't really work outside of pre. so that was left in pre, and it's not big enough to be an issue on most phones and mobile devices.

The paste is now pulled into id="paste" using similar coding defaults to pre, but adjusts to screen size.

Everything is wrapped in id="content" also to adjust for mobile. it controls the size of content as a whole.

Copy link
Owner

@splitbrain splitbrain Jan 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see what you mean. The problem you're having with pre on mobile is that it won't do automatic line breaks. I guess the proper fix would be to use white-space: pre-wrap; then. Your change only changes the font to monospace, but would not keep multiple subsequent whitespaces.

Copy link
Author

@jmartin2939 jmartin2939 Jan 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll take a look at this and see if I can make it work

commie is a pastebin script with line commenting support.<br>
available at <a href="https://github.com/splitbrain/commie">github</a>. made by <a href="http://www.splitbrain.org">splitbrain</a>.
</div>

</pre>
<div id="help">☛ Click the line numbers to comment</div>

<div id="new">
<label for="newpaste">Create a new paste:</label>
<textarea id="newpaste"></textarea><br/>
<button>Save new Paste</button>
Remember: everything is public!
<span class="warn">Remember: everything is public!</span>
</div>

<div id="footer">
powered by <a href="">commie<sup>☭</sup></a>
powered by <a href="http://commie.io">commie<sup>☭</sup></a> <br> 2015-<script>document.write(new Date().getFullYear())</script>
Copy link
Owner

@splitbrain splitbrain Jan 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

document.write() is bad style. This should be properly added through DOM modification.

</div>

</div>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="lib/js.cookie.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert&amp;autoload=false"></script>
<script src="lib/script.js"></script>

</body>
</html>
</html>
Binary file modified lib/favicon.ico
View file
Open in desktop
Binary file not shown.
20 changes: 17 additions & 3 deletions lib/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,24 @@ li div.newcomment button {
float: right;
}

#content {
width: 97%;
margin-left: auto;
margin-right: auto;
}

#paste {
width: 100%;
font-size: 12px;
font-family: Consolas,monospace;
}

#help {
display: none;
}

#new {
margin-top: 4em;
margin-left: 2.5em;
margin-bottom: 8em;
}

Expand All @@ -69,11 +79,15 @@ li div.newcomment button {
}

#new textarea {
max-width: 79em;
max-width: 1000px;
Copy link
Owner

@splitbrain splitbrain Jan 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change? This switches from a 79 char width (which is a pretty common width for text) to an arbitrary pixel width depending on the font.

Copy link
Author

@jmartin2939 jmartin2939 Jan 12, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have a good reason for this one. I'm not sure why changed it, I'll change it back, it seems to work on mobile either (it should anyway.)

width: 100%;
height: 7em;
}

#footer {
font-size: 95%;
}
}

.warn {
font-size: 12px;
}