Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2522 from awesomerobot/master 

adapting the layout to fit more viewports
This commit is contained in:
Jeff Atwood 2014-07-09 17:28:32 -07:00
parent d54c28adc1 291459bb91
commit 97979c1a32
10 changed files with 192 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -3,8 +3,6 @@
@import "common/foundation/mixins";
@import "common/foundation/helpers";
.admin-contents table {
width: 100%;
tr {text-align: left;}
@ -172,7 +170,7 @@ td.flaggers td {
}
.site-settings-nav {
width: 200px;
width: 18.018%;
margin-top: 30px;
.nav-stacked {
border-right: none;
@ -184,9 +182,7 @@ td.flaggers td {
}
.site-settings-detail {
width: 850px;
@include medium-width { width: 740px; }
@include small-width { width: 700px; }
width: 76.5765%;
min-height: 800px;
margin-left: 0;
border-left: solid 1px scale-color-diff();
@ -199,16 +195,12 @@ td.flaggers td {
.setting-label {
float: left;
width: 196px;
@include medium-width { width: 176px; }
@include small-width { width: 166px; }
width: 17.6576%;
margin-right: 12px;
}
.setting-value {
float: left;
width: 450px;
@include medium-width { width: 360px; }
@include small-width { width: 330px; }
width: 53%;
.select2-container {
width: 100%;
}
@ -218,7 +210,6 @@ td.flaggers td {
}
.setting-controls {
float: left;
width: 144px;
}
.input-setting-string {
width: 404px;
@ -328,7 +319,7 @@ section.details {
}
.field {
font-weight: bold;
width: 196px;
width: 17.65765%;
float: left;
margin-left: 12px;
}
@ -443,7 +434,7 @@ section.details {
padding-left: 10px;
width: 65%;
.style-name {
width: 600px;
width: 54.0540%;
height: 25px;
font-size: 20px;
}
@ -538,21 +529,13 @@ section.details {
.dashboard-left {
float: left;
width: 500px;
margin-top: 10px;
width: 60%;
}
.dashboard-right {
float: right;
width: 500px;
margin-top: 10px;
margin-right: 15px;
width: 40%;
@include medium-width {
width: 430px;
}
@include small-width {
width: 390px;
}
.dashboard-stats {
width: 100%;
@ -623,9 +606,7 @@ table.api-keys {
.dashboard-stats {
margin-bottom: 30px;
width: 460px;
margin-left: 30px;
margin-right: 40px;
h4 {
font-weight: normal;
margin-bottom: 8px;
@ -706,7 +687,7 @@ table.api-keys {
.problem-messages {
float: left;
width: 395px;
width: 75%;
a {
text-decoration: underline;
}
@ -756,17 +737,9 @@ table.api-keys {
.commits-widget {
border: solid 1px scale-color-diff();
width: 500px;
height: 180px;
margin-bottom: 36px;
@include medium-width {
width: 430px;
}
@include small-width {
width: 390px;
}
ul, li {
margin: 0;
padding: 0;
@ -900,10 +873,8 @@ table.api-keys {
min-height: 500px;
float: left;
width: 760px;
@include medium-width { width: 650px; }
@include small-width { width: 600px; }
margin-left: 20px;
width: 54.0540%;
margin-left: 1.8018%;
p.description {
color: $primary;
@ -971,7 +942,7 @@ table.api-keys {
}
.action, .match_count, .last_match_at, .created_at {
text-align: center;
width: 110px;
width: 9.9099%;
}
}
@ -979,13 +950,12 @@ table.api-keys {
margin-left: 6px;
.combobox {
width: 130px;
top: 10px;
}
}
.screened-emails, .screened-urls {
.ip_address {
width: 110px;
width: 9.9099%;
text-align: center;
}
}
@ -1009,19 +979,19 @@ table.api-keys {
.staff-actions {
width: 100%;
.action {
width: 120px;
width: 10.810%;
}
.staff_user {
width: 100px;
width: 9.009%;
}
.subject {
width: 200px;
width: 18.018%;
}
.created_at {
width: 50px;
width: 4.5045%;
}
.context {
width: 200px;
width: 18.018%;
}
.created_at {
text-align: center;
@ -1164,3 +1134,12 @@ button.ru {
.invisible {
visibility: hidden;
}
@media only screen
and (max-width : 850px) {
.nav-stacked {
.glyph {width: auto; position: relative;}
.fa-chevron-right {display: none;}
> li > a {padding: 13px}
}
}

37
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -75,6 +75,7 @@
color: scale-color($primary, $lightness: 50%);
word-wrap: break-word;
line-height: 1.4;
padding-right: 20px;
}
.topic-statuses:empty {
display: none;
@ -103,28 +104,28 @@
#topic-list.categories {
td.category {
vertical-align: top;
padding-top: 15px;
padding-bottom: 15px;
border-left: 6px solid;
}
td.stats {
.unit {
font-size: 11px;
td.category {
vertical-align: top;
padding-top: 15px;
padding-bottom: 15px;
border-left: 6px solid;
}
}
table.categoryStats {
td {
padding: 2px;
vertical-align: bottom;
line-height: 24px;
&.value { text-align: right; font-size: 20px; }
&.unit { text-align: left; }
td.stats {
.unit {
font-size: 11px;
}
}
table.categoryStats {
td {
padding: 2px;
vertical-align: bottom;
line-height: 24px;
&.value { text-align: right; font-size: 20px; }
&.unit { text-align: left; }
}
}
}
.category-list-item {

19
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -5,26 +5,9 @@
// Media queries
// --------------------------------------------------
@mixin small-height {
@media screen and (max-height: 444px) {
@content;
}
}
@mixin regular-height {
@media screen and (min-height: 445px) {
@content;
}
}
@mixin not-small-width {
@media screen and (min-width: 967px) {
@content;
}
}
@mixin small-width {
@media screen and (max-width: 966px) {
@media screen and (max-width: 850px) {
@content;
}
}

2
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -5,7 +5,7 @@
// Layout dimensions
// --------------------------------------------------
$small-width: 950px !default;
$small-width: 800px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;

23
app/assets/stylesheets/desktop/discourse.scss
View File

@ -4,18 +4,6 @@
html {font-size: 14px/19px;}
body {
min-width: $large-width;
}
.container {
max-width: $large-width;
}
.full-width {
width: $large-width;
}
@include medium-width {
body {
min-width: $medium-width;
@ -26,14 +14,13 @@ body {
}
}
@include small-width {
body {
min-width: $small-width;
min-width: 760px;
}
.container,
.full-width {
width: $small-width;
min-width: 760px;
}
}
@ -492,7 +479,7 @@ body {
}
}
/* bootstrap colums */
/* bootstrap columns */
.row:before,
.row:after {
@ -513,7 +500,7 @@ body {
float: left;
}
.span13 {
width: 664px;
width: 59.8198%;
float: left;
}
.span10 {
@ -525,7 +512,7 @@ body {
float: left;
}
.span6 {
width: 300px;
width: 27.027%;
float: left;
}
.span4 {

84
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -296,3 +296,87 @@ button.dismiss-read {
margin-bottom: 15px;
margin-right: 15px;
}
/* Tablet (portrait) ----------- */
@media only screen
and (max-width : 850px) {
.nav-pills {
> li > a {
font-size: 14px;
padding: 5px 10px ;
}
}
.list-controls {
padding: 0 5px;
.btn {
font-size: 14px
}
.category-dropdown-menu {
min-width: 139px;
}
a.badge-category {
font-size: 14px;
}
}
#topic-list {
.categories td.category {
padding-left: 10px;
}
td:first-of-type {
padding: 0;
}
th:first-of-type {
padding: 12px 5px;
}
th {
.btn .fa {
margin-right: 2px;
}
}
th, td {
padding: 12px 2px;
font-size: 13px;
}
.star {
padding: 12px 5px;
width: auto;
}
.main-link {
font-size: 15px;
padding: 12px 8px 12px 0px;
}
.likes {
width: auto;
}
.category {
min-width: 0;
padding: 0;
}
.topic-excerpt {
padding-right: 20px;
}
th.posters {
text-align: center;
}
.posters {
min-width: 0;
width: 50px;
a:not(.latest) {
display: none;
}
a.latest {
padding: 0 8px;
}
}
}
}

49
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -535,10 +535,7 @@ iframe {
.extra-info-wrapper {
float: left;
width: 76%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 46%;
.topic-statuses {
i { color: $header_primary; }
@ -554,24 +551,14 @@ text-overflow: ellipsis;
}
@include medium-width {
.extra-info-wrapper {
width: 73%;
}
}
@include small-width {
.extra-info-wrapper {
width: 70%;
}
}
.extra-info {
h1 {
margin: 5px 0 0 0;
font-size: 1.6em;
line-height: 1.3em;
width: 820px;
}
@ -743,7 +730,6 @@ blockquote > *:last-child {
.gutter {
float: left;
width: 19%;
margin-top: 15px;
padding-left: 15px;
@ -1068,3 +1054,34 @@ span.highlighted {
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}
/* Tablet (portrait) ----------- */
@media only screen
and (max-width : 1150px) {
.extra-info {
h1 {
width: 720px;
}
}
}
@media only screen
and (max-width : 975px) {
.extra-info {
h1 {
width: 650px;
}
}
}
@media only screen
and (max-width : 870px) {
.extra-info {
h1 {
width: 520px;
}
}
}

15
app/assets/stylesheets/desktop/topic.scss
View File

@ -64,7 +64,7 @@
.private-message-glyph {
color: scale-color($primary, $lightness: 75%);
float: left;
margin: 0 5px 0 0;
margin: 0 5px 0 0;
}
.private_message #topic-title .private-message-glyph { display: inline; }
@ -290,3 +290,16 @@ kbd
margin: 0 .1em;
padding: .1em .6em;
}
@media only screen
and (max-width : 850px) {
.gutter {
display: none;
}
#topic-progress, #topic-progress-expanded {
left: 210px;
}
}

18
app/assets/stylesheets/desktop/user.scss
View File

@ -76,8 +76,8 @@
}
.user-navigation {
width: 240px;
margin-right: 20px;
width: 21.62%;
margin-right: 1.8018%;
float: left;
h3 {
@ -88,17 +88,11 @@
}
.user-main {
width: 850px;
width: 76.5765%;
float: left;
margin-bottom: 50px;
@include medium-width {
width: 735px;
}
@include small-width {
width: 680px;
}
table.group-members {
width: 100%;
@ -231,8 +225,8 @@
float: right;
background-color: rgba(scale-color($primary, $lightness: 20%), .9);
text-align: right;
padding: 0 20px;
max-width: 165px;
padding: 0 10px;
max-width: 20%;
dd {
margin: 0 0 7px 0;

2
app/views/layouts/_head.html.erb
View File

@ -1,5 +1,5 @@
<meta name="viewport" content="width=device-width, initial-scale=0.75" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="author" content="">
<meta name="generator" content="Discourse <%= Discourse::VERSION::STRING %> - https://github.com/discourse/discourse version <%= Discourse.git_version %>">