hiro/Vulcan
1
0
Fork 0
mirror of https://github.com/vale981/Vulcan synced 2025-03-06 10:01:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed media query for mobile version

Browse source
This commit is contained in:
Sacha Greif 2012-09-18 08:07:56 +09:00
parent eb102b45c5
commit 5afa31ca9e
6 changed files with 129 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/app.html
View file

@ -1,5 +1,6 @@
<head> <head>
<title>Loading...</title> <title>Loading...</title>
<meta name="viewport" content="initial-scale=1.0">
</head> </head>
<body> <body>

129
client/css/screen.css
View file

@ -1058,16 +1058,34 @@ input[type="submit"], button, .button, .auth-buttons #login-buttons #login-butto
.mobile { .mobile {
display: none !important; } display: none !important; }
@media screen and (max-width: 520px) { @media screen and (max-width: 400px) {
/* line 6, ../sass/partials/_mobile.scss */ /* line 5, ../sass/partials/_mobile.scss */
.header-button, .header .auth-buttons .login-link-and-dropdown-list .login-link-text, .header .mobile-button {
position: relative;
display: block;
margin-top: 10px;
background: #f36c3d;
color: white;
height: 30px;
width: 40px; }
/* line 13, ../sass/partials/_mobile.scss */
.header-button i, .header .auth-buttons .login-link-and-dropdown-list .login-link-text i, .header .mobile-button i {
position: absolute;
width: 100%;
text-align: center;
line-height: 30px;
height: 30px;
font-size: 18px; }
/* line 22, ../sass/partials/_mobile.scss */
.mobile { .mobile {
display: block !important; } display: block !important; }
/* line 9, ../sass/partials/_mobile.scss */ /* line 25, ../sass/partials/_mobile.scss */
.desktop { .desktop {
display: none !important; } display: none !important; }
/* line 12, ../sass/partials/_mobile.scss */ /* line 28, ../sass/partials/_mobile.scss */
.grid, .grid-small { .grid, .grid-small {
width: auto; width: auto;
margin-left: 0; margin-left: 0;
@ -1075,7 +1093,12 @@ input[type="submit"], button, .button, .auth-buttons #login-buttons #login-butto
padding: 0 10px; padding: 0 10px;
min-width: 200px; } min-width: 200px; }
/* line 19, ../sass/partials/_mobile.scss */ /* line 35, ../sass/partials/_mobile.scss */
.posts {
margin: 0 10px;
padding: 0; }
/* line 39, ../sass/partials/_mobile.scss */
.header { .header {
height: 50px; height: 50px;
-webkit-border-radius: 0px; -webkit-border-radius: 0px;
@ -1083,87 +1106,91 @@ input[type="submit"], button, .button, .auth-buttons #login-buttons #login-butto
-ms-border-radius: 0px; -ms-border-radius: 0px;
-o-border-radius: 0px; -o-border-radius: 0px;
border-radius: 0px; } border-radius: 0px; }
/* line 22, ../sass/partials/_mobile.scss */ /* line 42, ../sass/partials/_mobile.scss */
.header .logo { .header .logo {
top: 12px; } top: 12px; }
/* line 25, ../sass/partials/_mobile.scss */ /* line 45, ../sass/partials/_mobile.scss */
.header .mobile-button { .header .auth-buttons {
position: relative; margin: 0; }
display: block;
margin-top: 10px;
background: #f36c3d;
color: white;
height: 30px;
width: 40px; }
/* line 33, ../sass/partials/_mobile.scss */
.header .mobile-button i {
position: absolute;
width: 100%;
text-align: center;
line-height: 30px;
height: 30px;
font-size: 18px; }
/* line 41, ../sass/partials/_mobile.scss */
.header .mobile-button span {
display: none; }
/* line 44, ../sass/partials/_mobile.scss */
.header .mobile-button.menu {
float: left; }
/* line 47, ../sass/partials/_mobile.scss */ /* line 47, ../sass/partials/_mobile.scss */
.header .mobile-button.submit { .header .auth-buttons .login-link-and-dropdown-list {
float: right; } right: 0px !important;
/* line 50, ../sass/partials/_mobile.scss */ position: static !important; }
.header .mobile-button:hover { /* line 50, ../sass/partials/_mobile.scss */
background: white; } .header .auth-buttons .login-link-and-dropdown-list .login-link-text {
/* line 52, ../sass/partials/_mobile.scss */ height: 30px !important;
.header .mobile-button:hover i { margin: 10px 0 0 0 !important; }
color: #f36c3d; } /* line 54, ../sass/partials/_mobile.scss */
.header .auth-buttons .login-link-and-dropdown-list .login-link-text:after {
content: "\75" !important;
font-family: 'icomoon' !important;
position: absolute;
width: 100%;
text-align: center;
line-height: 30px !important;
height: 30px !important;
font-size: 18px !important; }
/* line 70, ../sass/partials/_mobile.scss */
.header .mobile-button span {
display: none; }
/* line 73, ../sass/partials/_mobile.scss */
.header .mobile-button.menu {
float: left; }
/* line 76, ../sass/partials/_mobile.scss */
.header .mobile-button.submit {
float: right; }
/* line 79, ../sass/partials/_mobile.scss */
.header .mobile-button:hover {
background: white; }
/* line 81, ../sass/partials/_mobile.scss */
.header .mobile-button:hover i {
color: #f36c3d; }
/* line 59, ../sass/partials/_mobile.scss */ /* line 88, ../sass/partials/_mobile.scss */
.post .post-content { .post .post-content {
margin-right: 50px; margin-right: 50px;
margin-right: 0px; } margin-right: 0px; }
/* line 63, ../sass/partials/_mobile.scss */ /* line 92, ../sass/partials/_mobile.scss */
.post .post-content .upvote-link { .post .post-content .upvote-link {
width: 30px; } width: 30px; }
/* line 66, ../sass/partials/_mobile.scss */ /* line 95, ../sass/partials/_mobile.scss */
.post .post-content .post-info { .post .post-content .post-info {
margin-left: 30px; margin-left: 30px;
padding: 6px 4px 6px 8px; } padding: 6px 4px 6px 8px; }
/* line 71, ../sass/partials/_mobile.scss */ /* line 100, ../sass/partials/_mobile.scss */
.post .post-content .post-heading .post-title { .post .post-content .post-heading .post-title {
line-height: 1.2; line-height: 1.2;
display: block; display: block;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 18px; } font-size: 18px; }
/* line 77, ../sass/partials/_mobile.scss */ /* line 106, ../sass/partials/_mobile.scss */
.post .post-content .post-heading .post-domain { .post .post-content .post-heading .post-domain {
line-height: 1; line-height: 1;
display: block; display: block;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 13px; } font-size: 13px; }
/* line 84, ../sass/partials/_mobile.scss */ /* line 113, ../sass/partials/_mobile.scss */
.post .post-content .post-meta { .post .post-content .post-meta {
font-size: 11px; } font-size: 11px; }
/* line 89, ../sass/partials/_mobile.scss */ /* line 118, ../sass/partials/_mobile.scss */
.post .post-content .post-meta .unit { .post .post-content .post-meta .unit {
font-size: 0; } font-size: 0; }
/* line 91, ../sass/partials/_mobile.scss */ /* line 120, ../sass/partials/_mobile.scss */
.post .post-content .post-meta .unit:after { .post .post-content .post-meta .unit:after {
font-size: 12px; font-size: 12px;
content: "pts "; } content: "pts "; }
/* line 98, ../sass/partials/_mobile.scss */ /* line 127, ../sass/partials/_mobile.scss */
.post .post-actions { .post .post-actions {
display: none; } display: none; }
/* line 100, ../sass/partials/_mobile.scss */ /* line 129, ../sass/partials/_mobile.scss */
.post .post-actions li { .post .post-actions li {
float: none; } float: none; }
/* line 102, ../sass/partials/_mobile.scss */ /* line 131, ../sass/partials/_mobile.scss */
.post .post-actions li a { .post .post-actions li a {
height: 40px; height: 40px;
width: 40px; width: 40px;
font-size: 30px; } font-size: 30px; }
/* line 106, ../sass/partials/_mobile.scss */ /* line 135, ../sass/partials/_mobile.scss */
.post .post-actions li a i { .post .post-actions li a i {
display: block; display: block;
position: absolute; position: absolute;
@ -1173,9 +1200,9 @@ input[type="submit"], button, .button, .auth-buttons #login-buttons #login-butto
height: 100%; height: 100%;
line-height: 40px; line-height: 40px;
text-align: center; } text-align: center; }
/* line 116, ../sass/partials/_mobile.scss */ /* line 145, ../sass/partials/_mobile.scss */
.post .post-actions li a .count { .post .post-actions li a .count {
top: 9px; } top: 9px; }
/* line 119, ../sass/partials/_mobile.scss */ /* line 148, ../sass/partials/_mobile.scss */
.post .post-actions li a .action { .post .post-actions li a .action {
display: none; } } display: none; } }

2
client/sass/partials/_grid.scss
View file

@ -11,7 +11,7 @@
margin:0 auto; margin:0 auto;
} }
$break-small: 520px;
$break-large: 1200px; $break-large: 1200px;

61
client/sass/partials/_mobile.scss
View file

@ -1,8 +1,24 @@
.mobile{ .mobile{
display:none !important; display:none !important;
} }
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
.header-button{
position:relative;
display:block;
margin-top:10px;
background:$red;
color:white;
height:30px;
width:40px;
i{
position:absolute;
width:100%;
text-align:center;
line-height:30px;
height:30px;
font-size:18px;
}
}
.mobile{ .mobile{
display:block !important; display:block !important;
} }
@ -16,28 +32,41 @@
padding:0 10px; padding:0 10px;
min-width:200px; min-width:200px;
} }
.posts{
margin:0 10px;
padding:0;
}
.header{ .header{
height:50px; height:50px;
@include border-radius(0px); @include border-radius(0px);
.logo{ .logo{
top:12px; top:12px;
} }
.mobile-button{ .auth-buttons{
position:relative; margin:0;
display:block; .login-link-and-dropdown-list{
margin-top:10px; right:0px !important;
background:$red; position:static !important;
color:white; .login-link-text{
height:30px; @extend .header-button;
width:40px; height:30px !important;
i{ margin:10px 0 0 0 !important;
position:absolute; &:after{
width:100%; content: "\75" !important;
text-align:center; font-family: 'icomoon' !important;
line-height:30px; position:absolute;
height:30px; width:100%;
font-size:18px; text-align:center;
line-height:30px !important;
height:30px !important;
font-size:18px !important;
}
}
} }
}
.mobile-button{
@extend .header-button;
span{ span{
display:none; display:none;
} }

3
client/sass/partials/_variables.scss
View file

@ -1,3 +1,4 @@
$grid-unit:70px; $grid-unit:70px;
$grid-margin:10px; $grid-margin:10px;
$grid-padding:15px; $grid-padding:15px;
$break-small:400px;

3
client/templates/nav.html
View file

@ -12,7 +12,8 @@
</div> </div>
<header class="header grid"> <header class="header grid">
<h1 class="logo"><a href="/">The Grid</a></h1> <h1 class="logo"><a href="/">The Grid</a></h1>
<a id="mobile-menu" href="#menu" class="mobile mobile-button menu"><i class="icon-menu"></i><span>Menu</span></a><a href="/submit" class="mobile mobile-button submit"><i class="icon-plus"></i><span>Submit</span></a> <a id="mobile-menu" href="#menu" class="mobile mobile-button menu"><i class="icon-menu"></i><span>Menu</span></a>
<!-- <a href="/submit" class="mobile mobile-button submit"><i class="icon-plus"></i><span>Submit</span></a> -->
<ul class="nav site-nav desktop"> <ul class="nav site-nav desktop">
<li><a href="top">Top</a></li> <li><a href="top">Top</a></li>
<li><a href="new">New</a></li> <li><a href="new">New</a></li>