Skip to content
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

Jump to bottom

mobilefy subway #192

Merged
merged 1 commit into from
Dec 23, 2012
Merged

mobilefy subway #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -1,3 +1,5 @@
node_modules/ node_modules/
builtAssets/ builtAssets/
run.sh run.sh
*.swp
.sass-cache
157 changes: 157 additions & 0 deletions assets/css/subway-mobile.css
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,157 @@
@media screen and (max-width: 720px) {
.container-fluid {
/* Overview. */
/* Convert channel sidebar to browser-like tabs. */
/* Toggleable sliding sidebar replacement for user window. */ }
.container-fluid #overview {
left: 0;
margin-top: 0;
bottom: 0;
position: fixed;
padding: 0;
width: 100%;
z-index: 1; }
.container-fluid #overview ul {
margin: 0; }
.container-fluid #overview ul li {
margin: 0;
padding: 10px 0;
width: 50%; }
.container-fluid #logo, .container-fluid .sidebar h2 {
display: block;
position: fixed;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 1; }
.container-fluid .sidebar h2 {
margin-top: 120px; }
.container-fluid .sidebar {
margin-top: 2%; }
.container-fluid form.form-inline {
padding: 0 10px; }
.container-fluid #home {
margin: 10px 17px 0; }
.container-fluid p#settings-soon {
text-align: center; }
.container-fluid .sidebar {
width: 0; }
.container-fluid #user-window {
-webkit-box-shadow: 0 0 4px 2px #333333;
-moz-box-shadow: 0 0 4px 2px #333333;
box-shadow: 0 0 4px 2px #333333;
display: none;
position: fixed;
top: 0;
right: 0;
width: 75%;
z-index: 3; }
.container-fluid .content {
margin-left: 0;
margin-right: 0;
width: 100%; }
.container-fluid .content.user-window-toggled {
right: 75%; }
.container-fluid #chat-window {
width: 100%; }
.container-fluid #chat-window div {
z-index: 2; }
.container-fluid #channels {
display: inline-block;
height: 34px;
left: 34px;
position: fixed;
overflow: visible;
top: 0;
white-space: nowrap;
z-index: 2; }
.container-fluid #channels div.channel {
border: 1px solid rgba(10, 10, 10, 0.5);
border-radius: 25px 0 0;
display: inline-block;
height: 34px;
left: 0;
padding: 7px 0;
position: relative;
text-align: left;
width: 120px; }
.container-fluid #channels div.channel span.channel-name {
display: inline-block;
margin-left: 8px;
overflow: none;
text-overflow: ellipsis;
width: 45%; }
.container-fluid #channels div.channel span.unread, .container-fluid #channels div.channel span.unread-mentions {
float: none;
vertical-align: 6px; }
.container-fluid #channels div.channel div.close-button {
position: absolute;
right: 0;
top: 7px;
visibility: visible; }
.container-fluid #channels .slide {
background: rgba(67, 73, 80, 0.75);
color: white;
font-size: 24px;
display: none;
height: 34px;
padding-top: 4px;
position: fixed;
text-align: center;
width: 34px;
z-index: 2; }
.container-fluid #channels .slide:hover {
background: rgba(67, 73, 80, 0.95);
cursor: pointer; }
.container-fluid #channels #slide-prev {
left: 0; }
.container-fluid #channels #slide-prev:after {
content: "<"; }
.container-fluid #channels #slide-next {
right: 0; }
.container-fluid #channels #slide-next:after {
content: ">"; }
.container-fluid #chat-bar {
position: fixed;
left: 0;
top: 34px; }
.container-fluid #chat-bar.user-window-toggled {
left: -75%; }
.container-fluid #chat-contents {
margin-top: 34px; }
.container-fluid #user-window-toggle {
background: rgba(67, 73, 80, 0.1);
border: 1px solid rgba(67, 73, 80, 0.3);
border-radius: 50px 0 0;
bottom: 56px;
display: block;
height: 55px;
position: fixed;
right: 0;
width: 55px;
z-index: 3; }
.container-fluid #user-window-toggle img {
position: absolute;
top: 18px;
left: 18px;
height: 30px;
width: 30px; }
.container-fluid #user-window-toggle:hover {
background: rgba(67, 73, 80, 0.5);
cursor: pointer; }
.container-fluid #user-window-toggle.user-window-toggled {
right: 75%; }
.container-fluid #input-container {
text-align: center; }
.container-fluid #input-container .input {
padding-top: 12px; }
.container-fluid input#chat-input {
float: none;
width: 65%; }
.container-fluid #chat-button {
width: 20%;
padding-left: 0;
padding-right: 0; }

.channel {
background: #e8e8e8; } }
202 changes: 202 additions & 0 deletions assets/css/subway-mobile.scss
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
@@ -0,0 +1,202 @@
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
}

@media screen and (max-width: 720px) {
.container-fluid {
/* Overview. */
#overview {
left: 0;
margin-top: 0;
bottom: 0;
position: fixed;
padding: 0;
width: 100%;
z-index: 1;
ul {
margin: 0;
li {
margin: 0;
padding: 10px 0;
width: 50%;
}
}
}
#logo, .sidebar h2 {
display: block;
position: fixed;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 1;
}
.sidebar h2 {
margin-top: 120px;
}
.sidebar {
margin-top: 2%;
}
form.form-inline {
padding: 0 10px;
}
#home {
margin: 10px 17px 0;
}
p#settings-soon {
text-align: center;
}

/* Convert channel sidebar to browser-like tabs. */
.sidebar {
width: 0;
}
#user-window {
@include box-shadow(0 0 4px 2px #333);
display: none;
position: fixed;
top: 0;
right: 0;
width: 75%;
z-index: 3;
}
.content {
margin-left: 0;
margin-right: 0;
width: 100%;
&.user-window-toggled {
right: 75%;
}
}
#chat-window {
width: 100%;
div {
z-index: 2;
}
}
#channels {
display: inline-block;
height: 34px;
left: 34px;
position: fixed;
overflow: visible;
top: 0;
white-space: nowrap;
z-index: 2;
div.channel {
border: 1px solid rgba(10, 10, 10, .5);
border-radius: 25px 0 0;
display: inline-block;
height: 34px;
left: 0;
padding: 7px 0;
position: relative;
text-align: left;
width: 120px;
span.channel-name {
display: inline-block;
margin-left: 8px;
overflow: none;
text-overflow: ellipsis;
width: 45%;
}
span.unread, span.unread-mentions {
float: none;
vertical-align: 6px;
}
div.close-button {
position: absolute;
right: 0;
top: 7px;
visibility: visible;
}
}
.slide {
background: rgba(67, 73, 80, .75);
color: white;
font-size: 24px;
display: none;
height: 34px;
padding-top: 4px;
position: fixed;
text-align: center;
width: 34px;
z-index: 2;
&:hover {
background: rgba(67, 73, 80, .95);
cursor: pointer;
}
}
#slide-prev {
left: 0;
&:after {
content: "<";
}
}
#slide-next {
right: 0;
&:after {
content: ">";
}
}
}
#chat-bar {
position: fixed;
left: 0;
top: 34px;
&.user-window-toggled {
left: -75%;
}
}
#chat-contents {
margin-top: 34px;
}

/* Toggleable sliding sidebar replacement for user window. */
#user-window-toggle {
background: rgba(67, 73, 80, .1);
border: 1px solid rgba(67, 73, 80, .3);
border-radius: 50px 0 0;
bottom: 56px;
display: block;
height: 55px;
position: fixed;
right: 0;
width: 55px;
z-index: 3;
img {
position: absolute;
top: 18px;
left: 18px;
height: 30px;
width: 30px;
}
&:hover {
background: rgba(67, 73, 80, .5);
cursor: pointer;
}
&.user-window-toggled {
right: 75%;
}
}
#input-container {
text-align: center;
.input {
padding-top: 12px;
}
}
input#chat-input {
float: none;
width: 65%;
}
#chat-button {
width: 20%;
padding-left: 0;
padding-right: 0;
}
}
.channel {
background: darken(#F5F5F5, 5%);
}
}
11 changes: 11 additions & 0 deletions assets/css/subway.css
View file
Open in desktop
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -229,6 +229,12 @@ html { overflow: hidden; }
margin-right: 0.3em; margin-right: 0.3em;
} }


.slide {
position: fixed;
width: 0;
height: 0;
}

#logo { #logo {
text-align: center; text-align: center;
} }
Expand Down Expand Up @@ -379,6 +385,11 @@ html { overflow: hidden; }
white-space: pre; white-space: pre;
} }


div.embed-toggle {
display: inline;
margin-left: 5px;
}

.chat-message .embed img{ .chat-message .embed img{
display: block; display: block;
max-width: 100%; max-width: 100%;
Expand Down
Loading